/* Generated by design/build_tokens.py from design/tokens.json. Do not edit by hand. */
:root {
  --c-bg: #FFFFFF;
  --c-navy: #0A2240;
  --c-on-navy: #FFFFFF;
  --c-body: #1E2A3A;
  --c-muted: #4D5968;
  --c-line: #E4E7EC;
  --c-soft: #F4F6F9;
  --c-amber: #F2A93B;
  --c-on-amber: #0A2240;
  --c-amber-tint: #FDF0D9;
  --c-chart2: #3D6FB6;
  --c-wrong: #C8412B;
  --c-wrong-text: #A5321F;
  --c-right: #23845A;
  --c-right-text: #1C6B49;
  --c-field-edge: #7B8794;
  --r-card: 20px;
  --r-btn: 16px;
  --h-btn: 64px;
  --h-btn-phone: 56px;
  --t-motion: 500ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --c-bg: #0B1424;
    --c-navy: #8DB4F0;
    --c-on-navy: #0B1424;
    --c-body: #DCE3EE;
    --c-muted: #A3AFC0;
    --c-line: #26344D;
    --c-soft: #121D33;
    --c-amber: #F2A93B;
    --c-on-amber: #0A2240;
    --c-amber-tint: #33270F;
    --c-chart2: #6F9BDB;
    --c-wrong: #E0654E;
    --c-wrong-text: #FF8F7A;
    --c-right: #3BB27F;
    --c-right-text: #5FD3A0;
    --c-field-edge: #6B7A90;
  }
}
[data-theme=dark] {
  --c-bg: #0B1424;
  --c-navy: #8DB4F0;
  --c-on-navy: #0B1424;
  --c-body: #DCE3EE;
  --c-muted: #A3AFC0;
  --c-line: #26344D;
  --c-soft: #121D33;
  --c-amber: #F2A93B;
  --c-on-amber: #0A2240;
  --c-amber-tint: #33270F;
  --c-chart2: #6F9BDB;
  --c-wrong: #E0654E;
  --c-wrong-text: #FF8F7A;
  --c-right: #3BB27F;
  --c-right-text: #5FD3A0;
  --c-field-edge: #6B7A90;
}
/* Light is the default for everyone. The switch in the header sets data-look on the root.
   The doubled :root gives data-look a higher specificity than the system and host dark rules below. */
:root, :root:root[data-look="light"] {
  color-scheme: light;
  --ground: #FFFFFF; --panel: #F2F4F7; --navy: #0A2240; --text: #1B2836; --text2: #4A5866; --text3: #5E6A76;   /* 4.5 to 1 or more on --panel */
  --rule: #D5DBE1; --grid: #E4E8EC; --ecc: #0A2240; --ecc-text: #0A2240; --ecc-soft: #E7ECF4;
  --rb: #D2402A; --rb-text: #B3321D; --rb-soft: #FBE4DF; --ok: #16784A; --ok-soft: #E3F2E9; --bad: #B3321D; --bad-soft: #FBE4DF;
  --btn: #0A2240; --btn-ink: #FFFFFF; --on-ecc: #FFFFFF; --on-rb: #FFFFFF; --focus: #2F6FEB; --neutral: #8C99A6; --base: #C9D1DA;
  --disp: 'Libre Franklin', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0B1524; --panel: #13233A; --navy: #EEF3FA; --text: #E3E9F1; --text2: #B1BECE; --text3: #91A0B1;
    --rule: #28395A; --grid: #1D2D45; --ecc: #8DB2FF; --ecc-text: #A9C4FF; --ecc-soft: #16284A;
    --rb: #FF7A63; --rb-text: #FF9885; --rb-soft: #3A211D; --ok: #4CC38A; --ok-soft: #133423; --bad: #FF9885; --bad-soft: #3A211D;
    --btn: #EEF3FA; --btn-ink: #0B1524; --on-ecc: #0B1524; --on-rb: #0B1524; --focus: #8DB2FF; --neutral: #6E7D90; --base: #3A4B64;
  }
}
:root[data-theme="dark"], :root:root[data-look="dark"] {
  color-scheme: dark;
  --ground: #0B1524; --panel: #13233A; --navy: #EEF3FA; --text: #E3E9F1; --text2: #B1BECE; --text3: #91A0B1;
  --rule: #28395A; --grid: #1D2D45; --ecc: #8DB2FF; --ecc-text: #A9C4FF; --ecc-soft: #16284A;
  --rb: #FF7A63; --rb-text: #FF9885; --rb-soft: #3A211D; --ok: #4CC38A; --ok-soft: #133423; --bad: #FF9885; --bad-soft: #3A211D;
  --btn: #EEF3FA; --btn-ink: #0B1524; --on-ecc: #0B1524; --on-rb: #0B1524; --focus: #8DB2FF; --neutral: #6E7D90; --base: #3A4B64;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* header */
header.top { position: sticky; top: 0; z-index: 20; background: var(--ground); }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 8px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wordmark { font: 800 14px var(--disp); letter-spacing: 0.02em; color: var(--navy); white-space: nowrap; }
a.wordmark { text-decoration: none; }   /* the wordmark links to the home page */
.brand .sep { width: 1px; height: 14px; background: var(--rule); flex-shrink: 0; }
.crumb { font-size: 15px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { display: flex; align-items: center; gap: 14px; }
.count { font: 700 14px var(--disp); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 2px; cursor: pointer; font: 700 14px var(--disp); color: var(--navy); }
/* light and dark switch */
.theme-sw { position: relative; flex-shrink: 0; width: 44px; height: 26px; padding: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.theme-sw:hover { border-color: var(--text3); }
.theme-sw .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: var(--ground); display: grid; place-items: center; transition: transform 0.2s ease, background-color 0.2s ease; }
.theme-sw .i-moon { display: none; }
.theme-sw[aria-checked="true"] { background: var(--ecc-soft); }
.theme-sw[aria-checked="true"]:hover { border-color: var(--ecc); }
.theme-sw[aria-checked="true"] .knob { transform: translateX(18px); background: var(--ecc); }
.theme-sw[aria-checked="true"] .i-sun { display: none; }
.theme-sw[aria-checked="true"] .i-moon { display: block; }
@media (prefers-reduced-motion: reduce) { .theme-sw, .theme-sw .knob { transition: none; } }
.segs { display: flex; gap: 4px; padding-bottom: 8px; }
.segs button { flex: 1 1 0; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.segs button span { display: block; height: 4px; background: var(--grid); }
.segs button.done span, .segs button.cur span { background: var(--navy); }
.segs button:hover span { background: var(--text3); }
/* a quick check is a short marker in the progress bar */
.segs button.seg-check { flex: 0 0 12px; }
.segs button.seg-check span { height: 8px; margin-top: -2px; }
.segs button.done:hover span, .segs button.cur:hover span { background: var(--navy); }

/* steps */
main.wrap { padding-top: 18px; padding-bottom: 132px; }
.step { display: none; }
.step.on { display: block; animation: rise 0.35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.on { animation: none; } }
.kicker { font: 700 13px var(--disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
h2.action { font: 800 32px/1.2 var(--disp); letter-spacing: -0.012em; color: var(--navy); margin: 8px 0 24px; max-width: 1040px; text-wrap: balance; }
h2.action:focus, h1:focus { outline: none; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.layout.full { grid-template-columns: minmax(0, 1fr); }
.exhibit { min-width: 0; }
.ex-label { display: flex; align-items: center; gap: 10px; font: 700 13px var(--disp); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); padding-bottom: 10px; border-bottom: 2px solid var(--navy); margin-bottom: 20px; }
.ex-label b { color: var(--navy); font-weight: 800; white-space: nowrap; }
.vbar { width: 1px; height: 12px; background: var(--rule); flex-shrink: 0; }
.ex-title { font: 700 20px/1.3 var(--disp); color: var(--navy); margin: -6px 0 14px; }
.ex-sub { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin: 26px 0 12px; }
.note { font-size: 14.5px; line-height: 1.5; color: var(--text3); margin-top: 14px; }
.fine { font-size: 13.5px; line-height: 1.5; color: var(--text3); }
.src-m { display: none; }

/* panel */
.panel { background: var(--panel); padding: 22px 24px; }
.panel h3 { font: 800 16px var(--disp); color: var(--navy); margin-bottom: 4px; }
.panel-lead { font-size: 15.5px; color: var(--text2); margin: 6px 0 4px; }
.fact { padding: 14px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.panel h3 + .fact, .panel-lead + .fact { border-top: 0; }
.fact p { font-size: 15.5px; line-height: 1.5; color: var(--text); }
.big-date { font: 800 24px/1.2 var(--disp); color: var(--navy); font-variant-numeric: tabular-nums; }
.tag { font: 800 12.5px var(--disp); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text3); }
.tag.ecc, .tag-ecc { color: var(--ecc-text); }
.tag.rb, .tag-rb { color: var(--rb-text); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 15px var(--disp); padding: 12px 20px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--ground); color: var(--navy); text-decoration: none; min-height: 44px; }
.btn.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn.big { padding: 15px 26px; font-size: 16px; }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.btn-row.tight { margin-top: 14px; }
.btn-row .note { margin-top: 0; }

/* footer */
footer.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ground); border-top: 1px solid var(--rule); }
.bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0 16px; }
.source { font-size: 14px; color: var(--text3); min-width: 0; }
.btns { display: flex; gap: 10px; flex-shrink: 0; }

/* cover */
.cover { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 500px); gap: 52px; align-items: center; min-height: calc(100vh - 250px); padding-top: 10px; }
.cover-main { display: flex; flex-direction: column; gap: 22px; }
.cover h1 { font: 800 58px/1.05 var(--disp); letter-spacing: -0.025em; color: var(--navy); }
.lede { font-size: 21px; line-height: 1.5; color: var(--text2); max-width: 560px; }
.meta { display: flex; flex-wrap: wrap; gap: 22px; font-weight: 600; color: var(--text2); }
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.vrule { background: var(--rule); align-self: stretch; }
.keypoint { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); padding: 16px 18px; margin-top: 18px; font: 700 16.5px/1.45 var(--disp); color: var(--navy); }
.keypoint .sq { width: 10px; height: 10px; background: var(--navy); margin-top: 7px; flex-shrink: 0; }

/* horizontal bars */
.hbars { border-top: 0; }
.hrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; min-height: 72px; }
.hrow.ticks { min-height: 22px; }
.hlab { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; }
.hlab b { font: 800 16px var(--disp); }
.hlab span { font-size: 14px; line-height: 1.35; color: var(--text2); }
.htrack { position: relative; height: 72px; margin-right: 96px; }
.htrack.short { height: 22px; }
.hgrid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.hseg { position: absolute; top: 20px; height: 32px; display: flex; align-items: center; padding-left: 10px; font: 700 13px var(--disp); white-space: nowrap; overflow: hidden; }
.hseg.ecc { background: var(--ecc); color: var(--on-ecc); }
.hseg.rb { background: var(--rb); color: var(--on-rb); }
.hseg.base { background: var(--base); color: var(--navy); }
.hval { position: absolute; top: 25px; font: 800 17px var(--disp); white-space: nowrap; }
.htick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 13px; color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.htick:first-child { transform: none; }
.htick:last-child { transform: translateX(-100%); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--text2); margin-top: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 12px; height: 12px; }
.sw.base { background: var(--base); } .sw.ecc { background: var(--ecc); } .sw.rb { background: var(--rb); }

