/* learn.css — GENERATED by scripts/build_learn.py from assets/learn/components/ (base, scene, meters, controls, daychart, missions, play, coach, cards, predict, myth, deeper, glossary, explain, flowchart, table, chains, metro, solver, plot, scatter, tornado, costsplit, supplystack, frontier, steelman, boundary, share, lpplane, linkedviews, cardsort, toggle, equation, formulate, formulation, network, pricechart, checklist, evidence, tagger, unitchain, checkpoint, sheet, practice, forms, exemplars, rubric, questioncard, timeline, planengine, scalestrip, stakeholders, numanswer, drill, weekstrip, sharestate, benchrun, reportnote, engine-e0, engine-e1, ledger, solvestep, sankey, engine-e2, lifebox, siting, engine-e3, engine-e4). Do not edit this file; edit the components and rebuild. Guide: assets/learn/README.md. */
/* base.css — Learn tokens, type and page frame (component library, 2026-11-02; visual system of the approved design study).
   Tokens are prefixed --lx- and scoped to body.page-learn, so the site's navbar and footer keep their own tokens.
   Day values on body.page-learn; night values when Quarto's toggle sets body.quarto-dark.
   Type: Lexend (display), Atkinson Hyperlegible Next (text), Atkinson Hyperlegible Mono (numbers), imported here from Google
   Fonts, so only Learn pages (which link learn.css) load them.
   Plant colours (same in every lesson): nuclear, solar, wind, gas combined-cycle (cc), gas peaker (pk), demand; and
   battery storage (bat), hydro (hyd), geothermal (geo) and demand response (dr), first used in lesson 6 (W1).
   Tier colours: slots 1-5 (--lx-tier-1 ...); path.yml gives each tier a slot. */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,600;0,700;1,400&family=Lexend:wght@400;500;600&display=swap");
body.page-learn {
  --lx-bg: #F5F7FA; --lx-surface: #FFFFFF; --lx-surface-2: #EDF1F5; --lx-surface-3: #E3E9EF;
  --lx-ink: #142030; --lx-ink-2: #435064; --lx-ink-3: #5F6B7E; --lx-line: #D7DFE8; --lx-line-2: #BFCAD6;
  --lx-accent: #1F58C6; --lx-accent-soft: #E3ECFB; --lx-btn: #142030; --lx-btn-ink: #FFFFFF;
  --lx-good: #18784A; --lx-good-soft: #E1F3E9; --lx-warn: #965800; --lx-warn-soft: #FBEFD9; --lx-bad: #B82B2A; --lx-bad-soft: #FBE5E4;   /* text at 4.5:1 on white, surface-2 and its own soft fill */
  --lx-star: #D19A00;
  --lx-nuc: #7A5BB5; --lx-solar: #D9A60F; --lx-wind: #1E9BB0; --lx-cc: #DB5B2B; --lx-pk: #8E3B4F; --lx-demand: #2B394D;
  --lx-bat: #2C6FCB; --lx-hyd: #3B4FA0; --lx-geo: #9C5B2E; --lx-dr: #2E8540;
  --lx-tier-1: #2B8250; --lx-tier-2: #2464C6; --lx-tier-3: #6A4CC2; --lx-tier-4: #B8572B; --lx-tier-5: #0F7C86;
  --lx-sky-day-top: #93C8E8; --lx-sky-day-bot: #DCEFF8; --lx-sky-night-top: #0E1630; --lx-sky-night-bot: #2B3760; --lx-sky-dusk: #F2B184;
  --lx-sun: #FFC53D; --lx-hill-far: #B4CFA0; --lx-ground: #CADDB0; --lx-ground-2: #B8D09C; --lx-road: #D9DED6;
  --lx-wall: #EEF1F4; --lx-wall-2: #DDE3EA; --lx-roof: #586A80; --lx-roof-2: #6E7F94; --lx-win-off: #3A475D; --lx-win-on: #FFD45E;
  --lx-steel: #8794A6; --lx-concrete: #D3DAE2; --lx-concrete-2: #BAC4CF; --lx-steam: #FFFFFF; --lx-panel: #2D4A70; --lx-panel-sheen: #9FC6EE;
  --lx-turbine: #F7F9FB; --lx-wire: #5F6C7E; --lx-tree: #6E9C64; --lx-cloud: #F3F6F9;
  --lx-shadow: 0 1px 2px rgba(10, 20, 40, .05); --lx-shadow-lg: 0 10px 30px rgba(10, 20, 40, .22);
  --lx-f-display: "Lexend", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --lx-f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --lx-f-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lx-r: 14px; --lx-r-lg: 16px;
}
body.page-learn.quarto-dark {
  --lx-bg: #0E131B; --lx-surface: #151C27; --lx-surface-2: #1B2431; --lx-surface-3: #232E3D;
  --lx-ink: #E6EBF2; --lx-ink-2: #B5C0CE; --lx-ink-3: #93A0B1; --lx-line: #283243; --lx-line-2: #39465A;
  --lx-accent: #85A9F5; --lx-accent-soft: #1C2A45; --lx-btn: #E6EBF2; --lx-btn-ink: #0E131B;
  --lx-good: #52C68B; --lx-good-soft: #15301F; --lx-warn: #E2A445; --lx-warn-soft: #33270F; --lx-bad: #F2706C; --lx-bad-soft: #3A1B1B;
  --lx-star: #F0C03C;
  --lx-nuc: #8E74CE; --lx-solar: #B38C14; --lx-wind: #2097AE; --lx-cc: #E0592F; --lx-pk: #A8548C; --lx-demand: #C9D3E0;
  --lx-bat: #6E9DEC; --lx-hyd: #8C98E6; --lx-geo: #D08C5C; --lx-dr: #57B67C;
  --lx-tier-1: #57B67C; --lx-tier-2: #6E9DEC; --lx-tier-3: #A28DF0; --lx-tier-4: #E08A5C; --lx-tier-5: #4FB8C2;
  --lx-sky-day-top: #4F7FA6; --lx-sky-day-bot: #93B6CC; --lx-sky-night-top: #060A16; --lx-sky-night-bot: #182143; --lx-sky-dusk: #B9805E;
  --lx-sun: #F5BC3A; --lx-hill-far: #4E6A4A; --lx-ground: #3E5537; --lx-ground-2: #354A30; --lx-road: #4A5248;
  --lx-wall: #C3CCD6; --lx-wall-2: #A9B4C1; --lx-roof: #3B4757; --lx-roof-2: #4A586B; --lx-win-off: #1D2533; --lx-win-on: #FFD45E;
  --lx-steel: #6D798A; --lx-concrete: #8F9AA8; --lx-concrete-2: #7A8594; --lx-steam: #D9E0E8; --lx-panel: #1E3452; --lx-panel-sheen: #7EA9D6;
  --lx-turbine: #D5DCE4; --lx-wire: #8E9AAA; --lx-tree: #4F7A48; --lx-cloud: #AEB9C6;
  --lx-shadow: none; --lx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- page frame: the site's navbar and footer stay; the Learn page sits between them */
body.page-learn { background: var(--lx-bg); }
body.page-learn #quarto-content { background: var(--lx-bg); }
body.page-learn main.content, body.page-learn #title-block-header .quarto-title, body.page-learn #title-block-header .quarto-title-meta {
  width: 100%; max-width: var(--wrap, 1120px); justify-self: center; }
body.page-learn main.content { margin-top: 0; padding-bottom: 3rem; font-family: var(--lx-f-body); font-size: 17px; line-height: 1.5; color: var(--lx-ink); }
body.page-learn #title-block-header { margin: 1.6rem 0 0; }
body.page-learn #title-block-header .quarto-title-meta, body.page-learn #title-block-header .description { display: none; }
body.page-learn .quarto-title h1.title { margin: 0; font-family: var(--lx-f-display); font-weight: 600; font-size: clamp(26px, 1.2rem + 1.6vw, 36px);
  line-height: 1.15; letter-spacing: -.015em; color: var(--lx-ink); text-wrap: balance; }
body.page-learn .quarto-title .subtitle { margin: .35rem 0 0; font-family: var(--lx-f-display); font-weight: 400; font-size: clamp(16px, .9rem + .4vw, 19px);
  color: var(--lx-ink-2); opacity: 1; text-wrap: pretty; }   /* pretty: no single word left alone on the last line */
.page-learn main h2, .page-learn main h3, .page-learn main h4 { font-family: var(--lx-f-display); font-weight: 600; color: var(--lx-ink); letter-spacing: -.01em;
  line-height: 1.2; border: 0; padding: 0; text-wrap: balance; }
.page-learn main h2 { font-size: 24px; margin: 0 0 .35rem; }
.page-learn main h3 { font-size: 18px; margin: 0; }
.page-learn main p { margin: 0; }
.page-learn main a { color: var(--lx-accent); text-underline-offset: 3px; }
.page-learn main a:hover { color: var(--lx-accent); text-decoration: underline; }
.page-learn main strong { color: var(--lx-ink); }
/* inline code in the Learn tokens, day and night: Bootstrap's plain `code` keeps a light background in the night theme
   (only code inside p, li and td gets a dark one), which left light text on a light box. Zero specificity (:where), so
   Bootstrap's p/li/td rule and every component's or lesson's own code rule still win; code inside pre is left alone. */
:where(.page-learn :not(pre)) > code { background-color: var(--lx-surface-2); color: var(--lx-ink); }
.page-learn :focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; border-radius: 6px; }
/* captions: Quarto's caption grey is 4.1:1 on white; one class of specificity, so a lesson's own caption colour still wins */
.page-learn :where(caption, figcaption, .figure-caption, .table-caption, .panel-caption) { color: var(--lx-ink-3); }
.page-learn main section[id], .page-learn main [id].lx-sec { scroll-margin-top: calc(var(--nav-h, 60px) + 12px); }
.lx-mono, .lx-num { font-family: var(--lx-f-mono); font-variant-numeric: tabular-nums; }
.lx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-learn .lx-ic { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- lesson header (generated by build_learn.py): crumbs, badges, steps */
.lx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin: .7rem 0 1.4rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--lx-line); }
.lx-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--lx-ink-3); }
.lx-crumbs li + li::before { content: "›"; margin-right: .35rem; color: var(--lx-ink-3); }
.lx-crumbs a { color: var(--lx-ink-2) !important; }
.lx-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lx-badge, .lx-badges li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 13.5px;
  flex-wrap: wrap; column-gap: .3em; row-gap: 0; max-width: 100%;   /* a long badge ("After lesson 11 and B1 ...") wraps between its parts */
  color: var(--lx-ink-2); background: var(--lx-surface); border: 1px solid var(--lx-line); }
.lx-badges li a, .lx-badges .lx-nw { white-space: nowrap; }   /* "lesson 11", "about 90 min practice" never split */
.lx-badges .lx-dot, .lx-badge .lx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--lx-tier-1)); }
.lx-badges .lx-done-tag { color: var(--lx-good); border-color: color-mix(in srgb, var(--lx-good) 45%, var(--lx-line)); }
.lx-steps ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 3px; list-style: none; background: var(--lx-surface-2); border-radius: 11px; }
.lx-steps a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 8px; font-family: var(--lx-f-display); font-size: 14px;
  font-weight: 500; color: var(--lx-ink-2) !important; text-decoration: none !important; }
.lx-steps a:hover { background: var(--lx-surface); color: var(--lx-ink) !important; }
.lx-steps .lx-n { font-family: var(--lx-f-mono); font-size: 11px; color: var(--lx-ink-3); margin-right: 6px; }

/* ---------- sections */
.lx-sec { margin-top: 2.6rem; }
.lx-sec:first-child, .lx-head + .lx-sec, .page-lesson #play.lx-sec, .page-lesson #steps.lx-sec { margin-top: 0; }
.lx-sec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: .9rem; }
.lx-eyebrow { font-family: var(--lx-f-display); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); margin: 0; }
.lx-lede { color: var(--lx-ink-2); font-size: 16px; max-width: 64ch; }
.lx-hint { font-size: 13.5px; color: var(--lx-ink-3); }
.lx-card { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 18px 20px; box-shadow: var(--lx-shadow); min-width: 0; }
.lx-stack { display: grid; gap: 18px; }
.lx-row2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .lx-row2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- buttons, pills, choices */
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 11px;
  border: 1px solid transparent; background: var(--lx-btn); color: var(--lx-btn-ink) !important; font-family: var(--lx-f-display); font-weight: 500;
  font-size: 15.5px; line-height: 1.2; cursor: pointer; text-decoration: none !important; transition: transform .12s ease, opacity .15s ease; }
.lx-btn:hover { transform: translateY(-1px); color: var(--lx-btn-ink) !important; }
.lx-btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.lx-btn.ghost { background: transparent; color: var(--lx-ink) !important; border-color: var(--lx-line-2); }
.lx-btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.lx-btn .lx-ic { width: 18px; height: 18px; }
.lx-link { background: none; border: 0; padding: 4px 0; color: var(--lx-accent); font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lx-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 999px; font-family: var(--lx-f-display);
  font-size: 13px; font-weight: 500; }
.lx-pill.good { color: var(--lx-good); background: var(--lx-good-soft); } .lx-pill.bad { color: var(--lx-bad); background: var(--lx-bad-soft); }
.lx-pill.warn { color: var(--lx-warn); background: var(--lx-warn-soft); } .lx-pill.neutral { color: var(--lx-ink-2); background: var(--lx-surface-2); }
.lx-pill .lx-ic { width: 14px; height: 14px; }
.lx-choices-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.lx-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; text-align: left; font-family: var(--lx-f-display); font-size: 15px; font-weight: 500;
  line-height: 1.25; transition: border-color .15s, background .15s; hyphens: auto; }
.lx-choice:hover { border-color: var(--lx-ink-3); }
.lx-choice[aria-pressed="true"] { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); background: var(--lx-surface-2); }
.lx-choice.right { border-color: var(--lx-good); box-shadow: inset 0 0 0 1px var(--lx-good); }
.lx-choice.wrong { border-color: var(--lx-bad); }
.lx-choice .sw { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.lx-saw { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--lx-good-soft); color: var(--lx-ink); font-size: 15px; }
.lx-saw.no { background: var(--lx-warn-soft); }
.lx-saw .lx-ic { width: 18px; height: 18px; color: var(--lx-good); margin-top: 2px; }
.lx-saw.no .lx-ic { color: var(--lx-warn); }
.lx-saw b { font-family: var(--lx-f-display); font-weight: 500; }

/* ---------- static fallback and live interactive */
.lx-interactive { position: relative; }
.lx-interactive.is-live > .lx-fallback, .lx-js .lx-js-hide { display: none; }
.lx-fallback { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 16px 18px; display: grid; gap: 10px; }
.lx-fallback svg { width: 100%; height: auto; display: block; }
.lx-offline { font-size: 14px; color: var(--lx-warn); }
.lx-datanote { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px !important; font-size: 13.5px; color: var(--lx-ink-3); max-width: 90ch; }
.lx-datanote .lx-ic { margin-top: 2px; }

/* ---------- text alternative of a diagram */
details.lx-textalt { margin-top: 4px; font-size: 14px; color: var(--lx-ink-2); }
details.lx-textalt > summary { cursor: pointer; font-family: var(--lx-f-display); font-weight: 500; font-size: 13.5px; color: var(--lx-ink-3); min-height: 32px;
  display: inline-flex; align-items: center; }
details.lx-textalt ul, details.lx-textalt ol { margin: 6px 0 0; padding-left: 1.2rem; }
details.lx-textalt li { margin: 3px 0; }

/* ---------- end of lesson: next, sources, facts, corrections, licence */
.lx-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .lx-end { grid-template-columns: minmax(0, 1fr); } }
.lx-next { display: grid; gap: 8px; }
.lx-next-t { font-family: var(--lx-f-display); font-weight: 500; font-size: 17px; }
.lx-next-d { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-next .lx-btn { justify-self: start; margin-top: 4px; }
.lx-facts { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lx-facts th { text-align: left; font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lx-ink-3); padding: 6px 8px; border-bottom: 1px solid var(--lx-line-2); }
.lx-facts td { padding: 9px 8px; border-bottom: 1px solid var(--lx-line); vertical-align: top; }
.lx-facts td.n { font-family: var(--lx-f-mono); font-weight: 600; white-space: nowrap; color: var(--lx-ink); }
.lx-facts td.s { font-size: 12.5px; color: var(--lx-ink-3); }
@media (max-width: 640px) {
  .lx-facts thead { display: none; }
  .lx-facts, .lx-facts tbody, .lx-facts tr, .lx-facts td { display: block; }
  .lx-facts tr { padding: 8px 0; border-bottom: 1px solid var(--lx-line); }
  .lx-facts td { border: 0; padding: 1px 0; }
}
/* a numbered list in an "In the real world" card (.lx-real ol) looks like the sources list */
.lx-sources ul, .lx-real ol { margin: 6px 0 0; padding-left: 1.1rem; font-size: 14px; color: var(--lx-ink-2); }
.lx-sources li, .lx-real ol > li { margin: 4px 0; }
.lx-corrections, .lx-license { font-size: 13px; color: var(--lx-ink-3); margin-top: .5rem !important; }
.lx-foot { margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--lx-line); }

/* the site's back-to-top button steps aside while it would cover lesson controls or any text (core.js) */
body.lx-totop-off .to-top { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 560px) {
  body.page-learn main.content { font-size: 16.5px; }
  .lx-card { padding: 14px; }
  .lx-head { margin-bottom: 1rem; }
  .lx-steps { width: 100%; }
  .lx-steps ol { flex-wrap: nowrap; justify-content: space-between; }

  .lx-steps a { padding: 0 9px; font-size: 13.5px; }
  .lx-steps .lx-n { display: none; }
}

/* ---------- course map page */
.lx-intro { font-size: 18px; line-height: 1.45; color: var(--lx-ink-2); max-width: 62ch; margin: .8rem 0 1.4rem; }
.lx-intro p { margin: 0; }
.lx-landing-note { margin-top: 1.6rem; font-size: 13.5px; color: var(--lx-ink-3); max-width: 80ch; }
.lx-landing-note p { margin: 0; }
.lx-real p:not(.lx-eyebrow), .lx-sources ul, .lx-real ol { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-card > .lx-eyebrow { margin-bottom: 6px; }

/* narrow phones (under 360 px): the four section tabs no longer fit one row, so they wrap as whole labels */
@media (max-width: 359.98px) { .lx-steps ol { flex-wrap: wrap; justify-content: flex-start; } }

/* scene.css — the Prairie Town picture (scene.js): callouts on wide scenes, numbered legend on narrow ones. */
.lx-scene { position: relative; border-radius: var(--lx-r); overflow: hidden; border: 1px solid var(--lx-line); background: var(--lx-sky-day-bot); }
.lx-scene svg.lx-art { display: block; width: 100%; height: auto; }
.lx-scene .plant { transition: opacity .3s ease; }
.lx-scene.tappable .plant-hit { cursor: pointer; }
.lx-scene.has-hl .plant:not(.hl) { opacity: .42; }
.lx-scene .tapring { fill: none; stroke: var(--lx-accent); stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0; transition: opacity .2s; }
.lx-scene.tappable .plant:not(.met) .tapring { opacity: .9; }
.lx-scene .win { transition: fill .35s ease; }
.lx-scene .flow { fill: none; stroke-linecap: round; stroke-width: 4; stroke-dasharray: 0 13; animation: lx-flow var(--dur, 1.6s) linear infinite; }
@keyframes lx-flow { to { stroke-dashoffset: -26; } }
.lx-scene .marker { display: none; }
.lx-scenebox.narrow .lx-scene .marker { display: inline; }
.lx-callout { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 8px;
  background: var(--lx-surface); color: var(--lx-ink); border: 1px solid var(--lx-line); font-size: 12.5px; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(10, 20, 40, .14); pointer-events: none; transition: opacity .25s ease; }
.lx-callout::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: var(--lx-surface);
  border-right: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); transform: translateX(-50%) rotate(45deg); }
.lx-callout i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex: none; }
.lx-callout b { font-family: var(--lx-f-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.lx-callout.off { opacity: 0 !important; }
.lx-scene.has-hl .lx-callout:not(.hl) { opacity: .35; }
.lx-scenebox.narrow .lx-callout { display: none; }
.lx-clockchip { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 8px; background: color-mix(in srgb, var(--lx-surface) 88%, transparent);
  border: 1px solid var(--lx-line); font-family: var(--lx-f-mono); font-size: 13px; font-weight: 600; color: var(--lx-ink); }
.lx-eventchip { position: absolute; right: 10px; top: 10px; max-width: 62%; padding: 4px 10px; border-radius: 8px; background: var(--lx-surface);
  border: 1px solid var(--lx-line-2); font-size: 12.5px; color: var(--lx-ink); }
.lx-legendstrip { display: none; flex-wrap: wrap; gap: 4px 12px; padding: 8px 2px 0; font-size: 13px; color: var(--lx-ink-2); }
.lx-legendstrip > span { display: inline-flex; align-items: center; gap: 5px; }
.lx-legendstrip i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.lx-legendstrip b { font-family: var(--lx-f-mono); font-weight: 600; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-legendstrip .n { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--lx-ink); color: var(--lx-surface);
  font-size: 10px; font-family: var(--lx-f-mono); }
.lx-scenebox.narrow .lx-legendstrip { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .lx-scene .flow { animation: none; }
  .lx-scene .win { transition: none; }
}

/* meters.css — balance beam and frequency dial (meters.js). */
.lx-meters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 150px); gap: 10px; align-items: stretch; margin-top: 10px; }
.lx-meter { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.lx-meter-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--lx-f-display); font-size: 12px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-meter > svg { display: block; width: 100%; height: auto; }
.lx-meter > svg.bal { max-width: 330px; margin: 0 auto; }
.lx-meter > svg.dial { max-width: 170px; margin: 0 auto; }
.lx-bal-read { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--lx-ink-2); }
.lx-bal-read b { display: block; font-family: var(--lx-f-mono); font-size: 15px; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-bal-read > div:last-child { text-align: right; }
.lx-bal-status { display: flex; justify-content: center; margin-top: 4px; min-height: 28px; }
.lx-bal-note { text-align: center; font-size: 12px; color: var(--lx-ink-3); min-height: 16px; }
.lx-hz-read { text-align: center; font-family: var(--lx-f-mono); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: -4px; color: var(--lx-ink); }
.lx-hz-read small { font-size: 12px; color: var(--lx-ink-3); font-weight: 400; }
.lx-hz-state { text-align: center; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-hz-state.bad { color: var(--lx-bad); } .lx-hz-state.warn { color: var(--lx-warn); } .lx-hz-state.good { color: var(--lx-good); }
@media (max-width: 560px) {
  .lx-meters { grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
  .lx-meter { padding: 8px 9px; }
}

/* controls.css — LX.Slider (controls.js). */
.lx-ctl { display: grid; gap: 6px; }
.lx-ctl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lx-ctl-top label { display: flex; align-items: center; gap: 8px; font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); margin: 0; }
.lx-ctl-top label i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.lx-ctl-top output { font-family: var(--lx-f-mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.lx-ctl-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.lx-ctl-row button { height: 44px; border-radius: 10px; border: 1px solid var(--lx-line-2); background: var(--lx-surface); color: var(--lx-ink);
  font-family: var(--lx-f-mono); font-size: 20px; cursor: pointer; padding: 0; }
.lx-ctl-row button:disabled { opacity: .4; cursor: not-allowed; }
.lx-ctl-track { position: relative; height: 44px; }
.lx-ctl-rail { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px;
  background: repeating-linear-gradient(135deg, var(--lx-surface-3) 0 4px, var(--lx-surface-2) 4px 8px); }
.lx-ctl-band { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: color-mix(in srgb, var(--c) 30%, var(--lx-surface)); transition: left .25s, width .25s; }
.lx-ctl-fill { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; left: 0; background: var(--c); }
.lx-ctl input[type="range"] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.lx-ctl input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.lx-ctl input[type="range"]::-moz-range-track { height: 44px; background: transparent; }
.lx-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: 9px; border-radius: 50%; background: var(--lx-surface);
  border: 3px solid var(--c); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.lx-ctl input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--lx-surface); border: 3px solid var(--c); }
.lx-ctl input[type="range"]:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; border-radius: 10px; }
.lx-ctl-hint { font-size: 13px; color: var(--lx-ink-3); min-height: 1.2em; }
.lx-ctl-hint.bump { color: var(--lx-warn); animation: lx-bump .45s ease; }
@keyframes lx-bump { 30% { transform: translateX(4px); } 60% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .lx-ctl-hint.bump { animation: none; } .lx-ctl-band { transition: none; } }

/* daychart.css — LX.DayChart (daychart.js) and the small legend used by charts. */
.lx-chart { position: relative; margin-top: 8px; }
.lx-chart svg { display: block; width: 100%; height: auto; }
.lx-chart-tip { position: absolute; pointer-events: none; background: var(--lx-surface); border: 1px solid var(--lx-line-2); border-radius: 8px; padding: 6px 9px;
  font-size: 12.5px; color: var(--lx-ink); box-shadow: 0 2px 8px rgba(10, 20, 40, .16); min-width: 140px; z-index: 3; }
.lx-chart-tip div { display: flex; justify-content: space-between; gap: 10px; }
.lx-chart-tip b { font-family: var(--lx-f-mono); font-weight: 600; }
.lx-chart-tip .bad { color: var(--lx-bad); }
.lx-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--lx-ink-2); margin-top: 6px; }
.lx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lx-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.lx-legend i.line { height: 0; border-top: 2px dashed var(--lx-ink); border-radius: 0; background: none; width: 14px; }
.lx-mini-table { border-collapse: collapse; font-size: 12.5px; margin-top: 6px; font-family: var(--lx-f-mono); }
.lx-mini-table th, .lx-mini-table td { padding: 2px 8px 2px 0; text-align: right; border-bottom: 1px solid var(--lx-line); }
.lx-mini-table th { font-family: var(--lx-f-display); font-weight: 500; color: var(--lx-ink-3); }
.lx-scroll-x { overflow-x: auto; max-width: 100%; }

