/* shared/ks4-lesson.css — GENERATED by build_ks4.py: every distinct <style> block found in the
   <helmet> of the 14 lessons + 11 blocks, deduplicated (exact text match), first-seen order.
   Never hand-edit; re-run build_ks4.py. */

/* from ks4-chemistry-5.2.1.1-chemical-bonds.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }

/* from ks4-chemistry-5.2.2.4-properties-small-molecules.dc.html */
html, body { margin: 0; padding: 0; background: #FBF3E6; }
  a { color: var(--ks3-accent-text); }
  a:hover { color: var(--ks3-accent-hover); }
  @keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } * { transition: none !important; } }
  button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }
  input[type="range"] { accent-color: #A93411; }

/* from Ks4Chrome.dc.html */
[data-rail="side"] { display: none; }
  @media (min-width: 1340px) { [data-rail="side"] { display: block; } [data-rail="top"] { display: none !important; } }

/* from Ks4Choice.dc.html */
@keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .34s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } }

/* from Ks4Sort.dc.html */
@keyframes ks4-arrive { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  [data-arrive] { animation: ks4-arrive .3s ease-out both; }
  @media (prefers-reduced-motion: reduce) { [data-arrive] { animation: none !important; } }

/* ⊕ KS4-DARK-1 (DEPARTURES-PILOT.md) — disabled .ks3-reveal-btn/.ks3-retry
   measured 2.01:1 in dark mode (contrast_audit.py, disabled-control floor
   3.0). Design's own compiled Component sets `style="opacity:.45"` inline
   per instance when a control is disabled; that inline opacity fades an
   (in dark mode) light-cream fill and a near-black label toward the same
   dark page ground by the SAME factor, collapsing their mutual contrast
   from ~16:1 down to ~2:1. Only `!important` in a stylesheet can outrank
   an inline style, so this raises that one number. .7 keeps the control
   visibly duller than its enabled (opacity 1) state — still reads as
   "disabled" — while composited contrast clears the floor: measured
   4.57:1. */
@media (prefers-color-scheme: dark) {
  .rd[data-mode="ks3"]:not([data-theme="light"]) .ks3-reveal-btn:disabled,
  .rd[data-mode="ks3"]:not([data-theme="light"]) .ks3-retry:disabled {
    opacity: .7 !important;
  }
}
.rd[data-mode="ks3"][data-theme="dark"] .ks3-reveal-btn:disabled,
.rd[data-mode="ks3"][data-theme="dark"] .ks3-retry:disabled,
[data-theme="dark"] .rd[data-mode="ks3"] .ks3-reveal-btn:disabled,
[data-theme="dark"] .rd[data-mode="ks3"] .ks3-retry:disabled {
  opacity: .7 !important;
}

/* ⊕ KS4-DARK-2 (DEPARTURES-PILOT.md) — the end-matter `.ks3-tutor` card's
   h2/p measured 2.35:1 in dark mode (floor 3.0, both text large enough to
   qualify — see ks4-ds.css's own comment on the 19px/700 reclassification
   for the light-mode equivalent of this exact defect). `--ks3-ink` (light
   cream, #F3ECE0) and `--ks3-accent` (#F07A4E) BOTH flip light under the
   dark remap, so ink-on-accent — dark text on a mid orange in light mode —
   becomes light-on-light in dark mode. `--ks3-on-dark` (#16120E) is
   Design's own token for precisely this situation ("ink-filled controls
   ...flip to light fills in dark mode, so their label flips dark",
   shared/ks4-theme.css) — the accent card is exactly such a filled, bright
   surface. Measured 6.74:1. Nothing minted. */
@media (prefers-color-scheme: dark) {
  .rd[data-mode="ks3"]:not([data-theme="light"]) .ks3-endmatter .ks3-tutor h2,
  .rd[data-mode="ks3"]:not([data-theme="light"]) .ks3-endmatter .ks3-tutor p {
    color: var(--ks3-on-dark);
  }
}
.rd[data-mode="ks3"][data-theme="dark"] .ks3-endmatter .ks3-tutor h2,
.rd[data-mode="ks3"][data-theme="dark"] .ks3-endmatter .ks3-tutor p,
[data-theme="dark"] .rd[data-mode="ks3"] .ks3-endmatter .ks3-tutor h2,
[data-theme="dark"] .rd[data-mode="ks3"] .ks3-endmatter .ks3-tutor p {
  color: var(--ks3-on-dark);
}

/* ⊕ KS4-DARK-3 (DEPARTURES-PILOT.md) — the Ks4Write rung's bare
   `<textarea>` AND the FIFA-method calc rungs' bare `<input>` fields
   (Ks4Choice/Ks4Cfifa's per-line numeric/formula inputs, e.g.
   `#np-q1-line0`, `#<slug>-r2n`) carry no `::placeholder` rule anywhere in
   ks4-ds.css or ks4-theme.css, so both fall through to Chrome's own
   UA-default placeholder grey (~#757575) — measured 3.75:1 on
   `--ks3-card` (textarea) and 4.04:1 on `--ks3-ground` (input) in dark
   mode, both under the 4.5 floor for ordinary text (placeholders are real
   informational text a student reads, per this gate's own docstring).
   Found on all 14 lessons, not just the one this job's contrast_audit
   --only run first measured — contrast_audit.py --quick --gate --only
   "ks4 pilot" (job 4's full-pilot sweep) is what surfaced the `<input>`
   half of this; the fix is the SAME defect, same cause, one extra
   selector. `--ks3-ink-muted` is the SAME token the Write rung's own
   "Your answer" label immediately above its textarea already uses, so
   reusing it here gives every placeholder a properly
   de-emphasized-but-legible tone consistent with that label. Measured
   8.66:1 on --ks3-card, 9.35:1 on --ks3-ground. Nothing minted. */
@media (prefers-color-scheme: dark) {
  .rd[data-mode="ks3"]:not([data-theme="light"]) input::placeholder,
  .rd[data-mode="ks3"]:not([data-theme="light"]) textarea::placeholder {
    color: var(--ks3-ink-muted);
    opacity: 1;
  }
}
.rd[data-mode="ks3"][data-theme="dark"] input::placeholder,
.rd[data-mode="ks3"][data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .rd[data-mode="ks3"] input::placeholder,
[data-theme="dark"] .rd[data-mode="ks3"] textarea::placeholder {
  color: var(--ks3-ink-muted);
  opacity: 1;
}

/* ⊕ KS4-CHIP-1 (Mide's ruling, 27 Sep 2026) — replaces the two static
   "Combined · Triple" / "Foundation · Higher" header chips with one
   chip stating the page's own route in words, as a native disclosure.
   Enter/Space toggles a native <details>/<summary> with no script; Tab
   reaches the menu's links (already static <a> elements in the prerendered
   HTML, not a runtime fetch). shared/ks4-runtime.js adds only Esc-to-close
   plus keeping aria-expanded in sync with the open state. */
.ks3-route-switch { position: relative; }
.ks3-route-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--ks3-font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 99px; border: 2px solid var(--ks3-ink);
  color: var(--ks3-ink); background: var(--ks3-card);
  -webkit-tap-highlight-color: transparent;
}
.ks3-route-chip::-webkit-details-marker { display: none; }
.ks3-route-chip::marker { content: ""; }
.ks3-route-chip:hover { border-color: var(--ks3-accent-text); }
.ks3-route-chip:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: 2px; }
.ks3-route-chip svg { flex: 0 0 auto; transition: transform .15s ease; }
.ks3-route-switch[open] > .ks3-route-chip svg { transform: rotate(180deg); }
.ks3-route-menu {
  /* ⚠️ `display: none` here is LOAD-BEARING, not a default this selector
     happens to start from. The browser's own UA stylesheet already hides a
     closed <details>'s non-summary content (`details:not([open]) >
     *:not(summary) { display: none }`), but an AUTHOR stylesheet's rule
     beats a UA rule at equal-or-lower specificity regardless of source
     order — an unconditional `display: flex` here would force the menu
     visible EVEN WHILE CLOSED (found live via ks4_parity's G-keyboard
     layer: 3 always-focusable <a> with non-zero rects). `[open] >` below
     is the ONLY rule that may ever show it. */
  display: none;
  list-style: none; margin: 6px 0 0; padding: 6px;
  flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; z-index: 5;
  min-width: 15rem; max-width: min(20rem, calc(100vw - 32px));
  background: var(--ks3-card); border: 2px solid var(--ks3-option-border);
  border-radius: var(--ks3-r-panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.ks3-route-switch[open] > .ks3-route-menu { display: flex; }
.ks3-route-menu a {
  display: block; padding: 9px 10px; border-radius: 8px; min-height: 44px;
  font-family: var(--ks3-font-body); font-size: 15px; font-weight: 500;
  line-height: 1.3; color: var(--ks3-ink); text-decoration: none;
}
.ks3-route-menu a:hover { background: var(--ks3-band); }
.ks3-route-menu a:focus-visible { outline: 3px solid var(--ks3-accent-text); outline-offset: -3px; background: var(--ks3-band); }
@media (max-width: 400px) {
  .ks3-route-menu { left: 0; right: auto; }
}