/* ============================================================
   AOE Centre — aoe-theme-vars.css
   ------------------------------------------------------------
   style.css and portal.css share one palette (--cream, --panel,
   --ink, --taupe, --rule, --gold-deep). aoe-theme.css does NOT
   touch those names — it defines its own (--bg, --surface, --text)
   and then restyles about 90 classes by hand. Everything it did
   not list keeps its light colours, which is how a page ends up
   half dark and half light.

   This file flips the shared palette itself, so every component
   follows, and then fixes the handful of places that must NOT
   follow — the bands and the rail, which are dark in both modes.

   Goes on EVERY page, public and portal.
   Load order:  portal.css / style.css  ->  aoe-theme.css  ->  this
   Light mode is untouched: every rule below is inside
   html[data-theme="dark"].
   ============================================================ */

html[data-theme="dark"] {
  /* style.css's own palette, flipped */
  --cream:      #211E19;   /* page behind everything      */
  --panel:      #2B2721;   /* cards and panels            */
  --ink:        #F5F2EA;   /* body copy and headings      */
  --ink-soft:   #332F28;   /* rail row fill               */
  --rule:       #3E3931;   /* every 1px border            */
  --taupe:      #1A1713;   /* header band and hero        */
  --taupe-dark: #A9A296;   /* only ever used as text      */
  --taupe-light:#A9A296;   /* portal.css uses it as TEXT only */
  --gold:       #DFCD83;   /* unchanged, reads on both    */
  --gold-deep:  #DFCD83;   /* #A08C42 is too dark to read */

  /* a light constant for the parts that are dark in BOTH modes */
  --always-light: #F5F2EA;
}

/* ---- page ---- */
html[data-theme="dark"] body { background: var(--cream); color: var(--ink); }

/* ---- the standing directory ----------------------------------
   The rail is already a dark column in light mode, so flipping
   --cream underneath it would put dark text on a dark rail.
   Everything inside it is pinned light instead. */