/* missions.css — mission bars, stars and collectible notes (missions.js). */
.lx-missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.lx-mission { border: 1px solid var(--lx-line); background: var(--lx-surface); border-radius: 12px; padding: 9px 11px; display: grid; gap: 5px; min-width: 0; }
.lx-mission b { font-family: var(--lx-f-display); font-weight: 500; font-size: 14px; line-height: 1.25; color: var(--lx-ink); }
.lx-mission .bar { height: 6px; border-radius: 3px; background: var(--lx-surface-3); overflow: hidden; }
.lx-mission .bar i { display: block; height: 100%; width: 0; background: var(--lx-good); transition: width .3s; }
.lx-mission.fail .bar i { background: var(--lx-bad); }
.lx-mission small { font-size: 12.5px; color: var(--lx-ink-3); font-family: var(--lx-f-mono); }
.lx-mission.main { border-color: var(--lx-ink); }
.lx-mission.won { border-color: var(--lx-good); background: color-mix(in srgb, var(--lx-good) 7%, var(--lx-surface)); }
.lx-mission .s { display: none; }
@media (max-width: 860px) {
  .lx-missions { gap: 6px; }
  .lx-mission { padding: 7px 8px; gap: 4px; }
  .lx-mission .l { display: none; }
  .lx-mission .s { display: inline; }
  .lx-mission b { font-size: 13px; }
  .lx-mission small { font-size: 11px; }
}
.lx-starrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-starbox { border: 1px solid var(--lx-line); border-radius: 12px; padding: 10px; text-align: center; background: var(--lx-surface); min-width: 0; }
.lx-starbox > span { display: block; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-stars { display: flex; justify-content: center; gap: 2px; margin: 4px 0 2px; }
.lx-stars svg { width: 22px; height: 22px; display: block; }
.lx-stars .on { color: var(--lx-star); animation: lx-pop .42s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d, 0s); }
.lx-stars .off { color: var(--lx-line-2); }
@keyframes lx-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.lx-starbox b { font-family: var(--lx-f-mono); font-size: 13.5px; font-weight: 600; color: var(--lx-ink); }
.lx-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lx-note { perspective: 900px; }
.lx-note-in { position: relative; display: grid; height: 100%; transition: transform .6s cubic-bezier(.3, .8, .3, 1); transform-style: preserve-3d; transition-delay: var(--d, 0s); }
.lx-note.flip .lx-note-in { transform: rotateY(180deg); }
.lx-note-f, .lx-note-b { grid-area: 1 / 1; position: relative; min-height: 150px; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.lx-note-f { background: repeating-linear-gradient(135deg, var(--lx-surface-2) 0 6px, var(--lx-surface-3) 6px 12px); border: 1px solid var(--lx-line-2);
  align-items: center; justify-content: center; text-align: center; color: var(--lx-ink-3); font-size: 13px; }
.lx-note-f .lx-ic { width: 22px; height: 22px; }
.lx-note-b { background: var(--lx-surface); border: 1px solid var(--lx-ink); transform: rotateY(180deg); }
.lx-note-b .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--lx-surface-2); color: var(--lx-ink); }
.lx-note-b .ic .lx-ic { width: 18px; height: 18px; }
.page-learn .lx-note-b h4 { font-size: 15px; margin: 0; }
.lx-note-b p { font-size: 13.5px; color: var(--lx-ink-2); line-height: 1.38; }
.lx-note-b .moment { font-size: 12.5px; color: var(--lx-ink-3); margin-top: auto !important; }
.lx-note-b a { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .lx-note-in { transition: none; } .lx-stars .on { animation: none; } .lx-mission .bar i { transition: none; } }

/* play.css — the "play first" frame (lesson 0, capstones): missions above, the stage (scene + meters) beside a control
   panel, game parts (clock, hour strip, events, tallies, operator's view) and the debrief that replaces the panel.
   Markup is built by the lesson's JS with LX.H; class names: lx-play > lx-play-stage + lx-play-panel; lx-debrief. */
.lx-play { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.lx-play-panel { display: grid; gap: 14px; }
.lx-ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lx-gclock { font-family: var(--lx-f-mono); font-size: 28px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.lx-gclock small { font-family: var(--lx-f-body); font-size: 13px; font-weight: 400; color: var(--lx-ink-3); margin-left: 8px; letter-spacing: 0; }
.lx-hstrip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.lx-hstrip span { height: 10px; border-radius: 2px; background: var(--lx-surface-3); }
.lx-hstrip span.ok { background: var(--lx-good); } .lx-hstrip span.short { background: var(--lx-bad); } .lx-hstrip span.over { background: var(--lx-warn); }
.lx-hstrip span.now { box-shadow: 0 0 0 2px var(--lx-ink); }
.lx-hstrip-l { display: flex; justify-content: space-between; font-family: var(--lx-f-mono); font-size: 11px; color: var(--lx-ink-3); margin-top: 3px; }
.lx-events { display: grid; gap: 10px; }
.lx-events:empty { display: none; }
.lx-gctl { display: grid; gap: 14px; }
.lx-gnext { width: 100%; min-height: 52px; font-size: 16.5px; }
.lx-tallies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-tally { background: var(--lx-surface-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.lx-tally span { display: block; font-size: 12px; color: var(--lx-ink-3); }
.lx-tally b { font-family: var(--lx-f-mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.lx-event { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--lx-line-2); background: var(--lx-surface-2); font-size: 15px; color: var(--lx-ink); }
.lx-event .lx-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--lx-ink-2); }
.lx-event b { font-family: var(--lx-f-mono); }
.lx-ecard { border: 1px solid var(--lx-ink); border-radius: 14px; padding: 14px; background: var(--lx-surface); display: grid; gap: 10px; }
.lx-etime { font-family: var(--lx-f-mono); font-size: 13px; font-weight: 600; color: var(--lx-ink-3); }
.lx-ecard .lx-link { justify-self: start; }
.lx-ops { border-top: 1px solid var(--lx-line); padding-top: 6px; }
.lx-ops > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px;
  color: var(--lx-ink-2); min-height: 40px; }
.lx-ops > summary::-webkit-details-marker { display: none; }
.lx-ops > summary .lx-ic { width: 18px; height: 18px; }
.lx-play-links { margin-top: 12px !important; font-size: 14px; color: var(--lx-ink-3); }
.lx-play-links .lx-link { font-size: 14px; }
.lx-debrief { display: grid; gap: 14px; }
.lx-debrief .lx-notes { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.lx-debrief .lx-note-f, .lx-debrief .lx-note-b { min-height: 140px; padding: 10px; }
@media (max-width: 860px) { .lx-debrief { margin-top: 4px; } }
.lx-debrief:focus { outline: none; }
.lx-deb-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.page-learn .lx-deb-head h3 { font-size: 20px; }
.page-learn .lx-deb-notes { font-size: 16px; margin: 0; }
.lx-debrief > .lx-btn { justify-self: start; }
.lx-zip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--lx-surface-2); }
.lx-zip > .lx-ic { width: 28px; height: 28px; color: var(--lx-ink-2); }
.lx-zip .wire { position: relative; height: 2px; background: var(--lx-line-2); margin-top: 12px; }
.lx-zip .wire i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--lx-sun);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lx-sun) 35%, transparent); animation: lx-zip .5s ease-in forwards; }
.lx-zip .wire b { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-family: var(--lx-f-mono); font-size: 13px; white-space: nowrap; color: var(--lx-ink); }
@keyframes lx-zip { from { left: 0; } to { left: calc(100% - 10px); } }
@media (prefers-reduced-motion: reduce) { .lx-zip .wire i { animation: none; left: calc(100% - 10px); } }
/* the no-JS list of ideas in the explain layer */
dl.lx-ideas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 15px; }
dl.lx-ideas dt { font-family: var(--lx-f-display); font-weight: 500; color: var(--lx-ink); }
dl.lx-ideas dd { margin: 0; color: var(--lx-ink-2); }
.lx-deepers { margin-top: 18px; }
@media (max-width: 860px) { .lx-play { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .lx-gclock { font-size: 24px; }
  dl.lx-ideas { grid-template-columns: minmax(0, 1fr); }
  .lx-tally { padding: 7px 8px; } .lx-tally b { font-size: 14.5px; }
}

/* coach.css — coach tour ring and tip (coach.js). */
.lx-coach { position: absolute; z-index: 8; max-width: 290px; background: var(--lx-ink); color: var(--lx-bg); border-radius: 12px; padding: 12px 14px;
  box-shadow: var(--lx-shadow-lg); font-size: 15px; line-height: 1.4; display: grid; gap: 10px; }
.lx-coach::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--lx-ink); transform: rotate(45deg); left: var(--ax, 30px); }
.lx-coach.below::before { top: -6px; } .lx-coach.above::before { bottom: -6px; }
.lx-coach .cn { font-family: var(--lx-f-mono); font-size: 12px; opacity: .75; }
.lx-coach .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lx-coach button { min-height: 36px; border-radius: 8px; border: 0; padding: 0 12px; font-family: var(--lx-f-display); font-weight: 500; font-size: 14px;
  cursor: pointer; background: var(--lx-bg); color: var(--lx-ink); }
.lx-coach button.skip { background: transparent; color: var(--lx-bg); opacity: .85; text-decoration: underline; padding: 0; }
.lx-coach button:focus-visible { outline: 3px solid var(--lx-accent-soft); outline-offset: 2px; }
.lx-coach .lx-term { color: inherit; }
.lx-coach-ring { position: absolute; z-index: 7; border-radius: 14px; pointer-events: none; transition: all .25s ease;
  box-shadow: 0 0 0 3px var(--lx-accent), 0 0 0 9999px color-mix(in srgb, var(--lx-bg) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .lx-coach-ring { transition: none; } }

/* cards.css — step cards (cards.js) and the stage that holds a scene above them. */
.lx-cards { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.lx-stepcard { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 18px 20px; display: grid; gap: 14px; box-shadow: var(--lx-shadow); }
.lx-step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lx-dots { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; }
.lx-dots i { flex: 0 1 22px; min-width: 5px; height: 6px; border-radius: 3px; background: var(--lx-surface-3); transition: background .2s; }
.lx-dots i.done { background: var(--lx-ink-3); } .lx-dots i.cur { background: var(--lx-ink); }
.lx-step-n { font-family: var(--lx-f-mono); font-size: 12.5px; color: var(--lx-ink-3); white-space: nowrap; flex: none; }
.lx-step-text { font-size: 19px; line-height: 1.45; max-width: 46ch; color: var(--lx-ink); }
.lx-step-act { display: grid; gap: 12px; }
.lx-step-act > .lx-btn, .lx-step-act > a.lx-btn { justify-self: start; }   /* a lone button keeps its own width */
/* nothing in a step card may widen it (a grid item's min-width is auto): wide tables and charts scroll or shrink in their own
   box, as lesson 13's cards do (shared fix 6, after the A22 review; checked at 375 px on lessons 12, 13, A22 and M3) */
.lx-stepcard > *, .lx-step-act > * { min-width: 0; max-width: 100%; }
.lx-step-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 560px) { .lx-stepcard { padding: 14px; } .lx-step-text { font-size: 18px; } .lx-dots { gap: 4px; } .lx-dots i { flex-basis: 14px; } }

/* predict.css — predict buttons, the ordered-scale guess, and reveal lines (predict.js). */
.lx-predictbox, .lx-guess { display: grid; gap: 10px; }
.lx-q { font-family: var(--lx-f-display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--lx-ink); }
.lx-predict-out { display: grid; gap: 10px; }
.lx-predict-out:empty { display: none; }
.lx-guess-scale input { width: 100%; accent-color: var(--lx-ink); height: 32px; margin: 0; }
.lx-guess-ticks { display: grid; font-size: 13px; color: var(--lx-ink-3); text-align: center; gap: 2px; }
.lx-guess-ticks span:first-child { text-align: left; } .lx-guess-ticks span:last-child { text-align: right; }
.lx-guess-ticks span.sel { color: var(--lx-ink); font-weight: 700; }
.lx-guess-ticks span.ans { color: var(--lx-good); font-weight: 700; }
.lx-predict { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 16px 18px; display: grid; gap: 10px; }
.lx-predict .lx-choices { margin: 0; padding-left: 1.2rem; }
.lx-reveal { display: grid; gap: 6px; }
.lx-reveal-guess { font-size: 14.5px; color: var(--lx-ink-2); }

/* myth.css — myth-or-fact cards and quick questions (myth.js). */
.lx-myths, .lx-quiz { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lx-qq { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r); padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.lx-myths .lx-qq { border-top: 4px solid var(--lx-accent); }
.lx-qq.is-right { border-color: color-mix(in srgb, var(--lx-good) 50%, var(--lx-line)); }
.lx-qtext { font-family: var(--lx-f-display); font-weight: 500; font-size: 16.5px; line-height: 1.35; color: var(--lx-ink); }
.lx-qbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.lx-qbtns .lx-choice { justify-content: center; min-height: 44px; }
.lx-qfb:empty { display: none; }
.lx-qq .lx-choices { margin: 0; padding-left: 1.2rem; }
details.lx-answer summary { cursor: pointer; font-family: var(--lx-f-display); font-weight: 500; font-size: 14px; color: var(--lx-ink-2); }
.lx-score { grid-column: 1 / -1; font-size: 14px; color: var(--lx-ink-3); min-height: 1.2em; }

/* deeper.css — "Go deeper" boxes: collapsed by default, so the page stays short; depth lives here, not in the main text.
   <details class="lx-deeper"><summary><span class="k">Go deeper · Analyst</span>The balance as an equation</summary>
     <div class="lx-deeper-body"> ... math, a model, a code snippet ... </div></details>
   In Markdown, open the box with a raw-HTML <details> line, write Markdown inside, then close it (see learn/_template-play.qmd). */
details.lx-deeper { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: 12px; padding: 0 16px; }
details.lx-deeper + details.lx-deeper { margin-top: 10px; }
details.lx-deeper > summary { cursor: pointer; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 52px; padding: 8px 0;
  font-family: var(--lx-f-display); font-size: 15.5px; font-weight: 500; color: var(--lx-ink); }
details.lx-deeper > summary::-webkit-details-marker { display: none; }
details.lx-deeper > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--lx-line-2);
  font-family: var(--lx-f-mono); font-size: 14px; color: var(--lx-ink-2); flex: none; }
details.lx-deeper[open] > summary::before { content: "\2212"; }
details.lx-deeper .k { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--lx-ink-3); font-weight: 500; }
/* one column that can shrink below its widest child (minmax(0, 1fr)), so text wraps at the card on a 375 px phone;
   wide display equations, code and tables scroll on their own instead of pushing the column wider */
.lx-deeper-body { padding: 0 0 14px; font-size: 15.5px; color: var(--lx-ink-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 75ch; }
.lx-deeper-body p { margin: 0; }
.lx-deeper-body ul { margin: 0; padding-left: 1.2rem; }
.lx-deeper-body .math.display { display: block; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.lx-deeper-body pre, .lx-deeper-body div.sourceCode { overflow-x: auto; max-width: 100%; }
.lx-deeper-body table { display: block; overflow-x: auto; max-width: 100%; }
/* a long inline command breaks on a phone instead of widening the page (K8's nbconvert line; W2 integration) */
.lx-deeper-body :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }

/* glossary.css — tap-to-define terms and their popover (glossary.js). */
.lx-term.on:not(.plain) { cursor: help; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); border-radius: 3px; }
.lx-term.on:not(.plain):hover, .lx-term[aria-expanded="true"] { text-decoration-style: solid; background: var(--lx-accent-soft); }
.lx-pop { position: absolute; z-index: 1040; background: var(--lx-surface); color: var(--lx-ink); border: 1px solid var(--lx-ink); border-radius: 12px; padding: 10px 12px;
  box-shadow: var(--lx-shadow-lg); display: grid; gap: 4px; font-family: var(--lx-f-body); font-size: 14.5px; line-height: 1.4; }
.lx-pop b { font-family: var(--lx-f-display); font-weight: 600; font-size: 15px; }
.lx-pop p { margin: 0; color: var(--lx-ink-2); }
.lx-pop a { font-size: 13px; color: var(--lx-accent); }

/* explain.css — shared frame of the explain layer (concept map, flowchart, table, causal chain, energy chain) and the
   concept map itself (conceptmap.js). Every lesson ends with this layer: diagrams with one or two sentences per element. */
.lx-xgrid { display: grid; gap: 18px; }
.lx-xcard { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.lx-x-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.page-learn .lx-x-head h3 { font-size: 20px; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lx-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 12px 4px 10px; border-radius: 10px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; font-family: var(--lx-f-display); font-size: 14px; font-weight: 500; }
.lx-chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.lx-chip small { font-family: var(--lx-f-body); font-weight: 400; color: var(--lx-ink-3); font-size: 12.5px; }
.lx-cmap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.lx-cmap svg { display: block; width: 100%; height: auto; }
.cnode { cursor: pointer; }
.cnode rect { fill: var(--lx-surface); stroke: var(--lx-line-2); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.cnode text { font-family: var(--lx-f-display); font-size: 13.5px; font-weight: 500; fill: var(--lx-ink); }
.cnode .grp { fill: var(--c); stroke: none; }
.cnode:hover rect { stroke: var(--lx-ink-3); }
.cnode:focus { outline: none; }
.cnode:focus-visible rect { stroke: var(--lx-accent); stroke-width: 3; }
.cnode.sel rect { fill: var(--lx-ink); stroke: var(--lx-ink); }
.cnode.sel text { fill: var(--lx-bg); }
.cnode.dim rect, .cnode.dim .grp { opacity: .38; } .cnode.dim text { fill: var(--lx-ink-3); }   /* faded shapes, readable words */
.cedge path { fill: none; stroke: var(--lx-line-2); stroke-width: 1.5; }
.cedge text { font-family: var(--lx-f-body); font-size: 11.5px; fill: var(--lx-ink-3); }
.cedge text.bg { stroke: var(--lx-surface); stroke-width: 4px; stroke-linejoin: round; }
.cedge.on path { stroke: var(--lx-ink); stroke-width: 2; }
.cedge.on text { fill: var(--lx-ink); }
.cedge.dim path { opacity: .35; }   /* the label keeps its colour (ink-3, 4.5:1) */
.lx-cmap.narrow .cedge text { display: none; }
.lx-cdetail { border: 1px solid var(--lx-line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; background: var(--lx-surface-2); align-content: start; }
.page-learn .lx-cdetail h4 { font-size: 18px; margin: 0; }
.lx-cdetail p { font-size: 15px; }
.lx-cdetail .ingame { font-size: 14px; color: var(--lx-ink-2); border-top: 1px dashed var(--lx-line-2); padding-top: 8px; }
.lx-cdetail .ingame > b { font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-ink-3); display: block; }
.lx-cdetail .you { margin-top: 4px; color: var(--lx-ink); font-weight: 600; }
.lx-cgroups { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-cgroups span { display: inline-flex; align-items: center; gap: 5px; }
.lx-cgroups i { width: 10px; height: 4px; border-radius: 2px; background: var(--c); }
@media (max-width: 860px) { .lx-cmap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lx-xcard { padding: 14px; } }
/* the side-topic shelf's "where we stop" box (curriculum v2 §16.2 e-stop; X1 to X6; promoted at the W6 integration,
   2026-11-07): a card with what the topic covers and leaves to specialists, side by side, then a three-rung reading ladder
   with dated sources. Static HTML written by _tests/learn/shelf_stop.js (stopHTML) from each page's data; same with and
   without JavaScript. */
.xs-stop { display: grid; gap: 8px; margin-top: 16px; border-left: 4px solid var(--lx-accent); }
.page-learn .xs-stop h3 { margin: 0; }
.page-learn .xs-stop .xs-stop-lede { margin: 0; color: var(--lx-ink-2); }
.page-learn .xs-stop .xs-h { margin: 4px 0 4px; font-family: var(--lx-f-display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lx-ink-2); }
.xs-stop-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.page-learn .xs-stop ul, .page-learn .xs-ladder { margin: 0; padding-left: 1.2rem; display: grid; gap: 5px; }
.page-learn .xs-src { color: var(--lx-ink-3); font-size: 14px; }
@media (max-width: 640px) {
  .xs-stop-cols { grid-template-columns: minmax(0, 1fr); }
}

/* flowchart.css — decision flowchart with traced cases (flowchart.js). */
.lx-flow svg { display: block; width: 100%; height: auto; }
.fnode rect, .fnode polygon { fill: var(--lx-surface); stroke: var(--lx-line-2); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.fnode text { font-family: var(--lx-f-display); font-size: 13px; font-weight: 500; fill: var(--lx-ink); }
.fnode.q text { font-size: 12.5px; }
.fnode text.sub { font-family: var(--lx-f-body); font-weight: 400; font-size: 11.5px; fill: var(--lx-ink-3); }
.fnode.on rect, .fnode.on polygon { fill: var(--lx-ink); stroke: var(--lx-ink); }
.fnode.on text { fill: var(--lx-bg); }
.fedge path { fill: none; stroke: var(--lx-line-2); stroke-width: 1.6; }
.fedge text { font-family: var(--lx-f-mono); font-size: 11px; fill: var(--lx-ink-3); }
.fedge.on path { stroke: var(--lx-ink); stroke-width: 2.4; }
.fedge.on text { fill: var(--lx-ink); font-weight: 600; }
.lx-ftrace { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lx-choice.small { min-height: 42px; font-size: 14px; padding: 6px 12px; }
.lx-ftrace-out { font-size: 14.5px; color: var(--lx-ink-2); min-height: 44px; }
.lx-ftrace-out b { font-family: var(--lx-f-mono); color: var(--lx-ink); }
@media (prefers-reduced-motion: reduce) { .fnode rect, .fnode polygon { transition: none; } }

/* table.css — sortable comparison table (table.js); also the segmented control used by several components. */
.lx-seg { display: inline-flex; border: 1px solid var(--lx-line-2); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.lx-seg button { border: 0; background: var(--lx-surface); min-height: 36px; padding: 0 12px; font-family: var(--lx-f-display); font-size: 13.5px; cursor: pointer; color: var(--lx-ink-2); }
.lx-seg button[aria-pressed="true"] { background: var(--lx-ink); color: var(--lx-bg); }
/* a disabled choice (CF1's selling price while there is no on-site energy) looks disabled; it stays focusable and named */
.lx-seg button[aria-disabled="true"], .lx-seg button:disabled { opacity: .5; cursor: not-allowed; }
.lx-seg > span { align-self: center; padding: 0 10px; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-tbl-scroll { overflow-x: auto; }
.lx-ctable { width: 100%; border-collapse: collapse; font-size: 14.5px; color: var(--lx-ink); background: transparent; }
/* keep Bootstrap's .table look (and the night theme's dark cell fill) out of Learn tables */
.page-learn .lx-ctable > :not(caption) > * > *, .page-learn .lx-facts > :not(caption) > * > *, .page-learn .lx-mini-table > :not(caption) > * > * {
  background: transparent !important; box-shadow: none !important; color: inherit; }
.page-learn .lx-ctable, .page-learn .lx-facts, .page-learn .lx-mini-table { background: transparent !important; }
.lx-ctable thead th { text-align: left; font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lx-ink-3); padding: 6px 8px; border-bottom: 1px solid var(--lx-line-2); }
.lx-ctable td, .lx-ctable tbody th { padding: 9px 6px; border-bottom: 1px solid var(--lx-line); vertical-align: middle; text-align: left; font-weight: 400; }
.lx-ctable td.n { font-family: var(--lx-f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-ctable td small { color: var(--lx-ink-3); font-size: 11.5px; }
.lx-ctable .pn { display: flex; align-items: center; gap: 8px; font-family: var(--lx-f-display); font-weight: 500; min-width: 8.5em; }
.lx-ctable .pn i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); flex: none; }
.lx-ctable .pn small { display: block; font-family: var(--lx-f-body); font-weight: 400; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-ctable .mini { display: inline-block; height: 6px; border-radius: 3px; background: var(--c, var(--lx-ink-3)); vertical-align: middle; margin-left: 6px; }
.lx-ctable tr { transition: transform .45s ease; }
.lx-ctable .rank { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); width: 22px; padding-right: 0; }
@media (prefers-reduced-motion: reduce) { .lx-ctable tr { transition: none; } }
@media (max-width: 640px) {
  .lx-ctable thead { display: none; }
  .lx-ctable, .lx-ctable tbody, .lx-ctable tr, .lx-ctable td, .lx-ctable tbody th { display: block; }
  .lx-ctable tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--lx-line); align-items: center; }
  .lx-ctable td, .lx-ctable tbody th { border: 0; padding: 0; }
  .lx-ctable .mini, .lx-ctable .ph { display: none; }
  .lx-ctable .pn { min-width: 0; }
  .lx-ctable td[data-label] { text-align: right; }
  .lx-ctable td[data-label]::before { content: attr(data-label); display: block; font-family: var(--lx-f-body); font-size: 10.5px; color: var(--lx-ink-3); white-space: nowrap; }
  /* text: true (rows of words): one column of left-aligned lines, each with its label on the left */
  .lx-ctable-text tr { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lx-ctable-text .rank { display: none; }
  .lx-ctable-text td[data-label] { display: grid; grid-template-columns: minmax(5.5em, 32%) minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
    text-align: left; font-size: 14.5px; white-space: normal; }
  .lx-ctable-text td[data-label]::before { white-space: normal; font-size: 11.5px; }
  .lx-ctable-text td.ph { display: none; }
}

/* chains.css — causal chain (causal.js) and energy chain (energychain.js). */
.lx-chain { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.lx-clink { position: relative; padding: 12px 14px 12px 12px; border-radius: 12px; border: 1px solid var(--lx-line); background: var(--lx-surface); display: grid; gap: 4px;
  align-content: start; transition: border-color .25s, background .25s; margin-right: 20px; min-width: 0; }
.lx-clink:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--lx-ink-3);
  border-right: 2px solid var(--lx-ink-3); transform: translateY(-50%) rotate(45deg); }
.lx-clink:last-child { margin-right: 0; }
.lx-clink b { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); line-height: 1.25; }
.lx-clink span { font-size: 13.5px; color: var(--lx-ink-2); line-height: 1.35; }
.lx-clink em { font-style: normal; font-family: var(--lx-f-mono); font-size: 13px; color: var(--lx-ink); }
.lx-clink .n { font-family: var(--lx-f-mono); font-size: 11.5px; color: var(--lx-ink-3); }
.lx-clink.on { border-color: var(--lx-ink); background: var(--lx-surface-2); }
.lx-echain { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.lx-estop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 6px; position: relative; min-width: 0; }
.lx-estop .ic .lx-ic { width: 46px; height: 46px; color: var(--lx-ink-2); }
.lx-estop b { font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; color: var(--lx-ink); }
.lx-estop span { font-size: 13px; color: var(--lx-ink-3); }
.lx-estop em { font-style: normal; font-family: var(--lx-f-mono); font-size: 13.5px; font-weight: 600; color: var(--lx-ink); }
.lx-estop:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 32px); right: calc(-50% + 32px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--lx-sun) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: lx-dash 1.2s linear infinite; }
@keyframes lx-dash { to { background-position: 24px 0; } }
@media (prefers-reduced-motion: reduce) { .lx-estop:not(:last-child)::after { animation: none; } .lx-clink { transition: none; } }
@media (max-width: 860px) {
  .lx-chain { grid-template-columns: minmax(0, 1fr); }
  .lx-clink { margin-right: 0; margin-bottom: 20px; }
  .lx-clink:last-child { margin-bottom: 0; }
  .lx-clink:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%) rotate(135deg); }
  .lx-echain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .lx-estop:nth-child(2n)::after { display: none; }
}

