/* Piloteka — palette from the ICAO VFR chart (light) and a glass-cockpit PFD (dark). */

/* Fonts are served by the app: Google Fonts would see every visitor's address (LG München I,
   3 O 17493/20). Files from Google Fonts, Latin and Latin Extended (Polish) subsets only; the browser
   loads a subset when the page uses a character from its range. License: fonts/OFL-*.txt.
   Browsers cache the files for a year without asking again: a changed font needs a new file name. */
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The paper of the figures (tools/figkit.py) as the page: a warm off-white, flat (audit D2). */
  --bg: #f2eee5;
  --rule: #8b99a5;          /* the thin dark rule of a chart's frames: panels, cards, answer rows */
  /* The header band of a card, as in the figures: navy, with its own text colours that read on it. */
  --navy: #13212c; --on-navy: #ffffff; --on-navy-muted: #b7c3cd; --on-navy-info: #7fd0f4; --on-navy-ok: #5ad48a;
  --on-navy-warn: #f0b85a; --on-navy-bad: #ff9c8e;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --ink: #13212c;
  --muted: #5a6b79;
  --faint: #586876;        /* 4.5:1 and more on every surface, the beige page included (WCAG AA for small text) */
  --line: #d8dfe5;
  --accent: #a3166f;        /* ICAO magenta */
  --accent-soft: #f8e7f1;
  --accent-ink: #ffffff;
  --info: #1d5ea8;
  --ok: #1a7d46;
  --ok-bg: #e8f6ee;        /* 4.6:1 under --ok: the badge „spoza banku” is small text (axe, E2E) */
  --bad: #b42318;
  --bad-bg: #fce9e7;
  --warn: #965800;
  --warn-bg: #fff2d9;
  --shadow: 0 1px 2px rgba(19, 33, 44, .06), 0 6px 24px rgba(19, 33, 44, .06);
  --c-fatal: #a3166f; --c-blue: #1d5ea8;   /* the two series of the accidents' charts (dataviz validator: both themes pass) */
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* The scales (audit D5). Radii: small (chips, keys), medium (buttons, fields, badges), large (panels, cards,
     dialogs), pill. Spacing in quarter-rem steps. Type: a 1.2 ratio from the body size — xs for tags and keys, sm for
     secondary text, md body, lg the question and h2, xl big numbers, 2xl h1. test_design.py keeps every
     border-radius, font-size and scale-sized margin, padding and gap on these tokens. */
  --r-s: 2px; --r-m: 3px; --r-l: 4px; --r-pill: 999px;   /* a chart's frames: nearly square (audit D2) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.2rem; --t-xl: 1.44rem; --t-2xl: 1.73rem; --t-3xl: 2.07rem;
  color-scheme: light;
}
/* The dark theme, once (audit D8): theme.js and state.js put the effective theme — the choice, or the system's —
   on <html data-theme>, so no @media copy of these tokens is needed. Designed for the dark background, not an
   inversion: lighter, less saturated accents (6.4:1 and more on the surface), a shadow that reads as elevation on
   dark (a hairline of light on top, a deeper drop), the same surfaces one step apart. test_design.py checks the
   contrast of every text/background pair in both themes. */
:root[data-theme="dark"] {
  --bg: #0b1117; --surface: #121b23; --surface-2: #17222c; --ink: #e2e9ef; --muted: #8d9daa;
  --faint: #7a8b99; --line: #233140; --accent: #e467b9; --accent-soft: #2c1726; --accent-ink: #12060e;
  --info: #5cc6f0; --ok: #46c47c; --ok-bg: #0f2a1c; --bad: #f2705f; --bad-bg: #2f1612;
  --warn: #e2a63c; --warn-bg: #2b2110;
  --rule: #3a4b5c; --navy: #1b2a38; --on-navy: #ffffff; --on-navy-muted: #b7c3cd;
  --on-navy-info: #7fd0f4; --on-navy-ok: #5ad48a; --on-navy-warn: #f0b85a; --on-navy-bad: #ff9c8e;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .5), 0 10px 32px rgba(0, 0, 0, .5);
  --c-fatal: #c84a9c; --c-blue: #3d9fd4;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font: 16px/1.5 var(--font); font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--info); text-underline-offset: 2px; }
/* Form fields at the body size (16px): a smaller textarea makes iOS zoom in on focus and keep the zoom. */
button, input, select, textarea { font: inherit; color: inherit; }
textarea.input { display: block; max-width: none; resize: vertical; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Read by screen readers, not seen: status messages, the words behind a sign (audit U8). */
.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; border: 0; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; }   /* the display weight (direction 6.3, point 10) */
h2 { font-size: var(--t-lg); }
.mono, code, kbd { font-family: var(--mono); font-size: .86em; }
.muted { color: var(--muted); }
/* The icons (tools/icons.py, audit D6): one stroke in the text's colour, the accent path in magenta — except on a
   magenta or navy surface, where everything takes the surface's text colour. */
.ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: none; }
.ic .a { stroke: var(--accent); }
.ic .f { fill: currentColor; stroke: none; }
.ic .af { fill: var(--accent); stroke: var(--accent); }
:is(.btn.primary, .cardtop) .ic :is(.a, .af) { stroke: currentColor; }
:is(.btn.primary, .cardtop) .ic .af { fill: currentColor; }
.label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  font-weight: 500;   /* IBM Plex Mono ships here in 400 and 500 only: nothing in mono asks for a bold the browser would fake */
}
[hidden] { display: none !important; }
/* What the views used to set inline (audit D5): spacing from the scale, a text size step, alignment, widths. */
.m-0 { margin: 0; } .mt-1 { margin-top: var(--s-1); } .mt-5 { margin-top: var(--s-5); } .mb-1 { margin-bottom: var(--s-1); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .my-1 { margin: var(--s-1) 0; } .my-2 { margin: var(--s-2) 0; }
.mx-auto { margin-left: auto; margin-right: auto; } .mr-auto { margin-right: auto; }
.text-xs { font-size: var(--t-xs); } .text-sm { font-size: var(--t-sm); } .text-md { font-size: var(--t-md); }
.ta-right { text-align: right; } .pre { white-space: pre-wrap; }
.sheet { max-width: 860px; } .sheet-sm { max-width: 820px; } .w-date { max-width: 12rem; }
.theorylabel { padding: 0 .7rem var(--s-2); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-5);
  padding: .7rem clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
/* The test installation (PILOTEKA_ENV=test, server.env_strip): first in the body of the app and of the landing page. */
.envstrip { padding: var(--s-1) var(--s-4); background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn);
  font-size: var(--t-sm); font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.brand { display: flex; align-items: baseline; gap: var(--s-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--t-lg); }
.brand svg { height: 26px; width: auto; aspect-ratio: 62 / 22.5; align-self: center; }
:is(.brand, .authlogo) .lw { fill: var(--ink); }       /* logo: wings, medallion, book pages */
:is(.brand, .authlogo) .lm { fill: var(--accent); }
:is(.brand, .authlogo) .lp { fill: var(--accent-ink); }
.lic { font-family: var(--mono); font-weight: 500; font-size: var(--t-sm); letter-spacing: .04em; border-left: 1px solid var(--rule); padding-left: var(--s-3); }
/* The tabs (ux-plan PD8): "Przedmioty" and "Teoria" in the bar at every width; the place on view underlined. */
.tabs { display: flex; gap: 2px; margin-right: auto; min-width: 0; }
.tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .65rem; border-radius: var(--r-m); color: var(--muted);
  text-decoration: none; font-weight: 500; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--r-m) var(--r-m) 0 0; }
@media (hover: hover) { .tabs a:hover { color: var(--ink); background: var(--surface-2); } }
/* "Więcej": a drop-down under its button with the other places of an account (30.10.2026, PD8). */
.mainnav { position: absolute; top: calc(100% + 4px); right: clamp(1rem, 4vw, 2.5rem); z-index: 11; display: grid; gap: 2px; min-width: 13rem;
  padding: var(--s-2); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); box-shadow: var(--shadow); }
.mainnav[hidden] { display: none; }
.mainnav a { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; padding: .55rem var(--s-3); border-radius: var(--r-m); font-weight: 500; }
/* Hover effects only with a mouse: on a touch screen :hover sticks to the last tapped element. */
@media (hover: hover) { .mainnav a:hover { background: var(--surface-2); } }
.mainnav a[aria-current="page"] { background: var(--surface-2); font-weight: 700; }
.iconbtn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .topbar { gap: var(--s-2); padding-inline: 1rem; }
  .iconbtn { flex: none; }
}
/* Where the two tabs would not fit (main.js, fitTopbar): first the licence's mark goes ("compact"), then the search's
   button moves under "Więcej" ("tight"). */
.topbar.compact .lic { display: none; }
.mainnav a.navsearch { display: none; }
.topbar.tight #searchlink { display: none; }
.topbar.tight .mainnav a.navsearch { display: flex; }
/* Messages (ppl/messages): the bell with the number of unread ones. Where the bar is short of room it goes first while
   nothing is unread ("quiet"; the list is in Konto), else it moves under "Więcej" with the search ("tight"), and the button
   of "Więcej" carries a dot while something waits. */
#msglink { position: relative; }
.msgcount { position: absolute; top: -5px; right: -5px; min-width: 1.15rem; height: 1.15rem; padding: 0 var(--s-1); border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font: 500 .68rem/1.15rem var(--mono); text-align: center; }
.mainnav .msgcount { position: static; margin-left: auto; }
.mainnav a.navmessages { display: none; }
.topbar:is(.quiet, .tight) #msglink { display: none; }
.topbar.tight .mainnav a.navmessages { display: flex; }
.topbar.tight.unread #menu { position: relative; }
.topbar.tight.unread #menu::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); }
@media (max-width: 370px) {
  .topbar { gap: .3rem; padding-inline: .6rem; }
  .tabs { gap: 0; }
  .tabs a { padding: 0 .4rem; font-size: var(--t-sm); }   /* 320 px: both tabs, "Więcej" and the account in one row */
}

main { padding: clamp(1rem, 4vw, 2.5rem); max-width: 1180px; margin: 0 auto; outline: none; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.page-head p { margin: .35rem 0 0; color: var(--muted); }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: .6rem 1.05rem; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  font-weight: 500; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
@media (hover: hover) { .btn:hover { border-color: var(--ink); } }
/* A phone: a long label wraps inside its button instead of pushing the page wider than the screen ("Akceptuję
   i przechodzę do nauki", "Przećwicz pytania z tego rozdziału (36)", the buttons over an exam's result: UX-004, 009, 010). */
@media (max-width: 560px) { .btn { white-space: normal; max-width: 100%; text-align: center; } }
.btn { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; border-color: var(--rule); }   /* the mock-up */
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
@media (hover: hover) { .btn.primary:hover { filter: brightness(1.08); } }
.btn.ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
@media (hover: hover) { .btn.ghost:hover { background: var(--surface-2); } }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn kbd { padding: 0 .35rem; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, currentColor 55%, transparent); font-size: var(--t-xs); }   /* the key in the button's own colour: faded (opacity .6) it fell under 4.5:1 on the primary button (axe, E2E) */

/* ---------- panels */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 1.25rem; }
.stack { display: grid; gap: var(--s-4); }

