/*
  <body data-page="tutorial">
    <header>…</header>
    <main>
      <h1>…</h1>
      <section>
        <h2><span>Step 1</span> · Title</h2>
        <p>…</p>
        <form data-query="…">
          <textarea name="query"></textarea>
          <footer><button type="submit"><span>▶ Run</span></button><a>Open in the editor</a><output></output></footer>
          <div data-result><table>…</table></div>
        </form>
        <aside>Try it: …</aside>
      </section>
    </main>
  </body>
*/

body[data-page=tutorial] {
  > main {
    display: flex;
    flex-direction: column;
    font-size: var(--fs4);
    gap: var(--s4);
    margin-inline: auto;
    max-width: 880px;
    padding: var(--s12) var(--s8) var(--s20);

    h1 { font-size: var(--fs8); font-weight: var(--fw-bold-3); }

    section {
      border-block-start: 1px solid var(--cs-l7);
      display: flex;
      flex-direction: column;
      gap: var(--s4);
      margin-block-start: var(--s8);
      padding-block-start: var(--s10);
    }

    h2 { font-size: var(--fs7); font-weight: var(--fw-bold-3); }
    h2 span { --fg: var(--cp); }
    h3 { font-size: var(--fs5); font-weight: var(--fw-bold-3); margin-block-start: var(--s2); }

    /* prose lists want their bullets back from the base reset */
    ul {
      gap: var(--s2);
      padding-inline-start: var(--s10);
      li { display: list-item; list-style: disc; }
    }

    code { background: var(--cs-l8); border-radius: var(--br-0); font-family: var(--ff-mono); font-size: .85em; padding-inline: var(--s1); }

    pre {
      background: var(--cs-l8);
      border-radius: var(--br-2);
      font-family: var(--ff-mono);
      font-size: var(--fs3);
      overflow-x: auto;
      padding: var(--s4) var(--s5);
    }

    aside {
      background: var(--cp-l8);
      border-inline-start: 3px solid var(--cp);
      border-radius: 0 var(--br-2) var(--br-2) 0;
      padding: var(--s3) var(--s5);
    }

    form {
      border: 1px solid var(--cs-l7);
      border-radius: var(--br-2);
      box-shadow: var(--bs-low);
      overflow: hidden;

      textarea {
        background: var(--cs-l8);
        border: none;
        border-block-end: 1px solid var(--cs-l7);
        display: block;
        font-family: var(--ff-mono);
        font-size: var(--fs3);
        line-height: 1.5;
        padding: var(--s4) var(--s5);
        resize: vertical;
        width: 100%;
      }

      footer { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s6); padding: var(--s3) var(--s5); }
      output { color: var(--txt-dimmer); font-size: var(--fs2); margin-inline-start: auto; }

      [data-result] {
        max-height: 360px;
        overflow: auto;
        &:empty { display: none; }
      }

      table { border-collapse: collapse; font-size: var(--fs3); width: 100%; }

      th, td {
        border-block-start: 1px solid var(--cs-l7);
        padding: var(--s1x) var(--s5);
        text-align: start;
        white-space: nowrap;
      }

      th { background: var(--cs-l8); position: sticky; top: 0; }
      [role=alert] { color: var(--color--error); padding: var(--s3) var(--s5); white-space: pre-wrap; }
    }
  }
}