/* metro.css — course map: doors, progress, transit map, toolbox shelf, legend, preview card (metro.js).
   The map is drawn 1:1 (an SVG unit is a CSS pixel), so every label keeps the size set here (11.5 px and up).
   The card never leaves the map box: metro.js caps its height to the box and the window, and its body (.bd) scrolls
   under a fixed header, with a "More below" cue (.cue) while more is hidden. The phone map is drawn at most 560 px wide. */
.lx-doors { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.lx-door { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 12px 12px; border-radius: 60px 60px 14px 14px; border: 1.5px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; text-align: center; font-family: var(--lx-f-display); transition: border-color .2s, transform .15s; min-width: 0; }
.lx-door:hover { transform: translateY(-2px); border-color: var(--c); }
.lx-door[aria-pressed="true"] { border-color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.lx-door .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--lx-surface)); color: var(--c); }
.lx-door .ic .lx-ic { width: 26px; height: 26px; }
.lx-door b { font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--lx-ink); }
.lx-door small { font-family: var(--lx-f-body); font-size: 12.5px; color: var(--c); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lx-door .knob { position: absolute; right: 16px; top: 58%; width: 6px; height: 6px; border-radius: 50%; background: var(--lx-line-2); }
.lx-door.soon { border-style: dashed; }
.lx-door.soon .ic { background: var(--lx-surface-2); }
.lx-mapbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.lx-progress { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lx-ink-2); }
.lx-progress .pbar { width: 140px; height: 8px; border-radius: 4px; background: var(--lx-surface-3); overflow: hidden; display: block; }
.lx-progress .pbar i { display: block; height: 100%; background: var(--lx-good); width: 0; transition: width .4s; }
.lx-mapwrap { position: relative; background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 10px;
  overflow: hidden; overflow: clip; }   /* clip: not a scroll container, so scrolling a card into view never shifts the map */
.lx-mapwrap svg { display: block; width: 100%; height: auto; }
.lx-mapwrap[data-mode="v"] svg { max-width: 100%; margin-inline: auto; }   /* metro.js sets its width: at most 560 px */
.lx-mlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--lx-ink-2); margin-top: 10px; }
.lx-mlegend.kinds { margin-top: 6px; }
.lx-mlegend > span { display: inline-flex; align-items: center; gap: 6px; }
.lx-mlegend i { width: 18px; height: 5px; border-radius: 3px; background: var(--c); }
.lx-mlegend i.route { width: 22px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--lx-tier-1) 0 33%, var(--lx-tier-2) 33% 66%, var(--lx-tier-3) 66%); }
.lx-mlegend .sw svg { display: block; fill: var(--lx-ink-2); stroke: var(--lx-ink-2); stroke-width: 1.5; }
.lx-mlegend > span.st:first-of-type, .lx-mlegend > span.k + span.st { margin-left: 8px; }
.lx-mlegend i.o { width: 13px; height: 13px; border-radius: 50%; background: var(--lx-surface); border: 2px solid var(--lx-ink-2); }
.lx-mlegend i.o.fill { background: var(--lx-ink-2); }
.lx-mlegend i.o.done { background: var(--lx-good); border-color: var(--lx-good); position: relative; }
.lx-mlegend i.o.done::after { content: ""; position: absolute; left: 3px; top: 0.5px; width: 3px; height: 6px; border: solid var(--lx-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stn { cursor: pointer; }
.stn:focus { outline: none; }
.stn:focus-visible .ring { stroke: var(--lx-accent); stroke-width: 4; }
.stn .face { fill: var(--lx-surface); stroke: var(--c); stroke-width: 3; }
.stn.up .face { stroke-dasharray: 4 3; stroke-width: 2.2; }
.stn.up .icon { opacity: .6; }
.stn.open .face, .stn.done .face { fill: var(--c); }
.stn.open .icon, .stn.done .icon { color: var(--lx-surface); }
.stn .icon { color: var(--c); }
.stn .ring { fill: none; stroke: transparent; stroke-width: 3; }
.stn.sel .ring { stroke: var(--lx-ink); }
/* stations off the starter path: a shape per kind, filled when open, hollow when coming soon */
.stn.own .hit { fill: transparent; stroke: none; }
.stn.own .face { fill: var(--c); stroke: var(--c); stroke-width: 2; }
.stn.own.up .face { fill: var(--lx-surface); stroke-width: 1.8; stroke-dasharray: none; opacity: .8; }
.stn.own .ring { stroke-width: 2.5; }
.stn.own:focus-visible .ring { stroke: var(--lx-accent); stroke-width: 3; }
.mown { stroke-width: 4; opacity: .5; }
.mown.soon { stroke-dasharray: 2 7; opacity: .45; }
.mchev { stroke-width: 2.5; opacity: .8; }
/* the phone map's fold of a tier's upcoming lessons: a hollow station and a real button that opens them in place */
.mfold-mk { cursor: pointer; }
.mfold-mk .face { fill: var(--lx-surface); stroke: var(--c); stroke-width: 2; stroke-dasharray: 3 2.5; }
.mfold-mk .chev { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border: 1.5px dashed var(--lx-line-2); border-radius: 999px;
  background: var(--lx-surface); color: var(--lx-ink-2); font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 500; cursor: pointer;
  max-width: 100%; white-space: nowrap; }
.lx-fold:hover { border-color: var(--lx-ink-3); color: var(--lx-ink); }
.lx-fold:focus { outline: none; }
.lx-fold:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 1px; }
.page-learn .lx-fold .lx-ic { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .2s; }
.lx-fold[aria-expanded="true"] .lx-ic { transform: rotate(-90deg); }
.fold-in { animation: lx-fold-in .25s ease-out both; }
@keyframes lx-fold-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fold-in { animation: none; } .page-learn .lx-fold .lx-ic { transition: none; } }
.mcol { stroke-width: 4; opacity: .28; stroke-dasharray: 1 9; }
.mhit { fill: transparent; cursor: pointer; }
.mown-st text { cursor: pointer; }
.stn .pulse { fill: none; stroke: var(--c); stroke-width: 2; opacity: .6; transform-box: fill-box; transform-origin: center; animation: lx-pulse 2s ease-out infinite; }
@keyframes lx-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { /* stations off the starter path: a shape per kind, filled when open, hollow when coming soon */
.stn.own .hit { fill: transparent; stroke: none; }
.stn.own .face { fill: var(--c); stroke: var(--c); stroke-width: 2; }
.stn.own.up .face { fill: var(--lx-surface); stroke-width: 1.8; stroke-dasharray: none; opacity: .8; }
.stn.own .ring { stroke-width: 2.5; }
.stn.own:focus-visible .ring { stroke: var(--lx-accent); stroke-width: 3; }
.mown { stroke-width: 4; opacity: .5; }
.mown.soon { stroke-dasharray: 2 7; opacity: .45; }
.mchev { stroke-width: 2.5; opacity: .8; }
/* the phone map's fold of a tier's upcoming lessons: a hollow station and a real button that opens them in place */
.mfold-mk { cursor: pointer; }
.mfold-mk .face { fill: var(--lx-surface); stroke: var(--c); stroke-width: 2; stroke-dasharray: 3 2.5; }
.mfold-mk .chev { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border: 1.5px dashed var(--lx-line-2); border-radius: 999px;
  background: var(--lx-surface); color: var(--lx-ink-2); font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 500; cursor: pointer;
  max-width: 100%; white-space: nowrap; }
.lx-fold:hover { border-color: var(--lx-ink-3); color: var(--lx-ink); }
.lx-fold:focus { outline: none; }
.lx-fold:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 1px; }
.page-learn .lx-fold .lx-ic { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .2s; }
.lx-fold[aria-expanded="true"] .lx-ic { transform: rotate(-90deg); }
.fold-in { animation: lx-fold-in .25s ease-out both; }
@keyframes lx-fold-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fold-in { animation: none; } .page-learn .lx-fold .lx-ic { transition: none; } }
.mcol { stroke-width: 4; opacity: .28; stroke-dasharray: 1 9; }
.mhit { fill: transparent; cursor: pointer; }
.mown-st text { cursor: pointer; }
.stn .pulse { animation: none; opacity: .35; transform: scale(1.3); } .lx-door { transition: none; } }
/* a door picks a tier: the other tiers' lines and shapes fade, their text turns to a token grey that keeps 4.5:1 */
.seg-dim path, .seg-dim circle, .seg-dim rect, .seg-dim .icon, path.seg-dim { opacity: .25; }
.seg-dim text, .seg-dim tspan { fill: var(--lx-ink-3); }
/* label fonts: metro.js measures text in the same fonts and sizes (measurer) */
.mlabel { font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 500; fill: var(--lx-ink); }
.mlabel.sub { font-family: var(--lx-f-mono); font-size: 11.5px; font-weight: 400; fill: var(--lx-ink-3); }
.mlabel.up { fill: var(--lx-ink-3); }
.mlabel.code { font-family: var(--lx-f-mono); font-size: 12px; font-weight: 600; fill: var(--lx-ink); }
.mlabel.code.up { font-weight: 400; fill: var(--lx-ink-3); }
.mlabel .mcode { font-family: var(--lx-f-mono); font-size: 12px; font-weight: 600; }
.mtext { font-family: var(--lx-f-body); font-size: 12px; fill: var(--lx-ink-3); }
.mtier { font-family: var(--lx-f-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lx-preview { position: absolute; z-index: 6; box-sizing: border-box; width: min(290px, calc(100% - 20px)); background: var(--lx-surface); border: 1px solid var(--lx-ink);
  border-radius: 14px; padding: 14px 14px 0; box-shadow: var(--lx-shadow-lg); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lx-preview.tier { width: min(440px, calc(100% - 20px)); }
.lx-preview .ph { flex: none; display: flex; gap: 10px; align-items: center; padding-right: 22px; }
.lx-preview .bd { display: grid; gap: 8px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -14px; padding: 0 14px 14px; }
.lx-preview .cue { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px;
  background: linear-gradient(transparent, var(--lx-surface) 60%); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.lx-preview.more .cue { opacity: 1; visibility: visible; }
.lx-preview .cue span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--lx-line-2); border-radius: 999px;
  background: var(--lx-surface); font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-2); }
.page-learn .lx-preview .cue .lx-ic { width: 13px; height: 13px; transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .lx-preview .cue { transition: none; } }
.lx-preview .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, var(--lx-surface)); color: var(--c); flex: none; }
.lx-preview .ic .lx-ic { width: 22px; height: 22px; }
.lx-preview .k { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); }
.page-learn .lx-preview h3 { font-size: 16.5px; margin: 0; }
.lx-preview p { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-preview .pf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.lx-preview-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.35; }
.lx-preview-list .lx-code { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); margin-right: 6px; }
.mext { cursor: pointer; }
.mext:focus { outline: none; }
.mext:focus-visible .mhit { stroke: var(--lx-accent); stroke-width: 2.5; }
.mext:hover .mtext { fill: var(--lx-ink); text-decoration: underline; }
/* the math toolbox: a shelf of chips under the lines (inside the map box, so cards can open from it) */
.lx-toolshelf { border-top: 1px dashed var(--lx-line-2); margin: 6px 6px 2px; padding: 10px 0 4px; }
.lx-toolshelf .hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 8px; }
.lx-toolshelf .tt { font-family: var(--lx-f-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-2); }
.lx-toolshelf .lx-hint { font-size: 13px; }
.lx-toolshelf .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 12px 5px 9px; border: 1.5px solid var(--lx-line-2); border-radius: 999px;
  background: var(--lx-surface); color: var(--lx-ink); font-family: var(--lx-f-body); font-size: 13.5px; line-height: 1.25; text-align: left; cursor: pointer; max-width: 100%; }
.lx-tool b { font-family: var(--lx-f-mono); font-size: 12.5px; font-weight: 600; }
.lx-tool .sh { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--lx-ink-2); border: 2px solid var(--lx-ink-2); }
.lx-tool.up { border-style: dashed; color: var(--lx-ink-3); }
.lx-tool.up b { font-weight: 400; }
.lx-tool.up .sh { background: var(--lx-surface); border-color: var(--lx-ink-3); }
.lx-tool.done .sh { background: var(--lx-good); border-color: var(--lx-good); }
.lx-tool:hover { border-color: var(--lx-ink-2); }
.lx-tool.sel { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); }
.lx-tool:focus { outline: none; }
.lx-tool:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-preview .x { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font-size: 20px; color: var(--lx-ink-3); border-radius: 8px; }
@media (max-width: 640px) {
  .lx-doors { gap: 8px; }
  .lx-doors[style*="--n:4"], .lx-doors[style*="--n:5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-door { padding: 14px 6px 10px; border-radius: 60px 60px 12px 12px; }
  .lx-door .ic { width: 40px; height: 40px; }
  .lx-door b { font-size: 13.5px; }
  .lx-door small { font-size: 10.5px; letter-spacing: .02em; }
  .lx-door .knob { display: none; }
  .lx-mapwrap { padding: 6px; }
  .lx-tool { font-size: 13px; }
}
/* the list view: the course as plain lists (also what readers without JavaScript see) */
details.lx-listview { margin-top: 14px; background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r); padding: 0 16px; }
details.lx-listview > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); }
.lx-list-tiers { display: grid; gap: 14px; padding-bottom: 14px; }
.page-learn .lx-list-tiers h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.lx-list-tiers h3 i { width: 18px; height: 5px; border-radius: 3px; background: var(--c); }
.lx-list-tiers ol, .lx-list-tiers ul { margin: 0; padding-left: 1.3rem; font-size: 14.5px; color: var(--lx-ink-2); }
.lx-list-tiers li { margin: 3px 0; }
.lx-list-tiers .lx-code { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); margin-right: 6px; }
.lx-list-tiers li.is-done::after { content: " ✓"; color: var(--lx-good); font-weight: 700; }

/* solver.css — the live solver status line (LX.SolverStatus in solver.js): loading, solving, then the outcome in plain
   words with the time the page waited. Colour follows the outcome; the text alone carries the meaning. */
.lx-solver-status { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; margin: 6px 0 0; padding: 2px 12px; border-radius: 999px;
  font-size: 14px; line-height: 1.35; color: var(--lx-ink-2); background: var(--lx-surface-2); }
.lx-solver-status:empty { display: none; }
.lx-solver-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lx-ink-3); }
.lx-solver-status[data-status="optimal"] { color: var(--lx-good); background: var(--lx-good-soft); }
.lx-solver-status[data-status="optimal"]::before { background: var(--lx-good); }
.lx-solver-status[data-status="infeasible"], .lx-solver-status[data-status="unbounded"], .lx-solver-status[data-status="infeasible-or-unbounded"],
.lx-solver-status[data-status="error"] { color: var(--lx-bad); background: var(--lx-bad-soft); }
.lx-solver-status[data-status="infeasible"]::before, .lx-solver-status[data-status="unbounded"]::before,
.lx-solver-status[data-status="infeasible-or-unbounded"]::before, .lx-solver-status[data-status="error"]::before { background: var(--lx-bad); }
.lx-solver-status[data-status="time-limit"] { color: var(--lx-warn); background: var(--lx-warn-soft); }
.lx-solver-status[data-status="time-limit"]::before { background: var(--lx-warn); }
.lx-solver-status[data-status="loading"]::before, .lx-solver-status[data-status="solving"]::before { animation: lx-solver-pulse 1s ease-in-out infinite alternate; }
@keyframes lx-solver-pulse { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lx-solver-status::before { animation: none !important; } }

/* plot.css — LX.Plot and LX.PlotCard (plot.js): the XY chart's text and focus ring, the caption, and the chart card with
   value chips (readouts) above the chart; also the model-lab stage (.lx-stage: a card with a head, readouts, sliders,
   a status line and goals; markup only, used by lessons 10 and 11). The readout tooltip (.lx-chart-tip), the legend (.lx-legend) and the text-version
   table (.lx-mini-table) are shared with daychart.css. Promoted from lessons 2, 3 and 4 and B2 (W1 integration). */
.lx-plotbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }   /* the column never grows past the box: a wide text-version table scrolls in its own box (SB1, C1 at 375 px) */
.lx-plot-cap { font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; color: var(--lx-ink-2); margin: 0; }
.lx-plot-cap:empty { display: none; }
.lx-plot { position: relative; min-width: 0; }
.lx-plot svg { display: block; width: 100%; height: auto; }
.lx-plot svg text { font-variant-numeric: tabular-nums; }
.lx-plot .ax { font-family: var(--lx-f-mono); font-size: 11px; fill: var(--lx-ink-3); }
.lx-plot .ax.spanl { fill: var(--lx-ink-2); }   /* a span's label sits on the span's shading */
.lx-plot .rl { font-family: var(--lx-f-body); font-size: 11px; }
.lx-plot .ttl { font-family: var(--lx-f-display); font-size: 12px; fill: var(--lx-ink-2); }
.lx-plot .mk, .lx-plot .mkd { fill: var(--lx-ink); paint-order: stroke; stroke: var(--lx-surface); stroke-width: 4px; stroke-linejoin: round; }
.lx-plot .mk { font-family: var(--lx-f-mono); font-size: 12px; font-weight: 600; }
.lx-plot .mkd { font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 500; }
.lx-plot .num { font-family: var(--lx-f-display); font-size: 13px; font-weight: 600; fill: var(--lx-bg); }
.lx-plot .hit.pick { cursor: pointer; }
.lx-plot[tabindex]:focus { outline: none; }
.lx-plot[tabindex]:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 3px; border-radius: 6px; }
.lx-legend[hidden] { display: none; }

/* the chart card: an eyebrow title, value chips, the chart, its legend and text version */
.lx-plotcard { gap: 10px; align-content: start; }
.lx-plotcard .lx-plot { margin-top: 8px; }
.lx-plotcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lx-readouts { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-readout { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--lx-surface-2); min-width: 0; }
.lx-readout span { font-family: var(--lx-f-display); font-size: 12px; color: var(--lx-ink-3); }
.lx-readout b { font-family: var(--lx-f-mono); font-size: 16px; font-weight: 600; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-readout.good b { color: var(--lx-good); }
.lx-readout.bad b { color: var(--lx-bad); }
.lx-readout.warn b { color: var(--lx-warn); }

/* the model-lab stage (markup only): <div class="lx-stage"><div class="lx-stage-head"><h3>…</h3><div class="lx-readouts">…</div></div>
   <div class="lx-ctls">sliders</div><p class="lx-stage-status">…</p><ul class="lx-goals"><li class="lx-goal won">…</li></ul></div> */
/* minmax(0, 1fr): a wide child (a chart's text-version table) scrolls inside its own box instead of widening the stage */
.lx-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 14px 16px; box-shadow: var(--lx-shadow); min-width: 0; }
.lx-stage[hidden] { display: none; }
.lx-stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.page-learn .lx-stage-head h3 { font-size: 16px; margin: 0; }
.lx-stage-status { font-size: 14.5px; color: var(--lx-ink-2); min-height: 1.3em; }
.lx-stage-status b { font-family: var(--lx-f-display); font-weight: 600; }
.lx-ctls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; }
.lx-goals { display: grid; gap: 6px; }
.lx-goal { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--lx-ink-2); }
.lx-goal .lx-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--lx-ink-3); }
.lx-goal.won { color: var(--lx-ink); } .lx-goal.won .lx-ic { color: var(--lx-good); }

/* scatter.css — LX.Scatter (scatter.js): axis text, dot labels, and the dots' pressed state and keyboard focus ring.
   Promoted from lesson 6 (W1 integration). */
.lx-scatter { display: block; width: 100%; height: auto; max-width: 620px; }
.lx-scatter .ax { font-family: var(--lx-f-mono); font-size: 11px; fill: var(--lx-ink-3); }
.lx-scatter .axt { font-family: var(--lx-f-display); font-size: 12.5px; fill: var(--lx-ink-2); }
.lx-scatter .dl { font-family: var(--lx-f-display); font-size: 13.5px; font-weight: 500; fill: var(--lx-ink); }
.lx-scatter-dot { cursor: pointer; }
.lx-scatter-dot:focus { outline: none; }
.lx-scatter-dot .ring { stroke: transparent; stroke-width: 2.5; }
.lx-scatter-dot:focus-visible .ring { stroke: var(--lx-accent); }
.lx-scatter-dot:focus-visible .dot, .lx-scatter-dot[aria-pressed="true"] .dot { stroke: var(--lx-ink); stroke-width: 3.5; }

/* tornado.css — LX.Tornado (tornado.js): one row per input, its bar from the result at one end to the other, the base as a line. */
.lx-torn { display: grid; gap: 6px; }
.lx-torn-lede { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-torn-row { display: grid; grid-template-columns: 8.6em minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.lx-torn-row > span { font-family: var(--lx-f-display); font-weight: 500; }
.lx-torn-row small { display: block; font-family: var(--lx-f-body); font-weight: 400; font-size: 12px; color: var(--lx-ink-3); }
.lx-torn-bar { position: relative; height: 30px; border-radius: 6px; background: var(--lx-surface-2); }
.lx-torn-bar i { position: absolute; top: 5px; bottom: 5px; border-radius: 4px; }
.lx-torn-bar i.lo { background: color-mix(in srgb, var(--below, var(--lx-good)) 70%, var(--lx-surface)); }
.lx-torn-bar i.hi { background: color-mix(in srgb, var(--above, var(--lx-bad)) 70%, var(--lx-surface)); }
.lx-torn-bar em { position: absolute; top: 6px; font-style: normal; font-family: var(--lx-f-mono); font-size: 11.5px; color: var(--lx-ink); white-space: nowrap; }
.lx-torn-bar .mid { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--lx-ink); }
@media (max-width: 560px) { .lx-torn-row { grid-template-columns: minmax(0, 1fr); } }

/* costsplit.css — LX.CostSplit (costsplit.js): rows of stacked bars, the colour key, and the bar helper. */
.lx-split { display: grid; gap: 8px; }
.lx-split-row { position: relative; display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 5.2em; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 1px solid var(--lx-line); border-radius: 10px; background: var(--lx-surface); color: var(--lx-ink); text-align: left; font: inherit; }
button.lx-split-row { cursor: pointer; }
.lx-split-row[aria-pressed="true"] { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); }
.lx-split-nm { display: flex; align-items: center; gap: 8px; font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; }
.lx-split-nm i, .lx-split-key i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); flex: none; }
.lx-split-tot { font-family: var(--lx-f-mono); font-weight: 600; font-size: 15px; text-align: right; }
.lx-split-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: var(--lx-surface-2); }
.lx-split-bar i { display: block; height: 100%; background: var(--c); }
.lx-split-bar i + i { box-shadow: inset 1px 0 0 var(--lx-surface); }
.lx-split-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--lx-ink-2); }
.lx-split-key span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .lx-split-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "b b"; }
  .lx-split-row .lx-split-nm { grid-area: n; } .lx-split-row .lx-split-tot { grid-area: t; } .lx-split-row .lx-split-bar { grid-area: b; }
}

/* supplystack.css — LX.SupplyStack (supplystack.js): the supply-stack chart, its legend and text version. */
.lx-stack { position: relative; }
.lx-stack svg { display: block; width: 100%; height: auto; }
.lx-stack text { font-family: var(--lx-f-mono); font-size: 11px; fill: var(--lx-ink-3); }
.lx-stack text.lab { font-family: var(--lx-f-display); font-size: 12px; font-weight: 500; fill: var(--lx-ink); }
.lx-stack text.big { font-family: var(--lx-f-mono); font-size: 12.5px; font-weight: 600; fill: var(--lx-ink); }
.lx-stack text.bg { stroke: var(--lx-surface); stroke-width: 4px; stroke-linejoin: round; }
.lx-stack-tail { display: grid; gap: 6px; }