/* ---------- progress */
.bar { display: flex; height: 10px; border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); position: relative; }
.bar::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* a tape scale: a tick every 10 % (audit D2) */
  background: repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), var(--surface) calc(10% - 1px) 10%); }
.bar span { display: block; height: 100%; transition: width .4s ease; }   /* grows after an answer (audit D7) */
.bar .m { background: var(--ok); }   /* mastered: green, the colour of what is done (the code of colours) */
.bar .a { background: var(--muted); }   /* answered in a mock exam in progress: neutral — green would say "right" */
.bar .l { background: var(--warn); }
.tape { position: relative; height: 1rem; margin-top: 2px; font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.tape span { position: absolute; top: 0; transform: translateX(-50%); }
.tape span:first-child { transform: none; } .tape span:last-child { transform: translateX(-100%); white-space: nowrap; }
@media (max-width: 560px) { .tape span:not(:first-child):not(:nth-child(6)):not(:last-child) { display: none; } }   /* a phone: 0, 50, 100 */
.legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-s); margin-right: .35rem; vertical-align: -1px; }
.legend .m { background: var(--ok); } .legend .l { background: var(--warn); } .legend .n { background: var(--surface-2); border: 1px solid var(--line); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- the day (audit U6, N8): the plan over the list of sessions */
.today { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: var(--s-4) 1.25rem; margin-bottom: var(--s-5); }
.todayhead { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.todayrow { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }
.todayrow .kpi b { font-size: var(--t-2xl); line-height: 1.1; }
.todayrow .kpi span { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.todayrow .marks { display: flex; gap: 3px; margin-top: var(--s-1); }
.todayrow .marks i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface-2); }
.todayrow .marks i.on { background: var(--ok); border-color: var(--ok); }
.todayrow .marks i.now:not(.on) { border-color: var(--ink); }
.todayhead .label { margin: 0; font-size: var(--t-xs); font-weight: 500; }   /* an h2 in the look of a label */
/* The plan's button under the numbers (ux-plan PD4): what it does on top, for which questions under it; the other way —
   going on with a subject — as a quiet line below. */
.todaycta { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.todaygo { display: grid; justify-items: center; gap: .3rem; width: 100%; padding: .85rem var(--s-4); }
.todaygo span { font-size: var(--t-sm); }
.todaygo small { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); opacity: .9; }
.todayalt { justify-self: center; font-size: var(--t-sm); color: var(--muted); }
.todaycta .done { color: var(--ok); font-weight: 700; justify-self: start; }
.todaycta .done + .btn { justify-self: start; }
.todayhint { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--muted); }
.todaymistakes { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--muted); }   /* "Błędy z", plan D8 */
.todaymistakes .label { margin-right: var(--s-1); }
.remopts { margin: var(--s-2) 0; align-items: center; }
.remopts select.input { width: auto; }
.todayrow .sm { display: none; }                          /* the short label of the streak: phones only */
.listhead { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: var(--s-5) 0 var(--s-3); }
.listhead + .sessions { margin-bottom: var(--s-2); }
@media (max-width: 600px) {
  .today { padding: var(--s-3) var(--s-4); }
  .todayrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }   /* the three numbers in one line */
  .todayrow .kpi { min-width: 0; }
  .todayrow .kpi b { font-size: var(--t-xl); }
  .todayrow .kpi span { letter-spacing: .03em; white-space: nowrap; }
  .todayrow .marks { gap: 2px; } .todayrow .marks i { width: 7px; height: 7px; }
  .todayrow .lg { display: none; } .todayrow .sm { display: inline; }
  .todaycta .done + .btn { justify-self: stretch; justify-content: center; }
}
/* The bin (audit U6): an icon in the row's quiet colour, red only under the pointer — not a red "Usuń" beside "Kontynuuj". */
.srow .del { padding: .45rem .55rem; color: var(--muted); }
@media (hover: hover) { .srow .del:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); } }

/* ---------- sessions list */
.sessions { display: grid; gap: var(--s-3); }
.srow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-4) 1.25rem;
}
.srow h2 a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .srow h2 a:hover { color: var(--accent); } }
.srow .meta { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: .35rem; font-size: var(--t-sm); color: var(--muted); }
.srow .actions { display: flex; gap: var(--s-2); align-items: center; }
.srow .progress { grid-column: 1 / -1; }
/* The other things to do with a subject, under its main button (ux-plan PD5): quiet links, not more buttons. */
.srow .rowlinks { grid-column: 1 / -1; }
:is(.srow, .readiness) .rowlinks { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); font-size: var(--t-sm); }
:is(.srow, .readiness) .rowlinks :is(a, .linkbtn) { display: inline-flex; align-items: center; min-height: 32px; }
:is(.srow, .readiness) .linkbtn { color: var(--info); text-underline-offset: 2px; }   /* the row's links look alike: links, not the accent */
@media (pointer: coarse) { :is(.srow, .readiness) .rowlinks :is(a, .linkbtn) { min-height: 44px; } }
.srow .legend .ok { color: var(--ok); font-weight: 700; } .srow .legend .bad { font-weight: 700; }
button.badge { border: 0; cursor: pointer; }   /* the date of the exam: opens the subject's settings */
@media (hover: hover) { button.badge:hover { text-decoration: underline; } }
@media (max-width: 600px) { .srow { grid-template-columns: minmax(0, 1fr); } .srow .actions { flex-wrap: wrap; } }
/* A subject not started yet (sesje-plan D7): one line — name, its questions and "Zacznij" beside them, on phones too. */
.srow.short { padding-block: var(--s-3); }
@media (max-width: 600px) { .srow.short { grid-template-columns: minmax(0, 1fr) auto; } }
.badge { font-size: var(--t-xs); font-family: var(--mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .45rem; border-radius: var(--r-s); }
.badge.train { background: var(--surface-2); color: var(--ink); }
.codes { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.code { font-family: var(--mono); font-size: var(--t-xs); padding: .05rem .35rem; border-radius: var(--r-s); background: var(--surface-2); color: var(--muted); }

.empty { text-align: center; padding: 3rem var(--s-4); }
.empty p { color: var(--muted); max-width: 46ch; margin: var(--s-2) auto var(--s-5); }
.sessionhelp { margin: var(--s-5) 0 0; font-size: var(--t-sm); }

/* ---------- getting started */
.startpage { max-width: 880px; margin: 0 auto; }
.startintro { max-width: 64ch; }
.startintro .label { margin: 0 0 var(--s-2); }
.startintro h1 { font-size: clamp(var(--t-2xl), 4vw, var(--t-3xl)); }
.startintro > p:not(.label) { margin: var(--s-3) 0 1.25rem; color: var(--muted); }
.startsteps { list-style: none; counter-reset: step; padding: 0; margin: var(--s-6) 0 1.25rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.startsteps li { counter-increment: step; border-top: 2px solid var(--line); padding-top: var(--s-4); }
.startsteps li::before { content: counter(step); display: block; margin-bottom: .6rem;
  color: var(--accent); font-family: var(--mono); font-size: var(--t-sm); }
.startsteps h2, .startlinks h2 { font-size: var(--t-md); }
.startsteps p, .startlinks p { color: var(--muted); margin: .6rem 0 0; }
.starttip { padding: .85rem var(--s-4); border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--r-l) var(--r-l) 0; margin: 0 0 var(--s-6); }
.startlinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.startlinks > div > a { display: inline-block; margin-top: .65rem; }
.startmore { margin-top: var(--s-6); color: var(--muted); font-size: var(--t-sm); }
.startnote { color: var(--muted); font-size: var(--t-sm); margin: 1.25rem 0 0; max-width: 85ch; }
@media (max-width: 600px) {
  .startsteps, .startlinks { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .startsteps li { position: relative; padding: var(--s-4) 0 0 var(--s-6); }
  .startsteps li::before { position: absolute; left: 0; top: 1rem; }
}

/* ---------- new session form */
.form { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }   /* minmax: a wide table in a field scrolls in it (UX-003) */
.field > label, .field > .label { font-weight: 700; }
.field .hint { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.more { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.more > summary { cursor: pointer; font-weight: 700; padding: var(--s-1) 0; }
.more > summary .muted { font-weight: 400; font-size: var(--t-sm); }
/* "Więcej" under a field (audit U15): the algorithm's details, in the hint's size and colour, not a second "Więcej ustawień". */
.field > details.more { margin-top: var(--s-1); }
.field > details.more > summary { font-weight: 500; font-size: var(--t-sm); color: var(--muted); padding: 0; }
.field > details.more > .hint { margin-top: var(--s-1); }
.more[open] > summary { margin-bottom: 1.25rem; }
.fieldgroup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
/* iOS draws an empty date field lower than a filled one and without any text. */
input[type="date"].input { min-height: 2.75rem; }
.input { padding: .6rem var(--s-3); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); width: 100%; max-width: 420px; }
.segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-l); padding: 3px; background: var(--surface); gap: 3px; }
.segmented button { border: 0; background: transparent; padding: var(--s-2) var(--s-4); border-radius: var(--r-m); cursor: pointer; color: var(--muted); font-weight: 500; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-2); }
.subj {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; text-align: left;
  padding: .65rem .8rem; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.subj .box { width: 18px; height: 18px; border-radius: var(--r-s); border: 2px solid var(--faint); display: grid; place-items: center; }
.subj[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.subj[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); }
.subj[aria-pressed="true"] .box::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--accent-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.subj .name { font-weight: 500; line-height: 1.25; }
.subj .count { font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); }
/* One subject to choose (the mock exam, sesje-plan D4): a round mark, as a radio button. */
.subjects.single .subj { grid-template-columns: auto 1fr; }
.subjects.single .box { border-radius: 50%; }
.subjects.single .subj[aria-pressed="true"] .box { background: var(--surface); }
.subjects.single .subj[aria-pressed="true"] .box::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--accent); transform: none; }
.quick { display: flex; gap: var(--s-1); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.stepper button { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: var(--t-lg); }
.stepper output { min-width: 3ch; padding: 0 .35rem; text-align: center; font-family: var(--mono); font-size: var(--t-md); font-weight: 500; }
.pips { display: inline-flex; gap: 4px; vertical-align: middle; }
.pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ok); }
.pips i.on { background: var(--ok); }
.formfoot { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ---------- study view */
.study { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-6); align-items: start; }
@media (max-width: 960px) { .study { grid-template-columns: minmax(0, 1fr); } }   /* 1fr would grow to a long title */
.studyhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
/* The sheet's head strip (audit D2, the mock-up): the mark, the sheet's title, the bank and edition, the mode. */
.sheethead { display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap; padding: 0 0 var(--s-2);
  border-bottom: 1px solid var(--rule); margin-bottom: var(--s-3); font-family: var(--mono); }