html[data-theme="dark"] .rail { background: #17150F; }
html[data-theme="dark"] .rail-name,
html[data-theme="dark"] .rail-row,
html[data-theme="dark"] .rail-row:hover,
html[data-theme="dark"] .rail-items a,
html[data-theme="dark"] .rail-quiet,
html[data-theme="dark"] .rail-vert,
html[data-theme="dark"] .rail-label,
html[data-theme="dark"] .rail-close,
html[data-theme="dark"] .rail-fambtn { color: var(--always-light); }
html[data-theme="dark"] .rail-open { background: transparent; color: var(--always-light); }
html[data-theme="dark"] .rail-open:hover { background: rgba(245,242,234,.10); }
html[data-theme="dark"] .rail-cta { background: var(--gold); color: #211E19; }
html[data-theme="dark"] .rail-cta:hover { background: #EFE0A8; color: #211E19; }

/* ---- header band, hero, footer: dark in both modes ---- */
html[data-theme="dark"] .top,
html[data-theme="dark"] .masthead,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .mbar,
html[data-theme="dark"] footer { color: var(--always-light); }
html[data-theme="dark"] .masthead nav a,
html[data-theme="dark"] .mbar a { color: var(--always-light); }

/* ---- cards and panels ---- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .setcard,
html[data-theme="dark"] .route,
html[data-theme="dark"] .teaser,
html[data-theme="dark"] .noticeboard,
html[data-theme="dark"] .update { background: var(--panel); border-color: var(--rule); }

/* ---- anything hardcoded to white ---- */
html[data-theme="dark"] .adv-opt:hover,
html[data-theme="dark"] .qopt:hover,
html[data-theme="dark"] .ansbtn:hover:not(:disabled),
html[data-theme="dark"] .droparea.over { background: #332F28; }
html[data-theme="dark"] .lead-grid input,
html[data-theme="dark"] .lead-grid select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #332F28; color: var(--ink); border-color: #5C554C;
}
html[data-theme="dark"] ::placeholder { color: #8E877B; }
html[data-theme="dark"] .ex-code b { background: rgba(245,242,234,.10); color: var(--ink); }

/* ---- right / wrong ---- */
html[data-theme="dark"] .qopt.ans,
html[data-theme="dark"] .ansbtn.correct { background: rgba(95,169,124,.24); border-color: #5FA97C; color: var(--ink); }
html[data-theme="dark"] .qopt.yours,
html[data-theme="dark"] .ansbtn.wrong   { background: rgba(196,85,61,.24);  border-color: #C4553D; color: var(--ink); }

/* ---- the two switches sitting together ---- */
html[data-theme="dark"] .aoe-switches { color: var(--always-light); }

/* ============================================================
   Round 2 — fixed after rendering the real pages in dark mode
   and measuring the contrast of every piece of text on them.
   ============================================================ */

html[data-theme="dark"] { --taupe-deep: #1A1713; }

/* bands that are dark in BOTH modes: their text is var(--cream),
   which now resolves dark, so it is pinned light instead */
html[data-theme="dark"] .band-taupe,
html[data-theme="dark"] .band-taupe h2,
html[data-theme="dark"] .band-taupe h3,
html[data-theme="dark"] .band-taupe p,
html[data-theme="dark"] .contact-list,
html[data-theme="dark"] .contact-list p,
html[data-theme="dark"] .rail-group,
html[data-theme="dark"] .rail-group span,
html[data-theme="dark"] .rail-sub,
html[data-theme="dark"] .rail-fambtn .fam-name,
html[data-theme="dark"] .rail-items .code,
html[data-theme="dark"] .ptest-nums,
html[data-theme="dark"] .ptest-nums > div,
html[data-theme="dark"] .btn-dark { color: var(--always-light); }

html[data-theme="dark"] .band-taupe .section-intro { color: rgba(245,242,234,.85); }

/* long prose hardcoded to #4A443B */
html[data-theme="dark"] .way-body,
html[data-theme="dark"] .ptest-say p,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .prose p { color: #D8D2C6; }

/* the placement-test figures panel */
html[data-theme="dark"] .ptest-nums { background: #17150F; }
html[data-theme="dark"] .ptest-say  { background: var(--panel); }
html[data-theme="dark"] .way        { background: var(--panel); border-color: var(--rule); }

/* buttons: only the gold ones carry dark text */
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .tag-highlight,
html[data-theme="dark"] .tag-promo { color: #211E19; }
html[data-theme="dark"] .btn-outline { background: transparent; color: var(--ink); border-color: #5C554C; }
html[data-theme="dark"] .btn-outline:hover { background: var(--ink); color: #211E19; }
html[data-theme="dark"] .btn-dark { background: #332F28; border-color: #5C554C; }
html[data-theme="dark"] .btn-dark:hover { background: var(--gold); color: #211E19; border-color: var(--gold); }

/* the two pills where the homepage rail has no masthead to hang them on */
.rail-switches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -12px 0 -8px; }
.rail-switches:empty { display: none; }
html[data-theme="dark"] .rail-switches { color: var(--always-light); }

/* the placement test's own list */
html[data-theme="dark"] .adv-specs li,
html[data-theme="dark"] .adv-start p,
html[data-theme="dark"] .adv-say p { color: #D8D2C6; }

/* ============================================================
   Round 3 — the portal (portal.css). Found by rendering every
   colour-setting class in portal.css against a no-theme baseline
   and keeping only the ones that were fine before and broke in dark.
   ============================================================ */

/* screens that are dark in BOTH modes: their text is var(--cream),
   which now resolves dark, so it is pinned light */
html[data-theme="dark"] .qveil { background: #17150F; }
html[data-theme="dark"] .form-status,
html[data-theme="dark"] .qhuge,
html[data-theme="dark"] .sbnow,
html[data-theme="dark"] .tinybtn,
html[data-theme="dark"] .pk-opt,
html[data-theme="dark"] .crumb,
html[data-theme="dark"] .footnote,
html[data-theme="dark"] .awlabel,
html[data-theme="dark"] .whybox,
html[data-theme="dark"] .plat-foot { color: #F5F2EA; }

/* gold and coloured fills always take dark text */
html[data-theme="dark"] .hud-streak,
html[data-theme="dark"] .pk-btn,
html[data-theme="dark"] .awbtn,
html[data-theme="dark"] .adv-verdict,
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] .rail-cta,
html[data-theme="dark"] .tag-promo,
html[data-theme="dark"] .tag-highlight { color: #211E19; }
html[data-theme="dark"] .pk-btn.ghost { background: transparent; color: var(--gold); }

/* long prose hardcoded to #4A443B in portal.css */
html[data-theme="dark"] .fb-why,
html[data-theme="dark"] .gap-note,
html[data-theme="dark"] .sent-strip,
html[data-theme="dark"] .fbwhy,
html[data-theme="dark"] .passhint,
html[data-theme="dark"] .adv-hint { color: #D8D2C6; }
html[data-theme="dark"] .gap-note,
html[data-theme="dark"] .sent-strip { background: #2B2721; border-color: #3E3931; }

/* error and warning text needs to lift off a dark page */
html[data-theme="dark"] .lead-err,
html[data-theme="dark"] .form-err,
html[data-theme="dark"] .msg.err { color: #E08A72; }

/* ============================================================
   Round 4 — the last two pages. admin.php (news editor) and
   err.php carry their own colours in an inline <style> instead
   of portal.css, so they need naming here.
   ============================================================ */

/* admin.php declares its own :root with the same names plus two more */
html[data-theme="dark"] { --bad: #E08A72; --good: #7FC79A; }

/* err.php has no variables at all — every colour is written out.
   These are scoped to .err-body so they cannot reach any other page. */
html[data-theme="dark"] .err-body { background: var(--cream); color: var(--ink); }
/* err.php writes its band colour out as #9B9283 instead of using the
   variable, so the light-mode deepening has to name it directly. */
.err-body .bar { background: #6E675A; color: #F5F2EA; }
html[data-theme="dark"] .err-body .bar { background: #1A1713; color: #F5F2EA; }
html[data-theme="dark"] .err-body pre  { background: #2B2721; color: #F5F2EA; border-left-color: #C4553D; }
html[data-theme="dark"] .err-body input,
html[data-theme="dark"] .err-body select,
html[data-theme="dark"] .err-body textarea { background: #332F28; color: #F5F2EA; border-color: #5C554C; }
/* the page's own buttons only — not the theme switch, which brings
   its own colours and sits inside .aoe-pill */
html[data-theme="dark"] .err-body button:not(.aoe-pill button) {
  background: #DFCD83; color: #211E19; border: 0;
}

/* admin.php (news editor) follows the shared variables; only the two
   names it adds of its own need values, and they are set above. */
html[data-theme="dark"] .news-body code,
html[data-theme="dark"] .news-body pre { background: rgba(245,242,234,.10); color: var(--ink); }
html[data-theme="dark"] .news-body input,
html[data-theme="dark"] .news-body select,
html[data-theme="dark"] .news-body textarea { background: #332F28; color: var(--ink); border-color: #5C554C; }

/* ============================================================
   Round 5 — reported after the site went live in both themes
   ============================================================ */

/* --- the directory would not close ---------------------------
   .rail-sub sets display:flex, which beats the browser's own
   [hidden] rule, so "Tuition classes" stayed open however many
   times it was clicked. Nothing else in the file needed changing. */
.rail-sub[hidden],
.rail-items[hidden],
.rail-block [hidden] { display: none !important; }

/* --- dark mode: the rest of the rail --------------------------
   These use color:var(--cream), which is dark in dark mode, so
   "Assignment helper", "Learners Portal" and "Teacher Portal"
   were dark text on a dark panel. */
html[data-theme="dark"] .rail-special,
html[data-theme="dark"] .rail-portals a,
html[data-theme="dark"] .rail-fambtn,
html[data-theme="dark"] .rail-fambtn .fam-name,
html[data-theme="dark"] .rail-stack a,
html[data-theme="dark"] .rail-foot,
html[data-theme="dark"] .rail-foot a { color: #F5F2EA; }
html[data-theme="dark"] .rail-fambtn .fam-count { color: rgba(245,242,234,.62); }
html[data-theme="dark"] .rail-quiet { color: rgba(245,242,234,.9); }
html[data-theme="dark"] .rail-special span,
html[data-theme="dark"] .rail-portals a span,
html[data-theme="dark"] .rail-items .code,
html[data-theme="dark"] .rail-tag,
html[data-theme="dark"] .rail-quiet span { color: var(--gold); }
html[data-theme="dark"] .rail-special:hover,
html[data-theme="dark"] .rail-quiet:hover,
html[data-theme="dark"] .rail-portals a:hover { color: var(--gold); border-color: var(--gold); }

/* --- the portal switch bar, made obvious ---------------------- */
.switchbar { background: rgba(223,205,131,.20); }
.switchbar .wrap { padding: 12px 22px; }
.sbnow { font-size: 14px; opacity: 1; }
.sbgo {
  font-size: 14px; padding: 9px 18px;
  background: var(--gold); color: #2B2721; border-color: var(--gold);
}
.sbgo:hover { background: #EFE0A8; border-color: #EFE0A8; color: #2B2721; }
.sbask { font-size: 13px; color: var(--cream); opacity: .85; text-decoration: underline; }
html[data-theme="dark"] .switchbar { background: rgba(223,205,131,.12); border-color: rgba(223,205,131,.3); }
html[data-theme="dark"] .sbnow { color: #F5F2EA; }
html[data-theme="dark"] .sbgo  { background: var(--gold); color: #211E19; border-color: var(--gold); }
html[data-theme="dark"] .sbask { color: #D8D2C6; }

/* ============================================================
   LIGHT MODE — the only rules in this file that are not scoped
   to dark. The taupe band #9B9283 is a mid tone: nothing light
   placed on it can reach a readable contrast (cream managed 2.75,
   gold 1.93). The band is deepened one step, staying in the same
   colour family, and the texts that sat at 82-85% opacity are
   made solid. Cream now reads at 5.0 and gold at 3.5.
   ============================================================ */
:root { --taupe: #6E675A; --taupe-deep: #5F5950; }

.masthead nav a,
.top .masthead nav a,
.hero .lede,
.band-taupe,
.band-taupe p,
.band-taupe .section-intro,
.band-taupe .contact-list,
.band-taupe .contact-list p,
.footnote,
.crumb,
.plat-foot { color: #F5F2EA; }

.hero .eyebrow,
.band-taupe .eyebrow,
.hero-sub .eyebrow { color: #EFE0A8; }

/* dark mode keeps its own, deeper band */
html[data-theme="dark"] { --taupe: #1A1713; --taupe-deep: #1A1713; }

/* ============================================================
   Round 6 — three faults found by measuring the finished pages
   ============================================================ */

/* --- the homepage footer was invisible on every desktop visit --
   style.css line 988:  @media(min-width:901px){ .shell > footer
   { background: var(--cream) } }  — the background was changed to
   cream but the text was left at rgba(245,242,234,.7), i.e. cream
   on cream. Contrast 1.00. This is not new; it has been like that
   since the 1b homepage went up. */
@media (min-width: 901px) {
  .shell > footer,
  .shell > footer a       { color: #4A443B; }
  .shell > footer .script { color: #7E6C2B; }
  html[data-theme="dark"] .shell > footer,
  html[data-theme="dark"] .shell > footer a       { color: #D8D2C6; }
  html[data-theme="dark"] .shell > footer .script { color: var(--gold); }
}

/* --- small gold text on the cream column was too pale ----------
   --gold-deep #A08C42 on cream is 2.97. Deepened to 4.6. It only
   ever appears as small text, a 1px border or a progress fill, so
   nothing else shifts. */
:root { --gold-deep: #7E6C2B; }

/* Every dark ground on the site re-declares the deep gold as the
   bright one, so anything inside them follows automatically
   instead of having to be listed by hand. */
.rail, .top, .bar, .hero, .band-taupe, .quiz-body, .board-body,
.pk-body, .switchbar { --gold-deep: #EFE0A8; }

/* the few things that write ink straight onto a band */
.masthead { color: #F5F2EA; }
.top .btn-outline, .hero .btn-outline, .bar .btn-outline,
.band-taupe .btn-outline, .quiz-body .btn-outline {
  color: #F5F2EA; border-color: rgba(245,242,234,.55);
}
/* Checked in the templates: essay.php opens .top at line 98 and
   closes it before <main> at line 114, while the first es- element
   is at line 130 — inside main. The essay-report classes therefore
   never sit on a band, and the harness flagging them was an
   artefact of placing them there artificially. No rule needed. */
.top .tag, .hero .tag, .bar .tag, .band-taupe .tag {
  color: #F5F2EA; border-color: rgba(245,242,234,.45);
}

/* ...except inside the rail and the taupe bands, which are dark
   grounds where the deep gold would disappear. Those take the
   bright gold instead, in both modes. */
.rail-label,
.rail-row span,
.rail-quiet span,
.rail-fambtn .sign,
.rail-group .sign,
.band-taupe .eyebrow,
.hero .eyebrow,
.hero-sub .eyebrow { color: #EFE0A8; }

/* --- the arrow on the gold "Free placement test" button -------- */
.rail-cta span,
html[data-theme="dark"] .rail-cta span { color: #211E19; }

/* --- the switch on pages with no bar to hang it on -------------
   practice.php's daily-cap card, and anything else without a
   header. Sits out of the way, bottom right, above the content. */
.aoe-pill-float {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  background: #FFFDF7; border-color: #C6BBA7;
  box-shadow: 0 2px 10px rgba(43,39,33,.20);
}
.aoe-pill-float button.on { background: #DFCD83; color: #2B2721; }
html[data-theme="dark"] .aoe-pill-float {
  background: #2B2721; border-color: #3E3931;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
html[data-theme="dark"] .aoe-pill-float button { color: #F5F2EA; }
html[data-theme="dark"] .aoe-pill-float button.on { background: #DFCD83; color: #211E19; }
@media (max-width: 560px) { .aoe-pill-float { right: 10px; bottom: 10px; } }

/* ============================================================
   READING PRACTICE — passage beside the questions on a screen
   ------------------------------------------------------------
   practice.php already puts .has-passage on <body> when the set
   has one, and already hides the passage panel when the set
   ends, so this is layout only — no page or script changes.
   Below 901px nothing here applies and the phone keeps the
   stacked layout it has now.
   ============================================================ */
@media (min-width: 901px) {
  body.has-passage .quizwrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    max-width: 1240px;
  }

  /* left: the passage, held in place while the questions change */
  body.has-passage .passpanel {
    grid-column: 1; grid-row: 1;
    margin: 0; max-width: none;
    position: sticky; top: 18px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
  }

  /* right: whichever of the three is showing */
  body.has-passage #stage,
  body.has-passage #feedback {
    grid-column: 2; grid-row: 1;
    margin: 0; max-width: none;
    scroll-margin-top: 18px;
  }

  /* the end-of-set review runs the full width; the passage panel
     is already hidden by finish() at that point */
  body.has-passage #endcard { grid-column: 1 / -1; }

  /* a column reads better ranged left than centred */
  body.has-passage .qcount { text-align: left; }
  body.has-passage .qbig   { text-align: left; margin-left: 0; font-size: 25px; }
  body.has-passage .qhint  { text-align: left; }

  /* a narrower column needs the passage to keep its own scrollbar
     visible rather than blend into the panel */
  body.has-passage .passpanel::-webkit-scrollbar { width: 8px; }
  body.has-passage .passpanel::-webkit-scrollbar-thumb {
    background: rgba(245,242,234,.22); border-radius: 4px;
  }
}

/* ============================================================
   THE PRACTICE RUNNER IN LIGHT MODE
   ------------------------------------------------------------
   portal.css builds the runner as a dark screen (.quiz-body uses
   --ink for its background) and that is all it has. In light mode
   it therefore stayed dark while the rest of the site went light.
   This is the light half, drawn to match the Claude Design boards:
   a cream page, the question in its own bordered card, options as
   white cards with a gold letter, and the progress dots keeping
   their green / red / gold meaning.
   Dark mode is untouched — every rule here is outside it and the
   dark rules in portal.css and aoe-theme.css still win there.
   ============================================================ */
html[data-theme="light"] .quiz-body,
html:not([data-theme="dark"]) .quiz-body {
  background: #F2EFE6; color: #2B2721;
}
html:not([data-theme="dark"]) .quizbar {
  background: #FFFDF7; border-bottom: 1px solid #E2DBCB;
}
html:not([data-theme="dark"]) .qexit { color: #4A443B; }
html:not([data-theme="dark"]) .qexit:hover { color: #7E6C2B; }

html:not([data-theme="dark"]) .qdots i { background: #D8D2C6; }
html:not([data-theme="dark"]) .qdots i.now { background: #C9A227; }
html:not([data-theme="dark"]) .qdots i.ok  { background: #3F7A56; }
html:not([data-theme="dark"]) .qdots i.no  { background: #B0442F; }

html:not([data-theme="dark"]) .qscore .pts { color: #7E6C2B; }
html:not([data-theme="dark"]) .qscore .cmb { color: #7C7466; }
html:not([data-theme="dark"]) .qcount      { color: #7C7466; }

/* the question sits in its own card, as in the design */
html:not([data-theme="dark"]) .qbig {
  color: #2B2721;
  background: #FFFFFF;
  border: 1px solid #E2DBCB;
  padding: 30px 34px;
  max-width: 940px;
}

html:not([data-theme="dark"]) .qbtn {
  background: #FFFFFF; border-color: #E2DBCB; color: #2B2721;
}
html:not([data-theme="dark"]) .qbtn:hover:not(:disabled) {
  background: #FFFFFF; border-color: #C9A227;
}
html:not([data-theme="dark"]) .qbtn .k { color: #A0842B; }
html:not([data-theme="dark"]) .qbtn.right      { background: #F1F7F3; border-color: #3F7A56; }
html:not([data-theme="dark"]) .qbtn.wrongpick  { background: #FDF2EF; border-color: #B0442F; }
html:not([data-theme="dark"]) .qhint { color: #7C7466; }

html:not([data-theme="dark"]) .fbcard {
  background: #FFFFFF; border-color: #E2DBCB;
}
html:not([data-theme="dark"]) .fbmark.right { color: #2F6B47; }
html:not([data-theme="dark"]) .fbmark.wrong { color: #A63C24; }
html:not([data-theme="dark"]) .fbwhy        { color: #4A443B; }

html:not([data-theme="dark"]) .endpct    { color: #7E6C2B; }
html:not([data-theme="dark"]) .endsub,
html:not([data-theme="dark"]) .endverdict { color: #4A443B; }
html:not([data-theme="dark"]) .endstats b { color: #2B2721; }
html:not([data-theme="dark"]) .endstats span { color: #7C7466; }

/* the reading passage panel */
html:not([data-theme="dark"]) .passpanel {
  background: #FFFDF7; border-color: #E2DBCB; border-left-color: #C9A227;
}
html:not([data-theme="dark"]) .passlabel { color: #7E6C2B; }

/* the only two classes from elsewhere in portal.css that really do
   appear on a .quiz-body page (checked against practice.php and
   drill.php); everything else the harness flagged in that context
   never appears there */
html:not([data-theme="dark"]) .quiz-body .cycleline { color: #4A443B; }
html:not([data-theme="dark"]) .passpanel .passtext { color: #2B2721; }
html:not([data-theme="dark"]) .passhint  { color: #7C7466; }

/* the end-of-set review, and the glossary drill which shares the shell */
html:not([data-theme="dark"]) .quiz-body .section-head { color: #2B2721; }
html:not([data-theme="dark"]) .quiz-body .qcard  { background: #FFFFFF; border-color: #E2DBCB; }
html:not([data-theme="dark"]) .quiz-body .qtext  { color: #2B2721; }
html:not([data-theme="dark"]) .quiz-body .qopt   { background: #FFFFFF; border-color: #E2DBCB; color: #2B2721; }
html:not([data-theme="dark"]) .quiz-body .qopt.ans   { background: #F1F7F3; border-color: #3F7A56; }
html:not([data-theme="dark"]) .quiz-body .qopt.yours { background: #FDF2EF; border-color: #B0442F; }
html:not([data-theme="dark"]) .quiz-body .why {
  background: #FFFDF7; color: #4A443B; border-left-color: #C9A227;
}
html:not([data-theme="dark"]) .quiz-body .qnum,
html:not([data-theme="dark"]) .quiz-body .qopt .mark { color: #7C7466; }
html:not([data-theme="dark"]) .quiz-body .btn.ghost { color: #2B2721; border-color: #C6BBA7; }
html:not([data-theme="dark"]) .quiz-body .btn.ghost:hover { background: #2B2721; color: #F5F2EA; }
html:not([data-theme="dark"]) .quiz-body .passbox {
  background: #FFFDF7; border-color: #E2DBCB;
}
html:not([data-theme="dark"]) .quiz-body .passbox summary { color: #A0842B; }
html:not([data-theme="dark"]) .quiz-body .passbox .passtext { color: #2B2721; }

/* the drill runner shares .quiz-body */
html:not([data-theme="dark"]) .quizbar .qtitle { color: #2B2721; }
html:not([data-theme="dark"]) .quizbar .qtitle.dim2 { color: #7C7466; }

/* --- switching side on the sign-in page ------------------------
   Somebody who picks the wrong portal at enter.php had no way back
   except the browser button. This sits under the title on both
   sign-in pages and keeps whatever they were doing (sign in, or
   create an account). */
.sidepick { display: inline-flex; margin-top: 16px; border: 1px solid rgba(245,242,234,.42); border-radius: 999px; overflow: hidden; }
.sidepick a {
  font-family: "IBM Plex Mono", "Consolas", monospace;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 18px; text-decoration: none; color: #F5F2EA; line-height: 1;
}
.sidepick a:hover { background: rgba(245,242,234,.14); }
.sidepick a.on { background: #DFCD83; color: #2B2721; font-weight: 700; }
html[data-theme="dark"] .sidepick { border-color: #3E3931; }
html[data-theme="dark"] .sidepick a { color: #F5F2EA; }
html[data-theme="dark"] .sidepick a.on { background: #DFCD83; color: #211E19; }

/* --- the homepage wordmark ------------------------------------
   The tagline was breaking onto two lines under the wordmark and
   crowding the switches beneath it. */
.rail-name { letter-spacing: .26em; font-size: 18px; }
.rail-tag  { font-size: 14px; line-height: 1.25; white-space: nowrap; margin-top: 6px; }
.rail-head { margin-bottom: 4px; }
.rail-switches { margin: 2px 0 -4px; }
@media (max-width: 900px) { .rail-tag { white-space: normal; } }

/* The runner and smartboard bars are dark in dark mode but light in
   light mode, so the switch sitting on them cannot keep its
   on-a-dark-band colours in both. */
html:not([data-theme="dark"]) .quizbar .aoe-pill.on-band,
html:not([data-theme="dark"]) .boardbar .aoe-pill.on-band {
  border-color: #C6BBA7; background: #FFFFFF;
}
html:not([data-theme="dark"]) .quizbar .aoe-pill.on-band button,
html:not([data-theme="dark"]) .boardbar .aoe-pill.on-band button { color: #4A443B; }
html:not([data-theme="dark"]) .quizbar .aoe-pill.on-band button:hover:not(.on),
html:not([data-theme="dark"]) .boardbar .aoe-pill.on-band button:hover:not(.on) { color: #2B2721; }
html:not([data-theme="dark"]) .quizbar .aoe-pill.on-band button.on,
html:not([data-theme="dark"]) .boardbar .aoe-pill.on-band button.on {
  background: #DFCD83; color: #2B2721;
}
html:not([data-theme="dark"]) .quizbar #aoe-lang,
html:not([data-theme="dark"]) .boardbar #aoe-lang { border-color: #C6BBA7; background: #FFFFFF; }
html:not([data-theme="dark"]) .quizbar #aoe-lang button,
html:not([data-theme="dark"]) .boardbar #aoe-lang button { color: #4A443B; }

/* ============================================================
   Round 7 — one banner colour, and two screens that would have
   turned white
   ============================================================ */

/* --- the logo sits on the same colour in both themes ----------
   .rail is background:var(--ink) — #2B2721 in light. In dark
   --ink flips light, so it needed an explicit value, and the one
   chosen first (#17150F) was darker than the light rail and darker
   than the bands beside it. The owl and the wordmark then sat on a
   near-black column that fought them.
   The rail, the masthead band and the footer now all use #2B2721,
   the same colour the rail already has in light mode, so the logo
   is on the same ground either way. */
html[data-theme="dark"] .rail { background: #2B2721; }
html[data-theme="dark"] { --taupe: #2B2721; --taupe-deep: #2B2721; }
/* aoe-theme.css paints the masthead, hero band and footer from its
   own --header token, so that has to move with them. */
html[data-theme="dark"] { --header: #2B2721; }
html[data-theme="dark"] .rail-row { background: #38332B; }
html[data-theme="dark"] .rail-row:hover { background: #443E34; }
html[data-theme="dark"] .qveil { background: #2B2721; }

/* the logo images keep the opacity the design gave them — nothing
   here tints, dims or recolours favicon.png or AOE_Logo.png */

/* --- the smartboard and the game room ------------------------
   portal.css sets `.board-body{background:var(--ink)}` and
   `body.pk-body{background:var(--ink)}`. --ink is light in dark
   mode and neither had a dark rule, so both would have come up
   WHITE in dark mode. Pinned dark here; the light half of both is
   written further down. */
html[data-theme="dark"] .board-body,
html[data-theme="dark"] body.pk-body { background: #211E19; color: #F5F2EA; }

/* ============================================================
   THE GAME ROOM IN LIGHT MODE
   ------------------------------------------------------------
   portal.css writes the game room's colours out as hex — #221F1A,
   #2F2B24, #39342C and so on — with no light counterpart, so it
   stayed dark whatever the switch said. This is the light half.
   ============================================================ */
html:not([data-theme="dark"]) body.pk-body { background: #F2EFE6; color: #2B2721; }
html:not([data-theme="dark"]) .pk-bar {
  background: #FFFDF7; border-bottom: 1px solid #E2DBCB;
}
html:not([data-theme="dark"]) .pk-brand { color: #7E6C2B; }
html:not([data-theme="dark"]) .pk-sub,
html:not([data-theme="dark"]) .pk-qn,
html:not([data-theme="dark"]) .pk-lead,
html:not([data-theme="dark"]) .pk-wait,
html:not([data-theme="dark"]) .pk-loading,
html:not([data-theme="dark"]) .pk-note { color: #4A443B; }
html:not([data-theme="dark"]) .pk-code,
html:not([data-theme="dark"]) .pk-bigcode,
html:not([data-theme="dark"]) .pk-timer { color: #7E6C2B; }
html:not([data-theme="dark"]) .pk-timer.hot { color: #B0442F; }

html:not([data-theme="dark"]) .pk-btn {
  background: #DFCD83; border-color: #C9A227; color: #2B2721;
}
html:not([data-theme="dark"]) .pk-btn.ghost { background: transparent; color: #7E6C2B; border-color: #C9A227; }

html:not([data-theme="dark"]) .pk-card,
html:not([data-theme="dark"]) .pk-side { background: #FFFFFF; border-color: #E2DBCB; }
html:not([data-theme="dark"]) .pk-card h2 { color: #2B2721; }
html:not([data-theme="dark"]) .pk-side h3 { color: #7C7466; }
html:not([data-theme="dark"]) .pk-passage {
  background: #FFFDF7; border-left-color: #C9A227; color: #2B2721;
}
html:not([data-theme="dark"]) .pk-q { color: #2B2721; }

html:not([data-theme="dark"]) .pk-opt {
  background: #FFFFFF; border-color: #E2DBCB; color: #2B2721;
}
html:not([data-theme="dark"]) .pk-opt:hover:enabled { background: #FFFDF7; border-color: #C9A227; }
html:not([data-theme="dark"]) .pk-opt .ltr { color: #A0842B; }
html:not([data-theme="dark"]) .pk-opt.picked { border-color: #C9A227; }
html:not([data-theme="dark"]) .pk-opt.right  { background: #F1F7F3; border-color: #3F7A56; }
html:not([data-theme="dark"]) .pk-opt.wrong  { background: #FDF2EF; border-color: #B0442F; }

html:not([data-theme="dark"]) .pk-fb      { border-left-color: #C9A227; color: #2B2721; }
html:not([data-theme="dark"]) .pk-fb.good { background: #F1F7F3; border-left-color: #3F7A56; }
html:not([data-theme="dark"]) .pk-fb.bad  { background: #FDF2EF; border-left-color: #B0442F; }

html:not([data-theme="dark"]) .pk-row { border-bottom-color: #E2DBCB; }
html:not([data-theme="dark"]) .pk-row .rk { color: #7C7466; }
html:not([data-theme="dark"]) .pk-row .pr { color: #7E6C2B; }
html:not([data-theme="dark"]) .pk-row.me { background: rgba(201,162,39,.14); }
html:not([data-theme="dark"]) .pk-row.fin .pr { color: #2F6B47; }
html:not([data-theme="dark"]) .pk-winner { color: #7E6C2B; }
html:not([data-theme="dark"]) .pk-final .pk-row { border-bottom-color: #E2DBCB; }

/* ============================================================
   THE SMARTBOARD IN LIGHT MODE
   ============================================================ */
html:not([data-theme="dark"]) .board-body { background: #F2EFE6; color: #2B2721; }
html:not([data-theme="dark"]) .boardbar {
  background: #FFFDF7; border-bottom: 1px solid #E2DBCB;
}
html:not([data-theme="dark"]) .btitle { color: #7E6C2B; }
html:not([data-theme="dark"]) .team { border-color: #D8D2C6; background: #FFFFFF; }
html:not([data-theme="dark"]) .team .tname { color: #2B2721; }
html:not([data-theme="dark"]) .team .tscore { color: #7E6C2B; }
html:not([data-theme="dark"]) .tinybtn { border-color: #C6BBA7; color: #2B2721; }
html:not([data-theme="dark"]) .tinybtn:hover { border-color: #C9A227; color: #7E6C2B; }

html:not([data-theme="dark"]) .tile {
  background: #FFFFFF; border-color: #E2DBCB; color: #7E6C2B;
}
html:not([data-theme="dark"]) .tile:hover:not(:disabled) { background: #DFCD83; color: #2B2721; }
html:not([data-theme="dark"]) .tile.done { background: transparent; color: #B7B0A3; }

html:not([data-theme="dark"]) .qveil  { background: #F2EFE6; }
html:not([data-theme="dark"]) .qval   { color: #7E6C2B; }
html:not([data-theme="dark"]) .qhuge  { color: #2B2721; }
html:not([data-theme="dark"]) .whybox {
  background: #FFFFFF; border-left-color: #C9A227; color: #2B2721;
}
html:not([data-theme="dark"]) .awlabel   { color: #4A443B; }
html:not([data-theme="dark"]) .awlabel b { color: #7E6C2B; }
html:not([data-theme="dark"]) .awbtn      { background: #DFCD83; border-color: #C9A227; color: #2B2721; }
html:not([data-theme="dark"]) .awbtn.none { background: transparent; color: #4A443B; border-color: #C6BBA7; }
html:not([data-theme="dark"]) .board-body .qbtn.right { background: #E7F2EB; border-color: #3F7A56; }

/* the switch and the language pill on those two bars, which are
   light in light mode and dark in dark mode */
html:not([data-theme="dark"]) .pk-bar .aoe-pill.on-band {
  border-color: #C6BBA7; background: #FFFFFF;
}
html:not([data-theme="dark"]) .pk-bar .aoe-pill.on-band button { color: #4A443B; }
html:not([data-theme="dark"]) .pk-bar .aoe-pill.on-band button.on { background: #DFCD83; color: #2B2721; }
html:not([data-theme="dark"]) .pk-bar #aoe-lang { border-color: #C6BBA7; background: #FFFFFF; }
html:not([data-theme="dark"]) .pk-bar #aoe-lang button { color: #4A443B; }

/* --- the portal swap link, now in the menu instead of a banner - */
.navswap { border: 1px solid rgba(245,242,234,.45); padding: 5px 13px; border-radius: 2px; line-height: 1.4; }
html[data-theme="dark"] .navswap { border-color: rgba(245,242,234,.32); }

/* --- last pass on the two boards ------------------------------ */

/* the option letter sits on a green or red tint once an answer is
   marked, where the mid gold is too pale */
html:not([data-theme="dark"]) .pk-opt.right .ltr,
html:not([data-theme="dark"]) .pk-opt.wrong .ltr,
html:not([data-theme="dark"]) .qbtn.right .k,
html:not([data-theme="dark"]) .qbtn.wrongpick .k,
html:not([data-theme="dark"]) .board-body .qbtn.right .k { color: #6A5B20; }

/* a used tile should read as used, not vanish */
html:not([data-theme="dark"]) .tile.done { color: #7C7466; }
html[data-theme="dark"] .tile.done { color: rgba(245,242,234,.42); }

/* the team name boxes on the smartboard are inputs coloured
   var(--cream), which is dark in dark mode */
html[data-theme="dark"] .team { background: #2B2721; border-color: #3E3931; }
html[data-theme="dark"] .team .tname { color: #F5F2EA; background: transparent; }
html[data-theme="dark"] .team .tscore { color: var(--gold); }

/* .awbtn was pinned to dark text for the gold and colour fills;
   the "Nobody" button is transparent and needs light text */
html[data-theme="dark"] .awbtn.none { color: #F5F2EA; border-color: rgba(245,242,234,.35); }

/* --- the "Fix these" deck ------------------------------------- */
.fixbox {
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-deep); padding: 20px 22px; margin-bottom: 22px;
}
.fixn    { margin: 0 0 6px; font-size: 16px; }
.fixn b  { font-family: "Marcellus", Georgia, serif; font-size: 24px; color: var(--gold-deep); }
.fixsub  { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: #4A443B; }
.fixline a { color: var(--gold-deep); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
html[data-theme="dark"] .fixbox  { background: var(--surface, #2B2721); border-color: #3E3931; border-left-color: var(--gold); }
html[data-theme="dark"] .fixn b  { color: var(--gold); }
html[data-theme="dark"] .fixsub  { color: #D8D2C6; }
html[data-theme="dark"] .fixline a { color: var(--gold); }

/* --- the parent report (parent.php) ---------------------------- */
.par-wrap { max-width: 860px; padding-top: 30px; padding-bottom: 60px; }
.par-nav  { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .18em;
            text-transform: uppercase; color: #F5F2EA; }
.par-head h1 { font-size: 34px; margin: 8px 0 4px; }
.par-words { font-size: 17px; line-height: 1.8; margin: 0; color: #4A443B; }
.par-prev  { margin: 16px 0 0; font-size: 14px; color: #4A443B; }
.par-note  { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: #7C7466; }
.par-foot .sub { margin-bottom: 10px; }
html[data-theme="dark"] .par-words,
html[data-theme="dark"] .par-prev { color: #D8D2C6; }
html[data-theme="dark"] .par-note { color: #A9A296; }

@media print {
  .top, .noprint, .aoe-pill, #aoe-lang { display: none !important; }
  .par-wrap { max-width: none; padding: 0; }
  .card { break-inside: avoid; border-color: #ccc; box-shadow: none; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   THE BOTTOM BAR ON A PHONE
   Five icons, the way a phone app does it. Built by aoe-tabs.js
   from the links already in the page's own menu.

   0906a (UI-IDEAS #2 and #7): the colours were raw hex here, so
   the bar was the one component on the site that did not follow
   the theme — it needed a second set of rules under
   html[data-theme="dark"] to keep up, and any new surface colour
   had to be written twice. They are the --surface / --rule-c /
   --dim / --text / --accent tokens now, which flip on their own,
   and the dark block below is gone because there is nothing left
   in it to say.

   The label was 9.5px. A 9.5px word under an icon is decoration,
   not a label; it is 11px, the floor for mono labels everywhere
   on this site. Five tabs at 320px is 64px each, so the wider
   words still fit on one line.
   ============================================================ */
.aoe-tabs { display: none; }

@media (max-width: 760px) {
  .aoe-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--surface);
    border-top: 1px solid var(--rule-c);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .aoe-tabs a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 6px;
    text-decoration: none; color: var(--dim);
    -webkit-tap-highlight-color: transparent;
  }
  .aoe-tabs svg { width: 23px; height: 23px; display: block; }
  .aoe-tabs span {
    font-family: "IBM Plex Mono", "Consolas", monospace;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  }
  .aoe-tabs a.on { color: var(--text); }
  .aoe-tabs a.on svg { stroke-width: 2.1; }
  .aoe-tabs a.on::before {
    content: ""; position: absolute; margin-top: -8px;
    width: 26px; height: 2px; background: var(--accent); border-radius: 2px;
  }
  .aoe-tabs a { position: relative; }

  /* the bar sits over the page, so the page needs room under it */
  body.has-tabs { padding-bottom: 64px; }
  /* the homepage's old text bar is replaced by this one */
  body.has-tabs .mobar { display: none; }
}

/* An installed app gets the bar at any width — that is what makes it
   feel like an app rather than a page in a browser. */
@media (display-mode: standalone) {
  .aoe-tabs { display: grid; }
  body.has-tabs { padding-bottom: 64px; }
}

/* On a phone the header no longer repeats what the bottom bar
   already shows. Anything NOT in the bar — Sign out above all —
   stays in the header where it has always been. */
@media (max-width: 760px) {
  body.has-tabs .masthead nav a[data-in-tabs] { display: none; }
}