/* frontier.css — LX.Frontier (frontier.js): cost against CO₂, the frontier, plan dots, the equal-score line. */
.lx-frontier { min-width: 0; }
.lx-frontier svg { display: block; width: 100%; height: auto; }
.lx-frontier text { font-family: var(--lx-f-mono); font-size: 12px; fill: var(--lx-ink-3); }
.lx-frontier text.lab { font-family: var(--lx-f-display); font-size: 13px; font-weight: 600; fill: var(--lx-ink); }
.lx-frontier text.note { font-family: var(--lx-f-body); font-size: 12.5px; fill: var(--lx-ink-3); }
.lx-frontier .dot.pick { cursor: pointer; }
.lx-frontier .dot:focus { outline: none; }
.lx-frontier .dot:focus-visible circle.c { stroke: var(--lx-accent); stroke-width: 4; }
.lx-frontier-alt table { border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.lx-frontier-alt td, .lx-frontier-alt th { padding: 2px 8px 2px 0; text-align: left; }

/* steelman.css — LX.Steelman (steelman.js): two sides of a contested point; open, behind buttons, or as <details>. */
.lx-steel { display: grid; gap: 12px; min-width: 0; }
.lx-steel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lx-steel-side { border: 1px solid var(--lx-line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; background: var(--lx-surface-2); min-width: 0; }
.page-learn .lx-steel-side h4 { font-size: 15.5px; margin: 0; }
.lx-steel-side ul { margin: 0; padding-left: 1.1rem; font-size: 14.5px; color: var(--lx-ink-2); }
.lx-steel-side p { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-steel-side.wide { grid-column: 1 / -1; }
/* frame: true (a card inside a step card) */
.lx-steel.framed { border: 1px solid var(--lx-line-2); border-radius: 12px; padding: 14px; gap: 10px; background: var(--lx-surface-2); }
.page-learn .lx-steel-title { font-size: 18px; margin: 0; }
.lx-steel.framed .lx-steel-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-steel.framed .lx-steel-side { border: 0; border-top: 3px solid var(--lx-tier-2); border-radius: 10px; padding: 12px; gap: 8px; background: var(--lx-surface); }
.lx-steel.framed .lx-steel-side:nth-child(2) { border-top-color: var(--lx-tier-4); }
.lx-steel.framed ul { display: grid; gap: 6px; }
.lx-steel-side > .lx-btn { justify-self: start; }
.lx-steel-body { display: grid; gap: 6px; }
/* reveal: "details" */
.lx-steel.details .lx-steel-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lx-steel.details .lx-steel-side { display: block; border-color: var(--lx-line-2); padding: 8px 12px; }
.lx-steel.details summary { cursor: pointer; font-family: var(--lx-f-display); font-weight: 500; min-height: 36px; display: flex; align-items: center; color: var(--lx-ink); }
.lx-steel.details .lx-steel-side p { margin: 4px 0 0; }
@media (max-width: 640px) { .lx-steel.framed .lx-steel-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lx-steel.details .lx-steel-cols { grid-template-columns: minmax(0, 1fr); } }

/* boundary.css — LX.Boundary (boundary.js): "It holds when" and "It leaves out", side by side, and the source line. */
.lx-bound { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lx-bound ul { margin: 0; padding-left: 1.1rem; font-size: 14.5px; color: var(--lx-ink-2); }
.lx-bound li { margin: 4px 0; }
.page-learn .lx-bound h4 { font-size: 15px; margin: 0 0 4px; }
.lx-bound-src { font-size: 13.5px; color: var(--lx-ink-3); }
@media (max-width: 560px) { .lx-bound { grid-template-columns: minmax(0, 1fr); } }

/* share.css — LX.Share (share.js): the link box (label, read-only link field, status line). */
.lx-share { display: grid; gap: 4px; min-width: 0; }
.lx-share[hidden] { display: none; }
.lx-share-note { font-size: 13.5px; color: var(--lx-ink-3); margin: 0; }
.lx-share input { width: 100%; min-width: 0; font-family: var(--lx-f-mono); font-size: 12.5px; padding: 7px 8px; border: 1px solid var(--lx-line-2); border-radius: 8px;
  background: var(--lx-surface); color: var(--lx-ink); }

/* lpplane.css — LX.LPPlane (lpplane.js): the fixed drawing (B1, K4; also the static fallback figures), the fluid drawing
   (lessons 10 and 11) and the row of simplex-walk controls under a plane. */
.lx-plane svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.lx-plane svg.pickable { cursor: crosshair; }
.lx-lp-grid { stroke: var(--lx-line); stroke-width: 1; }
.lx-lp-axis { stroke: var(--lx-ink-3); stroke-width: 1.4; }
.lx-lp-tick { font-family: var(--lx-f-mono); font-size: 14px; fill: var(--lx-ink-3); }
.lx-lp-axlab { font-family: var(--lx-f-display); font-size: 15px; fill: var(--lx-ink-2); }
.lx-lp-region { fill: color-mix(in srgb, var(--lx-accent) 20%, transparent); stroke: var(--lx-accent); stroke-width: 1.5; }
.lx-lp-region.ghost { fill: color-mix(in srgb, var(--lx-ink-3) 14%, transparent); stroke: none; }
.lx-lp-region.pick { fill: color-mix(in srgb, var(--lx-accent) 26%, transparent); stroke: var(--lx-accent); stroke-dasharray: 5 4; }
.lx-lp-region.soft { fill: color-mix(in srgb, var(--lx-accent) 16%, transparent); stroke: none; }
.lx-lp-region-line { fill: none; stroke: var(--lx-accent); stroke-width: 5; stroke-linecap: round; opacity: .75; }
.lx-lp-hatch { stroke: var(--lx-ink-3); stroke-width: 1.2; opacity: .35; }
.lx-lp-rule line { stroke: var(--lx-ink-3); stroke-width: 1.6; }
.lx-lp-rule.on line { stroke: var(--lx-ink); stroke-width: 2; }
.lx-lp-rule.hot line { stroke: var(--lx-accent); stroke-width: 3; }
.lx-lp-rlab, .lx-lp-plab, .lx-lp-isolab { font-family: var(--lx-f-mono); font-size: 14px; fill: var(--lx-ink); }
.lx-lp-plab { font-weight: 600; }
.lx-lp-isolab { fill: var(--lx-ink-2); font-size: 13px; }
.lx-lp-rlab.bg, .lx-lp-plab.bg, .lx-lp-isolab.bg { stroke: var(--lx-surface); stroke-width: 4px; stroke-linejoin: round; }
.lx-lp-iso { stroke: var(--lx-ink-2); stroke-width: 1.6; stroke-dasharray: 6 5; }
.lx-lp-pt circle, .lx-lp-fbpt { fill: var(--lx-surface); stroke: var(--lx-ink); stroke-width: 2.6; }
.lx-lp-pt.trail circle { fill: var(--lx-ink-3); stroke: none; }
.lx-lp-pt.good circle { stroke: var(--lx-good); }
.lx-lp-pt.bad circle { stroke: var(--lx-bad); }
/* fluid drawing */
.lx-plane.fluid { position: relative; touch-action: none; }
.lx-plane.fluid svg { max-width: none; margin: 0; overflow: visible; }
.lx-plane.fluid text { font-family: var(--lx-f-mono); font-variant-numeric: tabular-nums; }
.lx-plane.fluid .lbl { font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 500; }
.lx-plane .hit { stroke: transparent; stroke-width: 22; fill: none; cursor: grab; }
.lx-plane .hit:focus { outline: none; }
.lx-plane .hit:focus-visible { stroke: var(--lx-accent); stroke-opacity: .25; }
.lx-plane .dot { cursor: grab; }
.lx-plane .dot:focus { outline: none; }
.lx-plane .dot:focus-visible circle.ring { stroke: var(--lx-accent); stroke-width: 3; }
.lx-plane .hi { stroke-width: 5 !important; }
/* simplex-walk controls under a plane */
.lx-lp-walk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-lp-walk-out { font-size: 14.5px; color: var(--lx-ink); }

/* linkedviews.css — LX.LinkedViews (linkedviews.js): panels of linked lines and a linked table. */
.lx-lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lx-lv-view { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 12px; border: 1px solid var(--lx-line); background: var(--lx-surface); min-width: 0; }
.lx-lv-view.tbl { grid-column: 1 / -1; }
.lx-lv-view h4 { font-family: var(--lx-f-display); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--lx-ink-3); margin: 0 0 2px; }
.lx-lv-row { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; font-size: 14px; line-height: 1.35;
  color: var(--lx-ink); cursor: pointer; }
.lx-lv-row:hover { border-color: var(--lx-line-2); }
.lx-lv-row.on { background: var(--lx-accent-soft); border-color: var(--lx-accent); }
.lx-lv-row.static { cursor: default; color: var(--lx-ink-3); }
.lx-lv-row.static:hover { border-color: transparent; }
.lx-lv-sym { font-family: var(--lx-f-mono); font-size: 14px; white-space: nowrap; }
.lx-lv-sym var { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; }
.lx-lv-tblwrap { overflow-x: auto; max-width: 100%; }
.lx-lv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--lx-f-mono); }
.lx-lv-tbl th { font-family: var(--lx-f-display); font-weight: 500; font-size: 11.5px; color: var(--lx-ink-3); text-align: right; padding: 3px 4px; border-bottom: 1px solid var(--lx-line-2); }
.lx-lv-tbl th:first-child, .lx-lv-tbl td:first-child { text-align: left; }
.lx-lv-tbl td { padding: 4px; text-align: right; border-bottom: 1px solid var(--lx-line); white-space: nowrap; }
.lx-lv-tbl tr { cursor: pointer; }
.lx-lv-tbl tr.on td { background: var(--lx-accent-soft); }
.lx-lv-tbl tr:focus { outline: none; }
.lx-lv-tbl tr:focus-visible td { box-shadow: inset 0 0 0 2px var(--lx-accent); }
@media (max-width: 640px) { .lx-lv { grid-template-columns: minmax(0, 1fr); } }

/* cardsort.css — LX.CardSort (cardsort.js): the "cards" mode (a pool of cards and a row of bins) and the "toggles" mode
   (the job sorter: one row per item, one toggle per bin). */
.lx-cs { display: grid; gap: 12px; }
.lx-cs-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 10px; border-radius: 12px; border: 1px dashed var(--lx-line-2); background: var(--lx-surface-2); }
.lx-cs-pool:empty::before { content: attr(data-empty); font-size: 13.5px; color: var(--lx-ink-3); }
.lx-cs-card { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); font-family: var(--lx-f-body); font-size: 14.5px; line-height: 1.25; cursor: pointer; text-align: left; }
.lx-cs-card[aria-pressed="true"] { border-color: var(--lx-accent); box-shadow: inset 0 0 0 2px var(--lx-accent); }
.lx-cs-card.ok { border-color: var(--lx-good); }
.lx-cs-card.no { border-color: var(--lx-bad); box-shadow: inset 0 0 0 1px var(--lx-bad); }
.lx-cs-card .lx-ic { width: 15px; height: 15px; }
.lx-cs-card.ok .lx-ic { color: var(--lx-good); }
.lx-cs-card.no .lx-ic { color: var(--lx-bad); }
.lx-cs-bins { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.lx-cs-bin { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; border: 1px solid var(--lx-line); border-top: 4px solid var(--c);
  background: var(--lx-surface); min-height: 120px; min-width: 0; }
.lx-cs-bin > button.lx-cs-binbtn { display: grid; gap: 2px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--lx-ink); }
.lx-cs-bin > button.lx-cs-binbtn b { font-family: var(--lx-f-display); font-weight: 600; font-size: 15px; }
.lx-cs-bin > button.lx-cs-binbtn small { font-size: 12.5px; color: var(--lx-ink-3); }
.lx-cs-bin.armed { background: var(--lx-accent-soft); }
.lx-cs-list { display: grid; gap: 6px; }
.lx-cs-bin .lx-cs-card { width: 100%; font-size: 13.5px; }
.lx-cs-why { font-size: 14px; color: var(--lx-ink-2); display: grid; gap: 4px; margin: 0; padding-left: 1.1rem; }
@media (max-width: 700px) { .lx-cs-bins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* toggles mode (the job sorter) */
.lx-cs-grid { display: grid; gap: 2px; }
.lx-cs-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n, 3), 60px); gap: 6px 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--lx-line); }
.lx-cs-row.head { border: 0; padding: 0; font-family: var(--lx-f-display); font-size: 12px; color: var(--lx-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.lx-cs-row.head .jh { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lx-cs-row .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.lx-cs-row .nl { display: flex; align-items: center; gap: 8px; font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; }
.lx-cs-row .nl i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); flex: none; }
.lx-cs-whyb { font-size: 13px; padding: 2px 0; visibility: hidden; }
.lx-cs-grid.is-checked .lx-cs-whyb { visibility: visible; }
.lx-cs-row .tg { height: 38px; border-radius: 9px; border: 1px solid var(--lx-line-2); background: var(--lx-surface); color: var(--lx-ink-3); cursor: pointer; display: grid; place-items: center; }
.lx-cs-row .tg .lx-ic { width: 18px; height: 18px; opacity: 0; }
.lx-cs-row .tg[aria-pressed="true"] { background: var(--lx-ink); color: var(--lx-bg); border-color: var(--lx-ink); }
.lx-cs-row .tg[aria-pressed="true"] .lx-ic { opacity: 1; }
.lx-cs-grid.is-checked .tg.agree { box-shadow: 0 0 0 3px var(--lx-good-soft), inset 0 0 0 2px var(--lx-good); }
.lx-cs-grid.is-checked .tg.differ { box-shadow: 0 0 0 3px var(--lx-warn-soft), inset 0 0 0 2px var(--lx-warn); }
.lx-cs-grid.is-checked .tg.partly { border-style: dashed; }
.lx-cs-rwhy { grid-column: 1 / -1; font-size: 13.5px; color: var(--lx-ink-2); }
.lx-cs-rwhy ul { margin: 2px 0 4px; padding-left: 1.1rem; }
.lx-cs-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lx-cs-key .k { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--lx-good); vertical-align: middle; }
.lx-cs-key .k.differ { border-color: var(--lx-warn); }
.lx-cs-key .k.partly { border: 2px dashed var(--lx-line-2); }
.lx-cs-grid .lx-step-foot { flex-wrap: wrap; }
.lx-cs-grid .lx-step-foot .lx-btn { white-space: nowrap; }
@media (max-width: 640px) {
  .lx-cs-row { grid-template-columns: minmax(0, 1fr) repeat(var(--n, 3), 48px); gap: 6px; }
  .lx-cs-row .nl { font-size: 14px; }
}

/* toggle.css — LX.Toggle (toggle.js): an on/off switch button, and .lx-toggles, a wrapping row of them. */
.lx-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); font-family: var(--lx-f-display); font-size: 14px; cursor: pointer; }
.lx-toggle i { width: 28px; height: 16px; border-radius: 8px; background: var(--lx-surface-3); position: relative; flex: none; transition: background .15s; }
.lx-toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--lx-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.lx-toggle[aria-pressed="true"] i { background: var(--lx-good); }
.lx-toggle[aria-pressed="true"] i::after { left: 14px; }
@media (prefers-reduced-motion: reduce) { .lx-toggle i, .lx-toggle i::after { transition: none; } }

/* equation.css — LX.EquationCard (equation.js): an equation whose symbols are buttons, with a detail panel (.lx-cdetail,
   explain.css), an optional code box and a text version. Two looks: large symbol buttons (default) and .dense, a formula box
   whose symbols are dotted-underlined words. */
.lx-eqc { display: grid; gap: 12px; }
.lx-eqc.lx-eqc-side { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.lx-eqc-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.lx-eqc-main details.lx-textalt { margin: 0; }
.lx-eq { display: grid; gap: 14px; align-content: start; color: var(--lx-ink); min-width: 0; }
.lx-eq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--lx-f-mono); font-size: 20px; color: var(--lx-ink); min-width: 0; }
.lx-eq-row .op { color: var(--lx-ink-2); }
.lx-eq-row .op.txt { font-size: .82em; }
.lx-eq-row .note { font-family: var(--lx-f-body); font-size: 13px; color: var(--lx-ink-3); flex-basis: 100%; }
.lx-eq .tag { font-family: var(--lx-f-body); font-size: 13px; color: var(--lx-ink-3); margin-left: 10px; }
.lx-eq var { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; }
.lx-eq sub, .lx-eq sup { font-size: 70%; }
.lx-eq-sym { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--lx-line-2); background: var(--lx-surface);
  color: var(--lx-ink); font-family: var(--lx-f-mono); font-size: 20px; font-weight: 500; cursor: pointer; }
.lx-eq-sym.c { border-bottom: 4px solid var(--c); }
.lx-eq-sym:hover { border-color: var(--lx-ink-3); }
.lx-eq-sym.c:hover { border-bottom-color: var(--c); }
.lx-eq-sym[aria-pressed="true"] { background: var(--lx-ink); color: var(--lx-bg); border-color: var(--lx-ink); }
.lx-eq-sym.c[aria-pressed="true"] { border-bottom-color: var(--c); }
/* a fraction: numerator over denominator */
.lx-eq .frac { display: inline-grid; justify-items: center; gap: 4px; vertical-align: middle; }
.lx-eq .frac > span { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
.lx-eq .frac > .num { border-bottom: 2px solid var(--lx-ink); padding-bottom: 4px; }
/* dense: a whole model in a formula box */
.lx-eq.dense { gap: 6px; padding: 12px; border-radius: 12px; background: var(--lx-surface-2); overflow-x: auto; }
.lx-eq.dense .lx-eq-row { display: block; white-space: nowrap; font-family: var(--lx-f-body); font-size: 16px; line-height: 1.7; }
/* a dense row's note goes on its own line under the formula and wraps (the row itself stays on one line) */
.lx-eq.dense .lx-eq-row .note { display: block; white-space: normal; line-height: 1.4; margin-top: 1px; }
.lx-eq.dense .lx-eq-sym { min-width: 0; min-height: 0; margin: 0; padding: 0 1px; border: 0; border-bottom: 2px dotted var(--lx-ink-3); border-radius: 0;
  background: none; color: inherit; font: inherit; line-height: 1.2; }
.lx-eq.dense .lx-eq-sym[aria-pressed="true"] { background: var(--lx-accent-soft); border-bottom-color: var(--lx-accent); border-radius: 4px 4px 0 0; color: inherit; }
/* the panel and the code box */
.lx-eq-det code { display: block; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--lx-surface); color: var(--lx-ink);
  font-family: var(--lx-f-mono); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-learn .lx-eq-det code { background: var(--lx-surface) !important; color: var(--lx-ink) !important; }
.lx-eq-code pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--lx-surface-2); color: var(--lx-ink); font-family: var(--lx-f-mono);
  font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; border: 0; }
@media (max-width: 860px) { .lx-eqc.lx-eqc-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .lx-eq-row { font-size: 18px; gap: 6px 5px; }
  .lx-eq-sym { min-width: 40px; min-height: 42px; padding: 0 7px; font-size: 18px; }
  .lx-eq .frac > span { gap: 6px 5px; }
  .lx-eq.dense .lx-eq-row { font-size: 15px; }
}

/* formulate.css — LX.FormulateBox (formulate.js): the parts of a model in words, each under a colour bar, and the
   symbols in a collapsed box. */
.lx-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lx-form.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-form > div { border: 1px solid var(--lx-line); border-top: 4px solid var(--c); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px;
  align-content: start; background: var(--lx-surface); min-width: 0; }
.page-learn .lx-form h4 { font-family: var(--lx-f-display); font-weight: 600; font-size: 15px; margin: 0; color: var(--lx-ink); }
.lx-form p { font-size: 14.5px; color: var(--lx-ink-2); margin: 0; }
details.lx-form-symbols { margin: 0; }
.lx-form-sym { margin-top: 6px; font-family: var(--lx-f-mono); font-size: 14px; line-height: 1.8; color: var(--lx-ink); background: var(--lx-surface-2);
  border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.lx-form-sym .tag { font-family: var(--lx-f-body); font-size: 13px; color: var(--lx-ink-3); }
@media (max-width: 860px) { .lx-form, .lx-form.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lx-form, .lx-form.three { grid-template-columns: minmax(0, 1fr); } }

/* formulation.css — LX.Formulation (formulation.js): a model's rules in words, in symbols (labelled lines, optionally
   pickable and marked right or wrong) and as a table that turns into labelled cards on phones. */
.lx-fviews { display: grid; gap: 10px; }
.lx-fviews > .lx-seg { justify-self: start; }
.lx-ftag { font-size: 12.5px; color: var(--lx-ink-3); }
/* words */
.lx-fwords { margin: 0; padding-left: 1.2rem; font-size: 15.5px; }
.lx-fwords li { margin: 4px 0; }
.lx-fwords li.on { font-weight: 600; }
/* symbols: one line per rule, a label column and the symbols */
.lx-flines { display: grid; gap: 4px; }
.lx-fline { display: grid; grid-template-columns: var(--lx-tagw, 3em) minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--lx-line); background: var(--lx-surface); color: var(--lx-ink); text-align: left; font: inherit; width: 100%; }
button.lx-fline { cursor: pointer; min-height: 44px; }
button.lx-fline:hover { border-color: var(--lx-ink-3); }
.lx-fline.on { background: var(--lx-accent-soft); border-color: var(--lx-accent); }
.lx-fline.later { color: var(--lx-ink-3); }
.lx-fline.right { border-color: var(--lx-good); box-shadow: inset 0 0 0 1px var(--lx-good); background: var(--lx-good-soft); }
.lx-fline.wrong { border-color: var(--lx-bad); }
.lx-fline .ln { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); }
.lx-flines.wide .lx-fline .ln { font-family: var(--lx-f-display); font-size: 12.5px; }
.lx-fline .lx { font-family: var(--lx-f-mono); font-size: 15px; overflow-wrap: anywhere; }
.lx-fline .lx sub, .lx-ftab td.sym sub { font-size: 70%; }
.lx-fline .lx i, .lx-ftab td.sym i { font-family: var(--lx-f-body); font-style: italic; }
.lx-flegend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; font-size: 14px; color: var(--lx-ink-2); margin: 4px 0 0; }
.lx-flegend dt { font-family: var(--lx-f-mono); color: var(--lx-ink); }
.lx-flegend dd { margin: 0 0 4px; }
/* table */
.lx-ftab { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-learn .lx-ftab, .page-learn .lx-ftab > :not(caption) > *, .page-learn .lx-ftab > :not(caption) > * > * { background: transparent !important; box-shadow: none !important; color: var(--lx-ink); }
.page-learn .lx-ftab tr.on > td { background: var(--lx-accent-soft) !important; }
.lx-ftab th { text-align: left; font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-ink-3);
  padding: 6px 8px; border-bottom: 1px solid var(--lx-line-2); }
.lx-ftab td { padding: 8px; border-bottom: 1px solid var(--lx-line); vertical-align: top; }
.lx-ftab td.sym { font-family: var(--lx-f-mono); font-size: 13.5px; white-space: nowrap; }
.page-learn .lx-ftab tr.later > td { color: var(--lx-ink-3); }
@media (max-width: 640px) {
  .lx-ftab thead { display: none; }
  .lx-ftab, .lx-ftab tbody, .lx-ftab tr, .lx-ftab td { display: block; }
  .lx-ftab tr { padding: 8px 0; border-bottom: 1px solid var(--lx-line); }
  .lx-ftab td { border: 0; padding: 2px 0; }
  .lx-ftab td.sym { white-space: normal; overflow-wrap: anywhere; }
  .lx-ftab td[data-l]::before { content: attr(data-l) ": "; font-family: var(--lx-f-display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--lx-ink-3); }
}
@media (max-width: 560px) { .lx-flines.wide .lx-fline { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* network.css — LX.Network (network.js): buses as boxes, lines with flows; a tapped bus has a thicker border. */
.lx-net svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.lx-net .bus[role="button"] { cursor: pointer; }
.lx-net .bus:focus { outline: none; }
.lx-net .bus:focus-visible rect.box { stroke: var(--lx-accent); stroke-width: 3; }
.lx-net .bus.sel rect.box { stroke-width: 3.5; }
.lx-net text { font-family: var(--lx-f-display); }
.lx-net .num { font-family: var(--lx-f-mono); font-weight: 600; }

/* pricechart.css — LX.PriceChart and LX.HourPicker (pricechart.js). The chart itself is styled by plot.css; this file
   holds the hour picker (previous / next buttons, the hour, jump buttons). Promoted from M1 (W1 integration). */
.lx-hours { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-hours output { font-family: var(--lx-f-mono); font-size: 16px; font-weight: 600; min-width: 58px; text-align: center; color: var(--lx-ink); }
.lx-hours button { min-width: 44px; }

/* checklist.css — tick-box lists the reader keeps (checklist.js): bordered rows (N1, B2) or soft rows (B3, K7). */
.lx-checklist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lx-checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--lx-line); background: var(--lx-surface); }
.lx-checklist input { width: 20px; height: 20px; accent-color: var(--lx-good); }
.lx-checklist:not(.lx-ck-soft) input { margin: 3px 0 0; }
.lx-checklist input:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-checklist label { display: grid; gap: 2px; cursor: pointer; margin: 0; }
.lx-checklist label b { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); }
.lx-checklist label span { font-size: 14px; color: var(--lx-ink-2); }
.lx-checklist label small { font-size: 12.5px; color: var(--lx-ink-3); overflow-wrap: anywhere; }
.lx-checklist.lx-ck-code label small { font-family: var(--lx-f-mono); }
.lx-checklist li.on { border-color: color-mix(in srgb, var(--lx-good) 45%, var(--lx-line)); }
.lx-checklist-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13.5px; color: var(--lx-ink-3); }
@media (min-width: 861px) { .lx-checklist.lx-ck-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* soft: rows on the soft surface, accent ticks (B3, K7) */
.lx-checklist.lx-ck-soft li { border: 0; background: var(--lx-surface-2); font-size: 15px; color: var(--lx-ink-2); }
.lx-checklist.lx-ck-soft input { margin-top: 2px; accent-color: var(--lx-accent); }
/* inline: the bold label and its text on one line */
.lx-checklist.lx-ck-inline label { display: block; }
.lx-checklist.lx-ck-inline label b { font-size: inherit; }

/* evidence.css — the evidence ladder (evidence.js): rungs highest first, an off-ladder box, and claims to place. */
.lx-ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; max-width: 900px; }
.lx-rungs { display: grid; gap: 4px; margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 3px solid var(--lx-line-2); position: relative; }
.lx-rungs li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--lx-line); background: var(--lx-surface); position: relative; }
.lx-rungs li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 18px; border-top: 3px solid var(--lx-line-2); }
.lx-rungs li b { font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; }
.lx-rungs li small { display: block; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-rungs li .k { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); }
.lx-rungs li.hit { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); background: var(--lx-surface-2); }
.lx-ladder-off { margin-top: 8px; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--lx-line-2); font-size: 14px; color: var(--lx-ink-2); }
.lx-ladder-off.hit { border-style: solid; border-color: var(--lx-ink); }
.lx-ladder-place { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-ladder-place li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lx-line); background: var(--lx-surface); }
.lx-ladder-place label { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; margin: 0; }
.lx-ladder-place select { font: inherit; font-size: 15px; min-height: 42px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); max-width: 100%; }
.lx-ladder-place select:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
@media (max-width: 760px) { .lx-ladder { grid-template-columns: minmax(0, 1fr); } }