.sheethead .sh-left { display: flex; align-items: center; gap: var(--s-3); min-width: 0; margin-right: auto; }
.sheethead .sh-title { min-width: 0; }
.sheethead .sh-title b { display: block; font-size: var(--t-sm); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* block: a long name ends in „…” instead of widening the page (a phone then zooms out and the bar at the bottom leaves the screen) */
.sheethead .sh-tools { display: flex; gap: var(--s-1); }                      /* the sheet's tools, small, before the mode */
.sheethead .sh-tools .btn { padding: .2rem var(--s-2); letter-spacing: .04em; color: var(--muted); }
.sheethead .sh-tools .btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.sheethead .sh-tools .btn.icon { padding: .2rem .35rem; }
.sheethead .sh-tools .btn svg { display: none; }   /* a mouse: words; the gear its icon; the card keeps its arrows */
.sheethead .sh-tools .btn.icon svg { display: block; }
.sheethead .sh-tools .barnav { display: none; }
@media (hover: hover) { .sheethead .sh-tools .btn:hover { color: var(--ink); } }
/* A drop-down under a sheet tool ("Błędy z", plan D8): the look of the menu under the burger; the choice in the
   body font, its count in mono on the right. On a phone it opens upwards from the bar. */
.drop { position: relative; display: inline-flex; }
.dropmenu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: grid; gap: 2px; min-width: 12rem;
  padding: var(--s-2); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); box-shadow: var(--shadow); font-family: var(--font); }
.dropmenu[hidden] { display: none; }
.dropmenu .label { padding: var(--s-1) var(--s-3); }
.dropmenu button { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: .55rem var(--s-3); border: 0;
  border-radius: var(--r-m); background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.dropmenu button b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.dropmenu button[disabled] { color: var(--muted); cursor: default; }
@media (hover: hover) { .dropmenu button:not([disabled]):hover { background: var(--surface-2); } }
.sheethead .sh-right { display: flex; gap: var(--s-3); }
.sheethead .sh-right > div { display: grid; gap: 1px; align-content: center; padding-left: var(--s-3); border-left: 1px solid var(--rule);
  font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sheethead .sh-right > div b { color: var(--ink); font-weight: 500; }
.sheethead .sh-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.sheethead .sh-actions .btn { padding: .4rem .6rem; }
.sheetlinks { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; margin: 0 0 var(--s-3); }
@media (max-width: 860px) { .sheethead .sh-right { display: none; } }   /* a tablet: the mark, the title and the buttons */
@media (max-width: 560px) {                               /* a phone: one line — the title and the mode */
  .sheethead { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title mode" "actions actions";
    gap: var(--s-2); align-items: center; padding-bottom: 0; border-bottom: 0; margin-bottom: var(--s-2); }   /* one block with the bar below */
  .sheethead .sh-left, .sheethead .sh-right, .sheethead .sh-right > div { display: contents; }
    .sheethead .sh-title { grid-area: title; }
  .sheethead .sh-title b { font-family: var(--font); font-size: var(--t-md); font-weight: 600; letter-spacing: 0; text-transform: none; }
  .sheethead .sh-right > div > span:first-child { grid-area: mode; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-left: 1px solid var(--rule); padding-left: var(--s-2); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .sheethead .sh-right > div b { color: var(--muted); font-weight: 700; }
  .sheethead .sh-lbl, .sheethead .sh-detail { display: none; }
  .sheethead .sh-actions { grid-area: actions; width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sheethead .sh-actions .btn { padding: .35rem var(--s-2); letter-spacing: .03em; }
}
/* The progress gauge (the mock-up): a framed panel — the label, the tape with a ruler and its labels, the readout. */
.gauge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--surface); }
.gauge .g-label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.gauge .bar { height: 10px; border-radius: 0; background: var(--surface-2); }
.gauge .bar::after { background: none; }
.gauge .ruler { height: 6px; margin-top: 2px; background:
  repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 2%) left bottom / 100% 3px no-repeat,
  repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 10%) left bottom / 100% 6px no-repeat; }
.gauge .tape { margin-top: 1px; height: .9rem; }
.gauge .g-read { display: flex; align-items: center; gap: var(--s-2); font-family: var(--mono); max-width: 19rem; }
.gauge .g-read > b { font-size: var(--t-md); font-weight: 500; border: 1px solid var(--rule); padding: .1rem var(--s-2); border-radius: var(--r-s); min-width: 4.2rem; text-align: center; flex: none; }
.gauge .g-read > span { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.gauge .g-read .num { font-weight: 500; color: var(--ink); }
.gauge .g-read .badge { text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .gauge { grid-template-columns: auto minmax(0, 1fr); } .gauge .g-read { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 560px) {                               /* a phone: the readout as one quiet line, no box */
  .gauge { padding: var(--s-2); gap: var(--s-2); }
  .gauge .g-read { display: block; line-height: 1.4; }     /* flows as text: "38 / 589 · poznane · opanowane 0" */
  .gauge .g-read > b { border: 0; padding: 0; min-width: 0; font-size: var(--t-sm); }
  .gauge .g-read > b::after { content: " · "; color: var(--muted); font-weight: 400; }
  .gauge .g-read > span { letter-spacing: .02em; }
}
.headbtns { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.studyhead h1 { font-size: var(--t-md); }
.card { --card-pad: clamp(1.1rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: var(--card-pad); }   /* flat, framed, as a chart */
.cardmeta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); font-size: var(--t-sm); color: var(--muted); }
.subjtag { font-weight: 700; color: var(--accent); }
/* The subject's code as the plate of the figures (tools/figkit.py): magenta, mono. */
.subjname { font-weight: 700; }
.exid { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-2); }
.notice { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); cursor: help; }
.notice.poprawione { color: var(--info); }
.btn.attention { border-color: var(--warn); color: var(--warn); }
.badge.bank { background: var(--warn-bg); color: var(--warn); }
.badge.extra { background: var(--ok-bg); color: var(--ok); }
.origin { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .4rem;
  border-radius: var(--r-s); border: 1px solid var(--line); color: var(--muted); cursor: help; }
.origin.piloteka { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
table.t .check input { width: 24px; height: 24px; margin: 0; }   /* the switches in a row of a table: WCAG 2.5.8 (UX-012) */
.tag-new { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--info); }
.tag-hard { margin-left: var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); cursor: help; }
.tag-relearn { margin-left: var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bad); }
.todayline { margin-top: .4rem; font-size: var(--t-sm); color: var(--muted); }
/* Back from the theory (U12): one line above the current card that leads to the answer the theory was opened from. */
.backnote { margin: -.5rem 0 var(--s-4); font-size: var(--t-sm); color: var(--muted); }
.linkbtn { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.status-txt { font-size: var(--t-sm); font-weight: 700; } .status-txt.ok { color: var(--ok); } .status-txt.bad { color: var(--bad); }
.t tr.muted td { color: var(--faint); }
.reveal { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) 0 var(--s-1); }
.badge.exam { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.qtext { font-size: clamp(var(--t-lg), 1.8vw, var(--t-xl)); line-height: 1.5; margin: 0 0 var(--s-5); max-width: 62ch; overflow-wrap: anywhere; }
.options { display: grid; gap: .6rem; }
.opt {
  display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 0 var(--s-3); align-items: stretch; text-align: left;
  width: 100%; padding: 0 var(--s-3) 0 0; border-radius: var(--r-l); border: 1px solid var(--rule); background: var(--surface); overflow: hidden;
  cursor: pointer; line-height: 1.45; transition: border-color .12s, background .12s;
}
@media (hover: hover) { .opt:hover:not([disabled]) { border-color: var(--accent); } }
.opt .k { font-family: var(--mono); font-size: var(--t-sm); display: grid; place-items: center; align-self: stretch; border-right: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); }
.opt > span:nth-child(2) { padding: .8rem 0; align-self: center; overflow-wrap: anywhere; }
.opt .mark { width: 1.2rem; height: 1.2rem; align-self: center; }
.opt[disabled] { cursor: default; }
.opt.dim { opacity: .55; }
.opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.opt.ok { border-color: var(--ok); background: var(--ok-bg); opacity: 1; animation: pulse-ok .5s ease-out; }
.opt.ok .k { background: var(--ok); color: var(--surface); }
.opt.bad { border-color: var(--bad); background: var(--bad-bg); opacity: 1; animation: shake .3s ease-in-out; }
.opt.bad .k { background: var(--bad); color: var(--surface); }
/* Micro-interactions (audit D7): a ring that fades out from the right answer, a 2 px shake of the wrong one, the
   card and the toast sliding in by 8 px. All off under prefers-reduced-motion (the rule above the top bar). */
@keyframes pulse-ok { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card.in { animation: slide-in .22s ease-out; }
.feedback { display: grid; gap: var(--s-3); margin-top: 1.25rem; min-height: 2.6rem; }
.callout { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); align-items: start; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: var(--r-s); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.callout.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.callout .c-sign { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: var(--t-sm); font-weight: 700; }
.callout.bad .c-sign { background: var(--bad); }
.callout b { font-family: var(--mono); font-size: var(--t-sm); letter-spacing: .02em; color: var(--ok); }
.callout.bad b { color: var(--bad); }
.callout .verdict { margin: 0; font-weight: 400; font-size: var(--t-sm); color: var(--ink); }
.cardactions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cardactions .spacer { flex: 1; }
.docboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.docbox { border: 1px solid var(--rule); border-radius: var(--r-s); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); }
.docbox .label { color: var(--info); font-weight: 700; display: block; margin-bottom: var(--s-1); }
.docbox p { margin: 0; } .docbox .sources { margin-top: var(--s-1); }
/* The instructor's review of the questions (#/przeglad, Faza 2 Q5): the answers as a list, not buttons; the author's
   question and the earlier reservation in framed notes above the question; the three marks under the explanation. */
.qrsum p { margin: 0 0 var(--s-2); }
.qrsubject { margin-top: var(--s-4); max-width: 34rem; }
.qrgroup { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--info); }
.qrcard .opt { cursor: default; }
.qrnote { border: 1px solid var(--rule); border-left: 4px solid var(--info); border-radius: var(--r-s); padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4); background: var(--surface-2); }
.qrnote.ask { border-left-color: var(--warn); }
.qrnote .label { display: block; color: var(--ink); margin-bottom: var(--s-1); }   /* mono: 500, as .label */
.qrnote p { margin: 0 0 var(--s-2); white-space: pre-wrap; } .qrnote p:last-child { margin-bottom: 0; }
.qrbank { margin-top: var(--s-3); }
.qractions .qrq { flex-basis: 100%; margin: 0 0 var(--s-1); font-weight: 700; }
.qranswer { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.qrdiff { margin-top: var(--s-3); }
.dlgsteps { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--s-2); }
.qrdiff summary { cursor: pointer; font-weight: 700; margin-bottom: var(--s-2); }
.qrchange p { margin: var(--s-1) 0 var(--s-3); white-space: pre-wrap; }
.qrchange ins { text-decoration: none; background: color-mix(in srgb, var(--ok) 24%, transparent); color: var(--ink); }
.qrchange del { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--ink); }
.qrchange .qrold { color: var(--muted); }
.qractions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.qrform { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.qrform fieldset { border: 0; margin: 0; padding: 0; }
.qrform legend { font-weight: 700; margin-bottom: var(--s-2); }
.qrareas { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.verdict { font-weight: 700; margin-right: auto; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); } .verdict.master { color: var(--ok); }
.explain { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); }
.explain .sources { font-size: var(--t-sm); color: var(--muted); }
.keys { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--faint); display: flex; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 560px) { .keys { display: none; } }   /* no keyboard on a phone (after the rule above, which sets display) */
.keys kbd { border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 .3rem; color: var(--muted); }
/* Touch screens without a mouse: keyboard shortcuts only take space. */
@media (hover: none) and (pointer: coarse) { .keys, .btn kbd, .kbdonly { display: none; } }
/* Fingers: targets of at least 44 px (WCAG 2.5.5; audit U8) — the mouse keeps the compact sizes. */
@media (pointer: coarse) {
  .navbtn, .iconbtn, .foldbtn { min-width: 44px; min-height: 44px; }
  .tabs a { min-height: 44px; }
  .foldbtn { width: 44px; height: 44px; margin-top: 0; }
  .toc { margin-left: calc(44px + .6rem); }
  .btn, .qnum, .toc button, .opt { min-height: 44px; }
  /* The sheet's tools stay as slim as the card's badges; the finger gets its 44 px from an invisible halo. */
  .sheethead .sh-tools .btn { min-height: 0; position: relative; }
  .sheethead .sh-tools .btn::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
  .dropmenu button { min-height: 44px; align-items: center; }
}
/* A phone: the sheet's tools in a bar at the bottom of the screen, under the thumb (the mock-up of 30.10.2026);
   the fixed "Dalej" moves up above it and the page gets room below the sheet. */
