/* Olly Academy shell.
   Styled to OT_Styleguide_1.0.pdf: Livvic, primary orange #F78F28. The simulator
   canvas inside this shell is a different world (ADR-009) -- nothing here reaches
   into it and it never emits DOM. */

/* Two families on purpose.

   'Livvic' is the SHELL face, the same webfont set the usage dashboard uses, across
   the weight range a normal website wants.

   'LivvicOT' is the SIMULATOR face: exactly the two .ttf files the product bundles
   in resources/ and draws with, byte-identical copies, mapped onto ot_text.py's
   thickness ladder (<=1 Light, >=2 Black). Keeping it separate means the canvas can
   never pick up a shell weight the product does not have, and the shell can never be
   forced down to two weights. `block` not `swap`: a fallback face measures
   differently, and every centred string on the canvas would land in the wrong place
   for the first few frames. */
@font-face { font-family: 'Livvic'; src: url('../vendor/livvic/livvic-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Livvic'; src: url('../vendor/livvic/livvic-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Livvic'; src: url('../vendor/livvic/livvic-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Livvic'; src: url('../vendor/livvic/livvic-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Livvic'; src: url('../vendor/livvic/livvic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'LivvicOT'; src: url('../vendor/livvic/Livvic-Light.ttf') format('truetype'); font-weight: 300; font-display: block; }
@font-face { font-family: 'LivvicOT'; src: url('../vendor/livvic/Livvic-Black.ttf') format('truetype'); font-weight: 900; font-display: block; }

:root {
  --orange: #F78F28;
  --orange-dark: #D9761A;
  --ink: #16181C;
  --body: #3C4149;
  --muted: #6C7480;
  --line: #E3E6EA;
  --bg: #F7F8FA;
  --panel: #FFFFFF;
  --ok: #1E9E5A;
  --warn: #C9820B;
  --bad: #C8382F;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  /* The overhaul's tokens (docs/overhaul/mockups/list.css). Words in orange use --link,
     a shade of the brand orange dark enough for text (#D9761A is 3.2:1 on white, this
     is 5.3:1); orange buttons carry --btn-ink words (7.5:1; white was 2.4:1). */
  --link: #A85508;
  --focus: #A85508;
  --ring: #B4BAC3;            /* an empty tick: a placeholder, the green tick carries the state */
  --tick-glyph: #FFFFFF;
  --ok-text: #147A43;         /* green words: --ok is 3.5:1 on white, fine for a disc, not for text */
  --tag-bg: rgba(247, 143, 40, .14);
  --water: #CFE2EF;
  --alert-bg: #FFF6E8;
  --alert-line: #E8B66A;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --menu-shadow: 0 16px 40px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);
  --btn-ink: #16181C;         /* text on an orange button, the same in both schemes */
  --col: 880px;               /* the one column of the lesson list */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F4F7; --body: #C7CDD6; --muted: #8B94A1;
    --line: #2A2F37; --bg: #14161A; --panel: #1B1E24;
    --ok: #3FBE79; --warn: #E0A53A; --bad: #E4685E;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
    --link: #F78F28;
    --focus: #F78F28;
    --ring: #4A515C;
    /* A white tick on the dark scheme's lighter green is 2.4:1, so the glyph takes the
       panel colour there. */
    --tick-glyph: var(--panel);
    --ok-text: var(--ok);
    --tag-bg: rgba(247, 143, 40, .16);
    --water: #2B4A63;
    --alert-bg: #2A2318;
    --alert-line: #8A6420;
    --card-shadow: none;
    --menu-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Livvic', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--body);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; font-weight: 600; line-height: 1.25; }
h1 { font-size: 28px; } h2 { font-size: 21px; } h3 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: var(--link); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em;
  background: rgba(127,127,127,.13); padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------------- chrome */
main { max-width: 1180px; margin: 0 auto; padding: 26px 22px 80px; }
main.wide { max-width: 1600px; }
/* The new pages lay themselves out (.ac-main, .ac-pick, .ac-about, .ls-page). */
main.plain, main.frame { max-width: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- pieces */
.panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.panel + .panel { margin-top: 18px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tight { margin: 0; }

/* The bare button rules sit inside :where(), which gives them no specificity at all.
   Clerk's components (auth/clerk.js) are ordinary buttons in this same document, each
   styled by one class, and a plain button:hover outranks one class: every Clerk
   button with no hover fill of its own - the Profile and Security tabs of the account
   window, the rows of the account menu - went solid orange under the pointer, its
   orange text with it. At zero specificity anything with a class of its own wins. */
:where(button), .btn {
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  padding: 9px 17px; border-radius: 8px; border: 1px solid var(--orange);
  background: var(--orange); color: var(--btn-ink); text-decoration: none; display: inline-block;
}
:where(button:hover), .btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
button.ghost, .btn.ghost { background: transparent; color: var(--body); border-color: var(--line); }
button.ghost:hover { background: rgba(127,127,127,.10); }
:where(button:disabled) { opacity: .45; cursor: not-allowed; }
button.small, .btn.small { padding: 5px 11px; font-size: 13px; }

label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
input[type=checkbox], input[type=radio] { width: auto; }
input, select {
  font: inherit; width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.pill.ok { background: rgba(30,158,90,.14); color: var(--ok); }
.pill.warn { background: rgba(201,130,11,.16); color: var(--warn); }
.pill.bad { background: rgba(200,56,47,.14); color: var(--bad); }
.pill.idle { background: rgba(127,127,127,.16); color: var(--muted); }

.banner { border-radius: var(--radius); padding: 12px 16px; font-size: 13.5px;
  border: 1px solid; margin-bottom: 18px; }
.banner.warn { background: rgba(201,130,11,.10); border-color: rgba(201,130,11,.35); color: var(--warn); }
.banner.bad { background: rgba(200,56,47,.10); border-color: rgba(200,56,47,.35); color: var(--bad); }
.banner.ok { background: rgba(30,158,90,.10); border-color: rgba(30,158,90,.32); color: var(--ok); }

.bar { height: 8px; border-radius: 999px; background: rgba(127,127,127,.18); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--orange); border-radius: 999px;
  transition: width .35s ease; }

/* ------------------------------------------------------------- simulator */
.simstage { background: #000; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
canvas.sim { display: block; width: 100%; height: auto; background: #fff; outline: none; }
/* The canvas is tabIndex=0 and takes every key the product does, so reaching it by
   keyboard has to be visible: outline:none above kills the ring for a mouse click,
   :focus-visible puts it back for the keyboard. The offset is INSET because
   .simstage clips (overflow:hidden) anything drawn outside the canvas box. */
canvas.sim:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
/* The poolside rig: the starter, the swimmers and the equipment, outside the canvas
   and visibly not part of the product (dashed orange). As a strip under the screen on
   the practice pages; as a block in the lesson rail with only the actions that lesson
   needs. */
.rig { background: var(--panel); border: 1px dashed var(--orange); border-radius: var(--radius); }
.rlabel { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--link); }

/* The deck's line under the screen: newest first, the rest behind a toggle. */
.deckstrip { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); }
.deckstrip .dlabel { flex: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); padding-top: 3px; }
.deckstrip .dlines { flex: 1; min-width: 0; }
.deckstrip .dlines p { margin: 2px 0; }
.deckstrip:not(.open) .dlines p:not(:first-child) { display: none; }
.deckstrip .dmore { flex: none; }

/* What sits over the software without being drawn by it (views/train.js). The layer
   itself takes no clicks, so the canvas under it still gets them. */
.stageover { position: absolute; inset: 0; pointer-events: none; }
.stageover > * { pointer-events: auto; }
/* The file window a parse card opens. In the product it is a Windows one; here it is
   drawn over the software, with the rest of the screen dimmed behind it. */
.fileback { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.45); }
.filewin { width: min(440px, 92%); background: var(--panel); color: var(--body);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.fw-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.fw-list { list-style: none; margin: 0; padding: 10px; min-height: 96px; }
.fw-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
button.fw-file { background: transparent; color: var(--ink); border: 1px solid transparent;
  font-weight: 600; padding: 7px 10px; text-align: left; }
button.fw-file::before { content: 'PDF'; display: inline-block; margin-right: 9px; padding: 1px 5px;
  border-radius: 3px; background: var(--bad); color: var(--panel); font-size: 10px;
  font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
button.fw-file:hover { background: rgba(127,127,127,.12); border-color: transparent; }
button.fw-file[aria-pressed="true"] { background: rgba(247,143,40,.16); border-color: var(--orange); }
.fw-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--line); }
.fw-foot .fw-own { margin-right: auto; }
/* A practice aid on a screen of the software: dashed orange, like the Poolside rig,
   because the real software has no such control. */
.stageaid { position: absolute; padding: 8px 10px 10px; background: var(--panel);
  border: 1px dashed var(--orange); border-radius: var(--radius); }
.stageaid button { display: block; width: 100%; margin-top: 6px; white-space: normal; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast > div { background: var(--ink); color: var(--bg); padding: 10px 15px;
  border-radius: 9px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow);
  animation: pop .25s ease; max-width: 340px; }
.toast > div.ok { background: var(--ok); color: var(--panel); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.center-card { max-width: 420px; margin: 8vh auto 0; }

/* The deck log under the training rig: what the pool deck says back (which heat is
   up, how a scored review compared with the touchpad). */
.decklog p { margin: 4px 0; }
.decklog .ok { color: var(--ok); }
.decklog .warn { color: var(--warn); }

.decklog .situation { color: var(--ink); font-weight: 600; border-left: 3px solid var(--orange); padding-left: 8px; }

/* The operating guide browser: contents beside the section you are reading. */
.guidewrap { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .guidewrap { grid-template-columns: 300px 1fr; align-items: start; } }
.gcontents { position: sticky; top: 14px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; padding: 12px; }
.glist { overflow-y: auto; margin-top: 10px; }
.gchapter { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 4px; }
.gchapter:first-child { margin-top: 0; }
.gitem { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px;
  border-radius: 7px; text-decoration: none; color: var(--body); font-size: 13.5px; }
.gitem:hover { background: var(--bg); }
.gitem.on { background: var(--bg); color: var(--ink); box-shadow: inset 2px 0 0 var(--orange); }
.gnum { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); flex: none; min-width: 42px; }
.gtitle { flex: 1; }

/* Olly Pad Check running beside the race. */
.pclive { border-left: 4px solid var(--blue, #3C7DD9); }

/* The product's heat-lock banner: Pad Check holding the Quantum feed on a finished heat
   because the next race has started. Amber (--warn), not red: the hold is deliberate,
   not a fault, but it has to be loud or it reads as a dead app. The text is the amber
   pulled towards --ink so it stays readable on the pale amber in both schemes. */
.pclock {
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 13%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  color: color-mix(in srgb, var(--warn) 70%, var(--ink));
  font-weight: 700; font-size: 14px;
}
.pclock .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--warn);
  animation: pulse-warn 1.8s ease-out infinite;
}
.pclock .sub { font-weight: 500; color: var(--body); font-size: 13px; }
/* Clear is the only release, so point at it while the feed is held. */
button.small.urge {
  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
  border-color: var(--warn); color: color-mix(in srgb, var(--warn) 70%, var(--ink));
  animation: pulse-warn 1.8s ease-out infinite;
}
@keyframes pulse-warn {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Borderline pad: the line passed (0.30s or less) but only just (over 0.20s). A yellow
   dot LEFT of the Quantum time so the digits keep their right edge. A paler lemon than
   --warn on purpose, as in the product, because amber already means a held feed. On the
   light panel a pale yellow vanishes, so it carries a darker rim there. */
.bdot {
  --flag: #F2C400; --flag-rim: #9C7E00;
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--flag); box-shadow: 0 0 0 1px var(--flag-rim);
  margin-right: 8px; vertical-align: middle; position: relative; top: -1px;
}
@media (prefers-color-scheme: dark) {
  .bdot { --flag: #FFE14D; --flag-rim: rgba(255,225,77,.28); box-shadow: 0 0 0 3px var(--flag-rim); }
}
.pcslip pre { font-size: 12px; line-height: 1.35; max-height: 260px; overflow: auto; margin: 8px 0;
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.pcslip summary { cursor: pointer; }

/* Sign-in masthead: the full Olly Timing wordmark (vendor/OT_Logo_Colour.png, the
   usage dashboard's copy of the style guide logo), then the Academy's name. */
.masthead { text-align: center; margin-bottom: 22px; }
.masthead img.wordmark { width: 236px; max-width: 80%; height: auto; margin-bottom: 14px; }
.masthead h1 { font-size: 32px; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.masthead .tagline { font-style: italic; color: var(--muted); font-size: 17px; margin: 6px 0 0; }
.center-card.auth { max-width: 440px; }
/* The way in without an account sits beside the way in with one. */
.authrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.authrow button { flex: 1 1 auto; white-space: nowrap; }
.clerkbox { display: flex; justify-content: center; }
.clerk-user { display: flex; align-items: center; min-height: 32px; }

/* A modal question: the page darkens, one panel asks, two buttons answer. */
.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55);
  display: grid; place-items: center; padding: 20px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 22px 24px; width: 100%; max-width: 440px; }
.modal p { color: var(--body); margin: 10px 0 0; }
.modal-actions { justify-content: flex-end; margin-top: 18px; }

/* ===================================================================== the overhaul
   The pages of docs/overhaul/03_SCREENS.md, built from the mockups' styles
   (docs/overhaul/mockups/list.css and lesson.css; the mk- switcher is the mockups' own
   and is not built). ac- is the header, the product question, the lesson list and
   About; ls- the lesson page's frame and the practice software page; pc- the practice
   software card's confirm; lp- the laptop message. Contrast: lesson_list.md section 15. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ the header */
.ac-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  gap: 14px; min-height: 58px; padding: 10px 22px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
.ac-brand { display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; white-space: nowrap; border-radius: 8px; }
.ac-brand img { width: 26px; height: auto; display: block; }
.ac-product { display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 3px 6px 3px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; white-space: nowrap; }
.ac-product b { font-weight: 700; color: var(--ink); }
.ac-switch { padding: 3px 7px; border-radius: 999px; font-weight: 600; color: var(--link);
  text-decoration: underline; text-underline-offset: 3px; }
.ac-switch:hover { background: rgba(127, 127, 127, .12); }
.ac-spacer { flex: 1 1 auto; min-width: 0; }
.ac-navlink { flex: none; padding: 7px 11px; border-radius: 8px; font-size: 14px;
  font-weight: 600; color: var(--body); text-decoration: none; white-space: nowrap; }
.ac-navlink:hover { background: rgba(127, 127, 127, .12); color: var(--ink); }
.ac-account { position: relative; flex: none; }
/* Clerk's user button: the learner's picture, or their initials. */
.ac-avatar { display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: #E8E1D8; color: #3C3127;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.ac-avatar:hover { background: #E8E1D8; border-color: var(--orange); }
@media (prefers-color-scheme: dark) {
  .ac-avatar, .ac-avatar:hover { background: #3A332C; color: #F2E8DD; }
}
.ac-avatar[aria-expanded="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }

.ac-top a:focus-visible, .ac-top button:focus-visible,
.ac-main a:focus-visible, .ac-main button:focus-visible,
.ac-pick a:focus-visible, .ac-about a:focus-visible, .ac-about button:focus-visible, .ac-menu button:focus-visible,
.modal button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }

/* The account menu: Clerk's popover, themed by clerk.js appearance(), with one row the
   Academy adds (Start again). */
.ac-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: 300px; max-width: calc(100vw - 32px); padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--menu-shadow); }
.ac-menu-who { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px;
  margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.ac-menu-who .ac-avatar { width: 40px; height: 40px; cursor: default; }
.ac-menu-name { display: block; font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; }
.ac-menu-mail { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.ac-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit;
  font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.ac-menu-item:hover { background: rgba(127, 127, 127, .12); }
.ac-menu-item svg { width: 18px; height: 18px; flex: none; color: var(--muted); }

/* --------------------------------------------------------------- the lesson list */
.ac-main { max-width: calc(var(--col) + 44px); margin: 0 auto; padding: 34px 22px 80px; }
.ac-h1 { margin: 0 0 18px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }

/* 2d B1: the two numbers above a thin orange bar. --body, not --muted: this sits on
   the page background, where --muted is under 4.5:1. */
.ac-progress { margin: 0 0 26px; }
.ac-progress-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px; font-size: 14px; color: var(--body); }
.ac-progress-row b { font-size: 15px; font-weight: 700; color: var(--ink); }
.ac-progress .bar { height: 6px; }

.ac-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--card-shadow); }

/* 2b F1: practice software and About, side by side. */
.ac-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; }

.ac-practice { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas: "icon title open" "icon line line" "icon reset reset";
  column-gap: 16px; row-gap: 3px; align-items: start; padding: 16px 20px 14px; }
.ac-pool { grid-area: icon; width: 46px; height: auto; margin-top: 2px; color: var(--ink); }
.ac-ptitle { grid-area: title; align-self: center; margin: 0; font-size: 16px; font-weight: 600;
  line-height: 1.3; color: var(--ink); }
.ac-open { grid-area: open; padding: 7px 20px; color: var(--btn-ink); font-weight: 700; }
.ac-open:hover { color: var(--btn-ink); }
.ac-pline { grid-area: line; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* 5f RC1, resting: a quiet link. Its confirm state is mockups/practice.html. */
.ac-reset { grid-area: reset; justify-self: start; margin: 6px 0 0 -6px; padding: 4px 6px;
  border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; }
.ac-reset:hover { background: rgba(127, 127, 127, .12); }

/* 2a H1, 2g C1: a card is the tick, the title, one line and the minutes. The whole card
   is one link. */
.ac-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-areas: "tick text meta"; align-items: center; column-gap: 16px;
  padding: 15px 20px; color: inherit; text-decoration: none; }
a.ac-item:hover { border-color: var(--orange); }
.ac-pair .ac-item { align-items: start; padding-top: 16px; }
.ac-tick { grid-area: tick; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; border: 2px solid var(--ring); }
.ac-tick svg { display: none; width: 14px; height: 14px; color: var(--tick-glyph); }
.is-done .ac-tick { background: var(--ok); border-color: var(--ok); }
.is-done .ac-tick svg { display: block; }
.ac-text { grid-area: text; display: grid; gap: 2px; min-width: 0; }
.ac-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ac-line { font-size: 14px; line-height: 1.45; color: var(--muted); }
.ac-meta { grid-area: meta; display: flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-meta > span:last-child { min-width: 44px; text-align: right; }   /* tags line up whatever the minutes */
/* 2f A1: the tag on every advanced card. */
.ac-tag { padding: 2px 8px; border-radius: 5px; background: var(--tag-bg); color: var(--link);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
/* Ticks that did not load are hidden, not drawn empty: an empty ring would say "not done". */
.is-unknown .ac-tick { visibility: hidden; }

/* 2e L1: three tabs with counts. */
.ac-tabs { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; }
.ac-tab { padding: 7px 16px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ac-tab b { margin-left: 7px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-tab:hover { background: rgba(127, 127, 127, .12); color: var(--ink); }
.ac-tab[aria-selected="true"], .ac-tab[aria-selected="true"]:hover { background: var(--ink); color: var(--panel); }
.ac-tab[aria-selected="true"] b { color: var(--panel); }

.ac-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ac-divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 12px; font-size: 13px;
  font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--link); }
.ac-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ac-empty { margin: 0; padding: 30px 20px; border: 1px dashed var(--ring); border-radius: var(--radius);
  background: var(--panel); color: var(--body); text-align: center; }

/* A message that something did not work: ink on pale amber, so it reads in both schemes
   (app.css's .banner.warn puts --warn text on amber, 3.1:1). */
.ac-alert { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 16px; margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--alert-line);
  border-left-width: 4px; border-radius: var(--radius); background: var(--alert-bg); color: var(--ink);
  font-size: 15px; }
.ac-alert p { margin: 0; }
.ac-btn-quiet { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ac-btn-quiet:hover { border-color: var(--orange); background: var(--panel); }
.ac-btn-danger { padding: 9px 17px; border: 1px solid #C8382F; border-radius: 8px; background: #C8382F;
  color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ac-btn-danger:hover { background: #A92E26; border-color: #A92E26; }
.modal h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.modal-actions { gap: 10px; }

/* ----------------------------------------------------------------- the way in */
.ac-pick { max-width: 820px; margin: 0 auto; padding: 9vh 22px 80px; text-align: center; }
.ac-pick h1 { margin: 0 0 8px; font-size: 34px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.ac-pick h1:focus { outline: none; }
.ac-pick-sub { margin: 0 0 30px; font-size: 16px; color: var(--body); }
.ac-pick .ac-alert { text-align: left; margin-bottom: 20px; }
.ac-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ac-choice { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 26px 24px 28px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
  color: var(--body); font: inherit; text-align: center; cursor: pointer; }
.ac-choice:hover { border-color: var(--orange); background: var(--panel); }
.ac-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ac-choice[aria-current="true"] { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), var(--shadow); }
.ac-ill { display: block; width: 210px; max-width: 86%; height: auto; margin-bottom: 8px; color: var(--ink); }
.ac-choice-name { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.ac-choice-line { font-size: 15px; line-height: 1.45; color: var(--body); }
.ac-pick-back { display: inline-block; margin-top: 26px; padding: 6px 8px; font-weight: 600;
  color: var(--link); text-underline-offset: 3px; border-radius: 6px; }
.ill-line { stroke: currentColor; }
.ill-water { fill: var(--water); }
.ill-paper { fill: var(--panel); }

/* --------------------------------------------------------------------- About
   B4: the end block holds one orange Done button until About is ticked; opened again it
   shows the tick, "Done" and Back to lessons. */
.ac-about { max-width: 720px; margin: 0 auto; padding: 26px 22px 80px; }
.ac-back { display: inline-flex; align-items: center; gap: 6px; margin-left: -6px; padding: 5px 6px;
  border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; }
.ac-back:hover { background: rgba(127, 127, 127, .12); }
.ac-back svg { width: 16px; height: 16px; }
.ac-about h1 { margin: 12px 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ac-lead { margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--body); }
.ac-about section { padding: 18px 0 14px; border-top: 1px solid var(--line); }
.ac-about h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.ac-about p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--body); }
.ac-about p a, .ac-about li a { color: var(--link); font-weight: 600; text-underline-offset: 3px; }
.ac-sheets { margin: 4px 0 6px; padding: 0; list-style: none; display: grid; gap: 10px; }
.ac-sheets li { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); }
.ac-sheets a { font-size: 16px; }
.ac-sheets span { font-size: 14px; color: var(--muted); }
.ac-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-top: 22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); }
.ac-done { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ok-text); }
.ac-done .ac-tick { background: var(--ok); border-color: var(--ok); }
.ac-done .ac-tick svg { display: block; }
.ac-end .btn { color: var(--btn-ink); font-weight: 700; }
/* Before Done the block holds the one Done button, centred, so the end of the page reads as one action. */
.ac-end-todo { justify-content: center; }
.ac-end-todo .btn { min-width: 200px; }

/* --------------------------------------------------------------------- phones */
@media (max-width: 640px) {
  .ac-pair { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .ac-top { gap: 10px; padding: 10px 16px; }
  .ac-brand span { display: none; }             /* the mark stays; "Olly Academy" goes */
  .ac-navlink { padding: 7px 8px; }
  .ac-main { padding: 22px 16px 64px; }
  .ac-h1 { font-size: 24px; margin-bottom: 14px; }
  .ac-practice { padding: 14px 16px 12px; column-gap: 14px; }
  .ac-item { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "tick text" ". meta";
    align-items: start; row-gap: 6px; padding: 14px 16px; column-gap: 14px; }
  .ac-pair .ac-item { padding-top: 14px; }
  .ac-meta > span:last-child { min-width: 0; text-align: left; }
  .ac-tick { margin-top: 1px; }
  .ac-tabs { display: flex; width: 100%; }
  .ac-tab { flex: 1 1 0; padding: 8px 6px; }
  .ac-divider { margin-top: 26px; }
  .ac-pick { padding: 28px 16px 56px; }
  .ac-pick h1 { font-size: 26px; }
  .ac-pick-sub { margin-bottom: 20px; }
  .ac-choices { grid-template-columns: 1fr; gap: 12px; }
  .ac-choice { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "ill name" "ill line";
    justify-items: start; align-items: center; column-gap: 14px; row-gap: 2px; padding: 16px; text-align: left; }
  .ac-ill { grid-area: ill; width: 104px; max-width: none; margin: 0; }
  .ac-choice-name { grid-area: name; align-self: end; font-size: 21px; }
  .ac-choice-line { grid-area: line; align-self: start; }
  .ac-about { padding: 18px 16px 64px; }
  .ac-about h1 { font-size: 26px; }
  .ac-end { padding: 14px 16px; }
}

:root {
  /* The window budget (screens/lesson_page.md, "Sharing the window"). */
  --ls-hdr: 58px;                          /* the shared header, list.css .ac-top */
  --ls-row: 48px;                          /* Back to lessons, the title, the minutes */
  --ls-foot: 16px;                         /* space under the software */
  --ls-gut: 16px;                          /* page gutter, each side */
  --ls-gap: 16px;                          /* between the step list and the software */
  --ls-rail: clamp(280px, 20vw, 320px);    /* the step list: narrow and quiet */
  --ls-rail-max: 360px;                    /* it takes spare width up to this */
  --ls-sw-min: 900px;                      /* ADR-029: the software's text still reads */

  --ls-float-bg: #FFFFFF;
  --ls-float-shadow: 0 10px 28px rgba(16, 24, 40, .30), 0 1px 3px rgba(16, 24, 40, .18);
  --ls-now-bg: rgba(247, 143, 40, .10);
  --ls-ok-bg: rgba(30, 158, 90, .10);
  --ls-ok-line: rgba(30, 158, 90, .35);
}
@media (min-width: 1600px) {
  :root { --ls-gut: 24px; --ls-gap: 20px; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ls-float-bg: #21252C;
    --ls-float-shadow: 0 12px 32px rgba(0, 0, 0, .62), 0 1px 3px rgba(0, 0, 0, .5);
    --ls-now-bg: rgba(247, 143, 40, .13);
    --ls-ok-bg: rgba(63, 190, 121, .12);
    --ls-ok-line: rgba(63, 190, 121, .38);
  }
}

/* The product chip without Switch is not used: the header is the list's, unchanged. */

/* ------------------------------------------------------------- the page */
/* app.css caps every main at 1180 px and centres it; a page laid out to the window
   takes the whole width instead (today's lesson page does the same, main.wide:has()). */
.ls-page { max-width: none; margin: 0; padding: 0 var(--ls-gut) var(--ls-foot); container-type: inline-size; }

.ls-head { display: flex; align-items: center; gap: 14px; min-height: var(--ls-row); min-width: 0; }
.ls-head .ac-back { flex: none; margin-left: -6px; }
.ls-sep { flex: none; width: 1px; height: 22px; background: var(--line); }
.ls-title { margin: 0; min-width: 0; font-size: 21px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ls-min { flex: none; font-size: 14px; color: var(--body); white-space: nowrap; }

/* The two columns. The software is as large as the window allows, 16:9, never wider
   than the room beside the step list and never narrower than --ls-sw-min unless the
   window itself is narrower. The step list takes spare width up to --ls-rail-max, and
   anything left over is shared out either side. 100cqw is the page's width inside its
   gutters; the build can use 100vw minus the gutters. */
.ls-grid {
  --ls-avail-w: calc(100cqw - var(--ls-rail) - var(--ls-gap));
  --ls-avail-h: calc(100dvh - var(--ls-hdr) - var(--ls-row) - var(--ls-foot));
  --ls-sw: clamp(min(var(--ls-sw-min), var(--ls-avail-w)), calc(var(--ls-avail-h) * 16 / 9), var(--ls-avail-w));
  display: grid;
  grid-template-columns: minmax(var(--ls-rail), var(--ls-rail-max)) var(--ls-sw);
  justify-content: center;
  align-items: start;
  gap: var(--ls-gap);
}

/* ------------------------------------------------------- the software */
.ls-stage { position: relative; width: var(--ls-sw); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: #000; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.ls-stage > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The canvas takes keys, so reaching it by keyboard is visible (as app.css does today). */
.ls-stage:focus { outline: none; }
.ls-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* The floating step (3b LP1). Over the software, never part of it: it takes no clicks
   and no focus, and it fades when the pointer is over it. It docks over the pool deck in
   the camera picture, the one part of every screen no step is about; when a step IS about
   that band, it docks at the top of the picture instead (screens/lesson_page.md). */
.ls-float { position: absolute; left: 50%; z-index: 2; transform: translateX(-50%);
  width: max-content; max-width: min(520px, 46%); display: flex; align-items: baseline; gap: 10px;
  padding: 9px 16px 10px; border: 1.5px solid var(--orange); border-radius: 12px;
  background: var(--ls-float-bg); box-shadow: var(--ls-float-shadow); color: var(--ink);
  font-size: 15px; line-height: 1.4; pointer-events: none; user-select: none;
  transition: opacity .15s ease; }
.ls-float[data-dock="deck"] { bottom: 29.6%; }
.ls-float[data-dock="top"] { top: 6.5%; }
.ls-float.is-faded { opacity: .15; }
.ls-float-n { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; color: var(--link); }
.ls-float-t { min-width: 0; font-weight: 600; }
.ls-float.is-done { align-items: center; border-color: var(--ok); }
.ls-float.is-done .ls-float-t { display: inline-flex; align-items: center; gap: 8px; color: var(--ok-text); font-weight: 700; }
.ls-float.is-done .ac-tick { width: 20px; height: 20px; border: 0; background: var(--ok); }
.ls-float.is-done .ac-tick svg { display: block; width: 12px; height: 12px; }

/* A control named in a step: drawn as the button it is. Solid for the software's own
   controls, dashed for a poolside one, which lives in the step list, not the software. */
.ls-key { display: inline-block; margin: 0 1px; padding: 0 7px; line-height: 1.45;
  border: 1.5px solid var(--orange); border-radius: 5px; background: var(--ls-float-bg);
  color: var(--ink); font-weight: 700; white-space: nowrap; }
.ls-key.is-pool { border-style: dashed; }

/* ------------------------------------------------------ the step list */
.ls-rail { display: flex; flex-direction: column; min-width: 0; height: calc(var(--ls-sw) * 9 / 16);
  overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--card-shadow); }
/* Two parts: the words, which scroll when a short window cannot hold them (the current
   step is scrolled into view whenever it changes), and the foot, which never scrolls and
   holds the one thing to press that is not in the software: Poolside during the lesson,
   Done and Back to lessons at the end. */
.ls-railbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 14px; }
.ls-railfoot { flex: none; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.ls-railfoot:empty { display: none; }

.ls-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--body); }

.ls-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ls-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 11px; align-items: start;
  margin: 0 -8px; padding: 6px 8px; border-radius: 8px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.ls-num { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ring);
  border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ls-num svg { display: none; width: 13px; height: 13px; color: var(--tick-glyph); }
.ls-text { padding-top: 1px; }
.ls-text b { font-weight: 700; color: var(--ink); }
.ls-step.is-done .ls-num { background: var(--ok); border-color: var(--ok); }
.ls-step.is-done .ls-num b { display: none; }
.ls-step.is-done .ls-num svg { display: block; }
.ls-step.is-done .ls-text, .ls-step.is-done .ls-text b { color: var(--muted); }
.ls-step.is-now { background: var(--ls-now-bg); }
.ls-step.is-now .ls-num { border-color: var(--orange); color: var(--link); }
.ls-step.is-now .ls-text { font-weight: 600; color: var(--ink); }
/* While the lesson waits on the one line above step 1 (P4, P6). */
.ls-steps.is-waiting, .ls-poolside.is-waiting { opacity: .5; }
/* A laptop-sized window: the step list's words a little smaller, so five short steps and
   Poolside fit beside the software at 1366 x 768 without scrolling. */
@media (max-width: 1499.98px) {
  .ls-lead { font-size: 14.5px; }
  .ls-step { font-size: 14px; }
  /* The practice software's full set of seven. */
  .ls-poolside.is-full button { margin-top: 5px; padding: 5px 10px; font-size: 13.5px; }
  .ls-poolside.is-full > p { margin-bottom: 2px; }
}

/* The one line above step 1: what the lesson needs (P4) or what is broken (P6), with the
   one button that fixes it. Ink on pale amber, as list.css's alert. */
.ls-need { margin: 0 0 16px; padding: 11px 12px 12px 12px; border: 1px solid var(--alert-line);
  border-left-width: 4px; border-radius: 8px; background: var(--alert-bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.45; }
.ls-need p { margin: 0; }
.ls-need-title { font-weight: 700; }
.ls-need .btn { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--btn-ink); }
.ls-need .btn:hover { color: var(--btn-ink); }
.ls-need-or { display: block; margin: 8px 0 0; font-size: 13.5px; color: var(--body); text-align: center; }
.ls-linkbtn { padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; font: inherit;
  font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ls-linkbtn:hover { background: rgba(127, 127, 127, .12); }
.ls-need .row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.ls-need .ac-btn-danger, .ls-need .ac-btn-quiet { width: 100%; padding: 8px 12px; text-align: center; }
/* What the button changed (P4): a green line that stays above step 1. */
.ls-met { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start;
  margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--ls-ok-line); border-radius: 8px;
  background: var(--ls-ok-bg); color: var(--ink); font-size: 14px; line-height: 1.45; }
.ls-met .ac-tick { grid-area: auto; width: 20px; height: 20px; border: 0; background: var(--ok); margin-top: 1px; }
.ls-met .ac-tick svg { display: block; width: 12px; height: 12px; }

/* Poolside (3f): only in the lessons that need it. Dashed orange, as today, because the
   real software has no such buttons. */
.ls-poolside { padding: 11px 12px 12px; border: 1px dashed var(--orange); border-radius: var(--radius); }
.ls-poolside h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.3;
  text-transform: uppercase; color: var(--link); }
.ls-poolside > p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ls-poolside button { display: block; width: 100%; margin-top: 8px; padding: 7px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.ls-poolside button:hover { border-color: var(--orange); background: var(--panel); }
.ls-poolside button:disabled { opacity: .55; cursor: not-allowed; border-color: var(--line); }
/* Why a poolside button is off: a gun taken anywhere but the Start screen is thrown away. */
.ls-why { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ls-poolside button:focus-visible, .ls-need button:focus-visible, .ls-need a:focus-visible,
.ls-railfoot a:focus-visible, .ls-railfoot button:focus-visible, .pc-confirm button:focus-visible,
.lp-card a:focus-visible, .ls-keys summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* What just happened poolside, one line, newest only: the deck log cut down to what a
   lesson step waits on ("the referee called the swimmers back"). */
.ls-event { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; align-items: start;
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 13.5px;
  line-height: 1.4; color: var(--ink); }
.ls-event i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--orange); }
.ls-event span b { font-weight: 700; }

/* The end of a lesson (3c D1). */
.ls-done { display: grid; gap: 10px; }
.ls-done .ac-done { font-size: 17px; }
.ls-done p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--body); }
.ls-done .btn { display: block; text-align: center; font-weight: 700; color: var(--btn-ink); }
.ls-done .btn:hover { color: var(--btn-ink); }
/* The save line (04_SAVED_POOL.md 6.5): nothing while all is well on a lesson page. */
.ls-save { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 8px; align-items: start;
  font-size: 13.5px; line-height: 1.45; color: var(--body); }
.ls-save i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--ok); }
.ls-save.is-warn { padding: 8px 10px; border: 1px solid var(--alert-line); border-radius: 8px;
  background: var(--alert-bg); color: var(--ink); }