/* tagger.css — the phrase tagger (tagger.js): the text card, tappable phrases, tag chips, the comparison list.
   Tag colours come from the data (--c); the number badge repeats the question, so colour is never the only cue. */
.lx-tagger { display: grid; gap: 12px; }
.lx-tag-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: color-mix(in srgb, var(--c) 86%, var(--lx-ink));   /* the number at 4.5:1, day and night */
  color: var(--lx-btn-ink); font-family: var(--lx-f-mono); font-size: 12px; font-weight: 600; }
.lx-tagger-text { border: 1px solid var(--lx-line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; background: var(--lx-surface-2); }
.lx-tagger-kicker { font-family: var(--lx-f-display); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--lx-ink-3); }
.page-learn .lx-tagger-head { font-family: var(--lx-f-display); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0; color: var(--lx-ink); }
.lx-tagger-framing, .lx-tagger-src { font-size: 13px; color: var(--lx-ink-3); }
.lx-tagger-body { font-size: 16.5px; line-height: 1.9; color: var(--lx-ink); }
.lx-ph { color: var(--lx-ink); border-bottom: 2px dashed var(--lx-ink-3); border-radius: 4px 4px 0 0; padding: 1px 3px; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lx-ph:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-ph.sel { outline: 2px solid var(--lx-ink); outline-offset: 1px; }
.lx-ph.tagged { background: color-mix(in srgb, var(--c) 18%, var(--lx-surface)); border-bottom: 2px solid var(--c); }
.lx-ph .lx-tag-n { margin-left: 5px; vertical-align: 1px; font-size: 11px; height: 17px; min-width: 17px; }
.lx-tagger-pal { display: grid; gap: 8px; }
.lx-tagger-q { font-family: var(--lx-f-display); font-weight: 500; font-size: 15.5px; }
.lx-tagger-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-tag-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 11px 4px 6px; border-radius: 10px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; font-family: var(--lx-f-display); font-size: 14px; font-weight: 500; }
.lx-tag-chip[aria-pressed="true"] { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); background: var(--lx-surface-2); }
.lx-tag-chip small { font-family: var(--lx-f-body); font-weight: 400; font-size: 12px; color: var(--lx-ink-3); }
.lx-tag-chip:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-tagger-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lx-tagger-count { font-size: 13.5px; color: var(--lx-ink-3); }
.lx-tagger-cmp { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lx-tagger-cmp li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--lx-line); background: var(--lx-surface); }
.lx-tagger-cmp li .lx-ic { width: 18px; height: 18px; margin-top: 2px; }
.lx-tagger-cmp li.same .lx-ic, .lx-tagger-cmp li.fair .lx-ic { color: var(--lx-good); }
.lx-tagger-cmp li.other .lx-ic, .lx-tagger-cmp li.none .lx-ic { color: var(--lx-warn); }
.lx-tagger-cmp b { font-family: var(--lx-f-display); font-weight: 500; }
.lx-tagger-cmp .why { display: block; font-size: 14px; color: var(--lx-ink-2); margin-top: 2px; }
.lx-tagger-cmp .tags { display: block; font-size: 13px; color: var(--lx-ink-3); margin-top: 2px; }
@media (max-width: 560px) { .page-learn .lx-tagger-head { font-size: 18px; } .lx-tagger-body { font-size: 16px; } }

/* unitchain.css — a chain of numbers with units (LX.UnitChain) and the evidence clock (LX.EvidenceClock), unitchain.js.
   The unit chain is .lx-uchain: .lx-chain is the causal chain's grid (chains.css), and both can sit on one page. */
.lx-uchain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lx-uchain li { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--lx-line-2); background: var(--lx-surface); }
.lx-uchain li b { font-family: var(--lx-f-mono); font-size: 15.5px; font-weight: 600; color: var(--lx-ink); }
.lx-uchain li span { font-size: 12px; color: var(--lx-ink-3); }
.lx-uchain li.op { border: 0; background: none; padding: 0 2px; font-family: var(--lx-f-mono); font-size: 13px; color: var(--lx-ink-2); }
.lx-uchain li.out { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); }
.lx-clock svg { width: 100%; height: auto; display: block; }
.lx-clock text { font-family: var(--lx-f-body); font-size: 12.5px; fill: var(--lx-ink-2); }
.lx-clock text.v { font-family: var(--lx-f-mono); font-weight: 600; fill: var(--lx-ink); }

/* checkpoint.css — the checkpoint runner (checkpoint.js): task card, answer controls, order list, self-rating, results,
   the gated worked solution of the page (.lx-ck-gated) and its lock box (.lx-ck-lock). */
.lx-ck { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.lx-ck-card { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 18px 20px; display: grid; gap: 12px; box-shadow: var(--lx-shadow); }
.lx-ck-intro { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.lx-ck-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-ck-tag { font-size: 13px; color: var(--lx-ink-3); font-family: var(--lx-f-display); }
.lx-ck-q { font-size: 18.5px; line-height: 1.45; max-width: 62ch; color: var(--lx-ink); }
.lx-ck-q:focus { outline: none; }
.lx-ck-body { display: grid; gap: 12px; }
.lx-ck-opts { display: grid; gap: 8px; }
.lx-ck-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-ck-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-ck-fb { display: grid; gap: 8px; }
.lx-ck-rating { display: grid; gap: 10px; }
.lx-ck-field { display: grid; gap: 4px; }
.lx-ck-field label { font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; }
.lx-ck input[type=number], .lx-ck select, .lx-ck textarea { font: inherit; font-size: 16px; color: var(--lx-ink); background: var(--lx-surface); border: 1px solid var(--lx-line-2);
  border-radius: 10px; padding: 8px 10px; min-height: 44px; max-width: 100%; }
.lx-ck input[type=number] { width: 10em; }
.lx-ck textarea { width: 100%; min-height: 76px; resize: vertical; }
.lx-ck-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lx-ck-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lx-ck-order li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--lx-line-2);
  border-radius: 11px; background: var(--lx-surface); }
.lx-ck-order li.ok { border-color: var(--lx-good); }
.lx-ck-order li.no { border-color: var(--lx-bad); }
.lx-ck-order .n { font-family: var(--lx-f-mono); color: var(--lx-ink-3); }
.lx-ck-order .mv { display: flex; gap: 4px; }
.lx-ck-order .mv button { min-width: 40px; min-height: 40px; border-radius: 9px; border: 1px solid var(--lx-line-2); background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; font-size: 16px; }
.lx-ck-order .mv button:disabled { opacity: .35; cursor: not-allowed; }
.lx-ck details.lx-ck-sol { border: 1px solid var(--lx-line); border-radius: 12px; padding: 8px 12px; background: var(--lx-surface-2); }
.lx-ck details.lx-ck-sol > summary { cursor: pointer; font-family: var(--lx-f-display); font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.lx-ck details.lx-ck-sol p { margin: .4rem 0 0; }
.lx-ck-solpts { margin: .4rem 0 0; padding-left: 1.2rem; }
.lx-ck-chart svg { display: block; width: 100%; height: auto; }
.lx-ck-points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lx-ck-points label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.lx-ck-points input { width: 22px; height: 22px; margin-top: 1px; flex: none; }
.lx-ck-rate { display: grid; gap: 10px; }
.lx-ck-rate fieldset { border: 1px solid var(--lx-line); border-radius: 12px; padding: 8px 12px; margin: 0; display: grid; gap: 6px; }
.lx-ck-rate legend { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; padding: 0 4px; }
.lx-ck-rate .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-ck-rate .opts label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border: 1px solid var(--lx-line-2); border-radius: 10px; cursor: pointer; font-size: 14.5px; }
.lx-ck-rate .opts input { width: 18px; height: 18px; }
.lx-ck-rate .anchor { font-size: 13.5px; color: var(--lx-ink-2); }
.lx-ck-res { width: 100%; border-collapse: collapse; font-size: 14px; }
.lx-ck-res th { text-align: left; font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-ink-3);
  padding: 6px 8px; border-bottom: 1px solid var(--lx-line-2); }
.lx-ck-res td { padding: 7px 8px; border-bottom: 1px solid var(--lx-line); vertical-align: top; }
.lx-ck-res td.n { font-family: var(--lx-f-mono); white-space: nowrap; }
.page-learn .lx-ck-res, .page-learn .lx-ck-res > :not(caption) > *, .page-learn .lx-ck-res > :not(caption) > * > * { background: transparent !important; box-shadow: none !important; color: var(--lx-ink); }
@media (max-width: 600px) {
  .lx-ck-res thead { display: none; }
  .lx-ck-res, .lx-ck-res tbody, .lx-ck-res tr, .lx-ck-res td { display: block; }
  .lx-ck-res tr { padding: 6px 0; border-bottom: 1px solid var(--lx-line); }
  .lx-ck-res td { border: 0; padding: 1px 0; }
  .lx-ck-res td[data-l]::before { content: attr(data-l) ": "; color: var(--lx-ink-3); font-size: 12.5px; font-family: var(--lx-f-body); }
}
.lx-ck-level { font-family: var(--lx-f-display); font-weight: 600; font-size: 22px; }
.lx-ck-level:focus { outline: none; }
.lx-ck textarea.lx-ck-out { font-family: var(--lx-f-mono); font-size: 12.5px; min-height: 160px; }
.lx-ck-lock { border: 1px dashed var(--lx-line-2); border-radius: var(--lx-r-lg); padding: 16px 18px; display: grid; gap: 10px; background: var(--lx-surface); }
.lx-js .lx-ck-gated:not(.is-open) { display: none; }
@media (max-width: 560px) { .lx-ck-card { padding: 14px; } .lx-ck-q { font-size: 17.5px; } }

/* sheet.css — the working spreadsheet (sheet.js): formula bar, tools, a scrolling grid with sticky headers. */
.lx-sheet { display: grid; gap: 8px; min-width: 0; }
.lx-sheet-bar { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.lx-sheet-name { font-family: var(--lx-f-mono); font-size: 15px; font-weight: 600; text-align: center; padding: 8px 0; border-radius: 8px; background: var(--lx-surface-2); }
.lx-sheet-fx { min-height: 42px; min-width: 0; padding: 0 10px; border-radius: 8px; border: 1px solid var(--lx-line-2); background: var(--lx-surface); color: var(--lx-ink);
  font-family: var(--lx-f-mono); font-size: 16px; }
.lx-sheet-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lx-sheet-msg { font-size: 13.5px; color: var(--lx-ink-3); }
.lx-sheet-scroll { position: relative; max-height: 380px; overflow: auto; border: 1px solid var(--lx-line); border-radius: 10px; }
.lx-sheet-grid { border-collapse: separate; border-spacing: 0; font-family: var(--lx-f-mono); font-size: 14px; min-width: 100%; }
.lx-sheet-grid th { position: sticky; top: 0; z-index: 1; background: var(--lx-surface-2); color: var(--lx-ink-3); font-weight: 400; font-size: 12px; padding: 4px 6px;
  border-bottom: 1px solid var(--lx-line); border-right: 1px solid var(--lx-line); }
.lx-sheet-grid tbody th { position: sticky; left: 0; z-index: 0; text-align: right; width: 2.4em; }
.lx-sheet-grid .lx-sheet-corner { left: 0; z-index: 2; }
.lx-sheet-grid td { padding: 0; min-width: 4.6em; border-bottom: 1px solid var(--lx-line); border-right: 1px solid var(--lx-line); background: var(--lx-surface); }
.lx-sheet-grid td.first { min-width: 3.6em; }
.lx-sheet-grid td.w { min-width: 6em; }
.lx-sheet-grid td button { display: block; width: 100%; min-height: 32px; padding: 0 6px; border: 0; background: transparent; color: var(--lx-ink); font: inherit; text-align: right;
  cursor: cell; white-space: nowrap; }
.lx-sheet-grid td.first button, .lx-sheet-grid td.lab button, .lx-sheet-grid td.head button { text-align: left; }
.lx-sheet-grid td.head button { font-family: var(--lx-f-display); font-size: 12.5px; color: var(--lx-ink-2); white-space: normal; line-height: 1.2; padding: 4px 6px; }
.lx-sheet-grid td.lab button { font-family: var(--lx-f-display); font-size: 13px; color: var(--lx-ink-2); }
.lx-sheet-grid td button.f { background: color-mix(in srgb, var(--lx-accent) 7%, transparent); }
.lx-sheet-grid td button.todo { background: var(--lx-warn-soft); }
.lx-sheet-grid td button.err { color: var(--lx-bad); font-weight: 600; }
.lx-sheet-grid td button.sel { outline: 2px solid var(--lx-accent); outline-offset: -2px; }
.lx-sheet-grid td button:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: -3px; border-radius: 0; }
@media (max-width: 560px) {
  .lx-sheet-grid { font-size: 13px; }
  .lx-sheet-grid td { min-width: 3.8em; } .lx-sheet-grid td.first { min-width: 3.6em; } .lx-sheet-grid td.w { min-width: 5em; }
  .lx-sheet-grid td button { min-height: 30px; padding: 0 4px; }
  .lx-sheet-grid td.head button { font-size: 11.5px; }
  .lx-sheet-fx { font-size: 15px; }
}

/* practice.css — LX.Practice (practice.js): faded practice sets, and the small pieces their exercises are built from
   (a model in symbols, a table of corners, a point, an answer row, a worked line). Promoted from bridges B1 and B3. */
.lx-fp { display: grid; gap: 12px; min-width: 0; }
.lx-fp-lede { font-size: 15px; color: var(--lx-ink-2); max-width: 72ch; }
.lx-fp-intro { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-fp-foot { font-size: 13px; color: var(--lx-ink-3); }
.lx-fp-fade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 6px; }
@media (max-width: 560px) {
  .lx-fp-bar .lx-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .lx-fp-bar .lx-seg button { padding: 6px; line-height: 1.25; }
  .lx-fp-fade { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .lx-fp .lx-fp-k { font-size: 13px; align-items: flex-start; }
  .lx-fp .lx-fp-m { font-size: 11.5px; }
}
.lx-fp-step { width: 100%; display: grid; gap: 2px; text-align: left; min-height: 48px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; font: inherit; }
.lx-fp-step[aria-pressed="true"] { border-color: var(--lx-accent); box-shadow: inset 0 0 0 1px var(--lx-accent); background: var(--lx-accent-soft); }
.lx-fp-k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lx-f-display); font-weight: 500; font-size: 14px; }
.lx-fp-k b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lx-surface-3); font-size: 12px; font-weight: 600; }
.lx-fp-k .lx-ic { width: 18px; height: 18px; color: var(--lx-good); }
.lx-fp-m { font-size: 12.5px; color: var(--lx-ink-3); font-family: var(--lx-f-mono); white-space: nowrap; }
.lx-fp-ex { display: grid; gap: 10px; border-top: 1px solid var(--lx-line); padding-top: 12px; min-width: 0; }
.page-learn .lx-fp-title { font-size: 18px; margin: 0; }
.lx-fp-title:focus { outline: none; }
.lx-fp-area { display: grid; gap: 10px; min-width: 0; }
.lx-fp-area > * { min-width: 0; }
.lx-fp-area > .lx-btn { justify-self: start; }
.page-learn .lx-fp-model { list-style: none; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--lx-surface-2); font-family: var(--lx-f-mono); font-size: 14.5px;
  display: flex; flex-wrap: wrap; gap: 2px 20px; }
.lx-fp-tabw { max-width: 100%; overflow-x: auto; }
.page-learn .lx-fp-tab { border-collapse: collapse; font-size: 14.5px; margin: 0; width: 100%; max-width: 640px; }
@media (max-width: 560px) { .page-learn .lx-fp-tab { font-size: 13.5px; } .lx-fp-tab th, .lx-fp-tab td { padding: 6px 5px; } }
.lx-fp-tab th, .lx-fp-tab td { padding: 6px 10px; border-bottom: 1px solid var(--lx-line); text-align: left; vertical-align: middle; background: transparent; color: var(--lx-ink); }
.lx-fp-tab th { font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; color: var(--lx-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.lx-fp-tab td.n { font-family: var(--lx-f-mono); white-space: nowrap; }
.lx-fp-tab tr.best td { background: var(--lx-good-soft); font-weight: 600; }
.lx-fp-tab tr.ask td { background: var(--lx-accent-soft); }
.lx-fp-pt { display: inline-flex; align-items: center; gap: 4px; font-family: var(--lx-f-mono); flex-wrap: wrap; }
.lx-fp-ans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px; border-radius: 10px; background: var(--lx-surface-2); }
.lx-fp-ask { font-size: 15px; color: var(--lx-ink); }
.lx-fp-worked { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.lx-fp-worked .lx-ic { color: var(--lx-good); flex: none; margin-top: 3px; }
.lx-fp-hints { display: grid; gap: 6px; }
.lx-fp-hint { font-size: 15px; color: var(--lx-ink-2); padding: 8px 10px; border-left: 3px solid var(--lx-warn); background: var(--lx-warn-soft); border-radius: 0 10px 10px 0; }
.lx-fp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-fp-acts:empty, .lx-fp-hints:empty, .lx-fp-why:empty { display: none; }
.lx-fp-choices { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* forms.css — page pieces of the W2 and W3 forms (learn/_template-studio.qmd, _template-case.qmd, _template-sandbox.qmd,
   _template-capstone.qmd). W2: the studio's task
   card above the interactive (div.lx-card.lx-studio-brief, seen with and without JavaScript) and its task list; the
   case file's numbered parts, its question line and the approved-excerpt quote (blockquote.lx-excerpt with
   data-source="excerpt:<key>", checked by the scope scan); the static lists of the no-JS fallbacks (timeline, exemplar
   notes, rubric table); the case file's Try-it box, its toys' controls and comparison table (.cf-*), and the theme colour
   of an allow-listed explainer on a Learn page. W3: the sandbox's brief (its facts as labelled cells) and bench frame
   (controls beside the run box from 960 px), the results' readouts and chart cards, the capstone's brief, and the
   static tables of their no-JS fallbacks. Colours from --lx-* tokens only. */
.lx-studio-brief { margin-bottom: 14px; display: grid; gap: 8px; }
.lx-studio-task { margin: 0; padding-left: 1.3rem; display: grid; gap: 6px; font-size: 16px; color: var(--lx-ink-2); }
.lx-studio-task b { color: var(--lx-ink); font-family: var(--lx-f-display); font-weight: 500; }
/* the myth-or-fact cards under a studio's self-check (:where keeps a page's own spacing able to override it) */
:where(.lx-form-studio) #selfcheck .lx-myths { margin-top: 18px; }
.lx-case { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.lx-case-part { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r); padding: 14px 16px; display: grid;
  gap: 6px; align-content: start; min-width: 0; }
.lx-case-part.wide { grid-column: 1 / -1; }
.lx-case-part p:not(.lx-eyebrow), .lx-case-part ul { font-size: 15.5px; color: var(--lx-ink-2); }
.lx-case-part ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.lx-case-part b { color: var(--lx-ink); }
.page-learn .lx-case-q { font-family: var(--lx-f-display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--lx-ink); }
.lx-excerpt { margin: 0; padding: 10px 14px; border-left: 4px solid var(--lx-tier-4); background: var(--lx-surface-2); border-radius: 0 10px 10px 0;
  display: grid; gap: 6px; }
.page-learn .lx-excerpt p { font-size: 16px; color: var(--lx-ink); }
.lx-excerpt footer { font-size: 13px; color: var(--lx-ink-3); }
.lx-tl-static, .lx-ex-static { margin: 0; padding-left: 1.2rem; display: grid; gap: 5px; font-size: 15px; color: var(--lx-ink-2); }
.lx-tl-static b { font-family: var(--lx-f-mono); font-weight: 600; color: var(--lx-ink); }
.lx-case-try { display: grid; gap: 8px; margin-top: 14px; min-width: 0; }
.lx-case-try ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; font-size: 15.5px; color: var(--lx-ink-2); }
/* the Try-it box wraps: a long command or file path breaks on a 375 px phone, and its text takes the list's size */
.lx-case-try code { white-space: normal; overflow-wrap: anywhere; }
.lx-case-try p:not(.lx-eyebrow) { font-size: 15.5px; color: var(--lx-ink-2); overflow-wrap: anywhere; }
/* case-file toys (CF2, CF6, CF7): a labelled control (.cf-ctl, its label .cf-ctl-l), a row of buttons (.cf-row), a pair
   of selects (.cf-selects of .cf-sel) and a two-sided comparison table (table.cf-two: th per row, td with data-l) that
   becomes labelled lines on phones */
.cf-ctl { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cf-ctl .lx-seg, .cf-ctl .lx-toggle { justify-self: start; }
.cf-ctl-l { font-family: var(--lx-f-display); font-weight: 500; font-size: 14px; color: var(--lx-ink-2); }
.cf-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-row .lx-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; transform: none; }
.cf-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cf-sel { display: grid; gap: 4px; min-width: 0; }
.cf-sel select { min-height: 38px; border-radius: 9px; border: 1px solid var(--lx-line-2); background: var(--lx-surface); color: var(--lx-ink); padding: 0 8px;
  font-size: 14px; width: 100%; max-width: 100%; }
.cf-two { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cf-two th, .cf-two td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--lx-line); }
.cf-two thead th { font-family: var(--lx-f-display); font-weight: 500; font-size: 12.5px; color: var(--lx-ink-3); }
.cf-two tbody th { font-family: var(--lx-f-display); font-weight: 500; color: var(--lx-ink); }
.cf-two td { color: var(--lx-ink-2); }
/* an allow-listed explainer on a Learn page (assets/explainers/, a case file's Explain section): the explainers read the
   theme colour --t from the body (common.js color("t")) and the helpers --t-ink, --t-soft, --t-line from their card, which
   the site defines only on project pages (.theme-*, pubs.css); on Learn pages they take the Learn accent, day and night */
body.page-learn { --t: var(--lx-accent); }
.page-learn .explainer { --t-ink: var(--lx-accent); --t-soft: var(--lx-accent-soft); --t-line: color-mix(in srgb, var(--lx-accent) 30%, var(--lx-line)); margin: 0; }
.lx-rb-static th[scope="row"] { font-family: var(--lx-f-display); font-weight: 500; text-align: left; vertical-align: top; padding: 9px 8px;
  border-bottom: 1px solid var(--lx-line); }
.lx-rb-static td { font-size: 14px; }
@media (max-width: 560px) {
  .cf-selects { grid-template-columns: minmax(0, 1fr); }
  .cf-two thead { display: none; }
  .cf-two tr { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--lx-line); }
  .cf-two th, .cf-two td { border: 0; padding: 2px 0; }
  .cf-two td::before { content: attr(data-l) ": "; font-family: var(--lx-f-display); color: var(--lx-ink-3); }
}
@media (max-width: 640px) {
  .lx-case { grid-template-columns: minmax(0, 1fr); }
  .lx-case-part { padding: 12px 14px; }
  .lx-rb-static th[scope="row"] { display: block; border: 0; padding: 6px 0 2px; }
}

/* ---------- sandbox and capstone pages (W3) */
/* the brief: a card above the bench (seen with and without JavaScript); its facts as labelled cells, two columns
   from 641 px; a capstone's brief reuses the studio's task list (.lx-studio-task) */