@media (max-width: 560px) {
  :root { --toolbar: 3.6rem; }
  .sheethead .sh-tools { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; height: calc(var(--toolbar) + env(safe-area-inset-bottom, 0px));
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); gap: var(--s-2);
    background: var(--surface); border-top: 1px solid var(--rule); }
  .sheethead .sh-tools .btn { flex: 1; min-width: 0; min-height: 0; justify-content: center; gap: .4rem; padding: 0 .4rem; font-size: var(--t-xs); letter-spacing: .02em; color: var(--ink); }
  .sheethead .sh-tools .btn::after { content: none; }
  .sheethead .sh-tools .btn.icon svg { display: block; }     /* the arrows and the gear; the two words have no room for icons */
  .sheethead .sh-tools .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheethead .sh-tools .btn.icon { flex: none; width: 44px; padding: 0; }
  .sheethead .sh-tools .drop { flex: 1; min-width: 0; display: flex; }
  .sheethead .sh-tools .dropmenu { top: auto; bottom: calc(100% + var(--s-2) + 4px); }
  .sheethead .sh-tools .barnav { display: inline-flex; }
  .sheethead .sh-tools .barnav[disabled] { opacity: .3; }
  .study .cardnav { display: none; }
  .sheethead .sh-tools .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
  .study { padding-bottom: calc(var(--toolbar) + env(safe-area-inset-bottom, 0px)); }
  .study #next { bottom: calc(var(--toolbar) + env(safe-area-inset-bottom, 0px) + .75rem); }
  /* The progress: a thin bar with the percent, one line under the strip. */
  .study .gauge { display: flex; align-items: center; gap: var(--s-3); padding: 0; border: 0; background: none; margin-bottom: var(--s-3) !important; }
  .study .gauge .g-label, .study .gauge .ruler, .study .gauge .tape, .study .gauge .g-read > span { display: none; }
  .study .gauge .g-tape { flex: 1; }
  .study .gauge .bar { height: 6px; border-radius: var(--r-s); }
  .study .gauge .g-read { display: block; }
  .study .gauge .g-read > b { font-size: var(--t-sm); font-weight: 700; }
  .study .gauge .g-read > b::after { content: none; }
}
/* The card's header band (audit D2, the procedure card): navy across the top, the briefing in a fixed order —
   subject code, subject, number, origin, legal status, state of the question — then the question below. */
.cardtop { display: flex; align-items: center; gap: var(--s-3); margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--s-4);
  padding: var(--s-2) var(--card-pad); background: var(--navy); color: var(--on-navy); border-radius: var(--r-l) var(--r-l) 0 0; }
.cardtop .cardmeta { flex: 1; margin-bottom: 0; min-height: 1.6rem; color: var(--on-navy-muted); }
.cardtop .subjname, .cardtop .origin { color: var(--on-navy); }
.cardtop .origin { border-color: var(--on-navy-muted); background: transparent; }
.cardtop .origin.piloteka { border-color: var(--on-navy-ok); color: var(--on-navy-ok); background: transparent; }
.cardtop .tag-new, .cardtop .notice.poprawione, .cardtop .qrgroup { color: var(--on-navy-info); }
.cardtop .tag-new { border: 1px solid var(--on-navy-info); padding: .1rem .4rem; border-radius: var(--r-s); font-family: var(--mono); font-weight: 500; }
.cardtop .tag-hard, .cardtop .notice { color: var(--on-navy-warn); }
.cardtop .tag-relearn { color: var(--on-navy-bad); }
.cardtop .pips i { border-color: var(--on-navy-ok); } .cardtop .pips i.on { background: var(--on-navy-ok); }
.cardtop .navbtn { border-color: var(--on-navy-muted); color: var(--on-navy); background: transparent; }
.card.past .cardtop { background: color-mix(in srgb, var(--navy) 78%, var(--info)); }
.cardnav { display: flex; gap: .3rem; flex: none; }
.navbtn { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: var(--r-m); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .12s, color .12s; }
@media (hover: hover) { .navbtn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); } }
.navbtn[disabled] { opacity: .3; cursor: default; }
.card.past { border-style: dashed; border-color: var(--info); }
.pastlabel { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--info); }
.pastnote { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--muted); }
/* The end of the day as an entry in a logbook (audit D2): the date in mono, ruled rows, numbers on the right. */
.done { padding: var(--s-2) 0 0; }
.logbook { max-width: 36rem; margin: 0 auto; }
.logbook .lbhead { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.logbook h2 { font-size: var(--t-lg); margin: var(--s-1) 0 var(--s-4); }
.logbook dl { margin: 0 0 var(--s-4); display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-4); }
.logbook dt, .logbook dd { margin: 0; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.logbook dd { font-family: var(--mono); text-align: right; }
.logbook .lbfoot { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-4); }
/* The sheet's frame (audit D2): the edition of the content and the version of the app, in the corner. */
.sheetnote { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-4) 0 0; padding-top: var(--s-2);
  border-top: 1px solid var(--rule); font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }

/* ---------- side stats */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; position: sticky; top: 76px; }   /* the column never wider than the screen, also with text at 200% (UX-019) */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.kpi b { display: block; font-family: var(--mono); font-size: var(--t-xl); font-weight: 500; }
.kpi span { font-size: var(--t-sm); color: var(--muted); }
.side .kpis { grid-template-columns: 1fr; gap: 0; }
.side .kpi { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.side .kpi:last-child { border-bottom: 0; }
.side .kpi span { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }
.subjrows { display: grid; }
.subjrows .row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-2); font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.subjrows .row:last-child { border-bottom: 0; }
.subjrows .row .code { background: transparent; color: inherit; padding: 0; }
.subjrows .row b { font-family: var(--mono); font-weight: 500; }
.subjrows .row.on { background: var(--accent); color: var(--accent-ink); margin: 0 calc(-1 * var(--s-2)); padding-inline: calc(2 * var(--s-2)); border-radius: var(--r-s); }
.side .panel { padding: var(--s-4); }
.subjbars { display: grid; gap: .6rem; }
.subjbars .row { display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.subjbars .row div:first-child { display: flex; justify-content: space-between; gap: var(--s-2); }

/* ---------- stats page */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.25rem; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tablewrap { overflow-x: auto; position: relative; }   /* a wide table scrolls inside its box, not the whole page on a phone
   (Konto: UX-003); relative, so a hidden header label (.sr, absolute) stays inside the box too */
table.t th { text-align: left; font-weight: 700; color: var(--muted); font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; padding: .4rem var(--s-2); border-bottom: 1px solid var(--line); }
table.t td { padding: .55rem var(--s-2); border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll { overflow-x: auto; }
/* The charts of the statistics (lib/barchart.js, audit D11): drawn at the width of the box, so labels stay 11px; a
   recessive grid, the hovered or focused day on a faint band, its readout over the bar; the exam day a dashed line. */
.chart { align-content: start; }   /* in a stretched panel the legend stays under its chart */
.chartbox { position: relative; border-radius: var(--r-s); }
.chartbox svg { display: block; max-width: 100%; touch-action: pan-y; }
.chart .axis { stroke: var(--rule); } .chart .grid { stroke: var(--line); }
.chart text { fill: var(--muted); font: 11px var(--mono); } .chart text.strong { fill: var(--ink); font-weight: 500; }
.chart .b-ok { fill: var(--ok); } .chart .b-bad { fill: var(--bad); opacity: .75; } .chart .b-plan { fill: var(--info); opacity: .8; }
.chart .hl { fill: var(--line); opacity: .6; } .chart .mark { stroke: var(--ink); stroke-dasharray: 3 3; }
.legend .b { background: var(--bad); opacity: .75; }
.charttip { position: absolute; pointer-events: none; display: grid; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 4px 8px;
  font-size: var(--t-xs); line-height: 1.35; white-space: nowrap; }
.charttip[hidden] { display: none; }
.charttip b { font-family: var(--mono); font-weight: 500; } .charttip span { color: var(--muted); }
.hard { display: grid; gap: var(--s-3); }
.hard li { list-style: none; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.hard ul { margin: 0; padding: 0; }
.hard .ans { color: var(--ok); font-size: var(--t-sm); margin-top: var(--s-1); }
/* The topics of the statistics (plan A2): name and counts on the left, "Ćwicz" on the right; one row a topic. */
.topics ul { margin: 0; padding: 0; }
.topics li { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.topics li[hidden] { display: none; }
.topics .t-name { display: grid; gap: 2px; min-width: 0; }
.topics .t-name span { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.topics .btn { flex: none; }
.topics .linkbtn { justify-self: start; }
/* The readiness for the exam (plan A3, ux-plan PD12): a subject a row — the band of the expected score first, the
   caveat by it, the mock exams and the ways to a new one and to the exam date under it. */
.readiness ul { margin: 0; padding: 0; }
.readiness li { list-style: none; display: grid; gap: var(--s-1); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.readiness li:last-child { border-bottom: 0; padding-bottom: 0; }
.readiness .estimate { margin: 0; font-size: var(--t-md); }
.readiness .exams { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
/* "Jak to liczymy": the way a number is counted, folded under it (UX-008). */
details.how > summary { cursor: pointer; color: var(--muted); font-size: var(--t-sm); width: fit-content; }
details.how[open] > summary { margin-bottom: var(--s-1); }
:is(.readiness, details.how) .hint { color: var(--muted); font-size: var(--t-sm); }
/* A table of a few numbers per row as a list on a phone: the column's name by each number (UX-008). */
@media (max-width: 560px) {
  table.aslist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.aslist tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  table.aslist td { display: flex; justify-content: space-between; gap: var(--s-2); padding: 0; border: 0; }
  table.aslist td:first-child { grid-column: 1 / -1; justify-content: flex-start; font-weight: 700; }
  table.aslist td[data-label]::before { content: attr(data-label); font-family: var(--font); color: var(--muted); }
}
/* Under a chapter of the theory: its questions as a temporary session (plan A2, audit N11). */
.prose .practice { margin: var(--s-4) 0 var(--s-5); }

/* ---------- exam */
.examhead { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.timer { font-family: var(--mono); font-size: var(--t-md); padding: var(--s-1) .6rem; border-radius: var(--r-m); background: var(--surface-2); }
.timer.low { color: var(--bad); background: var(--bad-bg); }
/* Exam: numbered list of the questions, filled when answered, as in the ULC system. */
.qlist { margin-top: var(--s-4); }
.qlist summary { cursor: pointer; color: var(--muted); font-size: var(--t-sm); padding: var(--s-2) 0; }
.qnums { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .35rem; padding-top: var(--s-2); }
.qnum { height: 2.4rem; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-family: var(--mono); font-size: var(--t-sm); cursor: pointer; }
.qnum.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.qnum.marked { box-shadow: inset 0 -4px 0 var(--warn); }
.qlegend { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); margin: var(--s-3) 0 0; }
.qlegend .qnum { display: inline-grid; place-items: center; width: 1.8rem; height: 1.6rem; cursor: default; }
.btn.markq[aria-pressed="true"] { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.qnum[aria-current] { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .qnum:hover { border-color: var(--accent); } }
.ulctable { max-width: 520px; }
.ulctable tfoot td { font-weight: 700; border-bottom: 0; }
/* Exam dates in Konto, one per subject (audit N1, plan 3.3): the subject and its date in a row. */
.examdates { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: center; max-width: 520px; }
.examdates label { font-weight: 400; }
.result { display: grid; gap: var(--s-2); }
.result .row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 4rem; gap: var(--s-3); align-items: center; }
.passbar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.passbar span { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); }
.passbar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--pass); width: 2px; background: var(--ink); }
.verdictbig { font-size: var(--t-xl); font-weight: 700; }
.verdictbig.ok { color: var(--ok); } .verdictbig.bad { color: var(--bad); }
.reviewlist { display: grid; gap: var(--s-4); }
.reviewlist .item { padding: var(--s-4) 1.25rem; }
.reviewlist .item.flash { outline: 2px solid var(--accent); outline-offset: 2px; }
.reviewlist ol { margin: var(--s-2) 0 0; padding-left: 1.25rem; }
.reviewlist li.c { color: var(--ok); font-weight: 700; }
.reviewlist li.w { color: var(--bad); text-decoration: line-through; }

/* ---------- question search (wyszukiwarka-plan): the form, the subjects with their counts, the cards of the results */
.searchform { display: flex; gap: var(--s-2); align-items: center; }
.searchform .input { flex: 1; max-width: none; min-width: 0; }
.schips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.schip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-family: var(--mono); font-weight: 500; cursor: pointer; }
.schip .count { color: var(--muted); font-weight: 400; }
.schip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.schip[aria-pressed="true"] .count { color: inherit; }
@media (pointer: coarse) { .schip { min-height: 44px; } }
.ssummary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ssummary p { margin: 0; }
.sstatus { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sstatus.new { color: var(--info); }
.sstatus.mastered { color: var(--ok); }
.searchpage .sq { outline: none; }
.searchpage mark.hit { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: var(--r-s); padding: 0 .05em; }
.sactions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }

/* ---------- theory */
.theory { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 860px) { .theory { grid-template-columns: minmax(0, 1fr); } }
.doclist { display: grid; gap: .1rem; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto;
  align-content: start; overscroll-behavior: contain; }
.doclist a { display: block; padding: .3rem .6rem; border-radius: var(--r-m); color: var(--ink); text-decoration: none; line-height: 1.3; }
@media (hover: hover) { .doclist a:hover { background: var(--surface-2); } }
.doclist.more { mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); }
.doclist a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.doclist small { display: block; color: var(--muted); font-weight: 400; font-size: var(--t-xs); }
/* Each document folds out its chapters with the arrow beside it; in the open one the chapter being read is marked. */
.docrow { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
.foldbtn { width: 26px; height: 28px; margin-top: .1rem; display: grid; place-items: center; border: 0; border-radius: var(--r-m);
  background: none; color: var(--muted); cursor: pointer; }
.foldbtn svg { transition: transform .15s; }
.foldbtn[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (hover: hover) { .foldbtn:hover { background: var(--surface-2); color: var(--ink); } }
.toc { list-style: none; margin: .15rem 0 .5rem calc(26px + .6rem); padding: 0 0 0 var(--s-2); border-left: 2px solid var(--line); display: grid; gap: .05rem; }
.toc button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .3rem var(--s-2); border-radius: var(--r-m);
  color: var(--muted); font-size: var(--t-sm); line-height: 1.3; cursor: pointer; }
.toc button[aria-current] { color: var(--accent); font-weight: 700; }
@media (hover: hover) { .toc button:hover { background: var(--surface-2); color: var(--ink); } }
.docmain { min-width: 0; }
.doctools { display: grid; gap: var(--s-3); margin-bottom: 1.25rem; max-width: 75ch; }
.backq { justify-self: start; padding-inline: .6rem; }
.docsearch { display: flex; gap: .4rem; align-items: center; }
.docsearch .input { flex: 1; max-width: none; }
.docsearch .count { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.docsearch .iconbtn[disabled] { opacity: .4; cursor: default; }
/* Wide screens: the search stays in reach under the top bar while reading. */
.docbar { position: sticky; top: 59px; z-index: 5; background: var(--bg); padding: var(--s-2) 0; margin: -.5rem 0 var(--s-3);
  display: grid; gap: var(--s-2); max-width: 75ch; }
.prose mark.hit { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: var(--r-s); }
.prose mark.hit.current { background: var(--warn); color: var(--bg); }
.prose :is(h2, h3) { scroll-margin-top: 7rem; }
/* Narrow screens: drop-downs instead of the lists, so the document starts right below them. */
.docpick { display: none; }
.docpick select { max-width: none; }
@media (max-width: 860px) {
  .theory { gap: 1.25rem; }
  .doclist { display: none; }
  .docpick:not([hidden]) { display: grid; gap: .35rem; }
  /* In the bar the chapter drop-down speaks for itself, and the bar stays two rows high. */
  .docbar { top: 57px; gap: .4rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
  .docbar .label { display: none; }
  .docbar .input { padding-block: .45rem; }
  .prose :is(h2, h3) { scroll-margin-top: 4.5rem; }
}
/* Reading on a phone (UX-021): both bars go up while reading down (theory.js, body.barsaway) and come back on the way
   up; a bar that holds the focus stays. In a low window (a phone held sideways) the document's bar does not stick:
   only the top bar comes back, at most ~17% of 390 px. */
@media (max-width: 860px), (max-height: 500px) {
  .topbar { transition: transform .2s ease; }
  body.barsaway .topbar:not(:focus-within) { transform: translateY(-100%); }
}
@media (max-width: 860px) and (min-height: 501px) {
  .docbar { transition: transform .2s ease, top .2s ease; }
  body.barsaway .docbar { top: 0; }
  body.barsaway .docbar:not(:focus-within) { transform: translateY(-100%); }
}
@media (max-height: 500px) { .docbar { position: static; } }
.prose { max-width: 75ch; }
.prose h1 { font-size: var(--t-2xl); margin: 0 0 var(--s-4); }
.prose h2 { font-size: var(--t-lg); margin: 2.25rem 0 var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.prose h3 { font-size: var(--t-md); margin: 1.75rem 0 var(--s-2); }
.prose h4 { font-size: var(--t-md); margin: 1.25rem 0 var(--s-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 .9rem; }
.prose li { margin: .2rem 0; }
.prose blockquote { margin: var(--s-4) 0; padding: var(--s-2) var(--s-4); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-m) var(--r-m) 0; }
.prose pre { background: var(--surface-2); padding: .9rem var(--s-4); border-radius: var(--r-m); overflow-x: auto; font-size: var(--t-sm); }
.prose code { background: var(--surface-2); padding: .05rem .3rem; border-radius: var(--r-s); }
.prose figure { margin: 1.25rem 0 var(--s-5); }
.prose figure a { display: block; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: var(--r-l); border: 1px solid var(--line); }
.prose figcaption { font-size: var(--t-sm); color: var(--muted); margin-top: .4rem; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
.prose table { border-collapse: collapse; font-size: var(--t-sm); margin: 0 0 var(--s-4); }
.prose .tablewrap { overflow-x: auto; margin: 0 0 var(--s-4); --cover: var(--bg); --edge: color-mix(in srgb, var(--ink) 30%, transparent);
  /* A shadow at the edge that still has columns behind it, so a cut table shows it scrolls sideways. */
  background:
    linear-gradient(to right, var(--cover) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--cover) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge), transparent) left / .8rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) right / .8rem 100% no-repeat scroll; }
.explain .tablewrap, .card .tablewrap { --cover: var(--surface); }
.prose th, .prose td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); }
.nobr { white-space: nowrap; }
.qref { font-family: var(--mono); font-size: .8em; padding: 0 .3rem; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--accent); cursor: pointer; }
@media (hover: hover) { .qref:hover { border-color: var(--accent); } }

/* ---------- messages from the administrator (ppl/messages): one card, in the window and in the list „Wiadomości” */
.msgcard h2 { font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.msgcard .cardmeta time { font-family: var(--mono); }
.msgbody { max-width: none; }
.msgbody > :last-child { margin-bottom: 0; }
.msgcard footer { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
.msglist { display: grid; gap: var(--s-4); max-width: 75ch; }
.msgpick { max-height: 18rem; overflow-y: auto; display: grid; gap: .4rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-m); background: var(--surface); }
.msgpick .check { overflow-wrap: anywhere; }
dialog.msgdlg { width: min(580px, 94vw); border: 0; background: transparent; }
.msgdlg .msgcard { max-height: 88vh; overflow-y: auto; }

/* ---------- dialog, popover, toast */
dialog { border: 1px solid var(--line); border-radius: var(--r-l); padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); width: min(640px, 94vw); }
dialog::backdrop { background: rgba(8, 14, 20, .45); }
.dlg { padding: var(--s-5); display: grid; gap: 1.25rem; }
.dlg footer { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.dlg > * { min-width: 0; }
.dlg p { margin: 0; line-height: 1.5; }
dialog.confirm { width: min(460px, 94vw); }
.dlg .btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 700; }
@media (hover: hover) { .dlg .btn.danger:hover { filter: brightness(1.08); } }
.pop { position: fixed; z-index: 30; max-width: min(460px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: var(--s-4) 1.1rem; font-size: var(--t-sm); }
.pop .ans { color: var(--ok); font-weight: 700; margin-top: var(--s-2); }
/* the thin bar under the top edge while a request takes longer than a blink (api.js) */
/* The screen on view while the next one keeps the user waiting (main.js, stage). */
.stale { opacity: .45; pointer-events: none; transition: opacity .2s ease; }
.busy { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60; pointer-events: none; overflow: hidden; }
.busy::after { content: ""; display: block; height: 100%; width: 35%; background: var(--accent); animation: busy 1.1s ease-in-out infinite; }
@keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .busy::after { animation: none; width: 100%; opacity: .6; } }
#toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 40; }
/* No connection, or an answer being sent again (api.js connection()): a strip along the bottom edge; the toast moves up. */
.offline { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: var(--s-2) var(--s-4); text-align: center; font-size: var(--t-sm);
  font-weight: 600; color: var(--ink); background: var(--warn-bg); border-top: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
body:has(.offline:not([hidden])) #toast { bottom: 3.6rem; }
/* Access and plan (views/plan.js), the terms (views/terms.js), the documents (views/legal.js). */
.warn { color: var(--warn); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.plan h2 { margin-top: 0; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.plan ul { margin: 0 0 var(--s-4); padding-left: 1.2rem; color: var(--muted); font-size: var(--t-sm); }
.prices { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.price { display: grid; } .price b { font-size: var(--t-xl); font-family: var(--mono); } .price span { color: var(--muted); font-size: var(--t-sm); }
.trialbar { margin-bottom: var(--s-4); display: grid; gap: var(--s-2); }
.trialhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.trialhead a { margin-left: auto; }
.trialmarks { display: flex; gap: 4px; }
.trialmarks i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface-2); }
.trialmarks i.on { background: var(--ok); border-color: var(--ok); }
.trialnote { margin: 0; }
.lockedlist ul { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-1); }
.lockedlist li { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.lockedlist li .num { margin-left: auto; }
.lockedlist .hint { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.trialsum { display: grid; gap: var(--s-3); }
.trialsum h2, .trialsum p { margin: 0; }
.trialsum .hint { color: var(--muted); font-size: var(--t-sm); }
.trialkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-3); }
.trialkpis .kpi { display: grid; }
.trialkpis .kpi b { font-size: var(--t-xl); }
.trialkpis .kpi span { color: var(--muted); font-size: var(--t-sm); }
.trialcal { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.trialcal i { flex: 1; min-width: 0; background: var(--accent); }
.buyform { display: grid; gap: var(--s-4); }
.buyform h2 { margin: 0; }
.buyform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.buyform legend { font-weight: 700; padding: 0; margin-bottom: var(--s-2); }
.buyform .hint { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.buyform .bad { margin: 0; }
.buysum { padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: var(--s-2); }
.buysum p { margin: 0; }
.paynote { white-space: pre-wrap; font-family: var(--mono); font-size: var(--t-sm); background: var(--surface-2, var(--bg)); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); border: 1px solid var(--line); }
.accesstip { margin: 0 0 var(--s-4); }
.legal { max-width: 760px; margin: 0 auto; }
.termscard .check { margin: var(--s-2) 0; }
.rowactions { display: flex; flex-wrap: wrap; gap: var(--s-1); min-width: 15rem; }
#toast div { background: var(--ink); color: var(--bg); padding: .6rem var(--s-4); border-radius: var(--r-m); box-shadow: var(--shadow); font-size: var(--t-sm); animation: slide-in .2s ease-out; }
.tip { font-size: var(--t-sm); color: var(--muted); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.tip b { color: var(--warn); }
.field > .segmented, .field > .quick, .field > div > .stepper { justify-self: start; }
.segmented { justify-self: start; }
.card:focus { outline: none; }
.status { display: inline-block; font-size: var(--t-sm); font-weight: 700; letter-spacing: .03em; padding: .2rem .55rem; border-radius: var(--r-m); margin: 0 0 var(--s-3); }
.status.ok { color: var(--ok); background: var(--ok-bg); }
.status.warn { color: var(--warn); background: var(--warn-bg); }
.status.muted { color: var(--muted); background: var(--surface-2); }
.status.bad { color: var(--bad); background: var(--bad-bg); }
.status.rev { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.status.extra { display: block; color: var(--ink); border: 1px solid var(--line); background: var(--surface-2); }

/* ---------- accounts: sign-in, account, administration */
.iconbtn.acct { text-decoration: none; color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  font-weight: 700; border-radius: 50%; }
.iconbtn.acct[aria-current] { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.authpage { display: grid; place-items: center; min-height: 70vh; padding: var(--s-4); }
.authcard { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: var(--s-6); box-shadow: var(--shadow); display: grid; gap: var(--s-4); }
.authcard h1 { margin: 0; }
.authcard p { margin: 0; }
.authbrand { margin-bottom: var(--s-2); }
.authlogo { display: flex; justify-content: center; margin: -.25rem 0 var(--s-1); }
.authlogo svg { height: 52px; width: auto; aspect-ratio: 62 / 22.5; }
.authform { display: grid; gap: .6rem; }
.authform label { font-weight: 700; }
.authform .input { max-width: none; }
.authform .hint { color: var(--muted); font-size: var(--t-sm); }
.googlebtn { display: flex; align-items: center; justify-content: center; gap: .6rem; text-decoration: none; color: var(--ink);
  background: var(--surface); }
.googlebtn svg { width: 20px; height: 20px; }
.author { display: flex; align-items: center; gap: var(--s-3); color: var(--faint); font-size: var(--t-sm); }
.author::before, .author::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.bad { color: var(--bad); }
.inline { display: flex; gap: var(--s-2); align-items: center; }
.inline.wrap { flex-wrap: wrap; margin: var(--s-3) 0; }
/* Allow-list form: fields with their labels above, the button level with the inputs. */
.addform { align-items: end; }
.addform .field { gap: .3rem; flex: 1 1 14rem; max-width: 320px; }
.inline .input { max-width: 320px; }
.dangerzone { padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ---------- radio trainer: the exercise with the COM radio beside it, the debrief */
.radio { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
.radiomain { display: grid; gap: var(--s-4); min-width: 0; }
.radioside { display: grid; gap: var(--s-4); position: sticky; top: 76px; }
.radiohead { margin: var(--s-6) 0 var(--s-3); }
.radionote { margin-top: var(--s-5); color: var(--muted); font-size: var(--t-sm); }
.levels { flex-wrap: wrap; justify-content: flex-end; }
.levels .btn.adminopen { border-style: dashed; }
.progressline { margin: var(--s-2) 0 var(--s-4); }
.duelist { display: grid; gap: var(--s-3); }
.duerow { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; }
.duerow .meta { color: var(--muted); font-size: var(--t-sm); }
/* ---------- radio: review of the judgements and metrics (#/admin/oceny) */
.metricshead { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kpis.kpis4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: var(--s-3) 0; }
/* The administrator's panel: the side menu (views/adminNav.js) beside the screen; narrower, folded under a button. */
main:has(.adminpage) { max-width: 1440px; }
.adminpage { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.admincontent { min-width: 0; }
.adminnav { position: sticky; top: 4.5rem; }
.adminnav-toggle { display: none; }
.adminmenu { display: grid; gap: var(--s-4); }
.admincontent .hint { color: var(--muted); font-size: var(--t-sm); }
.adminmenu-title { margin: 0; font-weight: 700; font-size: var(--t-lg); }
.admingroup { display: grid; gap: 2px; }
.admingroup-name { margin: 0 0 var(--s-1); padding: 0 var(--s-3); font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.admingroup a { display: flex; align-items: center; min-height: 36px; padding: .3rem var(--s-3); border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.admingroup a[aria-current="page"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; }
@media (hover: hover) { .admingroup a:hover { background: var(--surface-2); } }
@media (max-width: 900px) {
  .adminpage { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .adminnav { position: static; }
  .adminnav-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: 44px; padding: .4rem var(--s-3);
    text-align: left; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; }
  .adminnav-toggle .muted { font-weight: 400; }
  .adminnav-toggle svg { flex: none; }
  .adminnav.open .adminnav-toggle svg { transform: rotate(180deg); }
  .adminmenu { display: none; margin-top: var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
  .adminnav.open .adminmenu { display: grid; }
  .adminmenu-title { display: none; }
  .admingroup a { min-height: 44px; }
}
.addform + details.how { margin-top: var(--s-3); }
/* "Dostęp i konta": one row for each person; what can be done with it unfolds under the row. */
.peoplebar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: var(--s-3) 0; }
.peoplebar .input { flex: 1 1 14rem; max-width: 22rem; }
.people .person td:first-child { min-width: 11rem; }
.personname { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 24px; text-align: left; overflow-wrap: anywhere; }
.personname svg { flex: none; }
.personname[aria-expanded="true"] svg { transform: rotate(180deg); }
.persondetail td { background: var(--surface-2); }
.persongroups { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-2); }
.persongroups .label { display: block; margin-bottom: var(--s-1); }
.persongroups .rowactions { min-width: 0; }
.narrowonly { display: none; }
@media (max-width: 600px) {
  .people .wide { display: none; }
  .people .narrowonly { display: inline; }
}
/* What each mark of an account gives, once, above the table of marks. */
.marklegend { margin: 0 0 var(--s-4); padding-left: 1.1rem; max-width: 80ch; font-size: var(--t-sm); color: var(--muted); }
.marklegend b { color: var(--ink); }
/* The administrator's overview (audit S14): groups of tiles and a strip of bars, one per day. */
.overview h2 { font-size: var(--t-sm); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 0; }
.overview h2:first-of-type { margin-top: 0; }
.attention { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--r-l); padding: .7rem var(--s-4); margin: 0 0 var(--s-5); font-size: var(--t-sm); background: var(--surface); }
.attention.warn { border-left-color: var(--warn); }
.attention.bad { border-left-color: var(--bad); }
.attention ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.attention li.bad { color: var(--bad); }
.attention li.warn { color: var(--warn); }
.attention li a { color: inherit; white-space: nowrap; }
.overview .kpi b { font-size: var(--t-lg); }
.overview .kpi.warn b { color: var(--warn); }
.overview .kpi.bad b { color: var(--bad); }
a.kpi { color: inherit; text-decoration: none; }
a.kpi span { text-decoration: underline; }
.daybars { display: flex; gap: 4px; align-items: flex-end; height: 72px; margin: var(--s-1) 0 var(--s-2); }
.daybar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.daybar span { display: block; width: 100%; min-height: 2px; background: var(--accent); border-radius: var(--r-s) var(--r-s) 0 0; }
.daybar em { font-style: normal; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
.inlinelist { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem var(--s-4); padding: 0; margin: var(--s-1) 0 var(--s-3); }
.reviewitem p { margin: .4rem 0; }
.reviewitem .flagnote { background: var(--warn-bg); color: var(--warn); padding: .4rem .6rem; border-radius: var(--r-m); }
.reviewitem .secondvoice { border-left: 3px solid var(--accent); padding: .2rem .6rem; }
.reviewitem .nowjudge { border-left: 3px solid var(--info); padding: .2rem .6rem; }
.reviewitem .nowjudge p { margin: .3rem 0; }
.tempo { margin: .3rem 0 0; font-size: var(--t-sm); color: var(--muted); }
.tempo .label { margin-right: .3rem; }
.tempo.good b { color: var(--ok); }
.tempo.fast { color: var(--warn); }
.tempo.fast b { color: var(--warn); }
.rejudge p { margin: .3rem 0; }
.unsure { text-decoration: underline wavy var(--warn); text-underline-offset: 3px; }
.unsure sup { color: var(--warn); font-weight: 700; margin-left: 1px; }
.reviewhelp summary { cursor: pointer; }
.reviewhelp p { margin: var(--s-2) 0; max-width: 85ch; }
.reviewhelp .defs { list-style: none; padding: 0; margin: var(--s-2) 0; display: grid; gap: .3rem; }
.causes { border: 0; padding: 0; margin: var(--s-2) 0 0; display: flex; gap: .4rem var(--s-4); flex-wrap: wrap; align-items: center; }
.causes legend { width: 100%; margin-bottom: var(--s-1); }
.reviewform { align-items: end; margin-top: var(--s-3); }
.reviewform .field.grow { flex: 1 1 220px; }
.b4ok { color: var(--ok); font-weight: 700; }
.b4bad { color: var(--bad); }
.briefing p { margin: .35rem 0 0; max-width: 70ch; }
.com { background: var(--surface-2); }
.comrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2); align-items: end; margin-top: .4rem; }
.comlbl { display: block; font-size: var(--t-xs); color: var(--muted); margin-bottom: .2rem; }
.comfreq { display: block; font-size: var(--t-xl); font-weight: 500; color: var(--ok); padding: .3rem 0; }
.comin { font-size: var(--t-md); padding: .35rem var(--s-2); max-width: 7.5rem; }
.com .btn { padding: .45rem .7rem; font-size: var(--t-md); }
.com .hint { margin: .6rem 0 0; font-size: var(--t-sm); color: var(--muted); }
.docs summary { cursor: pointer; }
.docs p { margin: .6rem 0; font-size: var(--t-sm); }
.docs .hint { font-size: var(--t-sm); color: var(--muted); }
.regionbox { margin-top: .9rem; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.regionmap { display: block; margin: .6rem 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: #fff; }
.regionmap img, .regionmap svg { display: block; width: 100%; height: auto; }   /* inline SVG: the map in the page's theme (D8) */
.regionbox div.points { margin-top: .7rem; }
.regionbox ul.points { margin: var(--s-1) 0 0; padding-left: 1.1rem; }
.regionbox ul.points li { margin: .15rem 0; }
.regionbox .nowrap { white-space: nowrap; }
.radiolog { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: .6rem; }
.radiolog .empty-log { padding: var(--s-2) 0; }
/* an exercise the station opens: it waits for "Start" (D46) */
.radiostart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-3);
  border-top: 1px dashed var(--line); }
.radiostart p { flex: 1 1 18rem; margin: 0; max-width: 70ch; }
.tx { padding: .6rem .8rem; border-radius: var(--r-l); border: 1px solid var(--line); max-width: 52rem; }
.tx.station { background: var(--surface-2); }
.tx.pilot { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tx.uncounted { opacity: .7; border-style: dashed; }
.txwho { font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.txtext { margin-top: .15rem; overflow-wrap: anywhere; }
.hintline { padding: .6rem .8rem; border-left: 3px solid var(--info); background: color-mix(in srgb, var(--info) 10%, transparent);
  border-radius: 0 var(--r-m) var(--r-m) 0; font-size: var(--t-sm); }
.sysline { color: var(--muted); font-size: var(--t-sm); font-style: italic; }
.notes { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: var(--t-sm); }
.notes li { padding-left: .6rem; border-left: 3px solid var(--line); }
.notes li b { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; margin-right: var(--s-1); }
.notes .critical { border-color: var(--bad); } .notes .critical b { color: var(--bad); }
.notes .advice { border-color: var(--warn); } .notes .advice b { color: var(--warn); }
.notes .unclear b, .notes .info b, .notes .silence b { color: var(--muted); }
.notes .src { color: var(--faint); font-size: var(--t-sm); }
.txform { display: grid; gap: .4rem; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.txform .input { max-width: none; font-family: var(--mono); font-size: var(--t-md); }
.txfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.txfoot .hint { color: var(--faint); font-size: var(--t-sm); }
.txfoot kbd { border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 .3rem; }
.vbadge { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem var(--s-2); border-radius: var(--r-s); }
.vbadge.ok { background: var(--ok-bg); color: var(--ok); }
.vbadge.warn { background: var(--warn-bg); color: var(--warn); }
.vbadge.bad { background: var(--bad-bg); color: var(--bad); }
.vbadge.muted { background: var(--surface-2); color: var(--muted); }
.debriefhead { margin-bottom: var(--s-4); }
.debriefhead .vbadge { font-size: var(--t-sm); }
.debriefhead p { margin: .6rem 0 0; }
.debriefhead .hint { color: var(--muted); font-size: var(--t-sm); }
.stepcard .label { margin-top: var(--s-4); }
.stepcard .model { margin: .35rem 0 0; font-weight: 500; }
.stepcard .hint { margin: .3rem 0 0; color: var(--muted); font-size: var(--t-sm); }
.flagbtn { margin-top: .35rem; padding: var(--s-1) var(--s-2); font-size: var(--t-sm); }
.debrief { margin-bottom: var(--s-4); }
/* the microphone test on the list (R2.1) */
.mictest { margin-top: var(--s-6); }
.mictest summary { cursor: pointer; }
.mictest > p { margin: .6rem 0; max-width: 70ch; }
.mictest .bad { color: var(--bad); }
.mictest .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.microw { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: .9rem 0; }
.meter { flex: 1 1 160px; min-width: 120px; max-width: 360px; height: 12px; border-radius: var(--r-m); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); }
.meterbar { height: 100%; width: 0; background: var(--ok); transition: width .05s linear; }
.meterbar[data-zone="hot"] { background: var(--warn); }
.meterbar[data-zone="clip"] { background: var(--bad); }
.mictime { min-width: 3.5rem; color: var(--muted); }
/* PTT: held with a finger or the mouse — no scrolling, selecting or long-press menu while held (R2.2) */
.ptt { min-width: 7.5rem; padding-block: .75rem; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font-family: var(--font); font-size: var(--t-md); text-transform: none; letter-spacing: 0; }   /* the PTT is a control, not a label: the body's type */
.ptt.on { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.ptt.waiting { opacity: .65; }
.micverdict { margin-bottom: var(--s-3); }
/* the exercise answered by voice (R2.14): the radio's switch in COM, the PTT under the channel, writing folded away */
.radioinput { margin: 0 0 1.25rem; display: grid; gap: .4rem; }
.radioinput .hint { margin: 0; color: var(--muted); font-size: var(--t-sm); max-width: 70ch; }
.comhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.com .compower { font-size: var(--t-sm); padding: .3rem .6rem; }
.com .compower[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }
.voicebox { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.voicebox .microw { margin: var(--s-2) 0; }
.voicebox .hint { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.voicebox .hint.bad { color: var(--bad); }
.txalt { margin-top: .9rem; }
.txalt summary { cursor: pointer; color: var(--muted); font-size: var(--t-sm); }
.txalt .txform { margin-top: var(--s-2); }
.txnote { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-sm); }
.tx.pending { border-style: dashed; }
.playbtn { margin-top: .35rem; padding: var(--s-1) var(--s-2); font-size: var(--t-sm); }
/* the station's voice (R3.4): on or off, the listening level, the volume — in COM; a line heard again */
.comvoice { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem var(--s-3); margin-top: var(--s-3);
  padding-top: .65rem; border-top: 1px dashed var(--line); font-size: var(--t-sm); }
.comvoice .check { margin: 0; align-items: center; }
.comvoice .check input { margin: 0; }
.com .comvoice select.input { width: auto; padding: var(--s-1) .4rem; font-size: var(--t-sm); }
.comvoice .volbox { flex: 1 1 100%; display: flex; align-items: center; gap: var(--s-2); }
.comvoice .vol { flex: 1; min-width: 4rem; accent-color: var(--accent); }
.txveil { margin-top: var(--s-1); }
.txreveal { padding: var(--s-1) var(--s-2); font-size: var(--t-sm); }
.txlisten { margin: var(--s-1) 0 var(--s-2); }
.revealnote { margin: 0 0 var(--s-2); }
.txwho .sayagain, .stepcard .label .sayagain { margin-left: .4rem; padding: .1rem .55rem; font-size: var(--t-xs); line-height: 1.4; vertical-align: 1px;
  border-color: var(--line); }
/* the consent to recordings (ptt-plan/nagrania.md): before the first exercise by voice, and in Konto */
.consent h2 { margin: 0; font-size: var(--t-lg); }
.consenttext { max-height: 50vh; overflow-y: auto; font-size: var(--t-sm); }
.consenttext p { margin: 0 0 .6rem; }
.rules summary { cursor: pointer; color: var(--muted); font-size: var(--t-sm); }
.rules p { margin: .4rem 0; font-size: var(--t-sm); max-width: 70ch; }
[data-recs] .inline { margin-top: var(--s-2); }
/* test recordings (R2.9): the speaker's card and the administrator's labeling */
.samplehead { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.samplecard .label { margin-top: .9rem; }
.samplecard p { margin: .3rem 0; }
.sayit { font-size: var(--t-lg); font-weight: 500; line-height: 1.5; }
.howtip { padding: var(--s-2) var(--s-3); border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: var(--t-sm); }
.samplenav { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.samplelist summary { cursor: pointer; }
.samplelist ol { margin: .6rem 0 0; padding-left: 1.4rem; display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.samplelist li.current { font-weight: 700; }
.samplelist .ok { color: var(--ok); margin-left: .3rem; }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--info); text-align: left;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.labelform { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.labelform audio { width: 100%; max-width: 480px; }
.labelform p { margin: 0; }
.labelform .elements select { max-width: 12rem; }
.samplestable tr.current td { background: var(--accent-soft); }
.notes .ok { border-color: var(--ok); }
.mictable { max-width: 28rem; margin: var(--s-2) 0; }
.mictable td.num { text-align: right; white-space: nowrap; }
.micopts { margin-top: .9rem; }
.micopts summary { cursor: pointer; color: var(--muted); font-size: var(--t-sm); }
.micopts .check { margin: .35rem 0; }
@media (max-width: 480px) {
  .topbar .brand span { display: none; }
  .topbar .brand svg { height: 21px; }
  .topbar .lic { display: none; }
  .tabs a { padding: 0 var(--s-2); }
}
/* Phones: a shorter study card, so the answers start higher. */
@media (max-width: 600px) {
  .studyhead { flex-wrap: nowrap; margin-bottom: var(--s-2); }
  .studyhead h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .headbtns { flex-wrap: nowrap; }
  .headbtns .btn { padding: .45rem .6rem; }
  #progress { margin-bottom: .9rem !important; }
  #progress .legend { display: none; }
  .cardtop { margin-bottom: var(--s-3); }
  .qtext { margin-bottom: 1.1rem; }
  .opt { grid-template-columns: 1.6rem 1fr auto; gap: .6rem; padding: .7rem var(--s-3); }
  /* After answering, "Dalej" stays in reach while the explanation is read. */
  #next { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 20;
    padding: .85rem var(--s-5); box-shadow: var(--shadow); }
  main:has(#next) { padding-bottom: 6rem; }
  .prose table { font-size: var(--t-sm); }
  .prose th, .prose td { padding: .35rem var(--s-2); }
}
/* Phones: the radio above what is heard, the transmission field right under it; the title of an exercise wraps
   (the study screen keeps its title on one line, see above). */
@media (max-width: 860px) {
  .radio { grid-template-columns: minmax(0, 1fr); }
  .radioside { position: static; order: -1; }
  .srow .levels { justify-content: flex-start; }
}
.radiotop > div:first-child { min-width: 0; }
@media (max-width: 600px) {
  .studyhead.radiotop { flex-wrap: wrap; }
  .studyhead.radiotop h1 { white-space: normal; overflow: visible; }
  .radiotop .headbtns { margin-left: auto; }
  .stepcard .model { font-size: var(--t-sm); }
}

/* ---------- emergency procedures: the list, the exercise (tap actions into order) and the debrief */
.procdoc h2 { margin: 0; }
.procsrc { margin: .35rem 0 0; font-size: var(--t-sm); color: var(--muted); }
.procnote { margin-top: .6rem; font-size: var(--t-sm); }
.procnote summary, .procsup summary, .flagbox summary, .why summary { cursor: pointer; }
.procnote p { margin: var(--s-2) 0 0; max-width: 75ch; }
.procopts { display: grid; gap: var(--s-4); margin: var(--s-4) 0; }
.procsup .check { margin-top: .4rem; font-weight: 400; }
.flabel { font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; }
.procrow .meta + .meta { margin-top: var(--s-1); }
.disclaimer p { max-width: 70ch; }
.disclaimer .actions { margin-top: var(--s-4); }
.prochead { margin-bottom: 0; }
.prochead h1 { margin: .2rem 0 0; }
.procback { margin: 0; font-size: var(--t-sm); }
.procex, .procwork { display: grid; gap: var(--s-4); min-width: 0; }
.procwork[hidden] { display: none; }
.recallbox p { margin: .35rem 0 .8rem; max-width: 70ch; }
.recallbox .actions { display: flex; gap: var(--s-3); align-items: center; }
.situation p { margin: .35rem 0 0; max-width: 70ch; }
.indications { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.indications li { background: var(--surface-2); border-radius: var(--r-m); padding: .2rem var(--s-2); }
.annunciators { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.annun { font-family: var(--mono); font-weight: 500; font-size: var(--t-sm); padding: .2rem var(--s-2); border-radius: var(--r-s);
  background: var(--bad-bg); color: var(--bad); }
.picked, .dlist { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: .4rem; }
.picked li { display: flex; gap: .4rem; align-items: stretch; min-width: 0; }
.pstep, .pact { font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-height: 44px; min-width: 0;
  border-radius: var(--r-m); padding: var(--s-2) .7rem; }
.pstep { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); }
.pstep[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pstep .pn { grid-row: span 2; }
.pn { color: var(--muted); font-size: var(--t-sm); }
.ptext { overflow-wrap: anywhere; }
.plabel { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); overflow-wrap: anywhere; }
.pctl { display: flex; gap: .3rem; align-items: stretch; }
.pctl .btn { min-width: 44px; padding: .3rem var(--s-2); }
.emptyhint { color: var(--muted); font-size: var(--t-sm); padding: .3rem 0; }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-2); margin-top: .6rem; }
.pact { display: grid; gap: .1rem; background: var(--surface-2); border: 1px dashed var(--faint); }
@media (hover: hover) { .pact:hover, .pstep:hover { border-color: var(--accent); } }
.procfoot { position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3) 0 var(--s-4);
  background: linear-gradient(transparent, var(--bg) 35%); }
.procdebrief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.dstep { display: flex; gap: .55rem; align-items: baseline; }
.dstep > div { min-width: 0; }
.pmark { flex: none; width: 1.4rem; text-align: center; font-weight: 700; }
.pmark.ok { color: var(--ok); } .pmark.warn { color: var(--warn); } .pmark.bad { color: var(--bad); }
.stagehead { margin-top: .4rem; font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.why { font-size: var(--t-sm); color: var(--muted); margin-top: .2rem; }
.why p { margin: var(--s-1) 0 0; }
.flagbox textarea { width: 100%; max-width: none; margin: var(--s-2) 0; }
@media (max-width: 760px) { .procdebrief { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pool { grid-template-columns: minmax(0, 1fr); }
  .procfoot .btn.primary { flex: 1; }
  .picked li { flex-wrap: wrap; }                          /* the buttons of a selected step go under it */
  .pctl { flex: 1 0 100%; justify-content: flex-end; }
}

/* Aviation English trainer (views/english.js) */
.eng-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.eng-disclaimer { max-width: 75ch; }
.eng-player { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.eng-player audio { width: min(100%, 36rem); }
.eng-q + .eng-q { margin-top: 1.75rem; }
.eng-q .qtext { margin-bottom: .9rem; }
.eng-phase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.eng-phase-name { font-size: var(--t-lg); font-weight: 700; margin: 0; }
.eng-timer { font-family: var(--mono); font-size: var(--t-2xl); font-weight: 500; margin: 0; min-width: 4ch; color: var(--accent); }
.eng-rec { margin-top: var(--s-5); }
.eng-script { padding-left: var(--s-5); line-height: 1.6; max-width: 75ch; }
.eng-script li + li { margin-top: .4rem; }
.eng-script mark { background: var(--warn-bg); color: inherit; padding: 0 .15em; border-radius: var(--r-s); }
.eng-glossary { display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--s-4); margin: 0; }
.eng-glossary dt { font-weight: 600; }
.eng-glossary dd { margin: 0; color: var(--muted); }
.eng-table td.hit { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.eng-recent { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.eng-recent li { display: flex; gap: var(--s-3); justify-content: space-between; }
@media (max-width: 640px) {
  .eng-glossary { grid-template-columns: 1fr; }
  .eng-glossary dd { margin-bottom: .4rem; }
}

/* Accidents and incidents (views/accidents.js, wypadki-plan/PLAN.md 6.1, 9.2): the list by category with filters, and
   a card — the navy band of the briefing on top, the trap, the commission's findings apart from Piloteka's lessons,
   every lesson with its source, the lower parts folded on a phone. */
.accpage .page-head { margin-bottom: 0; }
.acclist { display: grid; gap: var(--s-5); }
.accfilters { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-2) var(--s-3); align-items: end; }
.accfilter { display: grid; gap: var(--s-1); min-width: 0; }
.accfilter select { max-width: none; }
.accfilters #afclear { justify-self: start; }
.acccat { display: grid; gap: var(--s-2); }
.acccat h2 { display: flex; align-items: baseline; gap: var(--s-1) var(--s-2); flex-wrap: wrap; }
.acck { font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; color: var(--accent); }
.acccount { font-size: var(--t-sm); font-weight: 400; }
.acccases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.acccase { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); color: var(--ink); text-decoration: none; min-width: 0; }
.acccase:hover { border-color: var(--accent); }
.acccase:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acctitle { font-weight: 700; }
.acctrap { color: var(--muted); font-size: var(--t-sm); }
.accmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.accread { color: var(--ok); font-weight: 700; }
.accback { margin: 0; font-size: var(--t-sm); }
.acccard { padding: 0; display: grid; gap: var(--s-4); overflow: hidden; }
.acccard > .acctrapbox, .acccard > .accmetalist, .acccard > .accpart, .acccard > .accmore { margin-inline: 1.25rem; min-width: 0; }
.acchead { display: grid; gap: var(--s-1); padding: var(--s-3) 1.25rem; background: var(--navy); color: var(--on-navy); }
.acchead .label { color: var(--on-navy-muted); }
.acchead h1 { font-size: var(--t-xl); color: var(--on-navy); }
.acctrapbox { display: grid; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--accent); border-radius: var(--r-m); background: var(--accent-soft); }
.acctrapbox .label { color: var(--accent); }
.acctrapbox p { margin: 0; font-weight: 700; }
.accmetalist { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); margin: 0; font-size: var(--t-sm); }
.accmetalist dt { color: var(--muted); }
.accmetalist dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.accpart { display: grid; gap: var(--s-2); }
.accpart p { margin: 0; }
.accpart h3.label { margin-top: var(--s-2); }
.accpart ul, .accmore ul, .accmore ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); }
.accparthead { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-1); border-bottom: 1px solid var(--line); }
.accparthead .muted { font-size: var(--t-sm); }
.accquote { margin: 0; display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-m); background: var(--surface-2); }
.accorig { font-style: italic; }
.accref { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.acclessons { list-style: none; }
.accpart .acclessons { padding-left: 0; }
.acclessons li { display: grid; gap: 2px; }
.accsrc { display: inline-block; margin-right: var(--s-1); padding: .05rem .35rem; border-radius: var(--r-s); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; vertical-align: .1em; }
.accsrc.raport { background: var(--warn-bg); color: var(--warn); }
.accsrc.piloteka { background: var(--ok-bg); color: var(--ok); }
.accmore { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.accmore summary { cursor: pointer; font-weight: 700; }
.accmore[open] summary { margin-bottom: var(--s-2); }
.accchain li { display: grid; gap: 2px; }
.accbreak { color: var(--ok); font-size: var(--t-sm); }
.accqs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; }
.accfoot { display: grid; gap: var(--s-1); padding: var(--s-3) 1.25rem; background: var(--surface-2); color: var(--muted); font-size: var(--t-sm); }
.accfoot p { margin: 0; }
.accfoot .vbadge { justify-self: start; }
.accactions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 480px) {
  .accmetalist { grid-template-columns: 1fr; gap: 0; }
  .accmetalist dd { margin-bottom: var(--s-1); }
  .acccard > .acctrapbox, .acccard > .accmetalist, .acccard > .accpart, .acccard > .accmore { margin-inline: var(--s-4); }
  .acchead, .accfoot { padding-inline: var(--s-4); }
}

/* The statistics of the accidents (views/accidentsStats.js): horizontal bars on one scale — fatal (the chart's magenta)
   and the others (its tint) with 2px of the surface between them — and the bar charts of years from lib/barchart.js. */
.accpanel { display: grid; gap: var(--s-3); min-width: 0; }
.accpanel p { margin: 0; }
.accpanel ul, .accrisks { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); }
.acclegend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); color: var(--muted); }
.acclegend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.acclegend i { display: inline-block; width: .8rem; height: .8rem; border-radius: var(--r-s); }
.b-fatal { background: var(--c-fatal); }
.b-rest { background: color-mix(in srgb, var(--c-fatal) 30%, var(--surface)); }
.b-pre { background: color-mix(in srgb, var(--muted) 45%, var(--surface)); }
.b-acc { background: var(--c-fatal); }
.b-ser { background: var(--c-blue); }
.chart .b-fatal, .chart .b-acc { fill: var(--c-fatal); }
.chart .b-rest { fill: color-mix(in srgb, var(--c-fatal) 30%, var(--surface)); }
.chart .b-ser { fill: var(--c-blue); }
.chart .b-pre { fill: color-mix(in srgb, var(--muted) 45%, var(--surface)); }
.chart .b-pre.b-rest { fill: color-mix(in srgb, var(--muted) 22%, var(--surface)); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.hbars li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) max-content; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); }
.hbarlabel { min-width: 0; }
.hbar { display: flex; gap: 2px; height: .9rem; min-width: 0; }
.hbar span { display: block; height: 100%; border-radius: 0 var(--r-s) var(--r-s) 0; }
.hbar span:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.hbar span:only-child { border-radius: var(--r-s); }
.hbarval { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.hbarval b { color: var(--ink); font-weight: 500; }
.acckpis { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.acckpis .kpi span { font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 560px) {
  .hbars li { grid-template-columns: minmax(0, 1fr) max-content; }
  .hbars .hbarlabel { grid-column: 1 / -1; }
}

/* The way back from a question or a chapter to a card of the accidents section (W4.3). */
.prose .accexample .label { margin-right: var(--s-1); }
.docbox.accexample { margin-top: var(--s-3); }