.ls-save.is-warn i { background: var(--warn); }

/* -------------------------------------------- the practice software page */
.ls-keys { margin-top: 16px; }
.ls-keys summary { cursor: pointer; padding: 2px 0; font-size: 14px; font-weight: 600; color: var(--ink);
  border-radius: 6px; }
.ls-keys dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: baseline;
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; }
.ls-keys dt { justify-self: start; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px;
  font-weight: 700; color: var(--ink); white-space: nowrap; }
.ls-keys dd { margin: 0; color: var(--body); }
.ls-last { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--body); }
.ls-last b { font-weight: 700; color: var(--ink); }

/* ------------------------------ the practice software card's confirm (5f RC1) */
.pc-confirm { grid-area: reset; margin: 10px 0 2px; padding: 12px 14px 13px; border: 1px solid var(--alert-line);
  border-left-width: 4px; border-radius: 8px; background: var(--alert-bg); color: var(--ink);
  font-size: 14px; line-height: 1.5; }
.pc-confirm p { margin: 0; }
.pc-confirm b { font-weight: 700; }
.pc-confirm .row { gap: 8px; margin-top: 11px; }
.pc-after { grid-area: reset; display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pc-after .ac-tick { width: 18px; height: 18px; border: 0; background: var(--ok); }
.pc-after .ac-tick svg { display: block; width: 11px; height: 11px; }

/* ------------------------------------------------- the laptop message (2j) */
.lp-msg { display: none; padding: 22px 16px 64px; }
.lp-msg.is-always { display: block; }
.lp-inner { max-width: 520px; margin: 0 auto; }
.lp-card { margin-top: 14px; padding: 22px 20px 20px; text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--card-shadow); }
/* The lesson the learner opened, as its card on the list names it. */
.lp-what { margin: 16px 0 0; }
.lp-what h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.lp-what p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.lp-ill { display: block; width: 132px; height: auto; margin: 4px auto 14px; color: var(--ink); }
.lp-card h2 { margin: 0 0 8px; font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.lp-card p { margin: 0 auto 10px; max-width: 400px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.lp-card .btn { display: block; margin: 18px 0 0; padding: 11px 16px; font-size: 15px; font-weight: 700; color: var(--btn-ink); }
.lp-card .btn:hover { color: var(--btn-ink); }
.lp-note { margin: 14px 0 0 !important; font-size: 13.5px !important; color: var(--muted) !important; }
.lp-ill .ill-screen { fill: var(--water); }
.lp-ill .ill-line { stroke: currentColor; }
.lp-ill .ill-paper { fill: var(--panel); }

/* A small window (a tablet, a narrow laptop window): the step list gives up 40 px so the
   software keeps 900 px down to a 1188 px window, and stays above 800 px down to 1100. At
   1228 px and wider the 280 px step list leaves the software 900 px or more. */
@media (max-width: 1227.98px) {
  :root { --ls-rail: 240px; }
}

/* ------------------------------------------------- the build's own additions */
/* The focus ring on every page the overhaul adds (the mockups list theirs above). */
.ls-page a:focus-visible, .ls-page button:focus-visible, .lp-msg a:focus-visible,
.ac-account button:focus-visible, .ac-pick button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }
.ac-pick .ac-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* A card is one link; the focus ring shows round the whole card. */
a.ac-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ac-choice[aria-disabled="true"] { cursor: progress; opacity: .7; }

/* The local stand-in for Clerk's button (no key: development and the checks). */
.ac-account .ac-menu-item { color: var(--ink); }
.clerk-user { display: flex; align-items: center; min-height: 34px; }
.ac-localpill { flex: none; }
@media (max-width: 600px) { .ac-localpill { display: none; } }

/* The version line under the list, About, the question and the guide. --body, not
   --muted: it sits on the page background. */
.ac-version { margin: 0 0 28px; text-align: center; color: var(--body); }

/* The software in the lesson page's frame: the shared stage fills the 16:9 box. */
.ls-stage .simstage { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.ls-stage canvas.sim { width: 100%; height: 100%; }
.ls-rail .ls-poolside { margin-top: 0; }
.ls-save.is-busy i { background: var(--muted); }
.ls-save .ls-linkbtn { margin-left: 4px; }
.ls-railfoot:empty, .ls-railfoot > div:empty { display: none; }

/* The lesson page (views/lesson.js), beyond the mockup's classes above. */
/* A step that waits on the software or the pool, not on a press: a dashed card. */
.ls-float.is-wait { border-style: dashed; }
/* Both docks would cover the step's target: the step list carries the step alone. */
.ls-float.is-off { visibility: hidden; }
/* A second line on the floating step: the way back's "where", a step's extra, a note,
   or a miss (which stays until the run rewinds). */
.ls-float-x { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--body); }
.ls-float-x.is-miss { font-weight: 600; color: var(--ink); }
/* The two Pad Check lessons: a 420 px step list with the live table in its foot. */
.ls-page.is-pad { --ls-rail: 420px; --ls-rail-max: 420px; }
/* A foot with nothing showing in it (a Poolside line still to come) takes no room. */
.ls-railfoot:not(:has(> div > :not([hidden]))) { display: none; }