.lx-sb-brief, .lx-cap-brief { margin-bottom: 14px; display: grid; gap: 10px; }
.lx-sb-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.lx-sb-facts > div { min-width: 0; }
.lx-sb-facts dt { font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-sb-facts dd { margin: 2px 0 0; font-size: 15.5px; color: var(--lx-ink-2); }
.lx-sb-facts dd b { color: var(--lx-ink); font-weight: 600; }
/* the bench: groups of controls (fieldsets) beside the run box (BenchRun, the readouts and the plan link); one column
   below 960 px, with the run box after the controls */
.lx-sb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; background: var(--lx-surface); border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-lg); padding: 16px 18px; box-shadow: var(--lx-shadow); min-width: 0; }
@media (min-width: 960px) { .lx-sb { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.lx-sb-controls { display: grid; gap: 12px; min-width: 0; }
.lx-sb-group { margin: 0; padding: 10px 14px 14px; border: 1px solid var(--lx-line); border-radius: 12px; display: grid; gap: 10px; min-width: 0; }
.lx-sb-group legend { float: none; width: auto; margin: 0; padding: 0 6px; font-family: var(--lx-f-display); font-weight: 600; font-size: 15px; color: var(--lx-ink); }
.lx-sb-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 960px) { .lx-sb-side { position: sticky; top: 72px; } }
.lx-sb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
/* results: the readouts (.lx-readouts from plot.css), then chart cards (no overflow clipping: chart tips and popovers
   must stay visible, W2 review finding 7; a wide table goes in its own .lx-scroll-x) */
.lx-sb-results { display: grid; gap: 14px; min-width: 0; }
.lx-sb-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 960px) { .lx-sb-charts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-sb-chart { min-width: 0; }
/* the no-JS fallbacks: the default plan and its results as plain tables, written from the engine by the test */
.lx-sb-static { display: grid; gap: 10px; }
.lx-sb-static table { width: 100%; }
@media (max-width: 640px) {
  .lx-sb-facts { grid-template-columns: minmax(0, 1fr); }
  .lx-sb { padding: 12px 14px; }
}
/* five step links in the header (the older forms have four): on phones each stays on one line ("Self-check") */
@media (max-width: 560px) {
  :where(.lx-form-sandbox, .lx-form-capstone) .lx-steps a { padding: 0 6px; white-space: nowrap; }
}
/* a capstone's self-check holds the exemplars and the rubric, one after the other */
:where(.lx-form-capstone) #selfcheck .lx-xgrid + .lx-xgrid { margin-top: 18px; }

/* exemplars.css — LX.Exemplars (exemplars.js): two answers side by side, marked phrases with number badges, the notes
   they open, and the "what made the difference" table. Weak and good are told apart by their heading and level as well
   as the top edge's colour. */
.lx-ex { display: grid; gap: 12px; min-width: 0; }
.lx-ex-lede { font-size: 15.5px; color: var(--lx-ink-2); }
.lx-ex-task { border: 1px dashed var(--lx-line-2); border-radius: 12px; padding: 10px 14px; display: grid; gap: 4px; }
.lx-ex-task p:not(.lx-eyebrow) { font-size: 15.5px; color: var(--lx-ink); }
.lx-ex-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .lx-ex-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-ex-ans { border: 1px solid var(--lx-line); border-top: 4px solid var(--lx-ink-3); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px;
  align-content: start; background: var(--lx-surface); min-width: 0; }
.lx-ex-ans.weak { border-top-color: var(--lx-warn); }
.lx-ex-ans.good { border-top-color: var(--lx-good); }
.lx-ex-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.page-learn .lx-ex-head h4 { font-size: 16px; margin: 0; }
.lx-ex-level { font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-ex-ans.weak .lx-ex-level { color: var(--lx-warn); }
.lx-ex-ans.good .lx-ex-level { color: var(--lx-good); }
.page-learn .lx-ex-text { font-size: 16px; line-height: 1.85; color: var(--lx-ink); }
/* lines: true, an answer written as a card (one field per line), in the view and in staticHTML's no-JS version */
.lx-ex-lines { white-space: pre-line; }
.lx-ex-mark { border-bottom: 2px dashed var(--lx-ink-3); border-radius: 4px 4px 0 0; padding: 1px 2px; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lx-ex-mark:hover { background: var(--lx-surface-2); }
.lx-ex-mark.on { border-bottom-style: solid; border-bottom-color: var(--lx-accent); background: var(--lx-accent-soft); }
.lx-ex-mark:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-ex-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 4px; border-radius: 9px;
  background: var(--lx-ink-2); color: var(--lx-bg); font-family: var(--lx-f-mono); font-size: 11.5px; font-weight: 600; line-height: 1; vertical-align: 1px; }
.lx-ex-mark.on .lx-ex-n { background: var(--lx-accent); }
.lx-ex-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lx-ex-notes:not(:has(li:not([hidden]))) { display: none; }
.lx-ex-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; padding: 8px 10px; border-radius: 10px;
  background: var(--lx-surface-2); font-size: 14.5px; color: var(--lx-ink-2); }
.lx-ex-note .lx-ex-n { margin: 2px 0 0; }
.lx-ex-note b { color: var(--lx-ink); font-weight: 600; }
.lx-ex-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.lx-ex-count { font-size: 13.5px; color: var(--lx-ink-3); }
.lx-ex-diffbox { display: grid; gap: 6px; }
.lx-ex-diff { width: 100%; border-collapse: collapse; font-size: 14.5px; background: transparent; }
/* keep the night theme's table fill out, as table.css does for Learn tables */
.page-learn .lx-ex-diff, .page-learn .lx-ex-diff > * > * > * { background: transparent !important; box-shadow: none !important; }
.lx-ex-diff th, .lx-ex-diff td { padding: 7px 8px; border-bottom: 1px solid var(--lx-line); text-align: left; vertical-align: top; }
.lx-ex-diff thead th { font-family: var(--lx-f-display); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-ex-diff tbody th { font-family: var(--lx-f-display); font-weight: 500; color: var(--lx-ink); }
.lx-ex-diff td { color: var(--lx-ink-2); }
@media (max-width: 560px) {
  .lx-ex-diff thead { display: none; }
  .lx-ex-diff, .lx-ex-diff tbody, .lx-ex-diff tr, .lx-ex-diff th, .lx-ex-diff td { display: block; width: 100%; }
  .lx-ex-diff tr { padding: 6px 0; border-bottom: 1px solid var(--lx-line); }
  .lx-ex-diff th, .lx-ex-diff td { border: 0; padding: 2px 0; }
  .lx-ex-diff td::before { content: attr(data-label) ": "; color: var(--lx-ink-3); font-size: 12.5px; }
}

/* rubric.css — LX.Rubric (rubric.js): one fieldset per competence; its four levels as radio labels that carry the
   anchored descriptions (a ladder: one column on phones, four from 860 px); the picked level is outlined and ticked, the
   bar (Proficient) marked in words; the result line, the copy button and the copy box. */
.lx-rb { display: grid; gap: 14px; min-width: 0; }
.lx-rb-lede { font-size: 15.5px; color: var(--lx-ink-2); }
.lx-rb-comp { border: 1px solid var(--lx-line); border-radius: 12px; padding: 10px 14px 14px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.lx-rb-comp legend { float: none; width: auto; margin: 0; padding: 0 6px; font-size: 16px; }
.lx-rb-comp legend b { font-family: var(--lx-f-display); font-weight: 600; color: var(--lx-ink); }
.lx-rb-look { font-size: 14.5px; color: var(--lx-ink-2); }
.lx-rb-look b { font-weight: 600; color: var(--lx-ink); }
.lx-rb-levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 860px) { .lx-rb-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-rb-level { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-content: start; margin: 0; padding: 9px 10px;
  border: 1px solid var(--lx-line); border-radius: 10px; background: var(--lx-surface); cursor: pointer; }
.lx-rb-level input { grid-row: 1 / span 2; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--lx-accent); }
.lx-rb-level input:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-rb-name { font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; color: var(--lx-ink); }
.lx-rb-name small { margin-left: 6px; font-family: var(--lx-f-body); font-weight: 400; font-size: 12px; color: var(--lx-ink-3); }
.lx-rb-desc { font-size: 13.5px; line-height: 1.4; color: var(--lx-ink-2); }
.lx-rb-level.bar { border-style: dashed; border-color: var(--lx-line-2); }
.lx-rb-level.on { border: 2px solid var(--lx-accent); background: var(--lx-accent-soft); padding: 8px 9px; }
.lx-rb-level.on .lx-rb-desc { color: var(--lx-ink); }
.lx-rb-result { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); }
.lx-rb-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.lx-rb-copy { display: grid; gap: 4px; }
.lx-rb-copy textarea { width: 100%; font-family: var(--lx-f-mono); font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--lx-line-2);
  border-radius: 10px; background: var(--lx-surface-2); color: var(--lx-ink); resize: vertical; }

/* questioncard.css — LX.QuestionCard (questioncard.js): the card's fields in a two-column grid (one column on phones),
   the five question types as pill radios, the checks list (a tick or a question mark, and words) and the copy box. */
.lx-qc { display: grid; gap: 14px; min-width: 0; }
.lx-qc-lede { font-size: 15.5px; color: var(--lx-ink-2); }
.lx-qc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.lx-qc-field { display: grid; gap: 4px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.lx-qc-field.wide { grid-column: 1 / -1; }
.lx-qc-field > label, .lx-qc-field > legend { float: none; width: auto; margin: 0; padding: 0; font-family: var(--lx-f-display); font-weight: 500; font-size: 14.5px; color: var(--lx-ink); }
.lx-qc-field input[type="text"], .lx-qc-field textarea, .lx-qc-field select, .lx-qc-copy textarea {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--lx-line-2); border-radius: 10px; background: var(--lx-surface);
  color: var(--lx-ink); font-family: var(--lx-f-body); font-size: 15.5px; }
.lx-qc-field textarea { resize: vertical; line-height: 1.4; }
.lx-qc-field input[type="text"]:focus-visible, .lx-qc-field textarea:focus-visible, .lx-qc-field select:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 1px; }
.lx-qc-field .lx-hint { font-size: 12.5px; }
.lx-qc-typerow { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-qc-type { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 4px 12px 4px 8px; border: 1px solid var(--lx-line-2);
  border-radius: 10px; background: var(--lx-surface); cursor: pointer; font-family: var(--lx-f-display); font-size: 14px; color: var(--lx-ink); }
.lx-qc-type input { width: 16px; height: 16px; margin: 0; accent-color: var(--lx-accent); }
.lx-qc-type input:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.lx-qc-type.on { border-color: var(--lx-accent); box-shadow: inset 0 0 0 1px var(--lx-accent); background: var(--lx-accent-soft); }
.lx-qc-tinfo { font-size: 14px; color: var(--lx-ink-2); }
.lx-qc-tinfo b { color: var(--lx-ink); font-weight: 600; }
.lx-qc-tinfo span { display: block; color: var(--lx-ink-3); font-size: 13px; margin-top: 2px; }
.lx-qc-checks { display: grid; gap: 6px; border-top: 1px solid var(--lx-line); padding-top: 12px; }
.lx-qc-ckhead { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); }
.lx-qc-cklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lx-qc-cklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: start; font-size: 14.5px; color: var(--lx-ink); }
.lx-qc-cklist li .lx-ic { width: 18px; height: 18px; margin-top: 2px; }
.lx-qc-cklist li.ok .lx-ic { color: var(--lx-good); }
.lx-qc-cklist li.warn .lx-ic { color: var(--lx-warn); }
.lx-qc-cklist .why { display: block; font-size: 13.5px; color: var(--lx-ink-2); }
.lx-qc-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-qc-copy { display: grid; gap: 4px; }
.lx-qc-copy textarea { font-family: var(--lx-f-mono); font-size: 13px; line-height: 1.45; background: var(--lx-surface-2); }
@media (max-width: 640px) { .lx-qc-form { grid-template-columns: minmax(0, 1fr); } }

/* timeline.css — LX.Timeline (timeline.js): an ordered list on a vertical rule; each event a marker, its date and kind
   (in words), its label, text and source line; the time that passed above it; key steps ringed and tagged. On wide
   screens the date column sits left of the event. Kind colours: study tier-4, data tier-2, policy tier-3, event ink-3. */
.lx-tl { display: grid; gap: 10px; min-width: 0; }
.lx-tl-lede { font-size: 15.5px; color: var(--lx-ink-2); }
.lx-tl-list { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; display: grid; gap: 14px; }
.lx-tl-list::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--lx-line-2); border-radius: 1px; }
.lx-tl-ev { --c: var(--lx-ink-3); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.lx-tl-ev.k-study { --c: var(--lx-tier-4); } .lx-tl-ev.k-data { --c: var(--lx-tier-2); } .lx-tl-ev.k-policy { --c: var(--lx-tier-3); }
.lx-tl-dot { position: absolute; left: -24px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--lx-surface); border: 3px solid var(--c); }
.lx-tl-gap ~ .lx-tl-dot { top: 27px; }
.lx-tl-ev.key .lx-tl-dot { background: var(--c); box-shadow: 0 0 0 3px var(--lx-surface), 0 0 0 5px var(--lx-accent); }
.lx-tl-gap { font-size: 12.5px; color: var(--lx-ink-3); font-style: italic; }
.lx-tl-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lx-tl-date { font-family: var(--lx-f-mono); font-weight: 600; font-size: 14px; color: var(--lx-ink); }
.lx-tl-kind, .lx-tl-keytag { font-family: var(--lx-f-display); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.lx-tl-keytag { color: var(--lx-accent); }
.lx-tl-body { display: grid; gap: 3px; min-width: 0; }
.page-learn .lx-tl-label { font-family: var(--lx-f-display); font-weight: 500; font-size: 16px; color: var(--lx-ink); }
.page-learn .lx-tl-text { font-size: 15px; color: var(--lx-ink-2); }
.page-learn .lx-tl-src { font-size: 13px; color: var(--lx-ink-3); overflow-wrap: anywhere; }
.lx-tl-more { margin: 0; }
.lx-tl-more summary { cursor: pointer; font-family: var(--lx-f-display); font-size: 13.5px; color: var(--lx-ink-3); min-height: 30px; display: flex; align-items: center; }
.lx-tl-more p { font-size: 14.5px; color: var(--lx-ink-2); }
@media (min-width: 760px) {
  .lx-tl-list { padding-left: 0; }
  .lx-tl-list::before { left: 152px; }
  .lx-tl-ev { grid-template-columns: 136px minmax(0, 1fr); column-gap: 40px; }
  .lx-tl-gap { grid-column: 2; }
  .lx-tl-when { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
  .lx-tl-dot { left: 146px; }
  .lx-tl-gap ~ .lx-tl-dot { top: 27px; }
}

/* planengine.css — the page kit of the planning engine (planengine.js, LX.townPlan.ui) shared by lessons 12 and 13:
   the stage and cards, the plan and comparison tables (TextTable: cards on phones), the scenario box, the week tabs, the
   hourly table and the verdict list. Moved verbatim from the style block 13-capstone.js used to inject (W2 infra,
   2026-11-03); the lx13- prefix stays because both lessons use these classes. Colours from --lx-* tokens only. */
.lx13-stage{display:grid;gap:14px;min-width:0}
.lx13-card{background:var(--lx-surface);border:1px solid var(--lx-line);border-radius:var(--lx-r-lg);padding:14px 16px;display:grid;gap:10px;min-width:0}
.page-learn .lx13-card h3{font-size:17px}
.lx13-head{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap}
.lx13-sub{font-size:13.5px;color:var(--lx-ink-3)}
/* nothing in a card may widen it: wide tables scroll in their own box (.lx13-hours, lesson 12's .lx12-scroll; W2 integration: at 375 px
   an open text version pushed lesson 13's page 344 px wide, lesson 12's 117 px) */
.lx13-card>*,.lx13-chart>.lx-textalt{min-width:0;max-width:100%}
.lx13-chart svg{display:block;width:100%;height:auto}
.lx13-chart text{font-family:var(--lx-f-mono);font-size:12px;fill:var(--lx-ink-3)}
.lx13-chart text.lab{font-family:var(--lx-f-display);font-size:13px;font-weight:600;fill:var(--lx-ink)}
.lx13-chart text.note{font-family:var(--lx-f-body);font-size:12.5px;fill:var(--lx-ink-3)}
.lx13-mix{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--lx-surface-3)}
.lx13-mix i{display:block;height:100%;background:var(--c)}
.lx13-group{display:grid;gap:12px}
.page-learn .lx13-group>p{font-family:var(--lx-f-display);font-weight:500;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--lx-ink-3)}
.lx13-tallies{grid-template-columns:repeat(2,minmax(0,1fr))}
.lx13-tallies .lx-tally.bad b{color:var(--lx-bad)}
.lx13-box{border:1px solid var(--lx-line-2);border-radius:12px;padding:12px;display:grid;gap:10px;background:var(--lx-surface-2)}
.lx13-plan{width:100%;border-collapse:collapse;font-size:14px}
.lx13-plan td,.lx13-plan th{padding:3px 4px;border-bottom:1px solid var(--lx-line);text-align:left;font-weight:400}
.lx13-plan .n{text-align:right;font-family:var(--lx-f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lx13-tt{width:100%;border-collapse:collapse;font-size:14.5px}.lx13-tt th,.lx13-tt td{padding:8px 8px;border-bottom:1px solid var(--lx-line);text-align:left;vertical-align:top;font-weight:400}
.lx13-tt thead th{font-family:var(--lx-f-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lx-ink-3)}
.lx13-tt tbody th b{display:flex;align-items:center;gap:8px;font-family:var(--lx-f-display);font-weight:600}.lx13-tt tbody th b i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.lx13-tt tbody th small{display:block;color:var(--lx-ink-3);font-size:12.5px;margin-left:18px}
@media (max-width:620px){.lx13-tt thead{display:none}.lx13-tt,.lx13-tt tbody,.lx13-tt tr,.lx13-tt th,.lx13-tt td{display:block;width:100%}.lx13-tt tr{border:1px solid var(--lx-line);border-radius:12px;padding:6px 10px;margin-bottom:10px}
.lx13-tt th,.lx13-tt td{border:0;padding:4px 0}.lx13-tt td::before{content:attr(data-label);display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--lx-ink-3)}}
.lx13-plan th{font-family:var(--lx-f-display);font-size:12.5px;color:var(--lx-ink-3)}
.lx13-rowb{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lx13-scen>summary{cursor:pointer;font-family:var(--lx-f-display);font-weight:500;font-size:14.5px;color:var(--lx-ink-2);min-height:40px;display:flex;align-items:center}
.lx13-scen[open]{display:grid;gap:12px}
.lx13-week .lx-seg button{min-height:34px;padding:0 9px;font-size:13px}
.lx13-cmp{width:100%;border-collapse:collapse;font-size:14px}.lx13-cmp th,.lx13-cmp td{padding:4px 6px;border-bottom:1px solid var(--lx-line);text-align:right}
.lx13-cmp th:first-child,.lx13-cmp td:first-child{text-align:left}.lx13-cmp td{font-family:var(--lx-f-mono);font-variant-numeric:tabular-nums}.lx13-cmp td:first-child{font-family:var(--lx-f-body)}
.lx13-hours{max-height:340px;overflow:auto;margin-top:6px}.lx13-hours table{font-size:12.5px;min-width:640px}.lx13-hours th,.lx13-hours td{padding:2px 5px;white-space:nowrap}
.lx13-hours thead th{position:sticky;top:0;background:var(--lx-surface)}
.lx13-verdict{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14.5px}.lx13-verdict li{display:flex;gap:8px;align-items:flex-start}.lx13-verdict li b{font-family:var(--lx-f-mono);font-weight:600}
.lx13-verdict .ok{color:var(--lx-good)}.lx13-verdict .no{color:var(--lx-bad)}.lx13-verdict .lx-ic{flex:none;margin-top:2px}
@media (max-width:560px){.lx13-card{padding:12px}}

/* scalestrip.css — LX.ScaleStrip (scalestrip.js): the five scales side by side, and the scale palette.
   The palette (--lx-scale-0 ... --lx-scale-4, S0 device and plant to S4 nation; day, then night) is the only place these
   colours are defined: F1's zoom, card sorts and comparison table, and any later scale route, use the same tokens.
   Everything else takes colours from the --lx-* tokens. */
body.page-learn { --lx-scale-0: #2F8F80; --lx-scale-1: #2A7FA0; --lx-scale-2: #2E66B5; --lx-scale-3: #5150B0; --lx-scale-4: #6A3F9E; }
body.page-learn.quarto-dark { --lx-scale-0: #5CC0B1; --lx-scale-1: #5AAED2; --lx-scale-2: #7CA6EE; --lx-scale-3: #9A9BEA; --lx-scale-4: #B496E6; }
.lx-ss { display: grid; gap: 10px; min-width: 0; }
.lx-ss-flow { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--lx-ink-2); }
.lx-ss-flow span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--lx-surface-2); }
.lx-ss-flow .lx-ic { width: 16px; height: 16px; }
.lx-ss-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lx-ss-strip li { border: 1px solid var(--lx-line); border-top: 4px solid var(--c); border-radius: 12px; padding: 10px 12px; display: grid; gap: 5px;
  align-content: start; background: var(--lx-surface); font-size: 13.5px; color: var(--lx-ink-2); min-width: 0; }
.lx-ss-strip li.is-marked { background: var(--lx-accent-soft); border-color: var(--lx-accent); }
.lx-ss-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.lx-ss-code { font-family: var(--lx-f-mono); font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, var(--lx-ink)); }   /* the scale's colour toward the ink: 4.5:1 day and night */
.lx-ss-pw { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink-3); }
.lx-ss-strip .lx-ss-name { font-family: var(--lx-f-display); font-weight: 600; font-size: 15px; color: var(--lx-ink); }
.lx-ss-who, .lx-ss-line { font-size: 13.5px; color: var(--lx-ink-2); }
.lx-ss-res { display: flex; flex-wrap: wrap; gap: 4px; }
.lx-ss-tick { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: var(--lx-surface-2); color: var(--lx-ink-3); }
.lx-ss-tick .lx-ic { width: 12px; height: 12px; }
.lx-ss-tick.ok { color: var(--lx-good); background: var(--lx-good-soft); }
.lx-ss-tick.no { color: var(--lx-warn); background: var(--lx-warn-soft); }
.page-learn .lx-ss-les { font-size: 13px; color: var(--lx-ink-3); }
.lx-ss-tag { font-size: 12.5px; font-weight: 600; color: var(--lx-ink); }
@media (max-width: 860px) { .lx-ss-strip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lx-ss-flow { flex-direction: column; } }

/* stakeholders.css — LX.Stakeholders (the role table: cards of labelled lines on phones) and LX.StakeholderMap (rings of
   groups as buttons), promoted from A22 and R9 at the W2 integration. Colours from --lx-* tokens only, day and night. */
.lx-stake { width: 100%; border-collapse: collapse; font-size: 14px; }
.lx-stake th, .lx-stake td { padding: 7px 8px; border-bottom: 1px solid var(--lx-line); text-align: left; vertical-align: top; font-weight: 400; }
.lx-stake thead th { font-family: var(--lx-f-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-ink-3); }
.lx-stake tbody th b { display: block; font-family: var(--lx-f-display); font-weight: 600; }
.lx-stake tbody th small { color: var(--lx-ink-3); font-size: 12.5px; }
.lx-stake .mk { display: inline-flex; align-items: center; gap: 5px; }
.lx-stake .mk i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--lx-ink-2); flex: none; }
.lx-stake .mk.yes i { background: var(--lx-ink-2); }
.lx-stake .mk.part i { background: linear-gradient(90deg, var(--lx-ink-2) 50%, transparent 50%); }
.lx-stake td small { display: block; color: var(--lx-ink-3); font-size: 12.5px; }
@media (max-width: 640px) {
  .lx-stake thead { display: none; }
  .lx-stake, .lx-stake tbody, .lx-stake tr, .lx-stake th, .lx-stake td { display: block; width: 100%; }
  .lx-stake tr { border: 1px solid var(--lx-line); border-radius: 12px; padding: 6px 10px; margin-bottom: 10px; }
  .lx-stake th, .lx-stake td { border: 0; padding: 3px 0; }
  .lx-stake td::before { content: attr(data-label); display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--lx-ink-3); }
}
.lx-stake-static { width: 100%; border-collapse: collapse; font-size: 14px; }
.lx-stake-static th, .lx-stake-static td { padding: 6px 8px; border-bottom: 1px solid var(--lx-line); text-align: left; vertical-align: top; }
.lx-smap { display: grid; gap: 10px; }
.lx-smap-ring { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px dashed var(--lx-line-2); background: var(--lx-surface); }
.lx-smap-ring.r0 { border-style: solid; }
.lx-smap-ring.r1 { background: var(--lx-surface-2); }
.lx-smap-ring > .lx-eyebrow { margin: 0; }
.lx-smap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-smap-chip { font: inherit; font-size: 14px; min-height: 38px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--lx-line-2);
  background: var(--lx-surface); color: var(--lx-ink); cursor: pointer; }
.lx-smap-chip[aria-pressed="true"] { background: var(--lx-ink); color: var(--lx-bg); border-color: var(--lx-ink); }
.page-learn .lx-smap-owed { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--lx-surface-2); font-size: 14.5px; color: var(--lx-ink); }

/* numanswer.css — LX.NumAnswer (numanswer.js): a number box with its label, unit and Check button. The box's width comes
   from --lx-na-w (default 7.5em) and, at 560 px and below, --lx-na-wp (default: the same); set them with the width and
   widthPhone options. .lx-na-msg is the note shown under the row when an entry is refused (not just a number). Promoted
   from the toolbox (K1 to K5, K8). */
.lx-na { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lx-na label { font-family: var(--lx-f-display); font-weight: 500; }
.lx-na-num { width: var(--lx-na-w, 7.5em); min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--lx-line-2); background: var(--lx-surface);
  color: var(--lx-ink); font-family: var(--lx-f-mono); font-size: 17px; }
.lx-na-num.right { border-color: var(--lx-good); box-shadow: inset 0 0 0 1px var(--lx-good); }
.lx-na-num.wrong { border-color: var(--lx-warn); box-shadow: inset 0 0 0 1px var(--lx-warn); }
.lx-na-unit { font-family: var(--lx-f-mono); color: var(--lx-ink-3); }
@media (max-width: 560px) { .lx-na-num { width: var(--lx-na-wp, var(--lx-na-w, 7.5em)); } }
.lx-na-msg { flex-basis: 100%; font-size: 14px; color: var(--lx-ink-2); border-left: 3px solid var(--lx-warn); padding-left: 8px; }
.lx-na-msg[hidden] { display: none; }

/* drill.css — LX.Drill (drill.js): the practice drill's card and its current item. The question, the choice buttons and
   the feedback use the shared .lx-qtext, .lx-qbtns, .lx-choice and .lx-saw; the number box is .lx-na (numanswer.css).
   Promoted from the toolbox (K1 to K5, K8). */
.lx-drill { display: grid; gap: 10px; }
.lx-drill .lx-btn { justify-self: start; }
.lx-drill-q { display: grid; gap: 10px; }
.lx-drill-q .lx-qtext { overflow-wrap: anywhere; }
.lx-drill-q .lx-qtext:focus { outline: none; }

/* weekstrip.css — LX.WeekStrip (weekstrip.js): 52 week cells in four rows of 13 behind a date column, extreme weeks
   outlined, a red dot on short weeks, the key, and the text version's table. Moved from the style block M3 injected
   (m3-strip, m3-grid, m3-cell, m3-keys, and the m3-tbl rules its table used) at the W2 integration, 2026-11-03; the
   look is unchanged. Colours from --lx-* tokens only; cell colours come in as --c. */
.lx-wks{display:grid;gap:6px;min-width:0}
.lx-wks-grid{display:grid;grid-template-columns:4.6em repeat(13,minmax(0,1fr));gap:3px;align-items:center}
.lx-wks-grid span.rl{font-size:12px;color:var(--lx-ink-3);font-family:var(--lx-f-mono)}
/* cells and keys take their colour a little toward the ink (darker by day, lighter by night), so the letter in the page colour reads at 4.5:1 */
.lx-wks-cell{position:relative;height:26px;border-radius:5px;background:color-mix(in srgb,var(--c) 86%,var(--lx-ink));color:var(--lx-bg);font:600 11px/26px var(--lx-f-mono);text-align:center;overflow:hidden}
.lx-wks-cell.x{outline:2px solid var(--lx-ink);outline-offset:-2px}
.lx-wks-cell.short::after{content:'';position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--lx-bad);box-shadow:0 0 0 1.5px var(--lx-surface)}
.lx-wks-keys{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--lx-ink-2);margin:0;padding:0;list-style:none}
.lx-wks-keys li{display:flex;align-items:center;gap:6px}.lx-wks-keys i{width:12px;height:12px;border-radius:3px;background:color-mix(in srgb,var(--c) 86%,var(--lx-ink));flex:none}
.lx-wks-keys i.dot{background:var(--lx-bad);border-radius:50%;width:9px;height:9px}
.lx-wks-tbl{overflow-x:auto;max-width:100%}.lx-wks-tbl table{width:100%;border-collapse:collapse;font-size:14px}
.lx-wks-tbl th,.lx-wks-tbl td{padding:5px 6px;border-bottom:1px solid var(--lx-line);text-align:right;white-space:nowrap;font-weight:400}
.lx-wks-tbl th:first-child,.lx-wks-tbl td:first-child{text-align:left;white-space:normal}
.lx-wks-tbl thead th{font-family:var(--lx-f-display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--lx-ink-3);vertical-align:bottom}
.lx-wks-tbl td{font-family:var(--lx-f-mono);font-variant-numeric:tabular-nums}.lx-wks-tbl td:first-child{font-family:var(--lx-f-body)}
@media (max-width:560px){
  .lx-wks-cell.short::after{width:6px;height:6px;right:1px;top:1px}
  .lx-wks-grid{grid-template-columns:3.4em repeat(13,minmax(0,1fr));gap:2px}
  .lx-wks-cell{font-size:9px;height:24px;line-height:24px;letter-spacing:-.03em}
  .lx-wks-tbl table{font-size:13px}
  .lx-wks-tbl th,.lx-wks-tbl td{white-space:normal;padding:4px 3px}
}

/* sharestate.css — LX.ShareState (sharestate.js): the plan-link box: the status line that announces an opened, updated or
   refused link (empty and hidden otherwise; a refused link in the warning colours), the copy button row and LX.Share's
   link field below it. Colours from --lx-* tokens only. */
.lx-ss { display: grid; gap: 8px; min-width: 0; }
.lx-ss-msg { margin: 0; padding: 8px 12px; border-radius: 10px; border-left: 4px solid var(--lx-accent); background: var(--lx-accent-soft);
  font-size: 14.5px; line-height: 1.4; color: var(--lx-ink); overflow-wrap: anywhere; }
.lx-ss-msg:empty { display: none; }
.lx-ss-msg.warn { border-left-color: var(--lx-warn); background: var(--lx-warn-soft); }
.lx-ss-msg.note { border-left-color: var(--lx-tier-4); background: var(--lx-surface-2); }
.lx-ss-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-ss-row:empty { display: none; }

/* benchrun.css — LX.BenchRun (benchrun.js): the Run and Try again buttons, the status line (its left rule coloured by
   the run's kind: done, a refused or failed run, a stop) and the "results are for an earlier plan" line above the
   results, whose charts dim while they are stale or a run is on. Only graphics dim (an SVG's shapes, canvas); text,
   chart labels included, keeps its 4.5:1 contrast (W3 layout audit), and the stale line says in words why the charts
   are faded. Colours from --lx-* tokens
   only; the words carry the meaning too. */
.lx-br { display: grid; gap: 8px; min-width: 0; }
.lx-br-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-br-row .lx-btn[aria-disabled="true"] { opacity: .55; cursor: progress; transform: none; }
.lx-br-status { margin: 0; min-height: 1.4em; font-size: 14.5px; line-height: 1.4; color: var(--lx-ink-2); }
.lx-br-status:empty { display: none; }
.lx-br-status[data-kind] { padding: 6px 10px; border-left: 4px solid var(--lx-line-2); border-radius: 0 8px 8px 0; background: var(--lx-surface-2); }
.lx-br-status[data-kind="ok"] { border-left-color: var(--lx-good); }
.lx-br-status[data-kind="busy"] { border-left-color: var(--lx-accent); }
.lx-br-status[data-kind="infeasible"], .lx-br-status[data-kind="error"], .lx-br-status[data-kind="unbounded"] { border-left-color: var(--lx-bad); background: var(--lx-bad-soft); color: var(--lx-ink); }
.lx-br-status[data-kind="early"], .lx-br-status[data-kind="cancelled"] { border-left-color: var(--lx-warn); background: var(--lx-warn-soft); color: var(--lx-ink); }
.lx-br-stale { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--lx-warn); font-size: 14px; color: var(--lx-ink); background: var(--lx-warn-soft); }
.lx-br-stale[hidden] { display: none; }
.lx-br-results[data-stale="true"] svg :is(path, rect, circle, ellipse, line, polyline, polygon, image, use), .lx-br-results[data-stale="true"] canvas { opacity: .62; }
.lx-br-results[aria-busy="true"] svg :is(path, rect, circle, ellipse, line, polyline, polygon, image, use), .lx-br-results[aria-busy="true"] canvas { opacity: .5; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .lx-br-results[aria-busy="true"] svg :is(path, rect, circle, ellipse, line, polyline, polygon, image, use), .lx-br-results[aria-busy="true"] canvas { transition: none; } }

/* reportnote.css — LX.ReportNote (reportnote.js): the reader's fields and the deliverable's checks beside a preview of
   the one-page note (two columns from 960 px, one below), the copy buttons, the status line and the select-and-copy box.
   The preview reads as a page: a title, the plan link in mono (it wraps anywhere on a phone), small headings, compact
   two-column tables, a warning line when the results are not from a finished run of the plan. Tokens only. */
.lx-rn { display: grid; gap: 14px; min-width: 0; }
.lx-rn-lede { font-size: 15.5px; color: var(--lx-ink-2); }
.lx-rn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 960px) { .lx-rn-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.lx-rn-side { display: grid; gap: 14px; min-width: 0; }
.lx-rn-form { display: grid; gap: 12px; }
.lx-rn-field { display: grid; gap: 4px; min-width: 0; }
.lx-rn-field label { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); }
.lx-rn-field textarea { width: 100%; min-width: 0; font: inherit; font-size: 15px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--lx-line-2);
  border-radius: 10px; background: var(--lx-surface); color: var(--lx-ink); resize: vertical; }
.lx-rn-field textarea:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 1px; }
.lx-rn-checks { display: grid; gap: 6px; border-top: 1px solid var(--lx-line); padding-top: 12px; }
.lx-rn-checks-h { font-family: var(--lx-f-display); font-weight: 500; font-size: 15px; color: var(--lx-ink); }
.lx-rn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lx-rn-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: start; font-size: 14.5px; color: var(--lx-ink); }
.lx-rn-list li .lx-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--lx-ink-3); }
.lx-rn-list li.ok .lx-ic { color: var(--lx-good); }
.lx-rn-page { background: var(--lx-surface); border: 1px solid var(--lx-line-2); border-radius: 12px; padding: 16px 18px; display: grid; gap: 6px;
  min-width: 0; box-shadow: var(--lx-shadow); font-size: 14.5px; line-height: 1.45; color: var(--lx-ink-2); }
.page-learn .lx-rn-page h4.lx-rn-title { margin: 0; font-size: 17px; color: var(--lx-ink); }
.page-learn .lx-rn-page h5 { margin: 8px 0 0; font-family: var(--lx-f-display); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lx-ink-2); }   /* small uppercase headings: ink-2 for 4.5:1 on the page's surface (ink-3 gave 4.35:1, W3 layout audit) */
.lx-rn-page p, .lx-rn-page ul { margin: 0; }
.lx-rn-page ul { padding-left: 1.1rem; display: grid; gap: 2px; }
.lx-rn-meta { font-size: 13.5px; color: var(--lx-ink-3); }
.lx-rn-meta code { font-family: var(--lx-f-mono); font-size: 12.5px; overflow-wrap: anywhere; word-break: break-all; }
.lx-rn-meta.warn { color: var(--lx-ink); background: var(--lx-warn-soft); border-left: 3px solid var(--lx-warn); padding: 4px 8px; border-radius: 0 6px 6px 0; }
.lx-rn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lx-rn-table th, .lx-rn-table td { text-align: left; vertical-align: top; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--lx-line); }
.lx-rn-table th { font-weight: 400; color: var(--lx-ink-2); }
.lx-rn-table td { font-family: var(--lx-f-mono); font-size: 13.5px; color: var(--lx-ink); }
.lx-rn-empty { color: var(--lx-ink-3); font-style: italic; }
.lx-rn-foot-line { margin-top: 6px !important; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-rn-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-rn-msg:empty { display: none; }
.lx-rn-copy { display: grid; gap: 4px; }
.lx-rn-copy[hidden] { display: none; }
.lx-rn-copy textarea { width: 100%; min-width: 0; font-family: var(--lx-f-mono); font-size: 13px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--lx-line-2);
  border-radius: 10px; background: var(--lx-surface-2); color: var(--lx-ink); resize: vertical; }
@media (max-width: 560px) { .lx-rn-page { padding: 12px 12px; } }
.lx-rn-outline { margin: 0; padding-left: 1.3rem; display: grid; gap: 5px; font-size: 15px; color: var(--lx-ink-2); }
.lx-rn-outline b { color: var(--lx-ink); font-weight: 600; }

/* engine-e0.css — the page kit of engine E0 (engine-e0.js, LX.E0.ui): the Site Bench's choice rows, presets, results
   tiles, the 52-week strip, the week navigation and the extra cards a capstone adds (sensitivity). Colours from --lx-*
   tokens only; no overflow clipping, so chart tips stay visible. */
.e0-choice { display: grid; gap: 6px; }
.e0-choice-l { font-family: var(--lx-f-display); font-size: 14px; font-weight: 500; color: var(--lx-ink); }
.e0-choice .lx-seg { justify-self: start; max-width: 100%; }
.e0-choice .lx-seg button { min-height: 40px; }
.e0-presets { display: grid; gap: 6px; }
.e0-presets-l { margin: 0; font-family: var(--lx-f-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-ink-3); }
.e0-ro { min-height: 52px; }
.e0-size { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--lx-line); }
.e0-size .lx-hint { margin: 0; }
.e0-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.e0-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--lx-surface); border: 1px solid var(--lx-line); min-width: 0; }
.e0-tile .l { font-family: var(--lx-f-display); font-size: 12.5px; color: var(--lx-ink-3); }
.e0-tile b { font-family: var(--lx-f-mono); font-size: 20px; font-weight: 600; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.e0-tile .n { font-size: 13px; line-height: 1.35; color: var(--lx-ink-2); }
.e0-strip-l { margin: 0 0 6px; }
.e0-strip { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; }
.e0-cell { height: 26px; border: 1px solid var(--lx-line-2); border-radius: 4px; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--lx-accent) var(--v, 0%), var(--lx-surface-2)); }
.e0-cell.on, .e0-cell[aria-pressed="true"] { outline: 2px solid var(--lx-ink); outline-offset: 1px; }
.e0-cell:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.e0-wknav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.e0-wkname { font-family: var(--lx-f-display); font-size: 14px; color: var(--lx-ink); }
.e0-extra:empty { display: none; }
/* the cash flow's key (one short line each) and the week chart's line on schedules that tie */
.e0-keys { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13.5px; line-height: 1.4; color: var(--lx-ink-2); }
.e0-sched { margin: 4px 0 0; }
/* the result cards' single column may shrink below its content, so a wide text-version table scrolls inside its
   .lx-scroll-x instead of widening the card (and the page) */
.e0-results .lx-xcard { grid-template-columns: minmax(0, 1fr); }
/* a capstone's card of excerpts before its note (C0): space between the quotes */
.c0-yard .lx-excerpt + .lx-excerpt { margin-top: 12px; }
.c0-tornado { min-width: 0; }
.e0-extra { display: grid; gap: 14px; }
@media (max-width: 560px) {
  /* 13 squares a row stay at least 24 px wide on a 375 px phone: the strip uses the card's padding */
  .e0-strip { gap: 1px; margin: 0 -10px 8px; }
  .e0-cell { height: 26px; }
  .e0-tile b { font-size: 18px; }
}

/* engine-e1.css — the view pieces of engine E1 (LX.E1.Line, LX.E1.Bench, LX.E1.Results, LX.E1.HourChart): the campus
   one-line diagram, the bench's small controls, the cost and outage tables. Colours from --lx-* tokens only; no
   overflow clipping (chart tips stay visible; a wide table scrolls in its own .lx-scroll-x). W3, 2026-11-03. */

/* ---------- the one-line diagram */
.e1-line { display: grid; gap: 0; min-width: 0; font-size: 14.5px; }
.e1-top { display: flex; flex-direction: column; align-items: center; gap: 0; }
.e1-node { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--lx-line-2); border-radius: 10px;
  background: var(--lx-surface); min-width: 0; position: relative; }
.e1-node > .lx-ic { width: 22px; height: 22px; flex: none; color: var(--c, var(--lx-ink-2)); }
.e1-nt { display: grid; gap: 0; min-width: 0; }
.e1-nt b { font-family: var(--lx-f-display); font-weight: 600; font-size: 14px; color: var(--lx-ink); }
.e1-nt small { font-size: 12.5px; color: var(--lx-ink-3); font-family: var(--lx-f-mono); }
.e1-wire { display: block; width: 2px; height: 12px; background: var(--lx-ink-3); }
.e1-switch .e1-sym { width: 22px; height: 22px; flex: none; position: relative; }
.e1-switch .e1-sym::before, .e1-switch .e1-sym::after { content: ""; position: absolute; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--lx-ink); }
.e1-switch .e1-sym::before { left: 1px; } .e1-switch .e1-sym::after { right: 1px; }
.e1-switch .e1-sym i { position: absolute; left: 3px; top: 11px; width: 17px; height: 2px; background: var(--lx-ink); transform-origin: left center; transition: transform .25s; }
.e1-line.island .e1-switch .e1-sym i { transform: rotate(-32deg); }
.e1-line.island .e1-feeder { opacity: .55; border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .e1-switch .e1-sym i { transition: none; } }
.e1-bus { margin: 10px 0 0; height: 0; border-top: 4px solid var(--lx-ink-2); border-radius: 2px; position: relative; }
.e1-bus > span { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); background: var(--lx-surface); padding: 0 8px;
  font-family: var(--lx-f-display); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-ink-3); white-space: nowrap; }
.e1-top + .e1-bus::before { content: ""; position: absolute; left: 50%; top: -14px; height: 10px; border-left: 2px solid var(--lx-ink-3); }
.e1-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; margin-top: 12px; }
.e1-col { display: grid; gap: 6px; align-content: start; padding-left: 14px; border-left: 2px solid var(--lx-ink-3); min-width: 0; }
.e1-col > .e1-node::before { content: ""; position: absolute; left: -15px; top: 50%; width: 14px; border-top: 2px solid var(--lx-ink-3); }
.e1-colh { margin: 0; font-family: var(--lx-f-display); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-ink-3); }
.e1-src { border-left: 4px solid var(--c); }
.e1-load { flex-wrap: wrap; border-left: 4px solid var(--lx-ink-3); }
.e1-load[data-prio="must"] { border-left-color: var(--lx-bad); }
.e1-load[data-prio="keep"] { border-left-color: var(--lx-warn); }
.e1-load .e1-nt { flex: 1 1 9em; }
.e1-load .lx-seg.e1-prio { flex: none; }
.e1-load .lx-seg.e1-prio button { min-height: 32px; padding: 0 9px; font-size: 13px; }
.e1-load[data-prio="must"] .e1-prio button[aria-pressed="true"] { background: var(--lx-bad); color: var(--lx-bg); }
.e1-load[data-prio="keep"] .e1-prio button[aria-pressed="true"] { background: var(--lx-warn); color: var(--lx-bg); }
.e1-tag { font-family: var(--lx-f-display); font-size: 12.5px; color: var(--lx-ink-2); }
@media (max-width: 640px) {
  .e1-cols { grid-template-columns: minmax(0, 1fr); }
  .e1-top { align-items: flex-start; padding-left: 18px; }
  .e1-bus > span { left: 12px; transform: none; white-space: nowrap; }
  .e1-bus .e1-busdef { display: none; }
  .e1-top + .e1-bus::before { left: 30px; }
}

/* ---------- bench extras */
.e1-ghint { margin: -4px 0 0 !important; }
.e1-allow, .e1-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lx-sb-group > .lx-seg { justify-self: start; }
.e1-allowl, .e1-segl { font-family: var(--lx-f-display); font-size: 13.5px; color: var(--lx-ink-2); }
.e1-sizehint { margin: 0 !important; font-size: 13.5px; }
.e1-ro .lx-readout { flex: 1 1 140px; }

/* ---------- results */
.e1-sized { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--lx-surface-2); font-size: 14.5px; }
/* a plan that leaves load unserved in a normal year (W3 review SB1 1): said above the results, in the bad tone */
.e1-short { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--lx-bad-soft); border-left: 4px solid var(--lx-bad); font-size: 14.5px; color: var(--lx-ink); }
.e1-short b { color: var(--lx-bad); }
/* the cost's boundary and the outage weights: one short idea a line */
.e1-cost-notes { margin: 6px 0 0; padding-left: 1.1rem; display: grid; gap: 3px; }
.e1-cost-notes li { margin: 0; }
.e1-cost-notes b { font-weight: 600; color: var(--lx-ink-2); }
.e1-cost td { vertical-align: middle; }
.e1-cost td:first-child { width: 42%; }
.e1-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: baseline; }
.e1-barcell { width: 34%; }
.e1-bar { display: block; height: 10px; border-radius: 3px; background: var(--c); min-width: 1px; }
.e1-bar.tot { background: var(--lx-ink); } .e1-bar.base { background: var(--lx-line-2); }
.e1-cost tfoot td { font-weight: 600; border-top: 2px solid var(--lx-line-2); }
.e1-cost tr.e1-base td { font-weight: 400; color: var(--lx-ink-2); }
.e1-outs th[scope="row"] { white-space: nowrap; }
.e1-outs td.n.bad { color: var(--lx-bad); } .e1-outs td.n.good { color: var(--lx-good); }
.e1-outs tr.sel > * { background: var(--lx-surface-2); }
.e1-pick { border: 1px solid var(--lx-line-2); border-radius: 8px; background: var(--lx-surface); color: var(--lx-ink); font: inherit; font-family: var(--lx-f-display);
  font-size: 13.5px; min-height: 34px; padding: 0 10px; cursor: pointer; }
.e1-pick[aria-pressed="true"] { border-color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-ink); }
.e1-pick:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.e1-hourcard h3 { margin: 0; font-size: 16px; }

/* row labels of the data tables: plain words, not the column headings' small capitals */
.lx-facts.e1-lab tbody th, .e1-outs tbody th { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--lx-ink); }
/* ---------- phones: base.css turns .lx-facts into one block per row with the header hidden; label each cell, and keep
   the cost table a table (three short columns fit) */
@media (max-width: 640px) {
  .lx-facts.e1-lab th[scope="row"] { display: block; padding: 2px 0; border: 0; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--lx-ink); }
  .lx-facts.e1-lab td[data-l]::before { content: attr(data-l) ": "; font-family: var(--lx-f-display); font-weight: 400; font-size: 12.5px; color: var(--lx-ink-3); white-space: normal; }
  .lx-facts.e1-cost { display: table; } .e1-cost tbody { display: table-row-group; } .e1-cost tfoot { display: table-footer-group; }
  .e1-cost tr { display: table-row; padding: 0; } .e1-cost td { display: table-cell; padding: 7px 4px; border-bottom: 1px solid var(--lx-line); }
  .e1-cost td:first-child { width: auto; } .e1-barcell { width: 26%; }
}

/* ledger.css — LX.Ledger (ledger.js): a cf-two table (forms.css) of amounts. Numbers in tabular figures, the row
   header's second line small and muted, a total row set off by a rule; on a phone an empty cell (a total row's blank
   column) is dropped from the card. Promoted at the W3 integration from A4, A7 and A14. */
.lx-ledger td { font-family: var(--lx-f-mono); font-variant-numeric: tabular-nums; }
.lx-ledger tbody th small { display: block; font-family: var(--lx-f-body); font-weight: 400; font-size: 12.5px; color: var(--lx-ink-3); }
.lx-ledger tr.tot th, .lx-ledger tr.tot td { border-top: 1px solid var(--lx-line-2); font-weight: 600; }
@media (max-width: 560px) {
  .lx-ledger td:empty { display: none; }
}

/* solvestep.css — LX.SolveStep (solvestep.js): the note a step card shows when a solve fails, with its "Try again"
   button. Promoted at the W3 integration from M3, A8 and M4 (their .m3-fail, .a8-fail and .m4-fail rules, the same). */
.lx-solve-fail { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border: 1px solid var(--lx-bad); border-radius: 10px; background: var(--lx-surface-2); }
.lx-solve-fail p { margin: 0; font-size: 14.5px; }

/* sankey.css — LX.Sankey (sankey.js): the figure, its bands (pale and hatched for losses; a picked node keeps its own
   flows and dims the rest), nodes as buttons with a focus ring, labels on a halo, the phone key of numbered badges, the
   readout and the text version's table. Promoted at the W3 integration from F3 (the rules F3's script injected). */
.lx-sk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0; }
.lx-sk-lede { margin: 0; font-size: 14.5px; color: var(--lx-ink-2); }
.lx-sk-box { position: relative; min-width: 0; }
.lx-sk svg { display: block; width: 100%; height: auto; overflow: visible; }
.lx-sk .band { opacity: .42; transition: opacity .2s; }
.lx-sk .band.loss { opacity: .22; }
.lx-sk.has-pick .band { opacity: .1; }
.lx-sk.has-pick .band.on { opacity: .62; }
.lx-sk .node rect { stroke: var(--lx-surface); stroke-width: 1; }
.lx-sk .node.loss rect { fill-opacity: .55; stroke: var(--lx-ink-3); stroke-dasharray: 3 2; }
.lx-sk .node { cursor: pointer; outline: none; }
.lx-sk .node:focus-visible rect.hit, .lx-sk .node.on rect.hit { stroke: var(--lx-accent); stroke-width: 2.5; fill: none; }
.lx-sk .node rect.hit { fill: transparent; stroke: none; }
.lx-sk text { font-family: var(--lx-f-body); font-size: 12.5px; fill: var(--lx-ink); paint-order: stroke; stroke: var(--lx-surface); stroke-width: 3.2px; stroke-linejoin: round; }
.lx-sk text .v { font-family: var(--lx-f-mono); font-size: 11.5px; fill: var(--lx-ink-2); }
.lx-sk text.badge { font-family: var(--lx-f-mono); font-size: 11px; font-weight: 600; stroke: none; fill: var(--lx-ink); }
.lx-sk circle.badge { display: inline; fill: var(--lx-surface); stroke: var(--lx-ink-3); stroke-width: 1.2; }   /* display: Bootstrap hides an empty .badge (.badge:empty), and a disc has no content: keep the phone badges shown (W5 integration, from F9) */
.lx-sk-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--lx-ink-2); }
.lx-sk-key li { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.lx-sk-key li.h { grid-column: 1 / -1; margin-top: 4px; font-family: var(--lx-f-display); font-size: 13px; font-weight: 600; color: var(--lx-ink-3); }
.lx-sk-key b { font-family: var(--lx-f-mono); font-size: 12px; color: var(--lx-ink); }
.lx-sk-key i { font-style: normal; font-family: var(--lx-f-mono); font-size: 12.5px; color: var(--lx-ink); }
.lx-sk-read { margin: 0; min-height: 1.4em; font-size: 14.5px; color: var(--lx-ink-2); }
.lx-sk-read b { color: var(--lx-ink); }
.lx-sk table { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .lx-sk .band { transition: none; } }

/* engine-e2.css — the view pieces of engine E2 (LX.E2.ui: the zone map, the commitment table, the bench's small
   controls). Colours from --lx-* tokens only; no overflow clipping (chart tips stay visible; a wide table scrolls in its
   own .lx-scroll-x). W4, 2026-11-05. */

/* ---------- bench extras */
.e2-ghint { margin: -4px 0 0 !important; }
.e2-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e2-segl { font-family: var(--lx-f-display); font-size: 13.5px; color: var(--lx-ink-2); }
.e2-seg button { min-height: 34px; }
.e2-ro .lx-readout { flex: 1 1 140px; }

/* ---------- the zone map: three zones and two links in a row (a column on phones) */
.e2-map { display: grid; gap: 10px; min-width: 0; }
.e2-map-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center; }
.e2-map-t { margin: 0; font-size: 15px; }
.e2-zrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.e2-zone { border: 1px solid var(--lx-line-2); border-top: 5px solid var(--c); border-radius: 12px; background: var(--lx-surface); padding: 8px 12px; min-width: 0; }
.e2-zone.short { border-color: var(--lx-bad); background: var(--lx-bad-soft); }
.e2-zone.short .e2-zd dt { color: var(--lx-ink-2); }   /* 4.5:1 on the bad-soft ground */
.e2-zn { margin: 0; font-family: var(--lx-f-display); font-size: 14.5px; }
.e2-zp { margin: 2px 0 4px; font-family: var(--lx-f-mono); font-size: 20px; font-weight: 600; color: var(--lx-ink); }
.e2-zd { margin: 0; display: grid; gap: 1px; font-size: 13px; }
.e2-zd > div { display: flex; justify-content: space-between; gap: 8px; }
.e2-zd dt { color: var(--lx-ink-3); margin: 0; }
.e2-zd dd { margin: 0; font-family: var(--lx-f-mono); color: var(--lx-ink); white-space: nowrap; }
.e2-link { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 6px 8px; min-width: 7.5em; text-align: center;
  border-top: 3px dashed var(--c); border-bottom: 3px dashed var(--c); font-size: 12.5px; }
