/* ===========================================================================
   V100 — the dark theme's missing half.

   v088 repaints the text tokens (--ink, --muted, --line ...). It does not
   repaint every surface those tokens sit on, and on the surfaces below the
   background stayed white or near-white while the ink went pale, so the
   content was still there and no longer readable.

   Measured before this file, with a full-page text contrast sweep (every
   visible text node, backgrounds alpha-composited up the ancestor chain, both
   themes, desktop 1440 and phone 390, every panel plus the workspace):

     #workspace .workHead > div > b       1.04   "Your Working"
     .archiveEmpty > b                    1.13
     .workspaceSubmit > div > b           1.17
     .v027MsHead > b                      1.17
     .answerPaperHeader span              2.93
     #dashboardZeroState span             2.93
     .mobileNav > button                  4.02   (16 labels, phone)

   The rules below move the surface AND re-state the ink on it. Repainting the
   background alone leaves the defect in place; repainting the ink alone leaves
   a pale heading sitting on a white card.

   Deliberately NOT repainted, because they are content rather than chrome and
   a white page is what a page is: the answer paper, the answer-paper header,
   and the question images. Where text sits on that paper its colour is pinned
   to the light theme's values instead of being repainted dark.

   Surfaces use v088's own dark scale so this file adds no new palette:
     page #0e1420   bar #141c2a   card #1a2333   line #2a3648
     ink  #e8edf6   muted #8b98ab
   =========================================================================== */

/* Native chrome follows the theme as well. Without this the scrollbars, the
   date pickers and the caret stay light-on-dark: measured on the workspace,
   two light scrollbars sat across an otherwise dark page. */
html[data-ial-theme="dark"] { color-scheme: dark; }

/* ---------------------------------------------- workspace: "Your Working" ---
   The heading of the working column. Its strip has no background rule of its
   own, so it inherited the panel's light surface while the heading took the
   dark theme's pale ink: measured 1.04. */
html[data-ial-theme="dark"] #workspace .workHead {
  background: #141c2a;
  border-bottom-color: #2a3648;
}
html[data-ial-theme="dark"] #workspace .workHead b,
html[data-ial-theme="dark"] #workspace .workHead strong { color: #e8edf6; }
html[data-ial-theme="dark"] #workspace .workHead span { color: #8b98ab; }

/* ------------------------------------ workspace: the "Self Mark" footer ---
   index.html pins this one white with !important, so the override needs both
   a higher specificity and !important of its own to land. */
html[data-ial-theme="dark"] body.workspace-mode .workspaceSubmit {
  background: rgba(20, 28, 42, .97) !important;
  border-top-color: #2a3648 !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .38) !important;
}
html[data-ial-theme="dark"] body.workspace-mode .workspaceSubmit b { color: #e8edf6 !important; }
html[data-ial-theme="dark"] body.workspace-mode .workspaceSubmit span { color: #8b98ab !important; }

/* ------------------------------- workspace: the ink stage and its rails --- */
html[data-ial-theme="dark"] #workspace .inkWorkspace,
html[data-ial-theme="dark"] #workspace .workspaceHints { background: #141c2a; }
html[data-ial-theme="dark"] #workspace .inkWorkspace,
html[data-ial-theme="dark"] #workspace .workspaceHints { color: #8b98ab; }

/* The page-rail footer under the paper ("Page 1 - Remove page - Add page -
   Save draft"). It sits against the paper, so it keeps the paper's light
   surface and takes the paper's ink instead - same treatment as the header. */
html[data-ial-theme="dark"] #workspace .canvasFooter { background: #ffffff; color: #334155; }
html[data-ial-theme="dark"] #workspace .canvasFooter b,
html[data-ial-theme="dark"] #workspace .canvasFooter strong { color: #172033; }

/* ------------------------------------------- workspace: the ink toolbar ---
   The toolbar's background is pinned by a later-loaded !important rule, so
   this override repeats the whole :is() chain to out-specify it. The expander
   button inside it was styled for a dark bar (6% white on light is nothing)
   and needs the light-theme values restated for both themes. */
html[data-ial-theme="dark"] body :is(#workspace, #papers) .inkToolbar {
  background: #141c2a !important;
  border-bottom-color: #2a3648 !important;
}
html[data-ial-theme="dark"] body :is(#workspace, #papers) .inkToolbar .v097PenMore {
  border-color: rgba(255, 255, 255, .38) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #e0e7ff !important;
}

/*   The tool chips inside it. v078 pins them white with
     `html body :is(#workspace,#papers) .inkToolbar .ialPenTool` — :is() carries
     the id, so that selector is (1,2,2) and only a rule that repeats the whole
     chain can out-specify it.

     Why this is needed at all: `color-scheme: dark` above makes the browser
     resolve `<button>`'s default `color: buttontext` to white. These chips are
     the only buttons on the page with no explicit colour of their own, so they
     went to 1.00 the moment the native chrome started following the theme —
     and their pen previews are `stroke="currentColor"` svg, so the drawing went
     white with them. Measured: the three history chips read 21:1 before the
     flag and 1:1 after; the four pen previews were never measured because a
     text sweep cannot see a stroke.

     The surface and the ink are repainted together, as always:
       chip #212b3a / ink #e8edf6   (was #fff / #fff)
     `background` is the raise token (--d-raise) so the chips sit above the bar
     (#141c2a) instead of punching holes in it. */
html[data-ial-theme="dark"] body :is(#workspace, #papers) :is(.inkToolbar, .sourceInkToolbar, .paperInkToolbar) .ialPenTool:not(.active) {
  background: #212b3a !important;
  border-color: #33405a !important;
  color: #e8edf6 !important;
}
html[data-ial-theme="dark"] body :is(#workspace, #papers) :is(.inkToolbar, .sourceInkToolbar, .paperInkToolbar) .ialPenTool.active {
  background: #4f46e5 !important;
  border-color: #6d5ff0 !important;
  color: #ffffff !important;
}

/*   The four thickness chips are pinned white by the same v078 block and were
     the last light rectangle left on the dark bar (28x26 each, measured
     rgb(255,255,255) against a rgb(20,28,42) bar). The bar they draw is
     #334155, which is legible on white and invisible on the new surface, so it
     flips with the chip: #e8edf6 on #212b3a. The active chip keeps its indigo,
     and its bar is already pinned white by v078. */
html[data-ial-theme="dark"] body :is(#workspace, #papers) :is(.inkToolbar, .sourceInkToolbar, .paperInkToolbar) .ialWidthDot:not(.active) {
  background: #212b3a !important;
  border-color: #33405a !important;
}
html[data-ial-theme="dark"] body :is(#workspace, #papers) :is(.inkToolbar, .sourceInkToolbar, .paperInkToolbar) .ialWidthDot:not(.active) i {
  background: #e8edf6 !important;
}
html[data-ial-theme="dark"] body :is(#workspace, #papers) :is(.inkToolbar, .sourceInkToolbar, .paperInkToolbar) .ialWidthDot.active {
  border-color: #6d5ff0 !important;
}

/* ------------------------------------- workspace: the mark scheme pane ---
   White pane, dark-theme ink in its headings: measured 1.17. */
html[data-ial-theme="dark"] body.ial-v027 .v027MarkSchemePane {
  background: #141c2a;
  border-color: #2a3648;
}
html[data-ial-theme="dark"] .v027MsHead,
html[data-ial-theme="dark"] .v027MsHead b { color: #e8edf6; }
html[data-ial-theme="dark"] .v027FullMs summary { color: #8b98ab; }

/* ------------------------------------------- the answer paper stays white ---
   The paper is white in both themes on purpose. Its own text was taking the
   dark theme's muted grey, which is 2.93 on white; pin it to the paper. */
html[data-ial-theme="dark"] .answerPaperHeader { color: #172033; }
html[data-ial-theme="dark"] .answerPaperHeader span { color: #64748b; }

/*   The part markers printed down the left edge of the continuous paper —
     `(a)(i)`, `(b)`, `(c)`, one per part of the question. They are the only
     way to tell which part a run of writing belongs to, and they were the one
     element the online sweep kept finding that the local one could not: the
     local dev server never paints the continuous paper, so `#canvasPartGuide`
     measured 0x0 there and every sweep skipped it for being too small.
     Measured stable at 3.05 on the white paper in BOTH themes, on desktop,
     every sample: v043 raised them to 12px but left them at #8b94a6.

     #64748b is the light theme's own --c-muted and clears the paper at 4.76.
     It is still visibly lighter than the body ink (#172033), so the guide stays
     a margin marker rather than competing with the question. */
html body.ial-v030 .canvasPartGuide span { color: #64748b !important; }

/* ----------------------------------------------- the empty-state cards ---
   Three cards with hard-coded near-white fills and no theme guard. Their
   headings take the dark theme's --ink, so the heading went pale on pale. */
html[data-ial-theme="dark"] .archiveEmpty {
  background: #1a2333;
  border-color: #2a3648;
}
html[data-ial-theme="dark"] .archiveEmpty b { color: #e8edf6; }
html[data-ial-theme="dark"] .archiveEmpty span,
html[data-ial-theme="dark"] .archiveEmpty p { color: #8b98ab; }

html[data-ial-theme="dark"] .myWorkEmpty {
  background: #1a2333;
  border-color: #2a3648;
}
html[data-ial-theme="dark"] .myWorkEmpty b { color: #e8edf6; }
html[data-ial-theme="dark"] .myWorkEmpty span,
html[data-ial-theme="dark"] .myWorkEmpty p { color: #8b98ab; }

html[data-ial-theme="dark"] .ial-v028 .dashboardZeroState {
  background: #141c2a;
  border-color: #2a3648;
  color: #8b98ab;
}

/*   The fourth empty state, and the only one whose text is CSS-generated:
     `body.ial-v030 .attemptList:empty::after` in v035 paints a white card and
     writes the sentence with `content:`. Every sweep before this one walked
     real text nodes, so the string did not exist as far as they were concerned
     — a white slab on the dark Review page that four "0 failures" runs in a row
     agreed was not there. The probe now walks ::before/::after as well.
     --c-muted is #8b98ab in the dark theme; on v035's hard-coded #fff that is
     3.11, so both the fill and the ink move. */
html[data-ial-theme="dark"] body.ial-v030 .attemptList:empty::after {
  background: #1a2333;
  border-color: #2a3648;
  color: #a8b6c9;
}

/* ---------------------------------------------------- phone bottom nav ---
   v030 pins this white. Six labels at 4.02 on white in dark mode, and a white
   slab across the bottom of an otherwise dark phone screen. */
html[data-ial-theme="dark"] body.ial-v030 .mobileNav {
  background: #0e1420 !important;
  border-top-color: #2a3648 !important;
}
html[data-ial-theme="dark"] body.ial-v030 .mobileNav button { color: #8b98ab; }
html[data-ial-theme="dark"] body.ial-v030 .mobileNav button.active { color: #a5b4fc; background: #1c2a4d; }

/* The light theme's own copy of the same labels: #718096 on white is 4.02,
   measured on all six phone tabs in the default theme. :not(.active) is there
   on purpose - without it this rule out-specifies the active tab's blue and
   greys the tab you are on. */
html:not([data-ial-theme="dark"]) body.ial-v030 .mobileNav button:not(.active) { color: #64748b; }

/* ------------------------------------------------- the v072 bottom bar ---
   A fixed white bar that duplicates what v074's dark bar already shows on the
   workspace. Outside the workspace it is the only one, so it needs the theme
   rather than removal. */
html[data-ial-theme="dark"] #v072BottomBar {
  background: #141c2a !important;
  border-top-color: #2a3648 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .35) !important;
}
html[data-ial-theme="dark"] #v072BottomBar .v072-hint-btn {
  background: #2b2416 !important;
  color: #f7d488 !important;
}

/* ===========================================================================
   The "+" that opens the rest of each tool group — broken in the DEFAULT
   theme, which is why it is not inside a theme block.

   v097 styles it as a translucent-white chip with a pale indigo glyph,
   assuming the bar behind it is dark. Measured on the light bar it actually
   sits on: #c7d2fe on #f8fafc = 1.43, in light mode as well as dark. The
   button was there, clickable and unreadable. */
html:not([data-ial-theme="dark"]) body .v097PenMore {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
}
html:not([data-ial-theme="dark"]) body .v097PenMore:hover {
  background: #eef1f6 !important;
  color: #172033 !important;
}
html:not([data-ial-theme="dark"]) body .v097PenMore[aria-expanded="true"] {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}