/*
  <body data-page="editor">
    <header>…</header>
    <nav>
      <h2>Group</h2>
      <button type="button" aria-current="true">Example</button>
      <p data-stats>…</p>
    </nav>
    <main>
      <p data-rebuilding role="status" hidden>…</p>
      <section aria-live="polite"><h3>Title</h3><p>Explanation</p></section>
      <div id="yasgui"></div>
    </main>
  </body>
*/

body[data-page=editor] {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;

  > header { grid-column: 1 / -1; }

  > nav {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    overflow: auto;
    padding: var(--s6) var(--s4);

    h2 {
      --fg: var(--color-label);
      font-size: var(--fs1);
      letter-spacing: .05em;
      margin-block: var(--s6) var(--s1);
      padding-inline: var(--s3);
      text-transform: uppercase;
      &:first-child { margin-block-start: 0; }
    }

    button {
      --bg: transparent;
      --bg-h: var(--cp-l8);
      --bs: none;
      --br: var(--br-1);
      --fs: var(--fs3);
      justify-content: flex-start;
      text-align: start;
      white-space: normal;
      &[aria-current=true] { --bg: var(--cp-l7); --bg-h: var(--cp-l7); --fg: var(--cp-d2); }
    }

    [data-stats] { color: var(--txt-dimmer); font-size: var(--fs1); margin-block-start: auto; padding: var(--s6) var(--s3) 0; }
  }

  > main {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding-block-start: var(--s6);

    > [data-rebuilding] { margin: 0 var(--s6) var(--s4) var(--s4); }

    > section {
      background: var(--cs-l8);
      border-radius: var(--br-2);
      display: flex;
      flex-direction: column;
      gap: var(--s2);
      margin-inline: var(--s4) var(--s6);
      padding: var(--s4) var(--s6);

      h3 { font-size: var(--fs5); font-weight: var(--fw-bold-3); }
      p { max-width: 90ch; }
    }

    .CodeMirror { font-family: var(--ff-mono); font-size: var(--fs3); }

    /* YASGUI's endpoint field (with its list of public endpoints) and request settings: this page
       only ever queries its own endpoint */
    .controlbar { display: none; }

    /* a sabio: term the data doesn't have (term-check.js); the tooltip names the closest one */
    .unknown-term { text-decoration: underline wavy var(--color--error); text-decoration-skip-ink: none; }
  }
}