/* ── The one-pagers ───────────────────────────────────────────────────
   Same two faces and reading column as the playbooks, because these belong
   with them: one page a teacher, a principal or a parent can read in three
   minutes. Tables and the game stills break wider. */

  /* Same two faces and reading column as the playbooks, because this belongs
     with them: one page a teacher or a principal can read in three minutes.
     The digit strip and the diagnosis table break wider. */
  :root {
    --paper: #faf7f1; --card: #ffffff; --ink: #22201c; --soft: #6a645a; --rule: #e2dacb;
    --go: #2f7d57; --go-bg: #e6f1ea;
    --stop: #b4472c; --stop-bg: #f9e8e1;
    --mark: #b07d12; --mark-bg: #faf0d9;
    --deep: #4a3f8f; --deep-bg: #eceaf7;
    --night: #0d1420; --worm: #2f8f5c;
    --serif: 'Literata', Georgia, serif;
    --sans: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #16181d; --card: #1e2128; --ink: #ece7dd; --soft: #9d978a; --rule: #343841;
      --go: #6cc295; --go-bg: #1b3328; --stop: #e88a6b; --stop-bg: #33201a;
      --mark: #e0b44e; --mark-bg: #322814; --deep: #a79ae8; --deep-bg: #23213a;
      --night: #06090f; --worm: #52f08a;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #16181d; --card: #1e2128; --ink: #ece7dd; --soft: #9d978a; --rule: #343841;
    --go: #6cc295; --go-bg: #1b3328; --stop: #e88a6b; --stop-bg: #33201a;
    --mark: #e0b44e; --mark-bg: #322814; --deep: #a79ae8; --deep-bg: #23213a;
    --night: #06090f; --worm: #52f08a;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body { background: var(--paper); color: var(--ink); font-family: var(--serif); margin: 0; }
  a { color: var(--deep); }

  .site-bar {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .site-bar-in {
    max-width: 820px; margin: 0 auto; padding-block: 11px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  }
  .site-bar a { font-family: var(--sans); font-size: 13px; font-weight: 600; text-decoration: none;
                display: inline-flex; align-items: center; gap: 7px; }
  .site-bar a:hover { text-decoration: underline; }
  .site-bar .set { font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--soft); }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
                 z-index: 21; background: var(--paper); }

  .wrap {
    max-width: 820px; margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 34px 72px;
  }
  p, li { font-size: 16px; line-height: 1.68; }
  p { margin: 0 0 1em; max-width: 62ch; }
  ul, ol { max-width: 62ch; padding-left: 1.2em; }
  li { margin-bottom: .5em; }
  strong { font-weight: 600; }

  .eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
             color: var(--soft); margin: 0 0 10px; }
  h1 { font-weight: 700; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.08; margin: 0 0 16px; text-wrap: balance; }
  .standfirst { font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 56ch; margin: 0; }
  h2 { font-weight: 700; font-size: clamp(1.3rem, 3.2vw, 1.65rem); margin: 48px 0 12px; text-wrap: balance; }
  h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; margin: 26px 0 9px; }
  .num { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; color: var(--deep);
         display: block; margin-bottom: 6px; }
  hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 42px 0 0; }

  .wide { margin: 18px 0; overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 14px; min-width: 520px; }
  th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
       color: var(--soft); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); }
  td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.5; }
  td:last-child, th:last-child { padding-right: 0; }
  .dig { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--deep); width: 1.6em; }
  .phase { font-family: var(--sans); font-weight: 600; color: var(--stop); }

  /* the game shown as it looks, on its own dark ground */
  .screen {
    background: var(--night); border-radius: 18px; padding: 22px; margin: 22px 0;
    display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }
  .screen figure { margin: 0; text-align: center; }
  .screen svg { width: 100%; max-width: 150px; height: auto; }
  .screen figcaption { font-family: var(--sans); font-size: 11.5px; color: #8698ad; margin-top: 8px; line-height: 1.45; }

  .alldigits { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
  .alldigits span {
    font-family: var(--serif); font-weight: 700; font-size: 20px; width: 46px; height: 46px;
    display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 11px;
    background: var(--card);
  }

  .flag { border-left: 3px solid var(--mark); background: var(--mark-bg); border-radius: 0 10px 10px 0;
          padding: 16px 20px; margin: 22px 0; }
  .flag p { margin: 0 0 .7em; font-size: 15px; } .flag p:last-child { margin-bottom: 0; }
  .never { border-left: 3px solid var(--stop); background: var(--stop-bg); border-radius: 0 10px 10px 0;
           padding: 16px 20px; margin: 22px 0; }
  .never p { margin: 0 0 .7em; font-size: 15px; } .never p:last-child { margin-bottom: 0; }

  .quote {
    font-family: var(--sans); font-size: 15px; background: var(--card); border: 1px solid var(--rule);
    border-radius: 13px; padding: 16px 18px; margin: 18px 0; line-height: 1.6;
  }
  .quote b { color: var(--stop); }

  .open {
    display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 15px;
    background: var(--deep); color: var(--card); text-decoration: none;
    padding: 13px 22px; border-radius: 12px; margin-top: 10px;
  }

  @media print {
    body { background: #fff; color: #000; }
    .site-bar, .open { display: none !important; }
    .screen { background: #fff; border: 1px solid #bbb; }
    .screen figcaption { color: #444; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }