/* ==========================================================================
   lwy-readable.css — the last word on readability, card surfaces and clipping.

   WHY THIS FILE EXISTS
   Luwy's styling is spread over seventeen stylesheets, and each page loads a
   different subset of them in a different order. That is why the same
   "text I can't read" bug kept coming back: a fix made in one file took effect
   on the app page and silently did nothing on Home, Onboarding or Packages,
   because those pages never load the file it was made in.

   This file is loaded LAST on EVERY page, so a fix made here holds everywhere.
   New readability, card-surface and clipping fixes belong in here, not in one
   of the older files.

   THE THREE FAULTS IT CORRECTS
   1. A pale surface forced with !important, with no matching dark-mode rule.
      In dark mode the page ink is cream (#F7F3EA), so cream text landed on a
      near-white card and disappeared.
   2. A solid accent background with white text. Several brand tokens FLIP in
      dark mode (--cocoa becomes #ECE5D7, --teal #D7DEEB, --brick #F2A18D), so
      "white on brown" quietly became "white on near-white".
   3. Containers painting their own panel behind the cards they hold.

   HOW IT WORKS
   Rather than fight each rule with another !important colour, it re-declares
   the ink tokens ON the surface. Every descendant then computes a readable
   colour by itself, including text that uses --muted or --cocoa.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Pale surfaces always carry dark ink, in BOTH themes.

   This list is NOT hand-picked. It was generated by scanning every rule in
   every stylesheet for a background that is an opaque pale colour set with no
   ink colour and no dark-mode counterpart. Excluded on purpose: decorative
   fills that hold no text (bars, meters, tape, gradients), translucent washes
   over an unknown backdrop, and any surface blended into a theme token such as
   var(--card), which is already dark in dark mode.

   Re-declaring the ink tokens ON the surface fixes every descendant at once,
   including small print that uses --muted and links that use --cocoa.
   ---------------------------------------------------------------------- */
#pgBody .impromptu-config,
#pgBody .impromptu-setup,
#pgBody .practice-config,
#pgBody .practice-setup,
#pgBody .spot-setup,
#pgBody .topic-setup,
#pgBody [class*="impromptu"] .panel,
#pgBody [class*="practice"] .panel,
.auth-card .btn.outline:hover,
.auth-card .btn.soft:hover,
.bk-pattern-choice,
.bk-st-custom,
.bk-upload:hover,
.btn.light:hover,
.drill-card.rec,
.habit-card,
.habit-row,
.impromptu-config,
.impromptu-setup,
.lwy-art-directed .evc,
.lwy-art-directed .evc .evc-tag,
.lwy-art-directed .page-home .home-next .nx-go:hover,
.lwy-art-directed .quote-list > .quote-row:nth-child(n),
.lwy-art-directed .quote-row,
.lwy-art-directed .quote-row:nth-child(3n) .eyebrow,
.lwy-art-directed :is(.feature-card,.evidence-card,.ev-card,.evc,.research-card,.proof-card,.col-item),
.lwy-art-directed :is(.hard-moments,.hard-moments-page,.page-hard-moments,#hardMoments) :is(.card,.moment-card,.feature-card,.step-card):nth-child(3n),
.lwy-art-directed :is(.hard-moments,.hard-moments-page,.page-hard-moments,#hardMoments) :is(.card,.moment-card,.feature-card,.step-card):nth-child(3n+2),
.lwy-art-directed :is(.plan.featured,.plan-card.featured,.pricing-card.featured,.pricing-tier.featured, [data-featured="true"],.recommended-plan),
.lwy-art-directed.root-home #compare .vs tr,
.lwy-art-directed.root-home .preview,
.measured div:nth-child(1),
.measured div:nth-child(2),
.measured div:nth-child(3),
.measured div:nth-child(4),
.measured>div:nth-child(1),
.measured>div:nth-child(2),
.measured>div:nth-child(3),
.measured>div:nth-child(4),
.mic.live,
.pcard[data-style="brick"],
.pcard[data-style="glow"],
.pcard[data-style="honey"],
.pcard[data-style="teal"],
.pg-plan:nth-child(3n+1),
.pg-plan:nth-child(3n+2),
.pg-plan:nth-child(3n+3),
.pr-ai:not(.loading),
.pr-setup .pr-card .field,
.practice-config,
.practice-setup,
.proof span:nth-child(3n),
.proof span:nth-child(3n+1),
.proof span:nth-child(3n+2),
.proof span:nth-child(3n+3),
.qb-path .qb-step:nth-child(5n+4) .qb-n,
.qb-step:nth-child(3n),
.qb-step:nth-child(3n+2),
.qb-step:nth-child(4n),
.qb-step:nth-child(4n+2),
.sc-card,
.sc-group,
.setup .btn.quiet:hover,
.spot-setup,
.stage.sim .btn.light:hover,
.topic-setup,
.tp-grid .tp-card:nth-child(3n + 2),
.tp-grid .tp-card:nth-child(3n) {
  --ink: #2F2219;
  --text: #2F2219;
  --ink-1: #2F2219;
  --ink-2: #5E5048;
  --ink-3: #6F6168;
  --muted: #5E5048;
  --faint: #6F6168;
  --text-muted: #5E5048;
  --text-faint: #6F6168;
  --cocoa: #604531;
  --cocoa-hover: #4F3827;
  --accent: #604531;
  --claret: #604531;
  --line: #D9D2C8;
  --border: #D9D2C8;
  --hairline: #D9D2C8;
  color: #2F2219;
}

/* Some dark-mode rules set pale ink on the children of these same pale surfaces, and an explicit
   colour beats a re-scoped token. These put it back, for the surface and everything inside it. */
html[data-theme="dark"] :is(
  .pr-setup .pr-card .field,
  .drill-card.rec,
  .habit-card, .habit-row, .sc-card, .sc-group,
  .qb-step, .tp-card, .pg-plan,
  .pcard[data-style="glow"], .pcard[data-style="honey"],
  .pcard[data-style="teal"], .pcard[data-style="brick"],
  .practice-setup, .impromptu-setup, .spot-setup,
  .practice-config, .topic-setup, .impromptu-config,
  .measured > div, .pr-ai:not(.loading), .result-card
),
html[data-theme="dark"] :is(
  .pr-setup .pr-card .field,
  .drill-card.rec,
  .habit-card, .habit-row, .sc-card, .sc-group,
  .qb-step, .tp-card, .pg-plan,
  .pcard[data-style="glow"], .pcard[data-style="honey"],
  .pcard[data-style="teal"], .pcard[data-style="brick"],
  .practice-setup, .impromptu-setup, .spot-setup,
  .practice-config, .topic-setup, .impromptu-config,
  .measured > div, .pr-ai:not(.loading), .result-card
) :is(b, strong, small, span, p, li, h1, h2, h3, h4, label, em, i, a, input, select, textarea, div) {
  color: #2F2219 !important;
}

/* -------------------------------------------------------------------------
   1b. The mirror fault: a DARK surface with no ink set, which goes
   dark-on-dark in LIGHT mode. Two of the pressure cards are deliberately dark,
   so they are excluded from the rule above and given pale ink here instead.
   ---------------------------------------------------------------------- */
.pcard[data-style="claret"],
.pcard[data-style="ink"],
.lwy-art-directed .site-nav.open .wrap,
.root-home.lwy-art-directed .site-nav .wrap {
  --ink: #F7F3EA;
  --text: #F7F3EA;
  --ink-1: #F7F3EA;
  --ink-2: #E6DCD0;
  --ink-3: #D6C8B4;
  --muted: #E6DCD0;
  --faint: #D6C8B4;
  --text-muted: #E6DCD0;
  --text-faint: #D6C8B4;
  --cocoa: #F7F3EA;
  --accent: #FBE39D;
  color: #F7F3EA;
}
:is(.pcard[data-style="claret"], .pcard[data-style="ink"])
  :is(b, strong, small, span, p, li, h1, h2, h3, h4, label, em) {
  color: #F7F3EA;
}

/* A heading or small print inside those surfaces that hard-codes page ink. */
.habit-card :is(h1, h2, h3, h4, p, li, small, span, b, strong, em, label, td, th),
.habit-row :is(h1, h2, h3, h4, p, li, small, span, b, strong, em, label),
.faq-panel :is(h1, h2, h3, h4, p, li, small, span, b, strong, em, label),
.sc-group :is(h1, h2, h3, h4, p, li, small, span, b, strong, em, label),
.pr-setup .pr-card .field :is(p, small, span, b, strong, label, input, select, textarea),
.plan-card.featured :is(h1, h2, h3, h4, p, li, small, span, b, strong, em),
.pricing-card.featured :is(h1, h2, h3, h4, p, li, small, span, b, strong, em),
.pricing-tier.featured :is(h1, h2, h3, h4, p, li, small, span, b, strong, em) {
  color: inherit;
}

/* -------------------------------------------------------------------------
   2. Dark mode: a solid accent surface takes dark ink, never white.
   --cocoa, --teal, --brick and --good all turn PALE in dark mode, so every
   "white on accent" rule below was white-on-white until now. The segmented
   control (.seg button.on) is the toggle whose label could not be read.
   ---------------------------------------------------------------------- */
html[data-theme="dark"] :is(
  .seg button.on,
  .db-chip.up,
  .db-chip.down,
  .ch-av,
  .cf-acts .btn.danger,
  .st-signout .signout-btn:hover,
  .skip,
  .chip.on,
  .pill.on,
  .tab.on,
  .toggle.on,
  .switch.on
) {
  color: #241A12 !important;
}

html[data-theme="dark"] :is(.seg button.on, .chip.on, .pill.on, .tab.on) :is(span, b, small, svg) {
  color: inherit !important;
  fill: currentColor;
}

/* The meter fills that use --cocoa keep their shape; only text on them changes. */
html[data-theme="dark"] :is(.hp-c1, .hp-c2) i { color: #241A12; }

/* -------------------------------------------------------------------------
   3. Only cards carry a colour. The containers behind them stay on the page
   background, so a card reads as a card instead of a panel inside a panel.
   ---------------------------------------------------------------------- */
:is(
  .cards, .card-grid, .cardlist, .card-list,
  .grid-wrap, .list-wrap, .table-wrap, .section-wrap,
  .db-track, .db-scores, .db-grps,
  .result-actions, .home-grid, .tile-grid,
  .plan-grid, .pricing-grid, .feature-grid
) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Tables sit on the page, not on a slab of their own. A header row may keep a
   tint, but it must declare its own ink so it never inherits the wrong one. */
:is(table, thead, tbody, tfoot, tr) {
  background: transparent;
}
.cmp thead th {
  background: var(--paper-2, transparent);
  color: var(--ink);
}
html[data-theme="dark"] .cmp thead th {
  background: var(--paper-2);
  color: var(--ink);
}

/* A section is a region of the page, not a surface. Bands and heroes that are
   deliberately dark keep theirs: they are named, and named things are spared. */
section:not([class]),
section.plain,
section.section {
  background: transparent;
}

/* -------------------------------------------------------------------------
   4. Nothing is clipped, and nothing overlaps the navigation.
   Fixed heights and overflow:hidden on text containers are what cut words in
   half on a narrow screen. Text wraps; only decorative strips may clip.
   ---------------------------------------------------------------------- */
:is(
  .card, .db-card, .db-said, .db-quote, .db-tiles div,
  .pcard, .plan-card, .pricing-card, .habit-card, .faq-panel,
  .tile, .bubble, .note, .field, .sc-group
) {
  overflow: visible;
  min-width: 0;
}

:is(h1, h2, h3, h4, p, li, small, label, dd, dt, figcaption, .eyebrow, .lead) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* A button's label is never cut: it wraps instead, and the button grows.
   Icon-only and decorative buttons (dots, bars, close crosses) are left alone,
   because forcing a tap-target height on them would break the control. */
:is(.btn, .chip, .pill):not(.iconbtn):not(.db-dot) {
  white-space: normal;
  height: auto;
  min-height: 44px;          /* a comfortable tap target on a phone */
  overflow-wrap: anywhere;
}

/* Room under the fixed bars, so the last card is never hidden behind them. */
@media (max-width: 760px) {
  :is(.page, .page-body, #content, #simBody) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* -------------------------------------------------------------------------
   5. The debrief: readable on a phone, and never a dead end.
   ---------------------------------------------------------------------- */
.db-head {
  flex-wrap: wrap;
  gap: 8px 10px;
}
.db-skip {
  min-height: 36px !important;
  padding: 6px 12px;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 99px;
}
.debrief.all .db-skip,
.debrief.finished .db-skip { display: none; }

/* The debrief card is forced to a pale cream in BOTH themes (#simBody .db-card).
   Two things then went wrong after dark:
   1. Small print inside it uses --muted, which is pale in dark mode: pale on pale.
   2. The quote block, tiles and filler chips have a dark-mode rule that DARKENS them,
      so they became a dark block sitting inside a pale card, and the card's own dark
      ink then sat on a dark background: invisible either way.
   The card is pale, so everything in it is treated as pale. */
#simBody .db-card,
#simBody .db-wait {
  --ink: #2F2219;
  --text: #2F2219;
  --muted: #5E5048;
  --faint: #6F6168;
  --text-muted: #5E5048;
  --text-faint: #6F6168;
  --cocoa: #604531;
  --accent: #604531;
  --hairline: #D9D2C8;
  --line: #D9D2C8;
}
html[data-theme="dark"] #simBody .db-card :is(.db-quote, .db-tiles div, .db-fillers span) {
  background: #ECE5D7 !important;
  color: #2F2219 !important;
}
html[data-theme="dark"] #simBody .db-card :is(.db-lead, .db-mood, .db-sub, .db-note, .db-ev, .db-how, .db-rl, .db-gl, small, span, p, li, b, strong, em, summary, h3, h4):not(.db-chip):not(.db-k span):not(.db-medal) {
  color: #2F2219 !important;
}
html[data-theme="dark"] #simBody .db-card .db-mood b,
html[data-theme="dark"] #simBody .db-card .db-dl b { color: #2F2219 !important; }

/* These two chips carried white text on a token that turns pale after dark. */
.db-chip.up { background: #2F6E62; color: #FFFFFF; }
.db-chip.down { background: #9E2F17; color: #FFFFFF; }
html[data-theme="dark"] .db-chip.up { background: #D7DEEB; color: #1B2A2E !important; }
html[data-theme="dark"] .db-chip.down { background: #F2A18D; color: #3A1309 !important; }

/* The waiting card and the quote block state their own ink in both themes. */
.db-wait, .db-card { color: var(--ink); }
.db-quote { color: var(--ink); }
html[data-theme="dark"] .db-said.down { background: color-mix(in srgb, #FCD8A2 16%, transparent); }
html[data-theme="dark"] .db-said.up { background: color-mix(in srgb, #D7DEEB 12%, transparent); }

@media (max-width: 420px) {
  .db-card { padding: 16px 14px; }
  .db-tiles { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
  .db-tiles b { font-size: 22px; }
  .db-nav { flex-wrap: wrap; }
  .db-nav .db-next { flex: 1 1 100%; order: -1; }
}

/* -------------------------------------------------------------------------
   6. Form controls and placeholders are readable in both themes.
   A placeholder at the browser default is far too faint on a cream page.
   ---------------------------------------------------------------------- */
:is(input, select, textarea) {
  color: var(--ink);
  background-color: var(--surface, transparent);
}
::placeholder { color: var(--faint, #6F6168); opacity: 1; }
html[data-theme="dark"] ::placeholder { color: #B3A390; opacity: 1; }

/* A control sitting on one of the pale surfaces in section 1 inherits its ink. */
.pr-setup .pr-card .field :is(input, select, textarea) {
  color: #2F2219;
  background-color: transparent;
}

/* -------------------------------------------------------------------------
   7. Pressure and review controls stay usable on a small screen.
   ---------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pr-setup .pr-card { padding: 14px; }
  .pr-setup .pr-row { flex-wrap: wrap; gap: 8px; }
  .seg { flex-wrap: wrap; }
  .seg button { flex: 1 1 auto; min-width: 0; font-size: 14px; }
  #simBody .result-actions { grid-template-columns: 1fr; }
  #simBody .result-actions .btn.quiet { min-height: 44px; }
}

/* Progress indicators are thin by design: the tap-target floor must not apply. */
:is(.db-bar, .db-dot, .xp-bar, .xp-progress, .meter) {
  min-height: 0 !important;
}
.db-dot { height: 6px; }

/* -------------------------------------------------------------------------
   8. Leaderboard rank banner (.lg-hero) in dark mode.
   Two stylesheets fought here. lwy-card.css designed the dark banner as dark
   with a gold "#1"; lwy-one-shot-fixes.css later forced the banner to cream in
   dark mode too, but the gold-text rule was stronger and survived. So the rank,
   "of N ranked", the rating and the line under them were gold and cream on
   cream: invisible. The banner now follows the dark design it was built for.
   Your own row (.lg-row.me) is already dark in dark mode and is left alone.
   Light mode is unchanged: a cream banner with cocoa text.
   ---------------------------------------------------------------------- */
html[data-theme="dark"] body .lg-hero {
  background: linear-gradient(125deg, #3B2C21, #2F2219) !important;
  border-color: #5A4938 !important;
  color: #F7F3EA !important;
}
html[data-theme="dark"] body .lg-hero .lg-spot b,
html[data-theme="dark"] body .lg-hero .lg-spot .lg-n {
  color: #FBE39D !important;
  -webkit-text-fill-color: #FBE39D !important;
}
html[data-theme="dark"] body .lg-hero .lg-spot > span,
html[data-theme="dark"] body .lg-hero .lg-line {
  color: #F7F3EA !important;
  -webkit-text-fill-color: #F7F3EA !important;
}

/* -------------------------------------------------------------------------
   9. Live simulator on a phone.

   (a) The controls under the mic (Hands-free, Type instead, Hint, Mute voice)
   were dark text on the dark stage. "#simBody .text-button" forces dark ink
   and an iPhone-only text fill colour on EVERY text button in Simulate. It is
   meant for the pale debrief cards, but it also caught these, which sit on
   the dark stage. The stage is dark in both themes, so they take light ink.

   (b) The stage did not fill the screen: it was held at the screen height
   minus 12px, with rounded corners and padding, so it floated as a card with
   a strip of page showing underneath. The screen-height unit (dvh) already
   leaves room for Safari's own bars, so the gap was never needed. On a phone
   the stage now covers the whole screen, edge to edge, and the bottom
   controls keep clear of the home indicator with the safe-area inset.
   ---------------------------------------------------------------------- */
#simBody #stage.stage.sim .stage-actions .text-button,
body.in-sim #stage.stage.sim .stage-actions .text-button {
  color: #E6DCD0 !important;
  -webkit-text-fill-color: #E6DCD0 !important;
  opacity: 1 !important;
}
#simBody #stage.stage.sim .stage-actions .text-button[aria-pressed="true"],
body.in-sim #stage.stage.sim .stage-actions .text-button[aria-pressed="true"] {
  color: #FBE39D !important;
  -webkit-text-fill-color: #FBE39D !important;
}
#simBody #stage.stage.sim .stage-actions .text-button:hover {
  color: #F7F3EA !important;
  -webkit-text-fill-color: #F7F3EA !important;
}

@media (max-width: 860px) {
  /* Only while the stage is actually on screen: the outcome and debrief that follow use the normal page colours. */
  html:has(body.in-sim #stage.stage.sim), body.in-sim:has(#stage.stage.sim) { background: #241A12 !important; }
  body.in-sim #stage.stage.sim {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: env(safe-area-inset-top, 0px) 14px 0 !important;
    box-sizing: border-box !important;
  }
  body.in-sim #stage.stage.sim .stage-actions {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* -------------------------------------------------------------------------
   10. The top bar and the bottom tab bar are solid. In dark mode they were
   94% opaque, so headings and list text scrolling underneath showed through
   as a ghost ("Practise with" behind the logo, a leaderboard note behind the
   tabs). Navigation must never overlap readable text.
   ---------------------------------------------------------------------- */
.topbar, .tabbar { background: var(--paper, #F7F3EA) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .tabbar { background: #2F2219 !important; }

/* -------------------------------------------------------------------------
   11. Simulator controls fit a phone. On a 390px screen the "Send" label
   broke into "Se / nd" and the last control ("Mute voice") ran off the edge.
   Labels never break mid-word; the control row wraps onto a second line
   instead of being cut off.
   ---------------------------------------------------------------------- */
#stage.stage.sim .type-row #sendTyped { white-space: nowrap !important; flex: 0 0 auto !important; min-width: 72px !important; }
#stage.stage.sim .type-row textarea { min-width: 0 !important; flex: 1 1 auto !important; }
#stage.stage.sim .stage-actions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; column-gap: 6px !important; row-gap: 0 !important; overflow: visible !important; }
#stage.stage.sim .stage-actions .text-button { white-space: nowrap !important; flex: 0 0 auto !important; padding-left: 10px !important; padding-right: 10px !important; }
#stage.stage.sim #fEnd { white-space: nowrap !important; flex: 0 0 auto !important; }

/* -------------------------------------------------------------------------
   12. Simulator chips and highlights, both themes. The stage is always dark,
   but several stage elements took their colour from the LIGHT page theme:
     - the highlighted phrase in your own reply ("I think I deserve") was
       near-white on a pale bubble in light mode,
     - "They are not convinced" was grey-on-dark in light mode,
     - the "−4" score chip and the "Curveball" label were just under the
       readable line on their brown chips.
   ---------------------------------------------------------------------- */
.stage.sim .bubble.me mark.hl,
.stage.sim .bubble.me mark.hl.down,
.stage.sim .bubble.me mark.hl.up,
.stage.sim .bubble.me mark.hl.flat { color: #2F2219 !important; -webkit-text-fill-color: #2F2219 !important; }
.stage.sim .bubble.me mark.hl.down { background: rgba(196, 84, 60, .18) !important; text-decoration-color: #B4472F !important; }
.stage.sim .room-read .rr.grow, .stage.sim .room-read .rr.warn,
.stage.sim .room-read .rr.down, .stage.sim .room-read .rr.flag { color: #E6DCD0 !important; -webkit-text-fill-color: #E6DCD0 !important; }
.stage.sim .impact-chip.down b { color: #F8BCAE !important; -webkit-text-fill-color: #F8BCAE !important; }
.stage.sim .bubble.ai .ask-chip.curve b { color: #F8BCAE !important; -webkit-text-fill-color: #F8BCAE !important; }

/* -------------------------------------------------------------------------
   13. Home "practise next" card and the skip link.
   The first home card (.hp-c0) is a fixed dark brown in BOTH themes, so its
   text is always cream. It had been listed with the accent surfaces that turn
   pale in dark mode, which made "Job interview" dark-on-dark there.
   The keyboard skip link uses fixed colours so it reads in both themes.
   ---------------------------------------------------------------------- */
.hp-c0, .hp-c0 b, .hp-c0 span, .hp-c0 small, .hp-c0 strong { color: #F7F3EA !important; -webkit-text-fill-color: #F7F3EA !important; }
.hp-c0 i { color: #2F2219 !important; -webkit-text-fill-color: #2F2219 !important; }
.skip-link { background: #2F2219 !important; color: #F7F3EA !important; -webkit-text-fill-color: #F7F3EA !important; }
html[data-theme="dark"] .skip-link { background: #F7F3EA !important; color: #2F2219 !important; -webkit-text-fill-color: #2F2219 !important; }

/* -------------------------------------------------------------------------
   14. Features page: the small labels ("Side by side", "Practice tools") sat
   in a faded brown on the pale blue bands, just under the readable line.
   ---------------------------------------------------------------------- */
section.band:is(#compare, .feature-tools-section) .eyebrow { color: #4A3527 !important; -webkit-text-fill-color: #4A3527 !important; opacity: 1 !important; }

/* -------------------------------------------------------------------------
   15. Score page and debrief text in dark mode, plus small labels in light.
   An older rule paints the score page cream with espresso text. Another rule
   (section 3) correctly makes those wrappers transparent so the page colour
   shows, but the espresso text stayed: "Full breakdown", every skill name
   and score, and the turn-by-turn timeline were dark on dark. In dark mode
   the wrappers now carry cream text; the pale cards inside keep their own
   dark ink (sections 1 and 5).
   ---------------------------------------------------------------------- */
html[data-theme="dark"] :is(#simBody, #simBody .debrief, #simBody .deep, #simBody .db-scores, #simBody .score-summary, #simBody .score-grid, #simBody .scores-wrap, #simBody .review-scores, #simBody .debrief-score-bg, #simBody .score-cards-wrap) {
  color: #F7F3EA !important;
}
/* Light mode: small labels on pale panels ("Resilience", "Your next step") and the green "+5" gains. */
html:not([data-theme="dark"]) .insight .eyebrow { color: #604531 !important; -webkit-text-fill-color: #604531 !important; }
html:not([data-theme="dark"]) .chip-delta.up { color: #2C6A60 !important; -webkit-text-fill-color: #2C6A60 !important; }
html:not([data-theme="dark"]) #simBody .insight.next-step .eyebrow,
html:not([data-theme="dark"]) #simBody .insight .eyebrow { color: #604531 !important; -webkit-text-fill-color: #604531 !important; opacity: 1 !important; }
html[data-theme="dark"] #simBody .timeline mark.hl { color: #F7F3EA !important; -webkit-text-fill-color: #F7F3EA !important; }

/* Scene briefing, dark mode: the pale scene card keeps dark labels ("What is
   happening", "You", "Them", "How they speak"); the dark "Pressure and
   options" panel keeps light helper text. */
html[data-theme="dark"] #simBody .scene-card .k { color: #604531 !important; -webkit-text-fill-color: #604531 !important; }
html[data-theme="dark"] #simBody .brief-options :is(.small, .pressure-helper, .pressure-intro span, .p-auto, summary b, .room-toggle b) { color: #E6DCD0 !important; -webkit-text-fill-color: #E6DCD0 !important; opacity: 1 !important; }

/* -------------------------------------------------------------------------
   16. Score page wrappers. Only cards carry colour. The strip holding the
   four score tiles and the debrief wrapper were painted (grey / cream full
   width) in dark mode; they now show the page behind them, and the debrief
   header text ("Card 1 of 5", "Show all") follows the page ink.
   ---------------------------------------------------------------------- */
#simBody .measured, #simBody .debrief { background: transparent !important; box-shadow: none !important; }
html[data-theme="dark"] #simBody .debrief > .db-head :is(.db-step, .db-all),
html[data-theme="dark"] #simBody .debrief > .db-note { color: #F7F3EA !important; -webkit-text-fill-color: #F7F3EA !important; }
html[data-theme="dark"] #simBody .debrief > .db-head .db-skip { background: #F7F3EA !important; color: #2F2219 !important; -webkit-text-fill-color: #2F2219 !important; }