/* ── Topbar ─────────────────────────────────────────────────────────── */
  .topbar { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    gap: 12px; flex-wrap: wrap; }
  .logo { font-size: 16px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--gold); text-transform: uppercase; white-space: nowrap;
    flex-shrink: 0; }
  .stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  /* Mobile: hide the in-session topbar filters; students keep the choices they
     made at login. Dashboard + History stay visible via their icon buttons. */
  @media (max-width: 700px) {
    .topbar { padding: 10px 14px; gap: 8px; }
    .logo { font-size: 14px; letter-spacing: 0.08em; }
    /* Keep the Math/R&W subject toggle visible on phone so students can
       switch subjects mid-session; hide the busier Mode + Bias + Focus
       controls — those stay accessible from the login screen on small viewports. */
    .topbar-filters { flex-wrap: wrap; gap: 8px; }
    .topbar-filters #tb-mode-toggle,
    .topbar-filters #tb-diff-toggle,
    .topbar-filters #tb-focus { display: none; }
    .stats { gap: 10px; }
    .stat { font-size: 13px; }
  }
  .stat { display: flex; align-items: center; gap: 6px; font-size: 14px;
    font-weight: 500; color: var(--muted); }
  .stat .val { color: var(--text); font-weight: 600; }
  .btn-ghost { background: transparent; border: none; color: var(--muted);
    font-family: inherit; font-size: 13px; padding: 8px 12px; cursor: pointer; border-radius: var(--radius); }
  .btn-ghost:hover { color: var(--text); background: var(--surface); }

  /* ── Login ──────────────────────────────────────────────────────────── */
  #screen-login, #screen-changepw { align-items: center; justify-content: center; padding: 24px 0; overflow-y: auto; }
  .login-box { width: 100%; max-width: 460px; padding: 0 24px; }
  .login-title { font-size: 38px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--gold); text-align: center; margin-bottom: 6px;
    white-space: nowrap; }
  .login-sub { text-align: center; color: var(--muted); font-size: 12px;
    margin-bottom: 24px; letter-spacing: 0.08em; text-transform: uppercase; }
  .login-box .field { margin-bottom: 12px; }
  .login-box .field input, .login-box .field select { padding: 11px 14px; font-size: 14px; }
  .login-box .filter-row { padding: 12px 16px; gap: 14px; margin-top: 8px; }
  .login-box .btn-primary { padding: 12px; }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .field input, .field select { width: 100%; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
    font-family: inherit; font-size: 15px; color: var(--text); outline: none;
    transition: border-color 0.15s; }
  .field input:focus, .field select:focus { border-color: var(--gold); }
  .field select option { background: var(--card); }
  .btn-primary { width: 100%; padding: 14px; border-radius: var(--radius); border: none;
    background: var(--gold); color: var(--bs-sheet); font-family: inherit; font-size: 15px;
    font-weight: 700; cursor: pointer; letter-spacing: 0.04em; transition: opacity 0.15s;
    margin-top: 8px; }
  .btn-primary:hover { opacity: 0.9; }
  /* Solid muted pair, not opacity — opacity composites toward the page, and on
     paper that blended a pale label into a pale ground at ~2.3:1. The base rule
     matters because the login button is a plain .btn-primary. */
  .btn-primary:disabled { background: var(--bs-stock-2); color: var(--bs-ink-2);
    box-shadow: none; cursor: default; }
  .btn-secondary { width: 100%; padding: 14px; border-radius: var(--radius);
    background: var(--card); color: var(--text); border: 1px solid var(--border);
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s; }
  .btn-secondary:hover { border-color: var(--gold); }

  /* ── Persistent global bar (track switcher + nav) ───────────────────── */
  /* ── RUNNING HEAD ──────────────────────────────────────────────────────
     The strip a newspaper prints across the top of a continuing page: thin,
     ruled, set in small mono caps, and quiet — because the page's own
     masthead is the loud thing, not the chrome. This was a generic app nav
     bar (pill links, a rounded dropdown, a coloured brand mark), which is
     what made it read as bolted on rather than part of the paper.
     ────────────────────────────────────────────────────────────────────── */
  #global-bar { display: none; position: sticky; top: 0; z-index: 30;
    background: var(--bs-stock);
    border-bottom: 1px solid var(--bs-ink); }
  #global-bar.show { display: block; }
  /* The thick half of the double rule — same device as the practice masthead
     and the front page's folio, so all three read as one printing system. */
  #global-bar::after { content: ''; position: absolute; left: 0; right: 0;
    bottom: -3px; height: 2px; background: var(--bs-ink); }
  .gb-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: baseline;
    gap: 18px; padding: 9px 28px 8px; }
  /* Mono caps, not a display face: the wordmark is set BIG on the front page
     itself, so repeating it large here would compete with it. */
  .gb-brand { font-family: var(--bs-mono); font-weight: 400; font-size: 10.5px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--bs-ink);
    white-space: nowrap; cursor: pointer; }
  .gb-brand .v { color: var(--bs-blue); }
  .gb-track { position: relative; }
  .gb-track-btn { display: flex; align-items: center; gap: 7px; background: transparent;
    border: none; border-left: 1px solid var(--bs-rule); border-radius: 0;
    padding: 1px 0 1px 18px; cursor: pointer;
    color: var(--bs-ink-2); font-family: var(--bs-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    transition: color .12s ease; }
  .gb-track-btn:hover { color: var(--bs-blue); }
  .gb-track-btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bs-blue); }
  .gb-track-btn .chev { color: var(--bs-ink-3); font-size: 9px; }
  .gb-track-menu { position: absolute; top: 42px; left: 0; min-width: 220px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; display: none;
    box-shadow: 0 16px 40px rgba(12, 15, 11, 0.45); }
  .gb-track-menu.open { display: block; }
  .gb-track-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--text); }
  .gb-track-item:hover { background: var(--surface); }
  .gb-track-item .ti-name { font-weight: 600; }
  .gb-track-item .ti-sub { color: var(--muted); font-size: 11px; margin-left: auto; }
  .gb-track-item.active { background: var(--gold-bg); }
  .gb-track-item.active .ti-name { color: var(--gold); }
  .gb-track-item.locked { opacity: 0.4; cursor: default; }
  /* Section index, set as a run of departments rather than a row of pills.
     The active one is underlined in ink — how a printed index marks where
     you are — instead of sitting in a filled rounded chip. */
  .gb-links { display: flex; gap: 22px; margin-left: auto; }
  .gb-link { padding: 2px 0 3px; border-radius: 0; cursor: pointer;
    font-family: var(--bs-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; font-weight: 400; color: var(--bs-ink-3);
    border: none; border-bottom: 2px solid transparent; white-space: nowrap;
    transition: color .12s ease, border-color .12s ease; }
  .gb-link:hover { color: var(--bs-blue); border-bottom-color: var(--bs-rule); }
  /* The running head IS the primary navigation and had no focus state at all, so
     a keyboard user saw nothing as they tabbed through it. These are divs, not
     buttons, so they also need tabindex/role — wired in JS below. */
  .gb-link:active, .gb-track-btn:active { color: var(--bs-blue); }
.gb-link:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px;
    color: var(--bs-ink); }
  .gb-track-btn:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px;
    color: var(--bs-blue); }
  .gb-link.active { color: var(--bs-ink); background: transparent;
    border-bottom-color: var(--bs-ink); }
  /* The running head and the content column below it must share ONE left edge —
     that is the whole premise of the front page's full-measure rules. These
     stepped their horizontal padding at different breakpoints (28→10→8px here vs
     28→18px for .home-wrap), so between 420 and 720px the wordmark sat up to
     10px off the story column's edge. Both now step to 18px at the same
     breakpoint and stay there; only the type and the gaps tighten below it. */
  @media (max-width: 560px) {
    .gb-inner { gap: 6px; }
    .gb-brand { font-size: 10px; letter-spacing: .16em; }
    .gb-links { gap: 12px; margin-left: auto; min-width: 0; }
    .gb-link { padding: 3px 0; font-size: 9.5px; letter-spacing: .12em; }
  }
  /* Very narrow phones: keep all nav tabs reachable instead of clipping the last one. */
  @media (max-width: 420px) {
    .gb-inner { gap: 4px; }
    .gb-brand { font-size: 9.5px; letter-spacing: .12em; }
    .gb-track-btn { padding: 1px 0 1px 10px; font-size: 9px; }
    .gb-link { padding: 3px 0; font-size: 9px; letter-spacing: .1em; }
  }