.e2-link.at { border-top-style: solid; border-bottom-style: solid; background: var(--lx-warn-soft); }
.e2-ln { font-family: var(--lx-f-display); color: var(--lx-ink-2); }
.e2-lf { font-family: var(--lx-f-mono); font-size: 14.5px; font-weight: 600; color: var(--lx-ink); }
.e2-lc { color: var(--lx-ink-3); }
.e2-link.at .e2-lc { color: var(--lx-ink); font-weight: 600; }
.e2-map-note { margin: 0 !important; }
@media (max-width: 760px) {
  .e2-map-head { grid-template-columns: minmax(0, 1fr); }
  .e2-zrow { grid-template-columns: minmax(0, 1fr); }
  .e2-link { min-width: 0; grid-template-columns: auto auto auto; justify-content: start; gap: 10px; border: 0; border-left: 3px dashed var(--c); padding: 4px 10px; margin-left: 18px; text-align: left; }
  .e2-link.at { border-left-style: solid; }
}

/* ---------- the commitment table: one row per unit group, a cell per hour */
.e2-commit { max-width: 100%; overflow-x: auto; }
.e2-ct { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; font-family: var(--lx-f-mono); }
.e2-ct caption { caption-side: top; text-align: left; font-family: var(--lx-f-body); font-size: 13.5px; color: var(--lx-ink-2); padding-bottom: 4px; }
.e2-ct th { font-weight: 500; color: var(--lx-ink-3); padding: 0 2px; text-align: center; }
.e2-ct tbody th { text-align: left; color: var(--lx-ink-2); white-space: nowrap; padding-right: 8px; font-family: var(--lx-f-body); }
.e2-ct td { min-width: 1.6em; height: 1.7em; text-align: center; border-radius: 4px; color: var(--lx-ink); }
.e2-ct td.off { background: var(--lx-surface-2); color: var(--lx-ink-3); }
.e2-ct td.some { background: var(--lx-warn-soft); }
.e2-ct td.all { background: var(--lx-good-soft); font-weight: 600; }

/* ---------- small result pieces */
.e2-say { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--lx-surface-2); font-size: 14.5px; }
.e2-say.bad { background: var(--lx-bad-soft); border-left: 4px solid var(--lx-bad); }
.e2-say.bad b { color: var(--lx-bad); }
.e2-say.good { background: var(--lx-good-soft); border-left: 4px solid var(--lx-good); }
.e2-notes { margin: .3rem 0 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: 13.5px; color: var(--lx-ink-2); }

/* row labels of the data tables: plain words, not the column headings' small capitals; on phones (base.css shows one
   block per row with the header hidden) each cell is labelled with its column */
.lx-facts.e2-lab tbody th, .e2-units tbody th { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--lx-ink); }
@media (max-width: 640px) {
  .lx-facts.e2-lab th[scope="row"], .e2-units th[scope="row"] { display: block; padding: 2px 0; border: 0; }
  .lx-facts.e2-lab td[data-l]::before, .e2-units td[data-l]::before { content: attr(data-l) ": "; font-family: var(--lx-f-display); font-weight: 400; font-size: 12.5px; color: var(--lx-ink-3); white-space: normal; }
}

/* the inputs table: values may wrap, so the source column keeps its room */
.e2-inputs td.n { white-space: normal; min-width: 6.5em; }

/* lifebox.css — LX.LifeBox (lifebox.js): the chain of stage tiles and the dashed boundary with its two handles, moved
   from A11's page at the W5 integration (2026-11-06), unchanged except for the number of stages (--n, set by the box).
   The tiles' content (labels, values) is styled by the page. Phones (560 px and narrower): the chain runs down the page
   and the handles sit on the boundary's top and bottom edges. */
.lx-life-chain { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; padding: 10px 16px; margin: .2rem 0 .6rem; }
.lx-life-tile { grid-row: 1; grid-column: var(--i); display: grid; align-content: start; gap: 3px; min-width: 0; padding: 8px 12px 10px; border: 1px solid var(--lx-line); border-top: 4px solid var(--c); border-radius: 10px; background: var(--lx-accent-soft); color: var(--lx-ink); text-align: left; font: inherit; cursor: pointer; overflow-wrap: break-word; }
.lx-life-tile.out { background: var(--lx-surface-2); border-style: dashed; border-top-style: solid; }
.lx-life-tile:focus-visible { outline: 3px solid var(--lx-ink); outline-offset: 2px; }
.lx-life-bnd { grid-row: 1; grid-column: var(--span); position: relative; z-index: 2; margin: -6px -6px; border: 2px dashed var(--lx-accent); border-radius: 14px; pointer-events: none; }
.lx-life-h { position: absolute; top: 50%; width: 24px; height: 44px; margin-top: -22px; border-radius: 9px; background: var(--lx-accent); box-shadow: var(--lx-shadow); pointer-events: auto; cursor: ew-resize; touch-action: none; }
.lx-life-h::after { content: ""; position: absolute; left: 8px; top: 13px; width: 4px; height: 18px; border-left: 2px solid var(--lx-surface); border-right: 2px solid var(--lx-surface); }
.lx-life-h-l { left: -13px; } .lx-life-h-r { right: -13px; }
.lx-life-h:focus-visible { outline: 3px solid var(--lx-ink); outline-offset: 2px; }
.lx-life-pre { margin: 0 0 .5rem; }
@media (max-width: 560px) {
  .lx-life-chain { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 14px 4px; }
  .lx-life-tile { grid-row: var(--i); grid-column: 1; padding: 8px 12px; border-top-width: 1px; border-left: 4px solid var(--c); }
  .lx-life-tile.out { border-left-style: solid; }
  .lx-life-bnd { grid-column: 1; grid-row: var(--span); margin: -7px -3px; }
  .lx-life-h { left: 50%; width: 44px; height: 24px; margin: 0 0 0 -22px; cursor: ns-resize; }
  .lx-life-h::after { left: 13px; top: 8px; width: 18px; height: 4px; border: 0; border-top: 2px solid var(--lx-surface); border-bottom: 2px solid var(--lx-surface); }
  .lx-life-h-l { top: -13px; } .lx-life-h-r { top: auto; bottom: -13px; right: auto; }
}

/* siting.css — the siting map's styles (LX.SiteMap, siting.js), moved from A19's page at the W5 integration (2026-11-06),
   unchanged: cells by land class and layer, hatched exclusions by kind, features (river, roads, lines, substations,
   homes), site blocks and their letters, the least-cost route, the keyboard cursor, the legend's keys and ramps, and the
   line under the map. Classes keep A19's a19- prefix (the map draws them; tests and the layout audit find them).
   W5 fix (2026-11-06): the substations table (a19-gbox), the grid layer's text version. */
.a19-map { display: grid; gap: 6px; min-width: 0; max-width: 640px; }
.a19-fig { position: relative; border: 1px solid var(--lx-line); border-radius: 10px; overflow: hidden; background: var(--lx-surface); line-height: 0; }
.a19-fig:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: 2px; }
.a19-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.a19-svg rect { shape-rendering: crispEdges; }
.a19-c-farm { fill: var(--lx-ground); fill-opacity: .35; }
.a19-c-built { fill: var(--lx-ink-3); fill-opacity: .55; }
.a19-c-ind { fill: var(--lx-steel); fill-opacity: .7; }
.a19-c-water { fill: var(--lx-hyd); fill-opacity: .35; }
.a19-sw.a19-c-water { background: color-mix(in srgb, var(--lx-hyd) 35%, var(--lx-surface)); }
.a19-c-prot { fill: var(--lx-tree); fill-opacity: .8; }
.a19-c-flood { fill: var(--lx-hyd); fill-opacity: .35; }
.a19-c-slope { fill: var(--lx-warn); }
.a19-c-wind { fill: var(--lx-wind); }
.a19-c-sun { fill: var(--lx-solar); }
.a19-c-land { fill: var(--lx-tier-4); }
.a19-c-suit { fill: var(--lx-good); }
.a19-c-none { fill: var(--lx-surface-3); }
.a19-hatch-bg { fill: var(--lx-surface-2); }
.a19-hatch-ln { stroke: var(--lx-ink-3); stroke-width: 1.6; }
.a19-hatch-ln.prot { stroke: var(--lx-tree); } .a19-hatch-ln.flood { stroke: var(--lx-hyd); } .a19-hatch-ln.slope { stroke: var(--lx-warn); }
.a19-ex { opacity: .85; }
.a19-cut { fill: var(--lx-ink-3); }
.a19-river { fill: none; stroke: var(--lx-hyd); stroke-width: 3; stroke-linejoin: round; }
.a19-road { stroke: var(--lx-road); stroke-width: 1.2; opacity: .9; }
.a19-road.major { stroke-width: 2.2; }
.a19-line { stroke: var(--lx-wire); stroke-width: 1.6; stroke-dasharray: 5 3; }
.a19-feat[data-layer="grid"] .a19-line { stroke-width: 2.8; stroke: var(--lx-ink); }
.a19-feat[data-layer="roads"] .a19-road { stroke: var(--lx-ink); }
.a19-home { fill: var(--lx-ink); }
.a19-home.new { fill: var(--lx-bad); stroke: var(--lx-surface); stroke-width: .8; }
.a19-sub { fill: var(--lx-surface); stroke: var(--lx-ink); stroke-width: 2; }
.a19-lab { font-family: var(--lx-f-mono); font-size: 13px; font-weight: 600; fill: var(--lx-ink); paint-order: stroke; stroke: var(--lx-surface); stroke-width: 3.5px; }
.a19-lab.end { text-anchor: end; }
.a19-lab.city { font-family: var(--lx-f-display); font-size: 14px; text-anchor: middle; }
.a19-site { fill: none; stroke: var(--lx-ink); stroke-width: 2; }
.a19-site.on { stroke: var(--lx-bad); stroke-width: 3.2; }
.a19-site-lab { font-family: var(--lx-f-mono); font-size: 14px; font-weight: 700; fill: var(--lx-ink); paint-order: stroke; stroke: var(--lx-surface); stroke-width: 3.5px; }
.a19-site-lab.on { fill: var(--lx-bad); }
.a19-site.ghost { stroke: var(--lx-ink-2); stroke-dasharray: 4 3; stroke-width: 2; }
.a19-site-lab.ghost { fill: var(--lx-ink-2); font-weight: 600; }
.a19-svg.big .a19-lab { font-size: 18px; stroke-width: 4.5px; } .a19-svg.big .a19-lab.city { font-size: 19px; }
.a19-svg.big .a19-site-lab { font-size: 19px; stroke-width: 4.5px; } .a19-svg.big .a19-home { r: 2.6px; }
.a19-route { fill: none; stroke: var(--lx-bad); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.a19-cur { fill: none; stroke: var(--lx-accent); stroke-width: 2.4; }
.a19-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--lx-ink-2); line-height: 1.4; }
.a19-key { display: inline-flex; align-items: center; gap: 6px; }
.a19-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--lx-line-2); }
.a19-sw.a19-c-built { background: color-mix(in srgb, var(--lx-ink-3) 55%, var(--lx-surface)); }
.a19-sw.a19-c-ind { background: var(--lx-steel); }
.a19-sw.a19-c-farm { background: color-mix(in srgb, var(--lx-ground) 35%, var(--lx-surface)); }
.a19-sw.a19-c-prot { background: var(--lx-tree); } .a19-sw.a19-c-flood { background: color-mix(in srgb, var(--lx-hyd) 35%, var(--lx-surface)); }
.a19-sw.a19-c-home { background: var(--lx-ink); border-radius: 50%; width: 8px; height: 8px; }
.a19-sw.a19-c-sub { background: var(--lx-surface); border: 2px solid var(--lx-ink); }
.a19-sw.a19-c-line { height: 0; border: 0; border-top: 2px dashed var(--lx-wire); border-radius: 0; }
.a19-sw.a19-c-road { height: 0; border: 0; border-top: 2px solid var(--lx-road); border-radius: 0; }
.a19-sw.a19-c-excl { background: repeating-linear-gradient(45deg, var(--lx-ink-3) 0 1.5px, var(--lx-surface-2) 1.5px 4px); }
.a19-sw.a19-c-excl.prot { background: repeating-linear-gradient(45deg, var(--lx-tree) 0 1.5px, var(--lx-surface-2) 1.5px 4px); }
.a19-sw.a19-c-excl.flood { background: repeating-linear-gradient(45deg, var(--lx-hyd) 0 1.5px, var(--lx-surface-2) 1.5px 4px); }
.a19-sw.a19-c-excl.slope { background: repeating-linear-gradient(45deg, var(--lx-warn) 0 1.5px, var(--lx-surface-2) 1.5px 4px); }
.a19-sw.a19-c-cutk { background: color-mix(in srgb, var(--lx-ink-3) 45%, var(--lx-surface)); }
.a19-sw.a19-c-ghost { background: transparent; border: 2px dashed var(--lx-ink-2); }
.a19-nw { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.a19-sw.a19-c-site { background: transparent; border: 2px solid var(--lx-ink); }
.a19-sw.a19-c-path { height: 0; border: 0; border-top: 3px solid var(--lx-bad); border-radius: 0; }
.a19-ramp { display: inline-block; width: 70px; height: 10px; border-radius: 3px; border: 1px solid var(--lx-line-2); }
.a19-r-slope { background: linear-gradient(90deg, var(--lx-surface), var(--lx-warn)); }
.a19-r-wind { background: linear-gradient(90deg, var(--lx-surface), var(--lx-wind)); }
.a19-r-sun { background: linear-gradient(90deg, var(--lx-surface), var(--lx-solar)); }
.a19-r-land { background: linear-gradient(90deg, var(--lx-surface), var(--lx-tier-4)); }
.a19-r-suit { background: linear-gradient(90deg, var(--lx-surface), var(--lx-good)); }
.a19-cell { margin: 0; min-height: 2.6em; font-size: 13.5px; color: var(--lx-ink-2); line-height: 1.35; }
.a19-gbox { min-width: 0; }
.a19-gbox[hidden] { display: none; }
.a19-gcap { margin: 0 0 2px; font-family: var(--lx-f-display); font-size: 13px; color: var(--lx-ink-2); cursor: pointer; min-height: 24px; }
.a19-gtbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.a19-gtbl th, .a19-gtbl td { padding: 2px 8px 2px 0; text-align: left; vertical-align: top; }
.a19-gtbl thead th { font-family: var(--lx-f-display); font-size: 12.5px; font-weight: 600; color: var(--lx-ink-3); border-bottom: 1px solid var(--lx-line-2); }
.a19-gtbl tbody tr { border-bottom: 1px solid var(--lx-line); }
.a19-gtbl tbody th { font-family: var(--lx-f-mono); font-weight: 600; white-space: nowrap; }
.a19-gtbl td.a19-gnw { white-space: nowrap; }

/* engine-e3.css — the view pieces of engine E3 (LX.E3.ui: the bench's controls, a district's day, the cost and household
   tables, the hub diagram), shared by SB3, M12 and C3. Colours from --lx-* tokens only; no overflow clipping (chart tips
   stay visible; a wide table scrolls in its own .lx-scroll-x). W5, 2026-11-06. */

/* ---------- bench extras */
.e3-ghint { margin: -4px 0 0 !important; }
.e3-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e3-segl { font-family: var(--lx-f-display); font-size: 13.5px; color: var(--lx-ink-2); }
.e3-seg button { min-height: 34px; }
.e3-ro .lx-readout { flex: 1 1 140px; }
.e3-line { margin: 0 0 6px !important; font-size: 13.5px; color: var(--lx-ink-2); }

/* ---------- a district's day */
.e3-day { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.e3-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.e3-sel-l { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lx-f-display); font-size: 14px; color: var(--lx-ink-2); max-width: 100%; min-width: 0; }
.e3-sel { font: inherit; color: var(--lx-ink); background: var(--lx-surface); border: 1px solid var(--lx-line-2); border-radius: 8px; padding: 6px 10px; max-width: 100%; min-width: 0; flex: 1 1 auto; }
/* a card that holds a district's day keeps one column that can shrink (a card is a grid; its column must not grow with
   the chart or the day picker) */
.lx-xcard:has(> .e3-day) { grid-template-columns: minmax(0, 1fr); }
.e3-day-say { margin: 0 !important; }

/* ---------- tables */
.lx-facts.e3-lab tbody th { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--lx-ink); }
.lx-facts.e3-lab tr.e3-tot th, .lx-facts.e3-lab tr.e3-tot td { font-weight: 700; border-top: 2px solid var(--lx-line-2); }
@media (max-width: 640px) {
  .lx-facts.e3-lab th[scope="row"] { display: block; padding: 2px 0; border: 0; }
  .lx-facts.e3-lab td[data-l]::before { content: attr(data-l) ": "; font-family: var(--lx-f-display); font-weight: 400; font-size: 12.5px; color: var(--lx-ink-3); white-space: normal; }
}
.e3-inputs td.n { white-space: normal; min-width: 6.5em; }

/* ---------- the hub diagram: in, convert and store, out */
.e3-hub { margin: 0; display: grid; gap: 8px; min-width: 0; }
.e3-hub-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; }
.e3-hub-col { display: grid; gap: 6px; align-content: start; border: 1px solid var(--lx-line); border-radius: 12px; padding: 8px 10px; background: var(--lx-surface-2); min-width: 0; }
.e3-hub-col + .e3-hub-col { position: relative; }
.e3-hub-col + .e3-hub-col::before { content: "→"; position: absolute; left: -10px; top: 50%; transform: translate(-50%, -50%); color: var(--lx-ink-3); font-size: 18px; }
.e3-hub-h { margin: 0; font-family: var(--lx-f-display); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--lx-ink-3); }
.e3-hub-n { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--lx-surface); border-left: 4px solid var(--lx-line-2); font-family: var(--lx-f-display); font-size: 14px; color: var(--lx-ink); }
.e3-hub-n span { display: block; font-family: var(--lx-f-body); font-size: 13px; color: var(--lx-ink-2); }
.e3-hub-n.el { border-left-color: var(--lx-demand); }
.e3-hub-n.gas { border-left-color: var(--lx-cc); }
.e3-hub-n.sun { border-left-color: var(--lx-solar); }
.e3-hub figcaption { font-size: 13.5px; color: var(--lx-ink-3); }
@media (max-width: 760px) {
  .e3-hub-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .e3-hub-col + .e3-hub-col::before { content: "↓"; left: 50%; top: -8px; }
}

/* ---------- small result pieces */
.e3-say { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--lx-surface-2); font-size: 14.5px; }
.e3-say.bad { background: var(--lx-bad-soft); border-left: 4px solid var(--lx-bad); }
.e3-say.good { background: var(--lx-good-soft); border-left: 4px solid var(--lx-good); }
.e3-says { display: grid; gap: 6px; }
.e3-keys { margin: .3rem 0 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--lx-ink-2); max-width: 75ch; }
.e3-keys p { margin: 0; }
.e3-keys b { font-weight: 600; color: var(--lx-ink); }
.e3-hh-off { margin: 0 !important; padding: 8px 12px; border-radius: 10px; background: var(--lx-warn-soft, var(--lx-surface-2)); }
.e3-notes { margin: .3rem 0 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: 13.5px; color: var(--lx-ink-2); }

/* engine-e4.css — the view pieces of engine E4 (LX.E4.ui: the bench's controls, the nation's map, the mix, CO2 and import
   charts, tables), shared by SB4, M13 and C4. Colours from --lx-* tokens only; no overflow clipping (chart tips stay
   visible; a wide table scrolls in its own .lx-scroll-x). W6, 2026-11-07. */

/* ---------- bench extras */
.e4-ghint { margin: -4px 0 0 !important; }
.e4-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e4-segl { font-family: var(--lx-f-display); font-size: 13.5px; color: var(--lx-ink-2); }
.e4-seg button { min-height: 34px; }
.e4-ro .lx-readout { flex: 1 1 140px; }
.e4-line { margin: 0 0 6px !important; font-size: 13.5px; color: var(--lx-ink-2); }
.e4-src { margin: 4px 0 0 !important; font-size: 13.5px; color: var(--lx-ink-2); }
.e4-src.lib { color: var(--lx-warn); }

.e4-fold { border: 1px solid var(--lx-line); border-radius: var(--lx-r); background: var(--lx-surface); padding: 4px 12px; }
.e4-fold > summary { cursor: pointer; padding: 8px 0; font-family: var(--lx-f-display); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--lx-ink); }
.e4-fold[open] > summary { margin-bottom: 4px; }
.e4-fold > .lx-sb-group { margin-bottom: 10px; }
.e4-inputs td.n { white-space: normal; min-width: 7em; }
/* a fieldset sizes to its widest content: let the shock table scroll inside it instead of widening the page (fix-h) */
.e4-sb .lx-sb-group { min-width: 0; }
/* tables whose cells are words, not numbers (the shock table, the map's mix by source): wrap them (fix-h) */
.lx-facts.e4-wrap td.n { white-space: normal; font-family: inherit; font-weight: 400; min-width: 9em; }

/* ---------- the nation's map */
.e4-map, .e4-mix, .e4-co2, .e4-imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.e4-map-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e4-map-svg { min-width: 0; }
.e4-svg { width: 100%; height: auto; display: block; max-height: 480px; }
.e4-sea { fill: var(--lx-accent-soft); }
.e4-route { fill: none; stroke: var(--lx-accent); stroke-width: 2.5; stroke-dasharray: 6 5; }
.e4-link { stroke: var(--lx-line-2); stroke-linecap: round; }
.e4-link.hot { stroke: var(--lx-warn); }
.e4-node { fill: var(--lx-surface); stroke: var(--lx-line-2); stroke-width: 1.5; }
.e4-mlab { font-family: var(--lx-f-display); font-size: 15px; fill: var(--lx-ink); }
.e4-mlab.small { font-size: 12.5px; fill: var(--lx-ink-2); }
.e4-halo { paint-order: stroke; stroke: var(--lx-surface); stroke-width: 4px; stroke-linejoin: round; }
.e4-rc-box { fill: var(--lx-surface-2); stroke: var(--lx-line-2); }
.e4-map-say { margin: 0 !important; font-size: 14px; color: var(--lx-ink-2); }

/* ---------- legends and keys */
.e4-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--lx-ink-2); }
.e4-key { display: inline-flex; align-items: center; gap: 6px; }
.e4-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.e4-keys { display: grid; gap: 4px; }
.e4-keys p { margin: 0 !important; font-size: 14px; color: var(--lx-ink-2); }
.e4-keys b { color: var(--lx-ink); font-weight: 600; }

/* ---------- what a run says */
.e4-says { display: grid; gap: 6px; }
.e4-say { margin: 0 !important; padding: 8px 12px; border-left: 4px solid var(--lx-line-2); background: var(--lx-surface-2); border-radius: 0 8px 8px 0; font-size: 15px; }
.e4-say.good { border-left-color: var(--lx-good); }
.e4-say.bad { border-left-color: var(--lx-bad); }
.e4-say.warn { border-left-color: var(--lx-warn); }

/* ---------- tables */
.lx-facts.e4-tab tbody th { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: var(--lx-ink); }
.lx-facts.e4-tab tr.e4-tot th, .lx-facts.e4-tab tr.e4-tot td { font-weight: 700; border-top: 2px solid var(--lx-line-2); }
.lx-facts.e4-tab td.bad { color: var(--lx-bad); }
.lx-facts.e4-tab td.good { color: var(--lx-good); }
@media (max-width: 640px) {
  .lx-facts.e4-tab th[scope="row"] { display: block; padding: 2px 0; border: 0; }
  .lx-facts.e4-tab td[data-l]::before { content: attr(data-l) ": "; font-family: var(--lx-f-display); font-weight: 400; font-size: 12.5px; color: var(--lx-ink-3); white-space: normal; }
}