/* flow rows */
.flowrow { margin-bottom: 22px; }
.flowhead { display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px; }
.flowhead p { font-size: 16px; color: var(--text2); max-width: 900px; }
.flowhead .tag { flex: 0 0 84px; }
.evrow { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: stretch; }
.evrow .kpi { margin: 0; }
.evcard { padding: 16px 18px; }
.evcard .evsel { padding-top: 0; }
.evcard .evsel-t { min-height: 48px; font-size: 15.5px; }
svg.tl { max-width: 1000px; }
/* chevrons */
.chev-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 14px; }
.chevs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.chevs li { display: flex; flex-direction: column; gap: 4px; min-height: 118px; padding: 14px 20px 14px 26px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.chevs li:first-child { padding-left: 16px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.chevs.ecc li { background: var(--ecc-soft); }
.chevs.rb li { background: var(--rb-soft); }
.chevs b { font: 700 14.5px/1.3 var(--disp); color: var(--navy); }
.chevs .t { font: 800 14px var(--disp); }
.chevs.ecc .t { color: var(--ecc-text); } .chevs.rb .t { color: var(--rb-text); }
.chevs em { font-style: normal; font-size: 13px; color: var(--text3); margin-top: auto; }

/* ECC test tiles */
.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { border-top: 3px solid var(--navy); background: var(--panel); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.tile .n { font: 800 34px/1 var(--disp); color: var(--navy); }
.tile b { font: 800 17px/1.3 var(--disp); color: var(--navy); margin-top: 6px; }
.tile p { font-size: 15.5px; line-height: 1.5; color: var(--text2); }
.diff-bar { display: flex; height: 48px; font: 700 14px var(--disp); }
.diff-bar span { display: flex; align-items: center; padding: 0 14px; }
.diff-bar .a { flex: 0 0 62%; background: var(--base); color: var(--navy); }
.diff-bar .b { flex: 1 1 auto; background: var(--ecc); color: var(--on-ecc); }

/* Red Book coverage */
.cover2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.col-in { border-top: 3px solid var(--rb); padding-top: 12px; }
.col-out { border-top: 3px solid var(--neutral); padding-top: 12px; }
.col-h { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
ul.ticks, ul.crosses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.ticks li, ul.crosses li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
ul.ticks svg { color: var(--ok); margin-top: 3px; flex-shrink: 0; }
ul.crosses svg { color: var(--bad); margin-top: 3px; flex-shrink: 0; }
ul.ticks.big li { font-size: 17px; }
.panel ul.ticks { margin-top: 10px; }
.panel ul.ticks li { font-size: 15.5px; }
.eq { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 8px; }
.eq-box { padding: 16px; font: 700 15px/1.35 var(--disp); display: flex; align-items: center; }
.eq-box.rb { background: var(--rb-soft); color: var(--navy); border-top: 3px solid var(--rb); }
.eq-box.grey { background: var(--panel); color: var(--navy); border-top: 3px solid var(--neutral); }
.eq-box.navy { background: var(--ecc-soft); color: var(--navy); border-top: 3px solid var(--navy); }
.eq-op { display: flex; align-items: center; justify-content: center; color: var(--text3); }

/* look-back svg */
svg.lb, svg.tl { display: block; width: 100%; height: auto; }
svg.lb text, svg.tl text { font-family: var(--body); }
.lb .axis { stroke: var(--navy); stroke-width: 1.5; }
.lb .tickl { stroke: var(--text3); stroke-width: 1; }
.lb .muted, .tl .muted { fill: var(--text3); font-size: 13px; }
.lb .mk-rb { stroke: var(--rb); stroke-width: 2.2; } .lb .dot-rb { fill: var(--rb); } .lb .lab-rb { fill: var(--rb-text); }
.lb .mk-ecc { stroke: var(--ecc); stroke-width: 2.2; } .lb .dot-ecc { fill: var(--ecc); } .lb .lab-ecc { fill: var(--ecc-text); }
.lb .mk-neutral { stroke: var(--neutral); stroke-width: 1.4; stroke-dasharray: 4 4; } .lb .dot-neutral { fill: var(--neutral); } .lb .lab-neutral { fill: var(--text2); }
.lb .mk-dark { stroke: var(--text2); stroke-width: 1.6; } .lb .dot-dark { fill: var(--text2); } .lb .lab-dark { fill: var(--text); }
.lb text[class^="lab-"] { font-family: var(--disp); font-weight: 700; font-size: 13.5px; }
.lb text.big { font-weight: 800; font-size: 15px; }
.lb .sub { fill: var(--text2); font-size: 14px; }
.lb .brk { fill: none; stroke: var(--rb); stroke-width: 1.6; }
.lb .brk-t { fill: var(--rb-text); font-family: var(--disp); font-weight: 800; font-size: 17px; }
@media (min-width: 901px) { .mob { display: none !important; } }
.vlist { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
.vlist li { position: relative; display: flex; flex-direction: column; }
.vlist li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 999px; background: var(--neutral); }
.vlist li.v-rb::before { background: var(--rb); } .vlist li.v-ecc::before { background: var(--ecc); } .vlist li.v-dark::before { background: var(--text2); }
.vlist b { font: 800 17px var(--disp); color: var(--navy); }
.vlist span { font-size: 15px; color: var(--text2); }

/* callouts */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-top: 18px; font: 700 15.5px/1.45 var(--disp); }
.callout.rb { background: var(--rb-soft); color: var(--navy); }
.callout.rb svg { color: var(--rb-text); flex-shrink: 0; margin-top: 2px; }

/* lanes */
.lane { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.lane-lab { font: 800 13px/1.35 var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.lane-flow { display: flex; align-items: stretch; }
.node { flex: 1 1 0; min-width: 0; background: var(--ecc-soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lane.silent .node { background: var(--panel); }
.node .num { width: 24px; height: 24px; background: var(--navy); color: var(--ground); font: 800 13px var(--disp); display: flex; align-items: center; justify-content: center; }
.node b { font: 700 15px/1.35 var(--disp); color: var(--navy); }
.node em { font-style: normal; font-size: 13px; color: var(--text3); margin-top: auto; }
.link { flex: 0 0 104px; position: relative; display: flex; align-items: center; justify-content: center; }
.link::before { content: ""; position: absolute; left: 6px; right: 12px; top: 50%; height: 2px; background: var(--navy); }
.link::after { content: ""; position: absolute; right: 4px; top: calc(50% - 6px); border-left: 9px solid var(--navy); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.link span { position: relative; z-index: 1; background: var(--ground); padding: 2px 6px; font: 800 13px/1.25 var(--disp); color: var(--navy); text-align: center; max-width: 84px; }
.outcomes { padding: 4px 0 16px; border-bottom: 1px solid var(--rule); }
.outcomes .ex-sub { margin-top: 16px; }
.outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.out { background: var(--ecc-soft); border-top: 3px solid var(--ecc); padding: 14px 16px; font: 700 15px/1.35 var(--disp); color: var(--navy); }

/* notice cards */
.notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ncard { border-top: 3px solid var(--rb); background: var(--panel); padding: 16px 18px 6px; }
.ncard header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ncard header b { font: 800 19px var(--disp); color: var(--navy); }
.ncard dl { margin: 0; }
.ncard dt { font: 800 12.5px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-top: 10px; }
.ncard dd { margin: 2px 0 8px; font-size: 15.5px; line-height: 1.5; }

/* calculators */
.calc-in { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-end; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 700 14px var(--disp); color: var(--text); }
input[type="date"] { height: 44px; border: 1px solid var(--rule); border-radius: 3px; padding: 0 12px; background: var(--ground); font: 700 16px var(--disp); color: var(--navy); }
.panel .field { margin: 12px 0 4px; }
.chk { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text2); min-height: 44px; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.gantt { border-top: 1px solid var(--rule); }
.grow { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; min-height: 70px; border-bottom: 1px solid var(--grid); }
.grow.ticks { min-height: 26px; border-bottom: 0; }
.glab { font-size: 15.5px; font-weight: 600; padding-right: 12px; line-height: 1.35; }
.gtrack { position: relative; height: 70px; margin-right: 92px; }
.gtrack.short { height: 26px; }
.gbar { position: absolute; left: 0; top: 19px; height: 32px; transition: width 0.3s ease; }
.gbar.ecc { background: var(--ecc); } .gbar.rb { background: var(--rb); }
.gbar.rbsoft { background: var(--rb-soft); box-shadow: inset 0 0 0 1.5px var(--rb); }
.gval { position: absolute; top: 25px; font: 800 16px var(--disp); white-space: nowrap; transition: left 0.3s ease; }
.gtrack.short .htick { top: 6px; }

/* Red Book decision phases */
.phases { display: grid; grid-template-columns: 42fr 42fr 28fr; gap: 3px; margin-top: 6px; }
.ph { padding: 12px 14px; font: 700 14.5px/1.3 var(--disp); display: flex; flex-direction: column; gap: 2px; }
.ph em { font-style: normal; font-weight: 800; }
.ph.p1 { background: var(--rb-soft); color: var(--navy); }
.ph.p2 { background: var(--rb); color: var(--on-rb); }
.ph.p3 { background: var(--panel); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--rb); }
ol.dates { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); }
ol.dates li { display: grid; grid-template-columns: 170px 170px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--grid); }
ol.dates .dn { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
ol.dates strong { font: 800 18px var(--disp); color: var(--navy); font-variant-numeric: tabular-nums; }
ol.dates span:last-child { font-size: 15px; color: var(--text2); }
ol.dates li.bad .dn, ol.dates li.bad strong { color: var(--rb-text); }

/* ladder */
table.ladder, table.glance { width: 100%; border-collapse: collapse; }
.ladder th, .ladder td { text-align: left; vertical-align: top; padding: 14px 14px; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; }
.ladder thead th { font: 800 14px var(--disp); letter-spacing: 0.04em; border-bottom: 2px solid var(--navy); padding-top: 6px; }
.ladder thead th.c-ecc { color: var(--ecc-text); } .ladder thead th.c-rb { color: var(--rb-text); }
.ladder tbody th { font: 700 15px/1.35 var(--disp); color: var(--navy); width: 26%; }
.stn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--navy); color: var(--ground); font: 800 12px var(--disp); margin-right: 10px; vertical-align: 1px; }
.pill { display: table; margin-top: 8px; font: 800 11.5px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; }
.pill.wait { background: var(--panel); color: var(--text2); }
.pill.good { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.ladder tr.later > * { opacity: 0.15; }
.ladder tr.now > * { background: var(--panel); }
.ladder tr > * { transition: opacity 0.25s ease, background-color 0.25s ease; }

/* project timeline */
.tl .wk { stroke: var(--grid); stroke-width: 1; }
.tl .mo { stroke: var(--rule); stroke-width: 1.2; }
.tl .lane-ecc { fill: var(--ecc-soft); } .tl .lane-rb { fill: var(--rb-soft); }
.tl .lane-t-ecc, .tl .lane-t-rb { font-family: var(--disp); font-weight: 800; font-size: 14px; }
.tl .lane-t-ecc { fill: var(--ecc-text); } .tl .lane-t-rb { fill: var(--rb-text); }
.tl .lane-sep { stroke: var(--rule); stroke-width: 1; }
.tl .found { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 4 3; }
.tl .found-t { fill: var(--text); font-family: var(--disp); font-weight: 700; font-size: 12.5px; }
.tl .win-ecc { fill: var(--ecc-soft); stroke: var(--ecc); stroke-width: 1.2; }
.tl .win-rb { fill: var(--rb-soft); stroke: var(--rb); stroke-width: 1.2; }
.tl .ghost { stroke-dasharray: 4 3; }
.tl rect.ghost { fill: var(--ground); }
.tl .win-t { fill: var(--text2); font-size: 11.5px; }
.tl .win-t.ghost { font-style: italic; }
.tl .mk { cursor: pointer; }
.tl .mk path { stroke-width: 1.5; }
.tl .mk-ecc path { fill: var(--ecc); stroke: var(--ecc); } .tl .mk-rb path { fill: var(--rb); stroke: var(--rb); }
.tl .mk.ghost path { fill: var(--ground); stroke-dasharray: 3 2; }
.tl .mk text { font-family: var(--disp); font-weight: 800; font-size: 12.5px; }
.tl .mk-ecc text { fill: var(--ecc-text); } .tl .mk-rb text { fill: var(--rb-text); }
.tl .mk.sel path, .tl .mk:focus-visible path { stroke: var(--text); stroke-width: 3; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.kpi { background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border-top: 3px solid var(--ecc); }
.kpi.rb { border-top-color: var(--rb); }
.kpi strong { font: 800 30px/1.15 var(--disp); color: var(--navy); }
.kpi span:last-child { font-size: 14.5px; color: var(--text2); }
.evsel { padding-top: 10px; }
.evsel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.evn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; font: 800 13px var(--disp); background: var(--navy); color: var(--ground); }
.evsel-date { font: 800 20px var(--disp); color: var(--navy); }
.evsel-t { font-size: 16px; line-height: 1.55; min-height: 100px; }
.evlist { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 30px 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: 15px; }
.ev.ghost .evt { font-style: italic; color: var(--text2); }
.ev .evn { font-size: 12px; min-width: 24px; height: 24px; }
.ev-ecc .evn { background: var(--ecc); color: var(--on-ecc); } .ev-rb .evn { background: var(--rb); color: var(--on-rb); }
.ev.ghost .evn { background: var(--ground); color: var(--rb-text); box-shadow: inset 0 0 0 1.5px var(--rb); }
.evd { font: 700 14px var(--disp); color: var(--text2); }
.evt .tag { margin-right: 6px; }

/* watch cards */
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wcard { background: var(--panel); border-top: 3px solid var(--rb); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.wcard.ecc { border-top-color: var(--ecc); }
.wcard header { display: flex; justify-content: space-between; align-items: center; }
.wn { font: 800 22px var(--disp); color: var(--text3); }
.wcard b { font: 800 17px/1.3 var(--disp); color: var(--navy); }
.wcard p { font-size: 15.5px; line-height: 1.5; color: var(--text2); }
.wcard em { font-style: normal; font-size: 13.5px; color: var(--text3); margin-top: auto; }

/* summary table */
.glance th, .glance td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.glance thead th { font: 800 14px var(--disp); letter-spacing: 0.04em; border-bottom: 2px solid var(--navy); padding-top: 4px; }
.glance thead th.c-ecc { color: var(--ecc-text); } .glance thead th.c-rb { color: var(--rb-text); }
.glance tbody th { font: 700 15px/1.35 var(--disp); color: var(--navy); width: 22%; }
.glance .cl { display: block; margin-top: 5px; font: 700 12px/1.3 var(--disp); letter-spacing: 0.03em; color: var(--text3); }

/* quiz */
/* the quiz screen stays hidden until core.js writes its first question (it fills #qz-opts), so a page that paints before
   the cached core.js runs never shows the empty quiz and then pushes the answer panel down. Showing it is no shift */
.step[data-quiz]:has(#qz-opts:empty) { visibility: hidden; }
fieldset.qz { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.qz legend { font: 700 24px/1.35 var(--disp); color: var(--navy); padding: 0; margin-bottom: 16px; }
.qopts { border-top: 2px solid var(--navy); }
.qopt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 14px; border: 0; border-bottom: 1px solid var(--rule); background: var(--ground);
  font-size: 17px; line-height: 1.45; color: var(--text); cursor: pointer; }
.qopt:hover:not([disabled]):not(.locked) { background: var(--panel); }
.qopt[disabled], .qopt.locked { cursor: default; }
.qopt .radio { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--rule); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qopt .ql { font: 800 15px var(--disp); color: var(--text3); width: 18px; flex-shrink: 0; }
.qopt .qt { flex: 1 1 auto; }
.qopt .qtag { font: 800 12px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; }
.qopt.right { background: var(--ok-soft); }
.qopt.right .radio { background: var(--ok); border-color: var(--ok); color: var(--ground); }
.qopt.right .qtag { color: var(--ok); }
.qopt.wrong { background: var(--bad-soft); }
.qopt.wrong .radio { background: var(--bad); border-color: var(--bad); color: var(--ground); }
.qopt.wrong .qtag { color: var(--bad); }
.qdots { display: inline-flex; gap: 5px; }
.qdots i { width: 9px; height: 9px; background: var(--grid); display: inline-block; }
.qdots i.cur { background: var(--navy); } .qdots i.ok { background: var(--ok); } .qdots i.no { background: var(--bad); }
.fb-verdict { display: flex; align-items: center; gap: 8px; font: 800 18px var(--disp); margin-bottom: 6px; }
.fb-verdict.ok { color: var(--ok); } .fb-verdict.no { color: var(--bad); }
.fb-text { font-size: 16px; line-height: 1.55; }
.fb-src { font-size: 14px; color: var(--text3); margin-top: 8px; }
.score-l { font-size: 14px; color: var(--text2); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.score { font: 800 30px var(--disp); color: var(--navy); }

/* finish */
.done { display: flex; flex-direction: column; gap: 6px; }
.done-score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; background: var(--panel); padding: 18px 20px; }
.done-score .note { margin: 0; flex-basis: 100%; }
.done-score strong { font: 800 34px var(--disp); color: var(--navy); }
.done .fine { margin-top: 24px; }

/* contents overlay */
.toc { position: fixed; inset: 0; z-index: 40; background: rgba(10, 21, 36, 0.45); display: none; }
.toc.open { display: block; }
.toc-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 100%); background: var(--ground); padding: 22px 26px; overflow-y: auto; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2); }
.toc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.toc-head b { font: 800 18px var(--disp); color: var(--navy); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li button { display: flex; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--grid); padding: 12px 4px; cursor: pointer; font-size: 16px; color: var(--text); }
.toc li button span { font: 800 14px var(--disp); color: var(--text3); width: 24px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.toc li button[aria-current="step"] { color: var(--navy); font-weight: 700; }
.toc li button[aria-current="step"] span { color: var(--navy); }
/* the way out of the lesson to its course page, under the list of screens */
.toc-out { display: flex; justify-content: center; width: 100%; margin-top: 24px; text-decoration: none; }
/* and under it the way to search every lesson (the site's /search/ page) */
.toc-out + .toc-find { margin-top: 10px; gap: 8px; }

/* small phones: the Contents button keeps its icon and its spoken name */
#toc-open { position: relative; }
@media (max-width: 374px) {
  .top-right { gap: 12px; }
  .toc-word { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* narrow screens */
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .crumb, .brand .sep { display: none; }
  main.wrap { padding-top: 16px; padding-bottom: 110px; }
  h2.action { font-size: 25px; margin-bottom: 20px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .source { display: none; }
  .btns { width: 100%; }
  .btns .btn { flex: 1 1 0; }
  .bar-inner { padding: 10px 0 12px; }
  .src-m { display: block; font-size: 13.5px; color: var(--text3); margin-top: 22px; }
  .cover { grid-template-columns: minmax(0, 1fr); gap: 30px; min-height: 0; }
  .cover h1 { font-size: 40px; }
  .lede { font-size: 18.5px; }
  .vrule { display: none; }
  .hrow { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 10px; }
  .hrow.ticks > div:first-child { display: none; }
  .hlab { flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .htrack { height: 56px; margin-right: 88px; }
  .hseg { top: 12px; }
  .hval { top: 17px; }
  .chev-row { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 22px; }
  .chevs { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .chevs li, .chevs li:first-child { min-height: 0; padding: 12px 16px 20px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px)); }
  .chevs li:last-child { clip-path: none; padding-bottom: 12px; }
  .chevs li { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .chevs em { margin-top: 0; margin-left: auto; }
  .tiles3, .notices, .outs, .wgrid, .kpis, .cover2, .evrow { grid-template-columns: minmax(0, 1fr); }
  .flowhead { flex-direction: column; gap: 4px; }
  .flowhead .tag { flex: none; }
  .diff-bar { height: auto; flex-direction: column; }
  .diff-bar span { padding: 12px 14px; }
  .eq { grid-template-columns: minmax(0, 1fr); }
  .eq-op { height: 36px; }
  .desk { display: none !important; }
  .lane { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lane-flow { flex-direction: column; }
  .link { flex: 0 0 52px; }
  .link::before { left: 50%; right: auto; top: 4px; bottom: 12px; width: 2px; height: auto; }
  .link::after { right: auto; left: calc(50% - 6px); top: auto; bottom: 4px; border-top: 9px solid var(--navy); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0; }
  .link span { max-width: none; }
  .grow { grid-template-columns: minmax(0, 1fr); padding-top: 10px; min-height: 0; }
  .grow.ticks > span:first-child { display: none; }
  .gtrack { height: 54px; margin-right: 84px; }
  .gbar { top: 11px; }
  .gval { top: 16px; font-size: 15px; }
  ol.dates li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ph { font-size: 13px; padding: 10px; }
  .ladder, .ladder tbody, .ladder tr, .ladder th, .ladder td, .glance, .glance tbody, .glance tr, .glance th, .glance td { display: block; width: 100%; }
  .ladder thead, .glance thead { display: none; }
  .ladder tbody th, .glance tbody th { width: auto; border-bottom: 0; padding: 14px 0 4px; }
  .ladder td, .glance td { border-bottom: 0; padding: 6px 0; }
  .ladder tr, .glance tr { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
  .ladder td::before, .glance td::before { content: attr(data-label); display: block; font: 800 12px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
  .ev { grid-template-columns: 30px minmax(0, 1fr); }
  .ev .evd { grid-column: 2; }
  .ev .evt { grid-column: 2; }
  .ev .evn { grid-row: span 2; }
  fieldset.qz legend { font-size: 20px; }
  .qopt { font-size: 16px; padding: 14px 8px; }
}

/* ================================================================ look C: the lesson player (task A5)
   A five-part lesson or a module check marks the root "lc" (EARLY_C in lessonkit.py). Everything below is scoped to it,
   so old module pages keep the look above. The kit's own names read the look C tokens (tokens.css, task A2), which
   carry the light and dark values. Libre Franklin for titles and buttons, Source Sans 3 for text and for figures that must line up.
   Amber is a fill only. Motion is CSS only, 300 to 800 ms, ease-out, and off under prefers-reduced-motion.
   The tripled :root outranks the light and dark rules above. */
:root:root:root.lc {
  --ground: var(--c-bg); --panel: var(--c-soft); --navy: var(--c-navy); --text: var(--c-body); --text2: var(--c-muted); --text3: var(--c-muted);
  --rule: var(--c-line); --grid: var(--c-line); --ecc: var(--c-navy); --ecc-text: var(--c-navy); --ecc-soft: var(--lc-tint);
  --rb: var(--c-wrong); --rb-text: var(--c-wrong-text); --rb-soft: var(--lc-wrong-tint);
  --ok: var(--c-right); --ok-soft: var(--lc-right-tint); --bad: var(--c-wrong-text); --bad-soft: var(--lc-wrong-tint);
  --btn: var(--c-navy); --btn-ink: var(--c-on-navy); --on-ecc: var(--c-on-navy); --on-rb: #FFFFFF;
  /* the second chart colour stays the bar fill. As text it is darker, 4.5 to 1 or more on the tints and the grounds */
  --alt: var(--c-chart2); --alt-text: #2B5C99; --alt-soft: var(--lc-blue-tint); --on-alt: #FFFFFF;
  --focus: var(--c-navy); --neutral: #8A96A3; --base: #C9D1DA;
  --lc-tint: #EAF0F8; --lc-blue-tint: #E6EEF9; --lc-wrong-tint: #FBE9E5; --lc-right-tint: #E3F3EA;
  --lc-shadow: 0 1px 2px rgba(10, 34, 64, 0.05), 0 24px 56px -28px rgba(10, 34, 64, 0.24);
  --lc-pop: 0 16px 40px rgba(10, 34, 64, 0.12);
  --disp: 'Libre Franklin', 'Franklin Gothic Medium', Arial, sans-serif;
  --body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
:root:root:root.lc[data-theme="dark"] {
  /* the second chart colour as a fill is darker than the light navy bars beside it. As text it is the lighter chart
     blue, 4.5 to 1 or more on the tints and the grounds (lessons/tests/test_look_c_contrast.py) */
  --alt: #4F86D9; --alt-text: var(--c-chart2);
  --on-rb: #0B1424; --on-alt: #0B1424; --focus: var(--c-amber); --neutral: #5B6A80; --base: #3A4B64;
  --lc-tint: #16284A; --lc-blue-tint: #132B4D; --lc-wrong-tint: #3A1C17; --lc-right-tint: #12301F;
  --lc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 56px -24px rgba(0, 0, 0, 0.7);
  --lc-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
.lc body { font: 400 18px/1.55 var(--body); background: var(--c-bg); color: var(--c-body); }
.lc :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lc [tabindex="-1"]:focus { outline: none; }   /* a screen's title takes the focus on each move, with no ring */
.lc .wrap { max-width: 1128px; padding: 0 24px; }

/* the top bar: the wordmark, the lesson, the screen count, Contents and the dark switch */
.lc header.top { background: var(--c-bg); }
.lc .top-row { min-height: 68px; padding: 10px 0 6px; gap: 20px; }
.lc .brand { gap: 16px; }
.lc .wordmark { font: 700 18px/24px var(--disp); letter-spacing: -0.01em; color: var(--c-navy); }
.lc .wm-short { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--c-navy); color: var(--c-on-navy); font: 800 16px/1 var(--disp); letter-spacing: 0; }
.lc .brand .sep { height: 24px; background: var(--c-line); }
.lc .crumb { font-size: 16px; color: var(--c-muted); }
/* the wordmark links home and the course name in the crumb links to the course page, both in the bar's own colours */
.lc a.wordmark { text-decoration: none; }
/* the wordmark's spoken name comes from its own words (no aria-label, WCAG 2.5.3): the full name, which stays in the
   name when a phone clips it, then this hidden " home". WT is hidden from the name */
.lc .wm-home { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lc .crumb a { color: inherit; text-decoration: none; }
.lc .crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the crumb clips its overflow for the ellipsis, so it keeps 6 px of room round the course name link for the focus
   ring (3 px wide, 3 px out). The negative margin keeps the crumb where it was */
.lc .crumb { padding: 6px; margin: -6px; }
/* a ladder's "good" pill: the green for text, 4.5 to 1 or more on its tint (the fill green is 4.0 to 1) */
.lc .pill.good { color: var(--c-right-text); }
.lc .top-right { gap: 10px; }
.lc .count { padding: 0 6px; font: 700 16px/24px var(--disp); color: var(--c-navy); }
.lc .linkbtn { height: 44px; gap: 8px; padding: 0 18px 0 14px; border-radius: 16px; background: var(--c-soft); color: var(--c-navy);
  font: 600 16px/20px var(--body); transition: background-color 300ms ease-out; }
.lc .linkbtn:hover, .lc .theme-btn:hover { background: var(--c-line); }
.lc .theme-btn { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 16px; background: var(--c-soft); color: var(--c-navy); cursor: pointer; transition: background-color 300ms ease-out; }
.lc .theme-btn .i-moon, .lc .theme-btn[aria-checked="true"] .i-sun { display: none; }
.lc .theme-btn[aria-checked="true"] .i-moon { display: block; }
/* "Save your progress" for a visitor on a free lesson (site/src/js/free-lesson.js puts it first in .top-right) */
.lc .top-right .wt-save { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 16px;
  background: var(--c-amber); color: var(--c-on-amber); font: 700 15px/20px var(--disp); }

/* the parts bar: one chunky segment per part, filled in amber as the screens go by, a tick on each finished part */
.parts { display: flex; gap: 8px; padding: 6px 0 14px; }
.pseg { flex: 1 1 0; min-width: max-content; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: var(--c-muted); }
.pt { display: block; height: 12px; border-radius: 999px; background: var(--c-line); overflow: hidden; }
.pf { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--c-amber); transition: width 500ms ease-out; }
.pseg[data-part="deeper"] .pt { background: transparent; box-shadow: inset 0 0 0 2px var(--c-line); }
/* a part's segment is never narrower than its name, so a one-screen part still shows "Why it matters" in full */
.pl { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 14px/18px var(--body); white-space: nowrap; }
.pseg[aria-current="step"] .pl { color: var(--c-navy); font-weight: 700; }
.pseg:hover .pl { color: var(--c-navy); }
.ptick { display: none; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px;
  background: var(--c-amber); color: var(--c-on-amber); }
.pseg.done .ptick { display: inline-flex; animation: lc-pop 400ms ease-out both; }
@keyframes lc-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
/* min-height: the line's height before core.js writes it, so the top bar is its final height at first paint and the
   screen below never moves down when the words arrive (core.js is a cached file the page may paint before) */
.part-now { display: none; min-height: 20px; margin: -4px 0 10px; font: 600 15px/20px var(--body); color: var(--c-muted); }

/* the screens in a shallow 3D stack. The screen in front is a big calm card. The two edges behind it show how much of
   the lesson is left. Next takes the front screen away towards the learner and brings the next one forward. */
/* the page ends 24 px below the fixed footer's top edge (core.js measures --foot-h): a screen that ends clear of the
   footer never scrolls, and a tall one scrolls its last line into view above it */
.lc main.wrap { padding-top: 34px; padding-bottom: calc(var(--foot-h, 88px) + 24px); }
/* a control that takes the focus scrolls clear of the fixed footer (or the term sheet over it) and of the sticky top
   bar (WCAG 2.4.11). core.js measures --foot-h and --sheet-h, and the fallbacks cover a page before it does.
   --head-h comes with lesson-player-flow, and until then its 126px fallback is the desktop header height */
html.lc { scroll-padding-bottom: calc(max(var(--foot-h, 88px), var(--sheet-h, 0px)) + 16px); }
html.lc:has(main :focus) { scroll-padding-top: calc(var(--head-h, 126px) + 16px); }
.lc #stack.stack { position: relative; display: block; perspective: 1400px; perspective-origin: 50% 0; }
.lc .stack .edge { position: absolute; left: 0; right: 0; top: 0; height: 64px; border: 1px solid var(--c-line); border-radius: 28px;
  background: var(--c-bg); transform-origin: 50% 0; opacity: 0; pointer-events: none; transition: opacity 400ms ease-out; }
.lc .stack .e1 { z-index: 1; transform: translateY(-13px) translateZ(-36px); }
.lc .stack .e2 { z-index: 0; transform: translateY(-25px) translateZ(-72px); }
.lc .stack[data-left="1"] .e1, .lc .stack[data-left="2"] .e1, .lc .stack[data-left="2"] .e2 { opacity: 1; }
.lc .step { position: relative; z-index: 2; background: var(--c-bg); transform-origin: 50% 0; }
.lc .step.on { animation: none; border: 1px solid var(--c-line); border-radius: 28px; padding: 56px 64px 52px; box-shadow: var(--lc-shadow); }
.lc .step.leave { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none;
  border: 1px solid var(--c-line); border-radius: 28px; padding: 56px 64px 52px; box-shadow: var(--lc-shadow); }
.lc .step.on.enter.fwd { animation: lc-in-fwd 520ms ease-out both; }
.lc .step.leave.fwd { animation: lc-out-fwd 460ms ease-out both; }
.lc .step.on.enter.rev { animation: lc-in-rev 520ms ease-out both; }
.lc .step.leave.rev { animation: lc-out-rev 460ms ease-out both; }
/* the front screen is gone before the next one is fully there, so two screens of text never sit on top of each other */
@keyframes lc-in-fwd { 0% { opacity: 0; transform: translateY(-22px) translateZ(-90px) rotateX(5deg); } 35% { opacity: 0.4; } 100% { opacity: 1; transform: none; } }
@keyframes lc-out-fwd { 0% { opacity: 1; transform: none; } 40% { opacity: 0; } 100% { opacity: 0; transform: translateY(40px) translateZ(80px) rotateX(-3deg); } }
@keyframes lc-in-rev { 0% { opacity: 0; transform: translateY(40px) translateZ(80px) rotateX(-3deg); } 35% { opacity: 0.4; } 100% { opacity: 1; transform: none; } }
@keyframes lc-out-rev { 0% { opacity: 1; transform: none; } 40% { opacity: 0; } 100% { opacity: 0; transform: translateY(-22px) translateZ(-90px) rotateX(5deg); } }
/* a device with no 3D transforms gets a plain slide */
@supports not (transform-style: preserve-3d) {
  .lc .step.on.enter.fwd { animation-name: lc-slide-in; }
  .lc .step.leave.fwd { animation-name: lc-slide-out; }
  .lc .step.on.enter.rev { animation-name: lc-slide-back-in; }
  .lc .step.leave.rev { animation-name: lc-slide-back-out; }
  @keyframes lc-slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  @keyframes lc-slide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-40px); } }
  @keyframes lc-slide-back-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
  @keyframes lc-slide-back-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }
}

/* one action title, one visual and the coach line, with generous space */
.lc .kicker { font: 700 16px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.lc h2.action { margin: 10px 0 0; max-width: 940px; font: 800 52px/1.06 var(--disp); letter-spacing: -0.03em; color: var(--c-navy); }
.lc h2.action, .lc .l-cover h1 { overflow-wrap: break-word; }   /* a long word on a phone wraps rather than runs off */
.lc .coach { margin-top: 20px; max-width: 760px; font: 400 22px/1.45 var(--body); color: var(--c-muted); text-wrap: pretty; }
.lc .layout { display: block; margin-top: 44px; }
.lc .layout:not(.full) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 820px; }
.lc .note { font-size: 16px; color: var(--c-muted); }
.lc .fine { font-size: 15px; line-height: 1.5; color: var(--c-muted); }
/* the why screen opens the lesson: its title, the screens and the minutes, then the question it answers */
.lc .l-cover { padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid var(--c-line); }
.lc .l-crumb { font: 600 16px/1.4 var(--body); color: var(--c-muted); }
.lc .l-cover h1 { margin-top: 14px; max-width: 920px; font: 800 60px/1.04 var(--disp); letter-spacing: -0.03em; color: var(--c-navy); text-wrap: balance; }
.lc .l-cover .meta { margin-top: 22px; gap: 26px; font: 600 16px/1.4 var(--body); color: var(--c-muted); }
.lc #s0 h2.action { font-size: 36px; line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; }

/* the footer: the quiet source line, Back as a text button and one big Next */
.lc footer.bar { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.lc .bar-inner { gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.lc .source { font-size: 15px; color: var(--c-muted); }
.lc .btns { gap: 8px; align-items: center; }
.lc .btn { gap: 10px; min-height: 52px; padding: 12px 24px; border: 2px solid var(--c-navy); border-radius: 16px; background: transparent;
  color: var(--c-navy); font: 700 17px/1.2 var(--disp); transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out; }
.lc .btn:hover:not([disabled]) { background: var(--c-soft); }
.lc .btn.primary { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-on-navy); }
.lc .btn.primary:hover:not([disabled]) { background: var(--c-navy); opacity: 0.92; }
.lc .btn.big { min-height: 64px; padding: 0 32px; font-size: 20px; }
.lc footer.bar .btn { height: 64px; min-height: 64px; }
.lc #next { min-width: 200px; padding: 0 32px 0 40px; gap: 12px; font-size: 20px; }
.lc #next.quiet { background: transparent; color: var(--c-navy); border-color: var(--c-line); }
.lc #next.quiet:hover { background: var(--c-soft); }
.lc #back { padding: 0 16px; border-color: transparent; font-size: 18px; }
.lc #back[disabled] { visibility: hidden; }

/* contents */
.lc .toc { background: rgba(10, 21, 36, 0.42); }
.lc .toc-panel { width: min(440px, 100%); padding: 28px 28px 32px; border-radius: 24px 0 0 24px; background: var(--c-bg); }
.lc .toc-head { margin-bottom: 16px; }
.lc .toc-head b { font: 800 26px/1.2 var(--disp); letter-spacing: -0.02em; color: var(--c-navy); }
.lc .toc-head .linkbtn { padding: 0; width: 44px; justify-content: center; }
.lc .toc li button { align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--c-line); font-size: 17px; line-height: 1.35; color: var(--c-body); }
.lc .toc li button span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px;
  background: var(--c-soft); font: 700 14px var(--disp); color: var(--c-muted); }
.lc .toc li button[aria-current="step"] { color: var(--c-navy); font-weight: 700; }
.lc .toc li button[aria-current="step"] span { background: var(--c-amber); color: var(--c-on-amber); }
.lc .toc-out { height: auto; min-height: 48px; padding: 12px 18px; text-align: center; }
/* the recap's finish row: the next lesson, and beside it the optional Go deeper screens */
.lc .l-next-row:has(.l-deeper) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* tablets: the card keeps its frame with less room */
@media (max-width: 900px) {
  .lc .wrap { padding: 0 20px; }
  .lc .step.on, .lc .step.leave { padding: 40px 36px 40px; border-radius: 24px; }
  .lc h2.action { font-size: 40px; line-height: 1.08; margin-bottom: 0; }
  .lc .l-cover h1 { font-size: 44px; }
  .lc #s0 h2.action { font-size: 30px; }
  .lc .coach { font-size: 20px; }
  .lc .layout { margin-top: 36px; }
  .lc .source { display: none; }
  .lc .btns { width: auto; margin-left: auto; }
  .lc .btns .btn { flex: none; }
  .lc .src-m { display: block; margin-top: 32px; font-size: 15px; color: var(--c-muted); }
}
/* phones: no frame, big type, the parts bar without names, and one full-width button pinned at the bottom */
@media (max-width: 900px) {
  .pseg { min-width: 0; }
  .pl { display: none; }
  .pseg { gap: 0; }
  .part-now { display: block; }
}
@media (max-width: 720px) {
  .lc .top-row { min-height: 56px; padding: 8px 0 4px; gap: 12px; }
  /* line-height: WT's height, so the wordmark is already where it will be when Today or Save your progress swaps the
     full name for WT (member-sync.js and free-lesson.js add them, maybe after the page first paints) */
  .lc .wordmark { font-size: 17px; line-height: 40px; }
  .lc .count { display: none; }
  .lc .linkbtn#toc-open { width: 44px; padding: 0; justify-content: center; }
  .lc #toc-open .toc-word { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lc .top-row:has(.wt-save, .wt-lib) .wm-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lc .top-row:has(.wt-save, .wt-lib) .wm-short { display: inline-flex; }
  .lc .top-right .wt-save { padding: 0 14px; font-size: 15px; }
  .parts { gap: 5px; padding: 4px 0 10px; }
  .lc main.wrap { padding-top: 12px; padding-bottom: calc(var(--foot-h, 80px) + 24px + var(--sheet-h, 0px)); }
  .lc .stack .edge { display: none; }
  .lc .step.on, .lc .step.leave { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .lc .kicker { font-size: 15px; }
  .lc h2.action { margin-top: 6px; font-size: 32px; line-height: 1.1; letter-spacing: -0.025em; }
  .lc .l-cover { padding-bottom: 24px; margin-bottom: 24px; }
  .lc .l-cover h1 { margin-top: 10px; font-size: 34px; line-height: 1.08; }
  .lc .l-cover .meta { margin-top: 14px; gap: 18px; font-size: 15px; }
  .lc #s0 h2.action { font-size: 26px; line-height: 1.18; }
  .lc .coach { margin-top: 14px; font-size: 18px; line-height: 1.5; }
  .lc .layout { margin-top: 28px; }
  .lc .bar-inner { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lc .btns { width: 100%; margin: 0; gap: 10px; }
  .lc footer.bar .btn { height: 56px; min-height: 56px; }
  .lc #back { flex: 0 0 56px; width: 56px; padding: 0; border: 0; background: var(--c-soft); }
  .lc #back .b-word { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lc #back[disabled] { visibility: visible; opacity: 0.45; }
  .lc #next { flex: 1 1 auto; min-width: 0; padding: 0 24px; font-size: 20px; }
}
/* narrow phones: a little less room around Save your progress, so WT still fits beside it at 360 */
@media (max-width: 360px) {
  .lc .top-row:has(.wt-save) .top-right { gap: 8px; }
  .lc .top-right .wt-save { padding: 0 10px; }
}
/* below 360 the full name never fits beside Contents and the dark switch, so WT stands for it. Beside Save your
   progress even WT has no room, so the wordmark link goes (Contents keeps the way back to the course) rather than
   stay in the Tab order with nothing to show */
@media (max-width: 359px) {
  .lc .wm-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lc .wm-short { display: inline-flex; }
  .lc .top-row:has(.wt-save) .wm-short, .lc .top-row:has(.wt-save) .wordmark { display: none; }
}
/* short windows (a phone on its side, or the page zoomed to 200 or 400 percent): the top bar scrolls away with the
   page and the footer buttons grow with their words, so the bars never cover most of the window */
@media (max-height: 520px) {
  .lc header.top { position: static; }
  .lc footer.bar .btn { height: auto; min-height: 48px; }
  html.lc:has(main :focus) { scroll-padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc .step.leave { display: none; }
  .lc .step.on.enter, .lc .step.on.enter.fwd, .lc .step.on.enter.rev { animation: none; }
  .pf, .lc .stack .edge, .lc .btn, .lc .linkbtn, .lc .theme-btn { transition: none; }
  .pseg.done .ptick { animation: none; }
}

/* ---------------------------------------------------------------- extra series colour: a lighter blue for a second NEC4 party or form */
:root, :root:root[data-look="light"] { --alt: #2B72B3; --alt-text: #1F5F99; --alt-soft: #E3EFF9; --on-alt: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --alt: #6CC4F0; --alt-text: #8DD3F5; --alt-soft: #12324A; --on-alt: #0B1524; } }
:root[data-theme="dark"], :root:root[data-look="dark"] { --alt: #6CC4F0; --alt-text: #8DD3F5; --alt-soft: #12324A; --on-alt: #0B1524; }

.tag.alt, .tag-alt { color: var(--alt-text); }
.tag.neutral, .tag-neutral { color: var(--text3); }
.tag.ok { color: var(--ok); }
.tag.bad { color: var(--bad); }
.hseg.alt { background: var(--alt); color: var(--on-alt); }
.hseg.neutral { background: var(--neutral); color: var(--ground); }
.sw.alt { background: var(--alt); } .sw.neutral { background: var(--neutral); }
.chevs.alt li { background: var(--alt-soft); }
.chevs.neutral li { background: var(--panel); }
.chevs.alt .t { color: var(--alt-text); } .chevs.neutral .t { color: var(--text2); }
.tile.alt { border-top-color: var(--alt); } .tile.rb { border-top-color: var(--rb); } .tile.neutral { border-top-color: var(--neutral); }
.tile.ok { border-top-color: var(--ok); }
.wcard.alt { border-top-color: var(--alt); } .wcard.neutral { border-top-color: var(--neutral); }
.kpi.alt { border-top-color: var(--alt); } .kpi.neutral { border-top-color: var(--neutral); }
.ncard.ecc { border-top-color: var(--ecc); } .ncard.alt { border-top-color: var(--alt); } .ncard.neutral { border-top-color: var(--neutral); }
.lane.alt .node { background: var(--alt-soft); }
.lane.rb .node { background: var(--rb-soft); }
.out.alt { background: var(--alt-soft); border-top-color: var(--alt); }
.out.rb { background: var(--rb-soft); border-top-color: var(--rb); }
.out.neutral { background: var(--panel); border-top-color: var(--neutral); }
.out.ok { background: var(--ok-soft); border-top-color: var(--ok); }
.out p { font: 400 14.5px/1.45 var(--body); color: var(--text2); margin-top: 6px; }
.outs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gbar.alt { background: var(--alt); } .gbar.neutral { background: var(--neutral); }
.gbar.ecc-soft { background: var(--ecc-soft); box-shadow: inset 0 0 0 1.5px var(--ecc); }
.callout.info { background: var(--ecc-soft); color: var(--navy); }
.callout.info svg { color: var(--ecc-text); flex-shrink: 0; margin-top: 2px; }
.callout.ok { background: var(--ok-soft); color: var(--navy); }
.callout.ok svg { color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.glance thead th.c-alt, .ladder thead th.c-alt { color: var(--alt-text); }
.glance.wide tbody th { width: 18%; }
.tiles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tiles4 .tile .n { font-size: 28px; }

/* evn markers by kind */
.evn.k-ecc { background: var(--ecc); color: var(--on-ecc); }
.evn.k-rb { background: var(--rb); color: var(--on-rb); }
.evn.k-alt { background: var(--alt); color: var(--on-alt); }
.evn.k-neutral { background: var(--neutral); color: var(--ground); }
.ev-alt .evn { background: var(--alt); color: var(--on-alt); } .ev-neutral .evn { background: var(--neutral); color: var(--ground); }
.tl .lane-alt { fill: var(--alt-soft); } .tl .lane-neutral { fill: var(--panel); }
.tl .lane-t-alt { fill: var(--alt-text); font-family: var(--disp); font-weight: 800; font-size: 14px; }
.tl .lane-t-neutral { fill: var(--text2); font-family: var(--disp); font-weight: 800; font-size: 14px; }
.tl .win-alt { fill: var(--alt-soft); stroke: var(--alt); stroke-width: 1.2; }
.tl .win-neutral { fill: var(--panel); stroke: var(--neutral); stroke-width: 1.2; }
.tl .mk-alt path { fill: var(--alt); stroke: var(--alt); } .tl .mk-neutral path { fill: var(--neutral); stroke: var(--neutral); }
.tl .mk-alt text { fill: var(--alt-text); } .tl .mk-neutral text { fill: var(--text2); }
.tl .lane-t-ecc, .tl .lane-t-rb, .tl .lane-t-alt, .tl .lane-t-neutral { font-size: 13px; }
.tl .key { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 4 3; }
.tl .key-t { fill: var(--text); font-family: var(--disp); font-weight: 700; font-size: 12.5px; }

/* space between blocks in an exhibit (zero specificity, so each block's own margins still win) */
:where(.exhibit > * + *) { margin-top: 20px; }
:where(.exhibit > .lane + .lane), :where(.exhibit > .ex-label + *), :where(.exhibit > .ex-title + *) { margin-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.exhibit p.body { font-size: 16.5px; line-height: 1.6; max-width: 880px; margin-bottom: 12px; }
.evrow.single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.cover-ex .ex-title { margin-top: -4px; }

.hbars .hrow { grid-template-columns: var(--hl, 170px) minmax(0, 1fr); }
.hseg.gap { background: transparent; }
.chevs { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.eq { grid-template-columns: var(--eqcols, minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr)); }
.hbars .htrack { margin-right: var(--hv, 96px); }
.seg-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.seg-l { font: 700 14px var(--disp); color: var(--text); }
.field.wide { flex: 1 1 320px; }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--navy); margin-bottom: 18px; }
.tab { font: 700 15px var(--disp); color: var(--text2); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 10px 16px 11px; cursor: pointer; min-height: 44px; }
.tab:hover { color: var(--navy); }
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--rb); }
.tab.ecc[aria-selected="true"] { border-bottom-color: var(--ecc); }
.tabpanel[hidden] { display: none; }
.tabpanel .lead { font: 700 19px/1.4 var(--disp); color: var(--navy); margin-bottom: 12px; max-width: 900px; }
.tabpanel p { font-size: 16px; line-height: 1.55; max-width: 900px; }
.tabpanel p + p { margin-top: 10px; }
.tabpanel .facts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 8px; }

/* ---------------------------------------------------------------- reveal cards */
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rcard { display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--panel); border: 0; border-top: 3px solid var(--navy); padding: 16px 18px 18px;
  cursor: pointer; color: var(--text); font: inherit; min-height: 132px; }
.rcard:hover { background: var(--ecc-soft); }
.rcard .rq { font: 700 17px/1.35 var(--disp); color: var(--navy); }
.rcard .rh { display: inline-flex; align-items: center; gap: 6px; font: 800 12.5px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-top: auto; }
.rcard .ra { display: none; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.rcard .ra b { font-family: var(--disp); color: var(--navy); }
.rcard[aria-expanded="true"] { background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule); }
.rcard[aria-expanded="true"] .ra { display: block; }
.rcard[aria-expanded="true"] .rh { display: none; }
.rcard .rref { display: none; font-size: 13.5px; color: var(--text3); }
.rcard[aria-expanded="true"] .rref { display: block; }

/* ---------------------------------------------------------------- sorter */
.sorter { border-top: 2px solid var(--navy); padding-top: 14px; }
.so-top { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.so-count { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.so-item { background: var(--panel); padding: 20px 22px; margin: 12px 0 14px; min-height: 92px; display: flex; align-items: center; }
.so-text { font: 700 20px/1.4 var(--disp); color: var(--navy); }
.so-groups { display: grid; grid-template-columns: repeat(var(--g, 2), minmax(0, 1fr)); gap: 10px; }
.so-g { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 56px; padding: 10px 12px; border: 1px solid var(--rule);
  background: var(--ground); color: var(--navy); font: 700 15.5px/1.3 var(--disp); cursor: pointer; border-radius: 3px; }
.so-g:hover:not([disabled]) { background: var(--ecc-soft); border-color: var(--ecc); }
.so-g[disabled] { cursor: default; opacity: 0.55; }
.so-g.right { opacity: 1; background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.so-g.wrong { opacity: 1; background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.so-fb { min-height: 76px; margin-top: 14px; }
.so-sum { background: var(--panel); padding: 20px 22px; }
.so-sum strong { font: 800 34px var(--disp); color: var(--navy); display: block; margin: 4px 0 10px; }
.so-sum .so-key { margin-top: 14px; display: grid; grid-template-columns: repeat(var(--g, 2), minmax(0, 1fr)); gap: 14px; }
.so-sum .so-key h4 { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin: 0 0 6px; }
.so-sum .so-key ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }

/* ---------------------------------------------------------------- document stack */
.stack { display: flex; flex-direction: column; gap: 6px; }
.slayer { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px; background: var(--panel); border-left: 4px solid var(--navy); }
.slayer.ecc { background: var(--ecc-soft); border-left-color: var(--ecc); }
.slayer.alt { background: var(--alt-soft); border-left-color: var(--alt); }
.slayer.rb { background: var(--rb-soft); border-left-color: var(--rb); }
.slayer.neutral { border-left-color: var(--neutral); }
.slayer b { font: 800 16px/1.3 var(--disp); color: var(--navy); }
.slayer b small { display: block; font: 700 12.5px var(--disp); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin-top: 3px; }
.slayer p { font-size: 15px; line-height: 1.5; color: var(--text2); }
.stack .sgap { font: 800 12.5px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); padding: 8px 0 2px; }

/* ---------------------------------------------------------------- matrix of ticks */
table.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 11px 12px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; font-size: 15px; line-height: 1.4; }
.matrix thead th { font: 800 13.5px var(--disp); letter-spacing: 0.03em; color: var(--navy); border-bottom: 2px solid var(--navy); vertical-align: bottom; }
.matrix tbody th { text-align: left; font: 700 15px/1.35 var(--disp); color: var(--navy); }
.matrix tbody th small { display: block; font: 400 13.5px/1.4 var(--body); color: var(--text2); margin-top: 2px; }
.matrix .y svg { color: var(--ok); } .matrix .n svg { color: var(--bad); }
.matrix .dash { color: var(--text3); }
.matrix td.hl { background: var(--ecc-soft); }
.matrix .txt { font-size: 14px; color: var(--text2); }

/* ---------------------------------------------------------------- numbered steps */
ol.nsteps { list-style: none; margin: 0; padding: 0; counter-reset: ns; border-top: 1px solid var(--rule); }
ol.nsteps li { counter-increment: ns; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--grid); }
ol.nsteps li::before { content: counter(ns); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--navy); color: var(--ground); font: 800 14px var(--disp); }
ol.nsteps b { font: 700 16px/1.4 var(--disp); color: var(--navy); display: block; }
ol.nsteps span { font-size: 15px; line-height: 1.5; color: var(--text2); }
ol.nsteps em { font-style: normal; font: 700 13px var(--disp); color: var(--text3); white-space: nowrap; }
ol.nsteps em .cw { display: none; font: inherit; color: inherit; line-height: inherit; }

/* quick checks: a few questions after a section, each answered on the spot */
.qchecks { display: flex; flex-direction: column; gap: 30px; max-width: 900px; }
fieldset.qc { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.qc legend { display: flex; align-items: flex-start; gap: 12px; padding: 0; margin-bottom: 12px; font: 700 20px/1.4 var(--disp); color: var(--navy); }
.qc-n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 0; background: var(--navy); color: var(--ground); font: 800 14px var(--disp); }
.qc .qopt { padding: 13px 14px; font-size: 16.5px; }
.qc-fb { margin-top: 12px; padding: 14px 16px 15px; background: var(--panel); border-left: 3px solid var(--rule); }
.qc-fb.ok { border-left-color: var(--ok); }
.qc-fb.no { border-left-color: var(--bad); }
.qc-fb .fb-verdict { font-size: 16px; margin-bottom: 4px; }
.qc-fb .fb-text { font-size: 15.5px; }
.qc-fb .fb-src { font-size: 13.5px; margin-top: 6px; }
.qc-score { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); font: 700 16px var(--disp); color: var(--navy); }
.fin-checks { flex-basis: 100%; margin: 0; font: 600 15.5px/1.4 var(--body); color: var(--text2); }

/* ---------------------------------------------------------------- big numbers and splits */
.bigstats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
.bigstat { background: var(--panel); padding: 16px 18px; border-top: 3px solid var(--navy); display: flex; flex-direction: column; gap: 4px; }
.bigstat.alt { border-top-color: var(--alt); } .bigstat.rb { border-top-color: var(--rb); } .bigstat.neutral { border-top-color: var(--neutral); } .bigstat.ok { border-top-color: var(--ok); }
.bigstat strong { font: 800 30px/1.15 var(--disp); color: var(--navy); font-variant-numeric: tabular-nums; }
.bigstat span { font-size: 14.5px; line-height: 1.45; color: var(--text2); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.split h4 { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
.split h4.rb { border-bottom-color: var(--rb); color: var(--rb-text); }
.split h4.alt { border-bottom-color: var(--alt); color: var(--alt-text); }
.split h4.ecc { color: var(--ecc-text); }
.split p { font-size: 15.5px; line-height: 1.55; }
.split p + p { margin-top: 8px; }

/* ---------------------------------------------------------------- inputs beyond dates */
input[type="number"], select.inp { height: 44px; border: 1px solid var(--rule); border-radius: 3px; padding: 0 12px; background: var(--ground); font: 700 16px var(--disp); color: var(--navy); min-width: 0; }
input[type="number"] { width: 150px; }
input[type="range"] { width: 100%; accent-color: var(--navy); height: 32px; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.range-row output { font: 800 20px var(--disp); color: var(--navy); font-variant-numeric: tabular-nums; min-width: 120px; text-align: right; }
.seg-ctl { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg-ctl button { font: 700 15px var(--disp); color: var(--text2); background: var(--ground); border: 0; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.seg-ctl button + button { border-left: 1px solid var(--rule); }
.seg-ctl button[aria-pressed="true"] { background: var(--navy); color: var(--ground); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 900px) {
  .chevs, .eq { grid-template-columns: minmax(0, 1fr); }
  .hbars .hrow { grid-template-columns: minmax(0, 1fr); }
  .hbars .htrack { margin-right: min(var(--hv, 88px), 110px); }
  .tiles2, .tiles4, .rgrid, .rgrid.three, .split, .outs.two, .outs.four, .tabpanel .facts2 { grid-template-columns: minmax(0, 1fr); }
  .bigstats { grid-template-columns: minmax(0, 1fr); }
  .slayer { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .so-groups, .so-sum .so-key { grid-template-columns: minmax(0, 1fr); }
  .so-text { font-size: 18px; }
  .tab { padding: 10px 12px 11px; font-size: 14.5px; }
  ol.nsteps li { grid-template-columns: 36px minmax(0, 1fr); }
  ol.nsteps em { grid-column: 2; font-size: 12px; letter-spacing: 0.03em; white-space: normal; }
  ol.nsteps em .cw { display: inline; }
  fieldset.qc legend { font-size: 18px; gap: 10px; }
  .qc-n { width: 26px; height: 26px; font-size: 13px; }
  .qc .qopt { font-size: 16px; padding: 13px 8px; }
  .qc .qopt .qtag { display: none; }
  .matrix th, .matrix td { padding: 9px 6px; font-size: 13.5px; }
  .matrix thead th { font-size: 12px; }
  .range-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .range-row output { text-align: left; }
}

/* line breaks: keep a last word company, and balance short labels (a no-op in older browsers) */
p, li, dd, td, legend, .qt, .fb-text { text-wrap: pretty; }
h1, h2, h3, h4, .kicker, .ex-label span, .tag, .ex-sub { text-wrap: balance; }
/* a sub-heading inside a tab keeps its sub-heading size */
.tabpanel .ex-sub { font: 800 13px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin: 26px 0 12px; }
.tabpanel .ex-sub:first-child { margin-top: 0; }

/* ================================================================ added 26 September 2026: terms, feedback, visuals */
.tag-ok { color: var(--ok); }

/* the page always ends clear of the fixed footer (core.js measures it into --foot-h) */
main.wrap { padding-bottom: calc(var(--foot-h, 76px) + 56px); }
@media (max-width: 900px) { main.wrap { padding-bottom: calc(var(--foot-h, 68px) + 42px + var(--sheet-h, 0px)); } }

/* ---------------------------------------------------------------- terms you can tap */
.term { cursor: pointer; color: inherit; border-radius: 2px; text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: var(--text3);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, text-decoration-color 0.15s ease; }
.term:hover { text-decoration-color: currentColor; }
.term[aria-expanded="true"] { background: var(--ecc-soft); box-shadow: 0 0 0 2px var(--ecc-soft); text-decoration-color: currentColor; }
.term:focus { outline: none; }
.term:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qopt .term, .rcard .term { position: relative; z-index: 2; }

.term-pop { position: absolute; z-index: 19; display: none; width: min(340px, calc(100vw - 24px)); padding: 14px 16px 16px;
  background: var(--ground); color: var(--text); border: 1px solid var(--rule); border-top: 3px solid var(--ecc);
  box-shadow: 0 14px 34px rgba(10, 34, 64, 0.16), 0 2px 6px rgba(10, 34, 64, 0.07); }
.term-pop.open { display: block; animation: tp-in 0.14s ease; }
@keyframes tp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tp-t { font: 800 17px/1.3 var(--disp); color: var(--navy); }
.tp-x { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; margin: -7px -9px 0 0; padding: 0; border: 0; border-radius: 3px;
  background: none; color: var(--text3); cursor: pointer; }
.tp-x:hover { color: var(--navy); background: var(--panel); }
.tp-c { margin-top: 2px; font: 700 12.5px var(--disp); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.tp-s { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.tp-e { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); font-size: 14.5px; line-height: 1.5; color: var(--text2); }
.tp-el { display: block; margin-bottom: 2px; font: 800 11.5px var(--disp); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text3); }
.tp-c[hidden], .tp-e[hidden] { display: none; }
/* phones: a sheet at the bottom of the screen */
.term-pop.sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 45; width: auto; max-height: 70vh; overflow-y: auto;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 3px solid var(--ecc);
  box-shadow: 0 -14px 40px rgba(10, 34, 64, 0.22); animation: tp-up 0.18s ease; }
@keyframes tp-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.term-pop.sheet .tp-t { font-size: 19px; }
.term-pop.sheet .tp-s { font-size: 16.5px; }
.term-pop.sheet .tp-e { font-size: 15.5px; }
:root[data-look="dark"] .term-pop { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }
:root[data-look="dark"] .term-pop.sheet { box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-motion: reduce) { .term-pop.open, .term-pop.sheet { animation: none; } .term { transition: none; } }

/* ---------------------------------------------------------------- reveal cards: the button covers the card, terms sit above it */
.rcard { position: relative; }
.rcard .rq { margin: 0; }
.rcard .rh { order: 3; align-self: flex-start; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.rcard .rh::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.rcard .rh:focus-visible { outline: none; }
.rcard .rh:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.rcard .ra { order: 1; }
.rcard .rref { order: 2; margin: 0; }
.rcard[data-open="true"] { background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule); }
.rcard[data-open="true"] .ra, .rcard[data-open="true"] .rref { display: block; }
.rcard[data-open="true"] .rh { height: 0; margin: 0 0 -10px; overflow: hidden; }

/* ---------------------------------------------------------------- quick check options: a row whose button covers it */
div.qopt { position: relative; }
.qopt .qpick { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.qopt .qpick::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.qopt .qpick:focus-visible { outline: none; }
.qopt .qpick:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
.qopt .qpick[disabled], .qopt .qpick[disabled]::after { cursor: default; }

/* reasons for each option, after an answer */
.fb-why { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
.fb-why + .fb-why { margin-top: 6px; }
.fb-lead { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 8px;
  vertical-align: 1px; font: 800 12px var(--disp); background: var(--grid); color: var(--text2); }
.fb-why.ok .fb-lead { background: var(--ok); color: var(--ground); }
.fb-why.no .fb-lead { background: var(--bad); color: var(--ground); }
.fb-why ~ .fb-text { margin-top: 8px; color: var(--text2); }
.fb-why[hidden], .fb-text[hidden] { display: none; }

/* ---------------------------------------------------------------- ladders: buttons above the table, rows appear as they are reached */
.ladder-box > .lad-ctl { margin: 0 0 14px; }
.ladder tbody tr[hidden] { display: none !important; }
.ladder tbody tr:not([hidden]) { animation: lad-in 0.3s ease; }
@keyframes lad-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ladder tbody tr:not([hidden]) { animation: none; } }

/* ---------------------------------------------------------------- timeline labels, and the phone rail */
.tl .mk .mk-l { font-family: var(--body); font-weight: 600; font-size: 12.5px; fill: var(--text2); }
.tl .mk.ghost .mk-l { font-style: italic; }
.tl .mk.sel .mk-l { fill: var(--navy); }
.evsel-t .evsel-b { font-family: var(--disp); font-weight: 800; color: var(--navy); }
@media (max-width: 900px) {
  ol.evlist { position: relative; padding-top: 2px; }
  ol.evlist::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 24px; width: 2px; background: var(--rule); }
  ol.evlist .ev { display: block; position: relative; padding: 0 0 20px 36px; border: 0; font-size: 15px; }
  ol.evlist .ev:last-child { padding-bottom: 6px; }
  ol.evlist .ev .evn { position: absolute; left: 2px; top: 5px; width: 14px; min-width: 0; height: 14px; padding: 0; font-size: 0; line-height: 0;
    transform: rotate(45deg); outline: 3px solid var(--ground); }
  ol.evlist .ev.ghost .evn { background: var(--ground); box-shadow: inset 0 0 0 2px var(--neutral); }
  ol.evlist .ev-ecc.ghost .evn { box-shadow: inset 0 0 0 2px var(--ecc); }
  ol.evlist .ev-alt.ghost .evn { box-shadow: inset 0 0 0 2px var(--alt); }
  ol.evlist .ev-rb.ghost .evn { box-shadow: inset 0 0 0 2px var(--rb); }
  ol.evlist .evd { display: block; font: 800 15.5px/1.35 var(--disp); color: var(--navy); }
  ol.evlist .evl { margin-left: 8px; font: inherit; color: inherit; }
  ol.evlist .evt { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--text); }
  ol.evlist .evt .tag { display: block; margin: 1px 0 2px; font-size: 11.5px; }
  ol.evlist .ev.ghost .evt { color: var(--text2); }
}

/* ---------------------------------------------------------------- money build-up (waterfall) */
.wfall { --wl: 200px; --wv: 124px; }
.wf-row { position: relative; display: grid; grid-template-columns: var(--wl) minmax(0, 1fr); align-items: center; min-height: 50px; }
.wf-lab { grid-column: 1; grid-row: 1; padding-right: 14px; font: 700 15px/1.3 var(--disp); color: var(--navy); }
.wf-row.total .wf-lab { font-weight: 800; }
.wf-row.total { border-top: 1px solid var(--rule); }
.wf-track { grid-column: 2; grid-row: 1; position: relative; height: 50px; margin-right: var(--wv); }
.wf-track.short { height: 22px; }
.wf-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.wf-grid.zero { background: var(--text3); }
.wf-bar { position: absolute; top: 12px; height: 26px; }
.wf-bar.ecc { background: var(--ecc); } .wf-bar.alt { background: var(--alt); } .wf-bar.rb { background: var(--rb); }
.wf-bar.neutral { background: var(--neutral); } .wf-bar.ok { background: var(--ok); }
/* the value: after the bar's end, which is --x of the way along the track */
.wf-v { position: absolute; z-index: 1; top: 15px; left: calc(var(--wl) + (100% - var(--wl) - var(--wv)) * var(--x, 0) + 10px);
  font: 800 15px var(--disp); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-row.total .wf-v { top: 14px; font-size: 16.5px; }
.wf-link { position: absolute; top: 38px; height: 25px; width: 0; border-left: 1.5px dashed var(--text3); }
.wf-row.ticks { min-height: 24px; }
.wf-row.ticks .wf-track { grid-column: 2; }
.wf-row.ticks .htick { top: 4px; }
@media (max-width: 900px) {
  .wf-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; min-height: 0; padding-top: 8px; }
  .wf-row.ticks { grid-template-columns: minmax(0, 1fr); }
  .wf-row.ticks > div:first-child { display: none; }
  .wf-lab { padding: 0; font-size: 14.5px; }
  .wf-v, .wf-row.total .wf-v { position: static; grid-column: 2; grid-row: 1; font-size: 14.5px; }
  .wf-track, .wf-row.ticks .wf-track { grid-column: 1 / -1; grid-row: 2; height: 32px; margin-right: 0; }
  .wf-track.short { height: 22px; }
  .wf-bar { top: 5px; height: 22px; }
  .wf-link { display: none; }
}

/* ---------------------------------------------------------------- yes or no decision flow */
ol.dflow { list-style: none; margin: 0; padding: 0; max-width: 960px; }
.d-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.d-box { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px; background: var(--panel); border-left: 3px solid var(--navy); }
.d-n { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--navy); color: var(--ground); font: 800 14px var(--disp); }
.d-t { font: 700 16px/1.4 var(--disp); color: var(--navy); }
.d-cl { grid-column: 2; font: 700 12.5px var(--disp); font-style: normal; color: var(--text3); }
.d-sides { display: flex; flex-direction: column; gap: 10px; }
.d-side { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; }
.d-a { font: 800 12.5px var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
.d-side .d-a { position: relative; padding: 0 14px 14px 12px; text-align: center; }
.d-side .d-a::before { content: ""; position: absolute; left: 6px; right: 12px; bottom: 5px; height: 2px; background: var(--navy); }
.d-side .d-a::after { content: ""; position: absolute; right: 5px; bottom: 1px; border-left: 9px solid var(--navy); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.d-out { padding: 12px 14px; background: var(--panel); border-left: 3px solid var(--neutral); font: 700 15px/1.35 var(--disp); color: var(--navy); }
.d-out b { font-weight: 800; }
.d-out small { display: block; margin-top: 3px; font: 400 14px/1.45 var(--body); color: var(--text2); }
.d-out.ecc { background: var(--ecc-soft); border-left-color: var(--ecc); }
.d-out.alt { background: var(--alt-soft); border-left-color: var(--alt); }
.d-out.rb { background: var(--rb-soft); border-left-color: var(--rb); }
.d-out.ok { background: var(--ok-soft); border-left-color: var(--ok); }
.d-go { padding: 10px 0; font: 700 14px var(--disp); color: var(--text2); }
.d-down { position: relative; height: 48px; }
.d-down::before { content: ""; position: absolute; left: 32px; top: 4px; bottom: 9px; width: 2px; background: var(--navy); }
.d-down::after { content: ""; position: absolute; left: 28px; bottom: 2px; border-top: 9px solid var(--navy); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.d-down .d-a { position: absolute; left: 46px; top: 15px; }
li.d-end { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.d-out.end { padding: 16px 18px; border-left-width: 4px; font-size: 17px; }
@media (max-width: 900px) {
  .d-row { grid-template-columns: minmax(0, 1fr); }
  .d-sides { margin: 8px 0 0 32px; gap: 8px; }
  .d-side { grid-template-columns: 62px minmax(0, 1fr); }
  .d-side .d-a { padding: 0 10px 12px 2px; text-align: left; }
  .d-side .d-a::before { left: 0; right: 10px; }
  li.d-end { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- what to write: a model notice laid out like a letter */
figure.letter { margin: 0; max-width: 760px; background: var(--ground); border: 1px solid var(--rule); border-top: 3px solid var(--ecc);
  box-shadow: 0 1px 2px rgba(10, 34, 64, 0.04), 0 10px 28px rgba(10, 34, 64, 0.07); }
:root[data-look="dark"] figure.letter { box-shadow: none; }
.letter-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 26px 12px; border-bottom: 1px solid var(--grid); }
.letter-k { font: 800 12px var(--disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.letter-title { font: 800 19px/1.3 var(--disp); color: var(--navy); }
.letter-body { padding: 18px 26px 6px; font-size: 16px; line-height: 1.6; color: var(--text); }
.letter-body p + p { margin-top: 6px; }
.letter-body p.gap { height: 6px; }
.fill { padding: 1px 6px; border-radius: 3px; background: var(--alt-soft); color: var(--alt-text); font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 -1.5px 0 var(--alt); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.letter-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 26px 18px; }
.letter-copy { min-height: 40px; padding: 9px 16px; font-size: 14.5px; }
.letter-copy.copied { border-color: var(--ok); color: var(--ok); }
.letter-st { font-size: 14px; color: var(--text3); }
.letter-st:empty { display: none; }
.letter-tk { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14.5px; color: var(--text2); }
.letter-tk svg { color: var(--text3); flex-shrink: 0; }
.letter-tk b { color: var(--navy); font-family: var(--disp); }
figure.letter + .note { max-width: 760px; }
@media (max-width: 900px) {
  .letter-head, .letter-body, .letter-foot { padding-left: 18px; padding-right: 18px; }
  .letter-body { font-size: 15.5px; }
  .fill { white-space: normal; }
  .letter-tk { margin-left: 0; }
}

/* ---------------------------------------------------------------- key terms: a calm grid of cards */
.kterms { display: grid; gap: 30px 34px; margin-top: 8px; }
.kterms.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.kterms.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kterms.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kterm { display: flex; flex-direction: column; gap: 6px; }
.kterm::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 8px; background: var(--ecc); }
.kterm.k-rb::before { background: var(--rb); }
.kterm.k-neutral::before { background: var(--neutral); }
.kterm.k-alt::before { background: var(--alt); }
.kt-t { font: 800 19px/1.25 var(--disp); letter-spacing: -0.005em; color: var(--navy); }
.kt-s { font-size: 15.5px; line-height: 1.55; color: var(--text2); }
.kt-c { margin-top: auto; padding-top: 4px; font: 700 12.5px var(--disp); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.kt-note { margin: -8px 0 20px; }   /* the tap hint sits under the label, above the cards, so a laptop always shows it */
@media (max-width: 900px) {
  .kterms.c2, .kterms.c3, .kterms.c4 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .kterms.c3, .kterms.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- contract quotes: “exact words” (61.3) */
blockquote.cq { margin-inline: 0; margin-block-end: 24px; max-width: 860px; padding: 6px 0 6px 20px; border-left: 3px solid var(--ecc); }
blockquote.cq.rb { border-left-color: var(--rb); }
blockquote.cq.alt { border-left-color: var(--alt); }
blockquote.cq p { font: 700 21px/1.42 var(--disp); letter-spacing: -0.006em; color: var(--navy); text-wrap: pretty; }
.cq-c { display: inline-block; margin-left: 2px; padding: 2px 9px 3px; border-radius: 999px; background: var(--panel);
  font: 700 12.5px/1.4 var(--disp); letter-spacing: 0.03em; color: var(--text2); vertical-align: 3px; white-space: nowrap; }
blockquote.cq.ecc .cq-c { background: var(--ecc-soft); color: var(--ecc-text); }
blockquote.cq.rb .cq-c { background: var(--rb-soft); color: var(--rb-text); }
blockquote.cq.alt .cq-c { background: var(--alt-soft); color: var(--alt-text); }
.cq-b { opacity: 0.55; }
.panel blockquote.cq { margin: 14px 0; padding-left: 14px; }
.panel blockquote.cq p { font-size: 17px; }
/* inside a sentence */
.iq-w { color: var(--navy); font-weight: 600; }
.iq-c { font: 700 0.8em var(--disp); letter-spacing: 0.02em; color: var(--text3); white-space: nowrap; }
:where(.callout, .keypoint, .d-t, .d-out, .eq-box, b, strong, h3, h4, legend, .rq, .so-text, .kt-t) .iq-w { font-weight: inherit; }
@media (max-width: 900px) { blockquote.cq p { font-size: 18.5px; } blockquote.cq { padding-left: 16px; } }

/* the contract quote in a term's card */
.tp-q { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--ecc); font: 600 14.5px/1.45 var(--body); color: var(--navy); }
.tp-qc { font: 700 11.5px var(--disp); letter-spacing: 0.02em; color: var(--text3); white-space: nowrap; }
.tp-q[hidden] { display: none; }
.term-pop.sheet .tp-q { font-size: 15.5px; }

/* the credit for the short quotes sits with the independence line */
.fine .credit { display: block; margin-top: 4px; }

/* a card with no room above or below its term is capped to the roomier side (--tp-max, core.js placeTerm) and scrolls */
.term-pop:not(.sheet) { max-height: var(--tp-max, none); overflow-y: auto; }
/* while a capped card can still scroll, its foot fades out, so the learner sees there is more (core.js sets .more) */
.term-pop.more, .term-pop .tc-back.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
/* the term card's front face: only the look C card turns over to it, so elsewhere it never shows */
.tc-front { display: none; }

/* ================================================================ look C components (task A5), scoped to html.lc
   Sentence case labels, 20px cards, 16px buttons, fully rounded bars and markers, and bigger type. */
.lc .tag, .lc .ex-sub, .lc .ex-label, .lc .so-count, .lc .rcard .rh, .lc .col-h, .lc .lane-lab, .lc .ncard dt, .lc .split h4,
.lc .tp-c, .lc .tp-el, .lc .qopt .qtag, .lc .letter-k, .lc .kt-c, .lc .d-a, .lc .pill, .lc ol.dates .dn, .lc .stack .sgap,
.lc .so-sum .so-key h4, .lc .tabpanel .ex-sub, .lc .flowhead .tag { text-transform: none; letter-spacing: 0; }
.lc .tag { font: 700 15px/1.3 var(--disp); }
.lc .ex-sub, .lc .tabpanel .ex-sub { margin: 0 0 16px; font: 700 20px/1.3 var(--disp); color: var(--c-navy); }
.lc .ex-label { gap: 12px; padding-bottom: 0; margin-bottom: 24px; border-bottom: 0; font: 600 16px/1.4 var(--body); color: var(--c-muted); }
.lc .ex-label b { font: 700 16px var(--disp); color: var(--c-navy); }
/* a quick check screen says what to do in its kicker and coach line, so its exhibit label goes */
.lc .step[data-check] .ex-label { display: none; }
.lc .exhibit p.body, .lc .split p, .lc .tabpanel p { font-size: 18px; line-height: 1.55; }
:where(.lc .exhibit > * + *) { margin-top: 28px; }

/* charts draw themselves: a bar grows from its start to its value when its screen shows, one bar after another.
   clip-path reveals the bar, so its box and its label are in place at once and nothing around it moves. */
.lc :is(.hseg, .gbar, .wf-bar).grow { grid-template-columns: none; min-height: 0; border-bottom: 0; padding-top: 0; }
.lc .hseg.grow { display: flex; }
.lc .gbar.grow, .lc .wf-bar.grow { display: block; }
.lc .step.on .grow { animation: lc-grow 500ms ease-out backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes lc-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* bar charts: 36px bars with round ends, values after each bar */
.lc .hrow { min-height: 76px; }
.lc .hlab { gap: 2px 8px; padding-right: 20px; }
.lc .hlab b { font: 600 18px/1.3 var(--body); color: var(--c-navy); }
.lc .hlab b.tag-alt { color: var(--alt-text); }
.lc .hlab span { font-size: 15px; color: var(--c-muted); }
.lc .htrack { height: 76px; }
/* segments of a stacked bar meet square, so the bar reads as one with round ends only (core.js marks join-l, join-r) */
.lc .hseg.join-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lc .hseg.join-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.lc .hseg.join-l::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-bg); opacity: 0.9; }
/* a label too long for its segment shows under the bar instead (core.js, .hcap), and the track keeps room for it */
.lc .hseg.lab-out { color: transparent; }
.lc .hcap { position: absolute; z-index: 1; font: 600 14px/18px var(--body); color: var(--c-muted); white-space: nowrap; pointer-events: none; }
.lc .htrack.has-cap { margin-bottom: 14px; }
/* square at the start, where the bar meets its date, and round at its value, so a short bar never reads as a dot */
.lc .hseg { top: 20px; height: 36px; padding-left: 14px; border-radius: 4px 999px 999px 4px; font: 700 16px var(--disp); }
.lc .hval { top: 20px; line-height: 36px; font: 700 20px/36px var(--disp); }
.lc .htick { font-size: 15px; color: var(--c-muted); white-space: nowrap; }
/* values never split: a bar's value, a worked-out value and a big number stay on one line */
.lc :is(.hval, .gval, .wf-v, .calc-out, .kpi strong, .big-date, .evsel-date) { white-space: nowrap; }
.lc .gbar { border-radius: 4px 999px 999px 4px; }
.lc .gval { font: 700 18px var(--disp); }
.lc .wf-bar { border-radius: 4px 999px 999px 4px; }
.lc .wf-lab { font: 600 17px/1.3 var(--body); }
.lc .wf-v { font: 700 17px var(--disp); }
.lc .legend { font-size: 16px; }
.lc .sw { border-radius: 999px; }

/* big numbers, key points, splits and steps as soft cards */
.lc .bigstat { gap: 8px; padding: 28px 32px; border-top: 0; border-radius: 20px; }
.lc .bigstat { container-type: inline-size; }
/* the number takes the card's width: 60 px in a wide card, smaller in a third of the row, so "GBP 8,912,000" fits on
   its one line */
.lc .bigstat strong { font: 800 60px/1 var(--disp); font-size: clamp(26px, 12.5cqi, 60px); letter-spacing: -0.03em; }
@supports not (container-type: inline-size) { .lc .bigstats:not([style*="--n: 1"]) .bigstat strong { font-size: 36px; } }
.lc .bigstat.alt strong { color: var(--alt-text); }
.lc .bigstat.rb strong { color: var(--c-wrong-text); }
.lc .bigstat span { font-size: 20px; line-height: 1.45; color: var(--c-body); }
.lc .keypoint { gap: 14px; align-items: baseline; padding: 20px 24px; margin-top: 16px; border-radius: 20px; background: var(--c-amber-tint);
  font: 700 20px/1.4 var(--disp); color: var(--c-navy); }
.lc .keypoint .sq { width: 10px; height: 10px; margin-top: 0; border-radius: 999px; background: var(--c-amber); align-self: center; }
.lc .split { gap: 20px; }
.lc .split > div { padding: 26px 28px; border-radius: 20px; background: var(--c-soft); }
.lc .split h4 { margin: 0 0 10px; padding: 0; border: 0; font: 700 22px/1.25 var(--disp); color: var(--c-navy); }
.lc .split h4.alt { color: var(--alt-text); }
.lc .split h4.rb { color: var(--c-wrong-text); }
.lc .flowhead { gap: 14px; margin-bottom: 18px; }
.lc .flowhead p { font-size: 18px; color: var(--c-muted); }
.lc .flowhead .tag { flex: 0 0 auto; }
.lc .chevs { gap: 14px; }
.lc .chevs li, .lc .chevs li:first-child { position: relative; clip-path: none; min-height: 132px; padding: 22px 24px; border-radius: 20px; gap: 8px; }
.lc .chevs li + li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2.5px solid var(--c-navy); border-right: 2.5px solid var(--c-navy); transform: rotate(45deg); }
.lc .chevs.ecc li { background: var(--c-soft); }
.lc .chevs b { font: 700 19px/1.3 var(--disp); }
.lc .chevs .t { font: 700 16px var(--disp); color: var(--c-navy); }
.lc .chevs em { font-size: 15px; }
.lc .tile, .lc .wcard, .lc .ncard, .lc .kpi, .lc .out, .lc .eq-box, .lc .callout, .lc .d-box, .lc .d-out, .lc .node, .lc .slayer,
.lc .panel, .lc .done-score, .lc .evcard { border-radius: 20px; }
.lc .panel { padding: 26px 28px; }
.lc .callout { padding: 18px 22px; font-size: 18px; }
.lc .vlist b { font: 700 19px var(--disp); }
.lc .vlist span { font-size: 17px; }

/* the recap: what to do on Monday, with round ticks */
.lc ul.ticks, .lc ul.crosses { gap: 14px; }
.lc ul.ticks li, .lc ul.crosses li { gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.5; }
.lc ul.ticks.big li { font-size: 20px; }
.lc ul.ticks svg, .lc ul.crosses svg { flex: 0 0 28px; width: 28px; height: 28px; margin-top: 0; padding: 6px; border-radius: 999px; }
.lc ul.ticks svg { background: var(--lc-right-tint); color: var(--c-right); }
.lc ul.crosses svg { background: var(--lc-wrong-tint); color: var(--c-wrong); }
.lc .l-tk { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 18px 22px; border-radius: 20px; background: var(--c-soft); font-size: 17px; }
.lc .l-tk svg { flex: 0 0 auto; color: var(--c-navy); }
.lc .l-tk a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lc .l-finish { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.lc .l-next-row { margin: 0 0 24px; }
.lc .l-next { max-width: 100%; text-align: left; white-space: normal; }
/* on a lesson's recap the footer is the next lesson button, so the recap's own button looks like the quiet footer
   button (.lc #next.quiet) and the screen keeps one primary button. A module check's result keeps its own. */
.lc .step[data-part="recap"] .l-next { background: transparent; color: var(--c-navy); border-color: var(--c-line); }
.lc .step[data-part="recap"] .l-next:hover:not([disabled]) { background: var(--c-soft); opacity: 1; }
.lc .l-last { font: 700 20px var(--disp); color: var(--c-navy); }

/* reveal cards */
.lc .rgrid { gap: 16px; }
.lc .rcard { gap: 12px; min-height: 150px; padding: 24px 26px; border-top: 0; border-radius: 20px; background: var(--c-soft); }
.lc .rcard:hover { background: var(--c-line); }
.lc .rcard .rq { font: 700 20px/1.35 var(--disp); }
.lc .rcard .rh { font: 700 16px var(--disp); color: var(--c-navy); }
.lc .rcard .ra { font-size: 18px; }
.lc .rcard[data-open="true"], .lc .rcard[aria-expanded="true"] { background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); }

/* the sorter */
.lc .sorter { border-top: 0; padding-top: 0; }
.lc .so-count { font: 600 16px var(--body); color: var(--c-muted); }
.lc .so-item { min-height: 120px; padding: 28px 32px; margin: 14px 0 16px; border-radius: 20px; }
.lc .so-text { font: 700 24px/1.35 var(--disp); }
.lc .so-groups { gap: 12px; }
.lc .so-g { min-height: 64px; padding: 12px 16px; border: 2px solid var(--c-line); border-radius: 16px; font: 700 18px/1.3 var(--disp);
  transition: border-color 300ms ease-out, background-color 300ms ease-out; }
.lc .so-g:hover:not([disabled]) { background: var(--c-soft); border-color: var(--c-navy); }
.lc .so-g.right { background: var(--lc-right-tint); border-color: var(--c-right); color: var(--c-right-text); }
.lc .so-g.wrong { background: var(--lc-wrong-tint); border-color: var(--c-wrong); color: var(--c-wrong-text); }
.lc .so-fb { min-height: 96px; margin-top: 16px; }
.lc .so-fb:not(:empty) { padding: 18px 22px; border-radius: 20px; background: var(--c-soft); }
.lc .so-sum { padding: 28px 32px; border-radius: 20px; }
.lc .so-sum strong { font-size: 44px; }
.lc .qdots { gap: 6px; }
.lc .qdots i { width: 10px; height: 10px; border-radius: 999px; }
.lc .fb-verdict { font: 700 20px var(--disp); }
.lc .fb-verdict.ok { color: var(--c-right-text); } .lc .fb-verdict.no { color: var(--c-wrong-text); }
.lc .fb-text, .lc .fb-why { font-size: 17px; line-height: 1.55; }
.lc .fb-lead { min-width: 24px; height: 24px; border-radius: 999px; font: 700 13px var(--disp); }
.lc .fb-src { font-size: 15px; }

/* quick checks and the module check: big option cards with a letter badge */
.lc .qchecks { gap: 44px; max-width: 820px; }
.lc fieldset.qc legend, .lc fieldset.qz legend { gap: 14px; margin-bottom: 16px; font: 700 24px/1.3 var(--disp); color: var(--c-navy); }
.lc .qc-n { width: 32px; height: 32px; border-radius: 999px; font: 700 15px var(--disp); }
.lc .qopts { display: flex; flex-direction: column; gap: 10px; border-top: 0; }
.lc .qopt, .lc .qc .qopt { gap: 14px; min-height: 64px; padding: 12px 18px 12px 14px; border: 2px solid var(--c-line); border-radius: 20px; background: var(--c-bg);
  font-size: 18px; line-height: 1.4; transition: border-color 300ms ease-out, background-color 300ms ease-out; }
.lc .qopt:hover:not([disabled]):not(.locked) { background: var(--c-soft); border-color: var(--c-navy); }
.lc .qopt .radio { display: none; }
.lc .qopt .ql { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 999px;
  background: var(--c-soft); color: var(--c-muted); font: 700 16px/1 var(--disp); }
.lc .qopt .qtag { font: 700 14px var(--body); white-space: nowrap; }
.lc .qopt.right { background: var(--lc-right-tint); border-color: var(--c-right); }
.lc .qopt.right .ql { background: var(--c-right); color: #FFFFFF; }
.lc .qopt.right .qtag { color: var(--c-right-text); }
.lc .qopt.wrong { background: var(--lc-wrong-tint); border-color: var(--c-wrong); }
.lc .qopt.wrong .ql { background: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c-wrong); color: var(--c-wrong-text); }
.lc .qopt.wrong .qtag { color: var(--c-wrong-text); }
.lc[data-theme="dark"] .qopt.right .ql { color: var(--c-bg); }
.lc .qc-fb { margin-top: 14px; padding: 18px 22px 20px; border-left: 0; border-radius: 20px; }
.lc .qc-score { margin-top: 32px; padding-top: 16px; font: 700 18px var(--disp); }
.lc .layout:not(.full) > .panel { padding: 24px 28px 28px; }
.lc #qz-fb h3 { font: 700 20px var(--disp); color: var(--c-navy); }
.lc .score-l { font-size: 15px; margin-top: 20px; }
.lc .score { font: 800 32px var(--disp); }
.lc .done-score { gap: 16px 24px; padding: 28px 32px; }
.lc .done-score strong { font: 800 44px var(--disp); }
.lc .ck-prior { margin: 0 0 28px; padding: 18px 22px; border-radius: 20px; background: var(--c-amber-tint); font: 600 18px/1.45 var(--body); color: var(--c-navy); }
.lc .ck-prior[hidden] { display: none; }

/* terms: a dotted navy underline, an amber tint while open, and a card that turns over to the meaning */
.lc .term { text-decoration-color: var(--c-navy); text-decoration-thickness: 2px; text-underline-offset: 0.24em; border-radius: 6px; }
.lc .term[aria-expanded="true"] { background: var(--c-amber-tint); box-shadow: 0 0 0 3px var(--c-amber-tint); }
.lc .term-pop { width: min(380px, calc(100vw - 24px)); padding: 0; border: 0; background: transparent; box-shadow: none; perspective: 1000px; }
.lc .term-pop:not(.sheet) { max-height: none; overflow: visible; }
.lc .term-pop:not(.sheet) .tc-back { max-height: var(--tp-max, none); overflow-y: auto; overscroll-behavior: contain; }
.lc .term-pop .tc-in { position: relative; transform-style: preserve-3d; }
.lc .term-pop .tc-back, .lc .term-pop .tc-front { border-radius: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lc .term-pop .tc-back { padding: 22px 24px 24px; border: 1px solid var(--c-line); background: var(--c-bg); box-shadow: var(--lc-pop); }
.lc .term-pop.flip .tc-front { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px;
  background: var(--c-navy); color: var(--c-on-navy); transform: rotateY(180deg); }
.lc .tc-k { font: 600 15px var(--body); opacity: 0.8; }
.lc .tc-t { font: 700 26px/1.2 var(--disp); letter-spacing: -0.01em; }
.lc .term-pop.flip .tc-in { animation: lc-turn 600ms ease-out both; }
@keyframes lc-turn { from { transform: rotateY(-180deg); } to { transform: none; } }
.lc .term-pop.open { animation: none; }
.lc .term-pop.open.sheet { animation: tp-up 300ms ease-out; }
.lc .tp-t { font: 700 24px/1.25 var(--disp); letter-spacing: -0.01em; }
.lc .tp-x { border-radius: 12px; width: 40px; height: 40px; margin: -8px -10px 0 0; }
.lc .tp-c { margin-top: 4px; font: 600 15px var(--body); }
.lc .tp-s { margin-top: 10px; font-size: 18px; line-height: 1.5; }
.lc .tp-q { margin-top: 14px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--c-line); font: 400 16px/1.5 var(--body); color: var(--c-navy); }
.lc .tp-qc { font: 600 14px var(--body); }
.lc .tp-e { font-size: 16px; }
.lc .tp-el { font: 700 14px var(--body); }
.lc .term-pop.sheet { width: auto; padding: 0; border-radius: 24px 24px 0 0; background: var(--c-bg); box-shadow: 0 -16px 40px rgba(10, 34, 64, 0.2); border-top: 0; }
.lc .term-pop.sheet .tc-back { padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px)); border: 0; box-shadow: none; border-radius: 24px 24px 0 0; }
.lc[data-theme="dark"] .term-pop.sheet { box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6); }

/* the slot after the stack, where site/src/js/ask.js puts the Ask box on a teaching screen, the line that points back
   from a try screen, or a visitor's offer of a free account. ask.js styles what it puts there */
.lc .ask-slot:empty { display: none; }
.lc .ask-slot { margin-top: 28px; }

@media (max-width: 900px) {
  .lc .chevs li + li::before { left: 50%; top: -12px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .lc .chevs li, .lc .chevs li:first-child { min-height: 0; }
  .lc .hrow { min-height: 0; }
  .lc .htrack { height: 60px; }
  .lc .hseg, .lc .hval { top: 12px; }
}
@media (max-width: 720px) {
  .lc .bigstat { padding: 22px 22px; }
  .lc .bigstat span, .lc .keypoint { font-size: 18px; }
  .lc .keypoint { padding: 16px 18px; }
  .lc .split > div, .lc .rcard, .lc .so-item, .lc .so-sum, .lc .panel { padding: 20px 20px; }
  .lc .so-text { font-size: 20px; }
  .lc fieldset.qc legend, .lc fieldset.qz legend { font-size: 20px; }
  .lc .qopt, .lc .qc .qopt { font-size: 17px; padding: 10px 14px 10px 10px; }
  .lc .qc .qopt .qtag { display: inline; }
  .lc .hseg { height: 30px; padding-left: 12px; font-size: 15px; }
  .lc .hval { line-height: 30px; font-size: 17px; }
  .lc .l-tk { padding: 16px 18px; font-size: 16px; }
}
/* the strategy builder's one decision at a time row (planner.js, task K3): Previous as a quiet arrow, where the learner
   is in the middle, and Next as the screen's main button, like the player's own footer */
.lc .pl-one-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 20px 0 0; }
.lc .pl-one-nav .pl-one-at { flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font: 600 15px/1.3 var(--body); color: var(--c-muted); }
.lc .pl-one-nav .btn { min-height: 52px; white-space: nowrap; }
.lc .pl-one-nav .pl-one-at { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc .pl-one-nav .btn::before, .lc .pl-one-nav .btn::after { flex: 0 0 auto; width: 9px; height: 9px; border-bottom: 2.5px solid currentColor; }
.lc .pl-one-prev { padding: 0 14px; border-color: transparent; background: transparent; }
.lc .pl-one-prev::before { content: ""; margin-right: 2px; border-left: 2.5px solid currentColor; transform: rotate(45deg); }
.lc .pl-one-prev[disabled] { visibility: hidden; }
.lc .pl-one-next { padding: 0 24px 0 28px; }
.lc .pl-one-next::after { content: ""; margin-left: 2px; border-right: 2.5px solid currentColor; transform: rotate(-45deg); }
.lc .pl-one-next[disabled] { opacity: 0.45; }
@media (max-width: 720px) {
  .lc .pl-one-prev { flex: 0 0 52px; width: 52px; padding: 0; font-size: 0; background: var(--c-soft); }
  .lc .pl-one-prev[disabled] { display: none; }
  .lc .pl-one-prev::before { margin: 0 0 0 4px; }
  /* the count on its own line, then the arrow and Next side by side */
  .lc .pl-one-nav { flex-wrap: wrap; gap: 8px 10px; }
  .lc .pl-one-nav .pl-one-at { flex: 1 1 100%; order: -1; text-align: left; font-size: 14px; }
  .lc .pl-one-next { flex: 1 1 auto; justify-content: center; }
}

/* a list of dates: each date stays on one line ("Sun 20 Sep 2026"), and its column takes the room the date needs */
.lc ol.dates li { grid-template-columns: minmax(150px, 190px) max-content minmax(0, 1fr); column-gap: 24px; }
.lc ol.dates .dn { font: 600 15px/1.35 var(--body); color: var(--c-muted); }
.lc ol.dates strong { font: 700 19px var(--disp); white-space: nowrap; }
.lc ol.dates span:last-child { font-size: 16px; }
@media (max-width: 900px) { .lc ol.dates li { grid-template-columns: minmax(0, 1fr); } }

/* calculators and switches: the fields and the segmented switch in look C shapes */
.lc .field label, .lc .seg-l { font: 600 16px/1.3 var(--body); color: var(--c-body); }
.lc input[type="date"], .lc input[type="number"], .lc select.inp { height: 48px; padding: 0 14px; border: 2px solid var(--c-field-edge); border-radius: 12px;
  background: var(--c-bg); font: 700 17px var(--disp); color: var(--c-navy); }
.lc input[type="date"]:hover, .lc input[type="number"]:hover, .lc select.inp:hover { border-color: var(--c-navy); }
.lc input[type="range"] { accent-color: var(--c-navy); }
.lc .range-row output { font: 700 22px var(--disp); }
/* a switch wraps onto a second row on a narrow screen rather than split a label like "Mon 29 June" */
.lc .seg-ctl { flex-wrap: wrap; max-width: 100%; gap: 4px; padding: 4px; border: 0; border-radius: 16px; background: var(--c-soft); }
.lc .seg-ctl button { flex: 1 1 auto; }
.lc .seg-ctl button { min-height: 44px; padding: 10px 18px; border-radius: 12px; background: transparent; color: var(--c-muted); font: 700 16px var(--disp);
  transition: background-color 300ms ease-out, color 300ms ease-out; }
.lc .seg-ctl button + button { border-left: 0; }
.lc .seg-ctl button[aria-pressed="true"] { background: var(--c-navy); color: var(--c-on-navy); }
/* the kit's older motion, made calm on look C pages: 300 ms or more, ease-out */
.lc .term { transition: background-color 300ms ease-out, text-decoration-color 300ms ease-out; }
.lc .gbar { transition: width 400ms ease-out; }
.lc .gval { transition: left 400ms ease-out; }
.lc .ladder tr > * { transition: opacity 300ms ease-out, background-color 300ms ease-out; }
.lc .ladder tbody tr:not([hidden]) { animation: lad-in 300ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .lc .grow, .lc .step.on .grow { animation: none; }
  .lc .term-pop.open.sheet, .lc .ladder tbody tr:not([hidden]) { animation: none; }
  .lc .term, .lc .gbar, .lc .gval, .lc .ladder tr > *, .lc .seg-ctl button { transition: none; }
  .lc .term-pop.flip .tc-in { animation: none; }
  .lc .so-g, .lc .qopt { transition: none; }
}

/* the clock, clock() in lessonkit.py (5 November 2026): a time limit as a dial. When its screen shows, the arc sweeps
   round and the count runs up to the last day in 700 ms, then it rests: the base styles below are that rest and the
   still picture reduced motion shows. Run the clock (.go) plays the story in 8 s: the start for 0.6 s, the whole limit
   in 5.8 s with a mark lighting for each week, a hold on the last day, then with .late one day over in red.
   --ck-day is a registered integer, so the count in the middle steps through whole days with the hand. */
@property --ck-day { syntax: '<integer>'; inherits: true; initial-value: 0; }
.ck { --ck-day: var(--ck-days); display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 24px 48px; align-items: center; max-width: 920px; }
.ck-dial { position: relative; container-type: inline-size; }
.ck-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.ck-mid { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 7%; pointer-events: none; }
.ck-k { font: 700 13px/1 var(--disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.ck-num { margin-top: 6px; font: 800 clamp(40px, 18cqw, 72px)/1 var(--disp); letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; counter-reset: ckday var(--ck-day); }
.ck-num::after { content: counter(ckday); }
.ck-track { fill: none; stroke: var(--grid); stroke-width: 16; }
.ck-arc { fill: none; stroke: var(--ecc); stroke-width: 16; stroke-dasharray: var(--ck-days) var(--ck-days); stroke-dashoffset: 0; }
.ck-over { fill: none; stroke: var(--rb); stroke-width: 16; stroke-dasharray: 1 calc(var(--ck-days) - 1); opacity: 0; }
.ck-tick { stroke: var(--ecc); stroke-width: 3; stroke-linecap: round; }
.ck-wk { font: 700 15px var(--disp); fill: var(--text2); text-anchor: middle; dominant-baseline: central; }
.ck-start { font: 800 16px var(--disp); fill: var(--navy); text-anchor: middle; }
.ck-st { font: 700 18px var(--disp); fill: var(--ecc-text); text-anchor: middle; opacity: 0; }
.ck-st2 { opacity: 1; }
.ck-st3 { fill: var(--rb-text); }
.ck-hand { transform-box: view-box; transform-origin: 220px 220px; }
.ck-hand line { stroke: var(--navy); stroke-width: 4; stroke-linecap: round; }
.ck-hand circle { fill: var(--ground); stroke: var(--navy); stroke-width: 4; }
.ck-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ck-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 18px; border-radius: 14px; background-color: transparent; }
.ck-p b { font: 800 19px/1.25 var(--disp); color: var(--navy); }
.ck-p .t { grid-column: 1; font: 400 16px/1.4 var(--body); color: var(--text2); }
.ck-p em { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--ecc-soft); font: 700 13px var(--disp); font-style: normal; color: var(--ecc-text); white-space: nowrap; }
.ck-p3 b { color: var(--rb-text); }
.ck-play { margin: 12px 0 0 14px; }
.ck-play svg { transition: transform 300ms ease-out; }
.ck-play:hover svg { transform: scale(1.12); }

.lc .step.on .ck:not(.go) { animation: ck-day-in 700ms cubic-bezier(.3, .6, .3, 1) both; }
.lc .step.on .ck:not(.go) .ck-arc { animation: ck-arc-in 700ms cubic-bezier(.3, .6, .3, 1) both; }
@keyframes ck-day-in { from { --ck-day: 0; } to { --ck-day: var(--ck-days); } }
@keyframes ck-arc-in { from { stroke-dashoffset: var(--ck-days); } to { stroke-dashoffset: 0; } }
.lc .step.on .ck.go { animation: ck-day 8s linear both; }
.lc .step.on .ck.go.late { animation-name: ck-day-late; }
.lc .step.on .ck.go .ck-hand { animation: ck-hand 8s linear both; }
.lc .step.on .ck.go.late .ck-hand { animation-name: ck-hand-late; }
.lc .step.on .ck.go.late .ck-hand line { animation: ck-red-line 8s linear both; }
.lc .step.on .ck.go.late .ck-hand circle { animation: ck-red-dot 8s linear both; }
.lc .step.on .ck.go.late .ck-num { animation: ck-red-num 8s linear both; }
.lc .step.on .ck.go .ck-arc { animation: ck-arc 8s linear both; }
.lc .step.on .ck.go .ck-over { animation: ck-over 8s linear both; }
.lc .step.on .ck.go .ck-tick { animation: ck-tick 240ms ease-out both; animation-delay: calc(0.6s + var(--k) * 5.8s / var(--ck-weeks)); }
.lc .step.on .ck.go .ck-wk { animation: ck-wk 240ms ease-out both; animation-delay: calc(0.6s + (var(--k) - 1) * 5.8s / var(--ck-weeks)); }
.lc .step.on .ck.go .ck-st1 { animation: ck-st1 8s linear both; }
.lc .step.on .ck.go .ck-st2 { animation: ck-st2-stay 8s linear both; }
.lc .step.on .ck.go.late .ck-st2 { animation-name: ck-st2; }
.lc .step.on .ck.go .ck-st3 { animation: ck-st3 8s linear both; }
.lc .step.on .ck.go .ck-p1 { animation: ck-p1 8s linear both; }
.lc .step.on .ck.go .ck-p2 { animation: ck-p2-stay 8s linear both; }
.lc .step.on .ck.go.late .ck-p2 { animation-name: ck-p2; }
.lc .step.on .ck.go .ck-p3 { animation: ck-p3 8s linear both; }
@keyframes ck-day { 0%, 7.5% { --ck-day: 0; } 80%, 100% { --ck-day: var(--ck-days); } }
@keyframes ck-day-late { 0%, 7.5% { --ck-day: 0; } 80%, 87.5% { --ck-day: var(--ck-days); } 91.25%, 100% { --ck-day: var(--ck-days1); } }
@keyframes ck-hand { 0%, 7.5% { transform: rotate(0deg); } 80%, 100% { transform: rotate(360deg); } }
@keyframes ck-hand-late { 0%, 7.5% { transform: rotate(0deg); } 80%, 87.5% { transform: rotate(360deg); } 91.25%, 100% { transform: rotate(calc(360deg + 360deg / var(--ck-days))); } }
@keyframes ck-red-line { 0%, 87.5% { stroke: var(--navy); } 88.5%, 100% { stroke: var(--rb); } }
@keyframes ck-red-dot { 0%, 87.5% { stroke: var(--navy); } 88.5%, 100% { stroke: var(--rb); } }
@keyframes ck-red-num { 0%, 87.5% { color: var(--navy); } 88.5%, 100% { color: var(--rb-text); } }
@keyframes ck-arc { 0%, 7.5% { stroke-dashoffset: var(--ck-days); } 80%, 100% { stroke-dashoffset: 0; } }
@keyframes ck-over { 0%, 88% { opacity: 0; } 91.25%, 100% { opacity: 1; } }
@keyframes ck-tick { from { stroke: var(--base); } to { stroke: var(--ecc); } }
@keyframes ck-wk { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes ck-st1 { 0%, 7% { opacity: 1; } 8.5%, 100% { opacity: 0; } }
@keyframes ck-st2 { 0%, 7% { opacity: 0; } 8.5%, 86.5% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes ck-st2-stay { 0%, 7% { opacity: 0; } 8.5%, 100% { opacity: 1; } }
@keyframes ck-st3 { 0%, 86.5% { opacity: 0; } 88%, 100% { opacity: 1; } }
@keyframes ck-p1 { 0%, 7% { background-color: var(--ecc-soft); } 8.5%, 100% { background-color: transparent; } }
@keyframes ck-p2 { 0%, 7% { background-color: transparent; } 8.5%, 86.5% { background-color: var(--ecc-soft); } 88%, 100% { background-color: transparent; } }
@keyframes ck-p2-stay { 0%, 7% { background-color: transparent; } 8.5%, 100% { background-color: var(--ecc-soft); } }
@keyframes ck-p3 { 0%, 86.5% { background-color: transparent; } 88%, 100% { background-color: var(--rb-soft); } }
@media (max-width: 760px) {
  .ck { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ck-dial { width: 100%; max-width: 300px; margin: 0 auto; }
}
/* reduced motion: nothing moves. Run the clock shows where the story ends at once: one day over, in red. */
@media (prefers-reduced-motion: reduce) {
  .lc .ck, .lc .ck * { animation: none !important; }
  .ck.go.late { --ck-day: var(--ck-days1); }
  .ck.go.late .ck-num { color: var(--rb-text); }
  .ck.go.late .ck-over { opacity: 1; }
  .ck.go.late .ck-hand { transform: rotate(calc(360deg + 360deg / var(--ck-days))); }
  .ck.go.late .ck-hand line { stroke: var(--rb); }
  .ck.go.late .ck-hand circle { stroke: var(--rb); }
  .ck.go.late .ck-st2 { opacity: 0; }
  .ck.go.late .ck-st3 { opacity: 1; }
  .ck.go.late .ck-p3 { background-color: var(--rb-soft); }
}

/* Libre Franklin (6 November 2026) has uneven digits and no tabular figures, so numbers that must line up or hold
   still while they count use Source Sans 3, whose digits are all one width. */
.bigstat strong, .range-row output, .wf-v, .ck-num { font-family: var(--body); }