/* Boundless design kit. One look for every Boundless tool: the Engine portal, the Practice Studio and the tools
   that follow. A client's look is a setting, not a new stylesheet: each page sets the brand slots below (primary
   --navy family, accent --mint family, fonts) from the client's brand, as the Practice Studio does. See docs/design-kit.md. */
:root {
  --navy: #243782; --navy-2: #3a4c96; --navy-dark: #1a2a66; --navy-tint: #e6e9f4; --navy-wash: #eef1fa;
  --ink: #2b2e38; --ink-2: #4c5468; --muted: #5f6880; --line: #e4e6ee; --line-2: #eef0f5; --ground: #f6f7fa; --card: #ffffff;
  --mint: #43aaa0; --mint-light: #8fcfc8; --mint-wash: #e3f3f1; --mint-dark: #1d6560;
  /* Filled accent controls (accent buttons, the Strong band, badges, counts) and the text on them, which meets WCAG AA
     (4.5 to 1): white where it reads on the fill, else near black. A brand's colours set these through
     kit/colour.mjs (applyBrand, Accounts, the Studio), so a client's own accent never leaves unreadable text. */
  --accent-fill: var(--mint); --accent-fill-hover: var(--mint-dark); --on-accent: #16151a; --on-primary: #fff;
  --amber: #f0b429; --amber-wash: #fdf1d6; --amber-dark: #7a5600;
  --red: #e07a6f; --red-wash: #fde9e5; --red-dark: #a23a26; --red-deep: #b42318;
  --side-text: #e3e7f5; --side-muted: #aab3d9; --side-dim: #c9d0ea;
  /* Good news (done, running): the accent by default; a brand whose accent is not a good-news colour sets these. */
  --good: var(--mint); --good-wash: var(--mint-wash); --good-dark: var(--mint-dark);
  --r4: #43aaa0; --r3: #8fcfc8; --r2: #f0b429; --r1: #e07a6f; --r0: #b42318;
  --heading: var(--navy); --line-strong: #d9dce6; --line-hover: #b9bfd3; --side-bg: var(--navy);
  --btn-primary-bg: var(--navy); --btn-primary-hover: var(--navy-dark); --btn-primary-text: var(--on-primary);
  --shade: rgba(26, 31, 51, 0.4); --surface-2: #eceef4;
  /* A chart's own line or bars: the brand's primary, lightened in dark mode so it still shows on a dark card. */
  --series: var(--navy);
  /* A second series beside it (the accent), and the heatmap's colour (more of it is worse). */
  --series-2: var(--mint); --heat: var(--red-deep);
  --track-display: 0; --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 12px; --font: 'Encode Sans', Arial, Helvetica, sans-serif; --display: 'Encode Sans Expanded', 'Encode Sans', Arial, sans-serif;
  /* Safe areas (docs/design-kit.md, "Phones and the app"): the status bar, Dynamic Island, rounded corners, home
     indicator and, in landscape, the sides. Every kit page has viewport-fit=cover, so in Safari and on the home screen
     it runs edge to edge and these are the space to keep clear; inside the Boundless app the native shell already
     keeps the page inside the safe area, so they are 0 there. Use these, never env() directly, and never put a
     button, link or field in them. */
  --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
  /* The colour behind the status bar: the menu's, which is what sits at the top of a page on a phone. */
  --status-bg: var(--side-bg);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.45; }
/* Covers the status bar area when the page runs edge to edge (Safari, home screen), so nothing scrolls under the
   clock and battery. Its height is 0 where there is no inset (laptops, inside the app). It sits above everything:
   sheets, dialogs and the Feedback form start below it (top: var(--safe-top)), so the status bar keeps the page's
   colour while they are open, in Safari and in the app alike. kit.js copies its colour into
   <meta name="theme-color">, which the app uses to colour its status bar and choose light or dark status text. */
body::before { content: ''; position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: var(--safe-top); background: var(--status-bg); pointer-events: none; }
button, a, summary, label, input, select, textarea { touch-action: manipulation; }
a { color: var(--heading); }
a:hover { color: var(--navy-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; color: var(--heading); }
h1 { font-family: var(--display); font-size: 26px; letter-spacing: var(--track-display); line-height: 1.15; }
h2 { font-size: 17px; }
h3 { font-size: 16px; }
p { margin: 0; }
.boot { padding: calc(48px + var(--safe-top)) calc(48px + var(--safe-right)) calc(48px + var(--safe-bottom)) calc(48px + var(--safe-left)); color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* ---------- frame ---------- */
.frame { min-height: 100vh; min-height: 100dvh; display: flex; align-items: stretch; }
.side { flex: 0 0 248px; background: var(--side-bg); color: #fff; padding: calc(24px + var(--safe-top)) 14px calc(24px + var(--safe-bottom)) calc(14px + var(--safe-left)); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.brand { padding: 4px 12px 20px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #fff; }
.brand b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; }
.brand span { font-size: 11px; letter-spacing: 0.14em; color: var(--side-dim); }
.brand em { font-style: normal; font-size: 11px; letter-spacing: 0.14em; color: var(--mint-light); padding-top: 10px; text-transform: uppercase; }
/* The Academy's logo, white on the navy. */
.logo { display: block; width: 176px; height: auto; filter: brightness(0) invert(1); }
.logo.big { width: 240px; }
/* The Boundless logo in a Boundless product's frame (the wordmark is wider than tall): the product's name sits under it. */
.side .logo.boundless { width: 176px; }
/* The phone layout (menu across the top) below 900px wide, and on a phone held sideways (short and touch). */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) { .side .logo { width: 132px; } }
.wordmark { display: block; color: #fff; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; }
.wordmark.big { font-size: 30px; }
.side .group { font-size: 11px; letter-spacing: 0.12em; color: var(--side-muted); padding: 16px 12px 4px; }
.side a.nav { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--side-text); text-decoration: none; font-size: 14px; }
.side a.nav:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.side a.nav { position: relative; transition: background-color .15s var(--ease), color .15s var(--ease); }
.side a.nav[aria-current="page"] { background: var(--navy-2); color: #fff; font-weight: 600; }
.side a.nav[aria-current="page"]::before { content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mint); }
.side a.nav svg { flex: 0 0 18px; opacity: 0.9; }
.side .soon { margin-left: auto; font-size: 10.5px; letter-spacing: 0.06em; color: var(--side-muted); }
/* A count on a menu item (Frame's nav badge), e.g. new feedback waiting. */
.side .nav .badge { margin-left: auto; background: var(--accent-fill); color: var(--on-accent); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; line-height: 18px; }
.side .who { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--side-dim); }
.side .who strong { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .who button { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--side-text); text-decoration: underline; cursor: pointer; }
/* .main's padding is in variables so the top bar can reach its edges and a page can make it tighter (set --pad-top
   and --pad-x on .main) without losing the safe areas. On a laptop the menu sits on the left, so only the right
   needs the side inset; in the phone layout both do. */
.main { --pad-top: 32px; --pad-x: 40px; --pad-bottom: 56px; --pad-left: var(--pad-x); --pad-right: calc(var(--pad-x) + var(--safe-right));
  flex: 1 1 0; min-width: 0; padding: var(--pad-top) var(--pad-right) calc(var(--pad-bottom) + var(--safe-bottom)) var(--pad-left); }
/* Page widths (docs/design-kit.md, "Page widths"). A reading page (forms, settings, text) keeps a comfortable measure,
   centred; a working page (maps, editors, tables, boards, dashboards) takes the full width of the window at every size.
   On large screens the gutters and the menu grow a little, so nothing feels cramped against the edge. A tool may narrow
   a reading page further in its own CSS (Drive lab's in-car page is 760px). */
.page { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.page.working, .page.wide { max-width: none; margin: 0; }
@media (min-width: 1920px) { .main { --pad-x: 48px; } .side { flex-basis: 264px; } }
@media (min-width: 2560px) { .main { --pad-x: 64px; --pad-top: 40px; } .side { flex-basis: 280px; } }
.menu-btn { display: none; }
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  .frame { flex-direction: column; }
  .side { position: static; height: auto; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; padding: calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left)); gap: 4px; }
  .side .brand { padding: 4px 8px; flex: 1 1 auto; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.4); background: none; color: #fff; cursor: pointer; }
  .side .links { display: none; width: 100%; flex-direction: column; gap: 2px; }
  .side.open .links { display: flex; }
  .side .who { margin-top: 8px; }
  .main { --pad-top: 20px; --pad-x: 16px; --pad-bottom: 48px; --pad-left: calc(var(--pad-x) + var(--safe-left)); }
}
.links { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }

/* ---------- page furniture ---------- */
.head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.head .title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.head p { color: var(--muted); font-size: 14px; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
/* A link back to a list, above a page's title. */
a.back { align-self: flex-start; font-size: 13px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn { transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.btn:hover { border-color: var(--line-hover); color: var(--ink); }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn.primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 600; }
.btn.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--btn-primary-text); }
.btn.accent { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.btn.accent:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--on-accent); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* A quiet action that should not draw the eye (Rename and Remove beside a card's title): no fill or line until it is
   pointed at; .danger makes the words red rather than the button. */
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.btn.quiet.danger { background: transparent; border-color: transparent; color: var(--red-dark); font-weight: 500; }
.btn.quiet.danger:hover { background: var(--red-wash); border-color: color-mix(in srgb, var(--red-deep) 35%, transparent); color: var(--red-dark); }
/* A large touch target for screens used at arm's length (a phone in a car). */
.btn.large { min-height: 58px; padding: 0 22px; font-size: 17px; border-radius: 12px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Save (kit.js SaveButton): what went wrong beside the button, and "Saved" held at full strength while it shows. */
.save-wrap { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.save-error { color: var(--red-dark); font-size: 14px; }
.btn.save-btn.is-saved[disabled] { opacity: 1; background: var(--good-wash); border-color: transparent; color: var(--good-dark); cursor: default; }
.link-btn { background: none; border: 0; padding: 0; color: var(--heading); font-weight: 600; cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
select.input, input.input, textarea.input { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 14px; }
textarea.input { padding: 10px 12px; min-height: 88px; width: 100%; resize: vertical; }
select.input:focus, input.input:focus, textarea.input:focus { border-color: var(--heading); outline: none; box-shadow: 0 0 0 3px var(--navy-tint); }
label.field, div.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
label.field .input, div.field .input { font-weight: 400; color: var(--ink); }
label.field small.note, div.field small.note { font-weight: 400; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-head > span, .note { font-size: 13px; color: var(--muted); }
/* A card's title with its badge (Card badge), and its tools at the end of the head (Card tools). */
.card-head .card-title { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; font-size: inherit; color: inherit; }
.card-head:has(> .tools) { align-items: center; }
.card-head > .tools { margin-left: auto; gap: 4px; }
.card > .card-head h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.card > .card-head h4 { margin: 0; font-size: 15px; color: var(--heading); overflow-wrap: anywhere; }
/* A card inside another card or a step card (a place on a prospect demo, a suggested loop): the same panel a step in,
   everything in it on one inset. ol.card-list: cards one under another (a ranked list of them). */
.card.inset { padding: 16px 18px; border-color: var(--line-strong); border-radius: 10px; gap: 12px; }
.card.inset .row-actions { justify-content: flex-start; }
.card.inset.chosen { border-color: var(--heading); box-shadow: 0 0 0 1px var(--heading) inset; }
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.card-list > li { min-width: 0; display: grid; }
/* .across: side by side where there is room (three suggested loops on a wide screen), one under another on a phone. */
.card-list.across { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: stretch; }
.card-list.across .card .row-actions { margin-top: auto; }
@media (max-width: 600px) { .card.inset { padding: 14px; } }
/* A small map on a card (MapThumb): the width of the card, 16 by 9, rounded; one button over it opens it larger, with
   "View larger" in its corner. MapKey: what the map's colours mean. */
.map-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-2); }
.map-thumb-body, .map-thumb-body > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-thumb-body .map-wrap { border-radius: 0; border: 0; min-height: 0; }
.map-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 8px; margin: 0; background: transparent; cursor: zoom-in; display: flex; align-items: flex-end; justify-content: flex-end; border-radius: 8px; }
.map-open span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.map-open:hover span { border-color: var(--line-hover); }
.map-open:focus-visible { outline: 2px solid var(--heading); outline-offset: -2px; }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; }
/* A drawing of a line with no map under it (no map key, or before the map loads). */
svg.line-sketch { display: block; width: 100%; height: 100%; background: var(--surface-2); }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g2w { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; }
@media (max-width: 520px) { .g2, .g2w, .g3 { grid-template-columns: 1fr; } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.tile .label { font-size: 13px; color: var(--muted); }
.tile .value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tile .value b { font-family: var(--display); font-size: 32px; font-weight: 700; color: var(--heading); line-height: 1.1; }
.tile .hint { font-size: 12.5px; color: var(--muted); }
/* A readout read at arm's length (a phone on a car's console): bigger label and value, tight padding. */
.tile.big { padding: 14px 16px; gap: 4px; }
.tile.big .label { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.tile.big .value b { font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.tile.big .hint { font-size: 14px; }
.tile.red .value b { color: var(--red-dark); }
.tile.amber .value b { color: var(--amber-dark); }
.tile.mint .value b { color: var(--good-dark); }
.up { color: var(--good-dark); font-weight: 600; font-size: 13px; }
.down { color: var(--red-dark); font-weight: 600; font-size: 13px; }
.flat { color: var(--muted); font-weight: 600; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pill.red { background: var(--red-wash); color: var(--red-dark); }
.pill.amber { background: var(--amber-wash); color: var(--amber-dark); }
.pill.mint { background: var(--good-wash); color: var(--good-dark); }
.pill.navy { background: var(--navy-tint); color: var(--heading); }
/* Whose words these are (Voice): a pill with its icon, in the voice's own colour. */
.pill.voice { gap: 5px; padding-left: 8px; vertical-align: middle; }
.pill.voice .icon { flex: 0 0 auto; }
/* The advisor's label is solid, so it never reads as a plain grey label in a brand whose quiet tint is grey. */
.pill.voice.navy { background: var(--heading); color: var(--card); }
.band { display: inline-flex; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.band.Strong { background: var(--accent-fill); color: var(--on-accent); }
.band.Competent { background: #d5efec; color: var(--mint-dark); }
.band.Developing { background: var(--amber-wash); color: var(--amber-dark); }
.band.Notyet { background: var(--red-wash); color: var(--red-dark); }
.band.none { background: var(--line-2); color: var(--muted); }
.bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--mint); }
.bar.thick { height: 10px; border-radius: 5px; }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--navy-tint); color: var(--heading); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.avatar.small { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; }
.avatar.big { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; }
.avatar.pic { object-fit: cover; object-position: center top; background: var(--navy-tint); }
.avatar.huge { width: 96px; height: 96px; flex-basis: 96px; font-size: 28px; }
.muted { color: var(--muted); }
.small-text { font-size: 13px; }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--card); }
.empty strong { color: var(--heading); font-size: 16px; }
.empty.plain { border: 0; background: none; padding: 20px 8px; }
.empty-action { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.error { border-radius: 8px; background: var(--red-wash); color: var(--red-dark); padding: 14px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.error .btn { align-self: flex-start; margin-top: 8px; }
.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--card), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select { min-width: 160px; }

/* ---------- hero ---------- */
.hero { position: relative; border-radius: 16px; overflow: hidden; background: var(--navy); color: #fff; }
.hero .inner { position: relative; padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.hero h2 { font-family: var(--display); font-size: 26px; line-height: 1.25; color: #fff; }
.hero p { font-size: 15px; line-height: 1.55; color: var(--side-text); }
.hero .kicker { align-self: flex-start; font-size: 12px; letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.hero .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .btn { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: #fff; }
.hero .btn.accent { background: var(--accent-fill); border-color: var(--accent-fill); }
.hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(67, 170, 160, 0.35), rgba(67, 170, 160, 0) 70%); pointer-events: none; }

/* ---------- tables ---------- */
/* Positioned, so screen-reader-only text inside (.sr is absolute) scrolls with the table instead of widening the page. */
.table-wrap { overflow-x: auto; position: relative; }
/* A box that scrolls sideways can be reached from the keyboard (kit.js scrollAccess); show where focus is. */
[data-kit-scroll]:focus-visible { outline: 2px solid var(--control); outline-offset: 2px; border-radius: 4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 0 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td, table.t tr.click:focus-visible td { background: var(--navy-wash); }
table.t tr.click:focus-visible { outline: 2px solid var(--heading); outline-offset: -2px; }
/* A row that opens something says so: a chevron at its end. */
table.t tr.click > td:last-child { padding-right: 30px; position: relative; }
table.t tr.click > td:last-child::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); }
/* A field with something wrong, and one that must be filled in. */
.field.has-error .input { border-color: var(--red-dark); }
.field-error { color: var(--red-dark); font-size: 13px; font-weight: 600; }
.field-required { color: var(--muted); font-weight: 400; font-size: 12px; }
/* Hint: one line, the rest under More. */
.hint { display: flex; flex-direction: column; gap: 4px; }
.hint > .note { margin: 0; }
.hint-more { margin-top: 6px; }
/* A step that is done and folded: its head only. */
.step-card.folded { padding-bottom: 0; }
.step-card.folded .step-card-head { margin-bottom: 0; }
/* The kit's "Are you sure?" (confirmAction). */
.modal.confirm { width: min(440px, calc(100vw - 32px)); padding: 22px; gap: 12px; }
.modal.confirm h2 { margin: 0; font-size: 18px; color: var(--heading); }
.modal.confirm p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.modal.confirm .row-actions { margin-top: 8px; }
.btn.danger-fill { background: var(--red-dark); border-color: var(--red-dark); color: #fff; font-weight: 600; }
.btn.danger-fill:hover { filter: brightness(0.92); }
/* Stacked rows on a phone (Table stack): each row a block of "Heading: value" lines. */
@media (max-width: 640px) {
  table.t.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.t.stack, table.t.stack tbody, table.t.stack tr, table.t.stack td { display: block; width: auto; }
  table.t.stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.t.stack td { border: 0; padding: 3px 0; text-align: left; }
  table.t.stack td.hide-s { display: block; }
  table.t.stack td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: 12px; font-weight: 600; }
  table.t.stack tr.click > td:last-child { padding-right: 0; }
  table.t.stack tr.click > td:last-child::after { display: none; }
}
table.t .num { text-align: right; white-space: nowrap; }
.who-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who-cell > div { display: flex; flex-direction: column; min-width: 0; }
.who-cell b { font-weight: 600; color: var(--ink); }
.who-cell span:not(.avatar) { font-size: 12.5px; color: var(--muted); }
.score-cell { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.score-cell .bar { flex: 1; }


button.tile { font: inherit; text-align: left; cursor: pointer; }
button.tile:hover { border-color: var(--heading); }
.card-head h2 { font-size: 18px; }
textarea.input.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; min-height: 260px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* Actions under a form or a card's body, at its start rather than its end. */
.row-actions.left { justify-content: flex-start; }
/* A lone checkbox or radio with a bigger tap area (see the touch screen rules at the end). */
label.tap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- choices: checkboxes, radios and switches (docs/design-kit.md, "Choices") ----------
   Drawn by the kit, the same in every browser, light and dark. --control is the brand accent, a shade deeper in light
   mode so a light accent still stands out on white (3 to 1 or more); --control-wash is the tint behind a chosen card.
   The tick and the dot are masks filled with the card colour, so they sit cleanly on any accent. Low specificity
   (:where), so a tool can still size one for its own place. */
:root { --control: color-mix(in srgb, var(--mint) 80%, #000000); --control-wash: color-mix(in srgb, var(--mint) 8%, var(--card));
  --control-ring: 0 0 0 3px color-mix(in srgb, var(--mint) 32%, transparent); }
:where(input[type="checkbox"], input[type="radio"]) { -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto; width: 18px; height: 18px;
  display: inline-grid; place-content: center; vertical-align: -3px; border: 1.5px solid var(--line-hover); border-radius: 5px; background: var(--card);
  cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"])::before { content: ''; width: 12px; height: 12px; background: var(--card); transform: scale(0);
  transition: transform .14s var(--ease); }
:where(input[type="checkbox"])::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.6-5.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.6-5.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
:where(input[type="checkbox"]:indeterminate)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
:where(input[type="radio"])::before { width: 8px; height: 8px; border-radius: 50%; background: var(--control); }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) { border-color: var(--control); }
:where(input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate) { background: var(--control); border-color: var(--control); }
:where(input[type="radio"]:checked) { border-color: var(--control); border-width: 1.5px; }
:where(input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate, input[type="radio"]:checked)::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: none; border-color: var(--control); box-shadow: var(--control-ring); }
:where(input[type="checkbox"], input[type="radio"]):disabled { cursor: not-allowed; background: var(--line-2); border-color: var(--line-strong); }
:where(input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate):disabled { background: color-mix(in srgb, var(--control) 40%, var(--card)); border-color: transparent; }
:where(input[type="radio"]:checked:disabled)::before { background: color-mix(in srgb, var(--control) 45%, var(--card)); }
/* A switch: <input type="checkbox" role="switch"> (the kit's Switch), for an on/off setting. */
:where(input[type="checkbox"][role="switch"]) { width: 36px; height: 20px; border: 0; border-radius: 999px; background: var(--line-hover); place-content: center start; padding: 2px; }
:where(input[type="checkbox"][role="switch"])::before { -webkit-mask: none; mask: none; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transform: translateX(0); box-shadow: 0 1px 2px rgba(16, 18, 30, 0.3); transition: transform .18s var(--ease); }
:where(input[type="checkbox"][role="switch"]:checked) { background: var(--control); }
:where(input[type="checkbox"][role="switch"]:checked)::before { transform: translateX(16px); }
:where(input[type="checkbox"][role="switch"]):hover:not(:disabled) { background: color-mix(in srgb, var(--line-hover) 70%, var(--ink)); }
:where(input[type="checkbox"][role="switch"]:checked):hover:not(:disabled) { background: color-mix(in srgb, var(--control) 88%, #000000); }
:where(input[type="checkbox"][role="switch"]):disabled { background: var(--line-strong); }
:where(input[type="checkbox"][role="switch"]:checked):disabled { background: color-mix(in srgb, var(--control) 40%, var(--card)); }
:where(input[type="checkbox"][role="switch"]):disabled::before { box-shadow: none; }
/* A switch with its words, on its own (the Switch component outside a .acc-toggles list). */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; }
.switch-row .switch-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-row .switch-words small { color: var(--muted); font-size: 13px; }
.switch-row.off { cursor: not-allowed; }
.switch-row.off .switch-words { color: var(--muted); }

/* ---------- sheet (side panel) ---------- */
.sheet-back { position: fixed; inset: var(--safe-top) 0 0 0; background: var(--shade); z-index: 40; display: flex; justify-content: flex-end; }
.sheet { width: min(600px, 100%); height: 100%; background: var(--card); overflow-y: auto; overscroll-behavior: contain; padding: 28px calc(28px + var(--safe-right)) calc(28px + var(--safe-bottom)) 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: -10px 0 40px rgba(20, 25, 50, 0.18); }
/* Full width on a phone: the left inset too (landscape), and a little less padding. */
@media (max-width: 600px) { .sheet { padding: 20px calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); } }
.sheet .close { align-self: flex-end; }
/* A sheet with a title: the heading and Close on one row. With a footer: its buttons stay in view at the foot while
   the body scrolls, the background reaching the edge and the buttons above the home indicator. */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet-head h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.sheet-head .close { align-self: center; flex: none; }
.sheet-foot { position: sticky; bottom: 0; z-index: 1; margin: auto -28px calc(-28px - var(--safe-bottom)); padding: 14px calc(28px + var(--safe-right)) calc(14px + var(--safe-bottom)) 28px; background: var(--card); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .sheet-foot { margin: auto -20px calc(-20px - var(--safe-bottom)); padding: 12px calc(20px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(20px + var(--safe-left)); } }
.sheet { animation: sheet-in .22s var(--ease); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

/* ---------- modal (Modal size "full"): most of the window on a laptop, the whole screen on a phone ---------- */
.modal-back { position: fixed; inset: var(--safe-top) 0 0 0; background: var(--shade); z-index: 45; display: flex; align-items: center; justify-content: center; }
.modal { background: var(--card); color: var(--ink); display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(20, 25, 50, 0.28); outline: none; }
.modal.full { width: 92vw; height: calc(92dvh - var(--safe-top)); max-width: 2200px; }
.modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; }
.modal-head h2 { margin: 0; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; overflow-y: auto; overscroll-behavior: contain; }
.modal-body > .modal-fill { flex: 1 1 auto; min-height: 220px; }
.modal { animation: modal-in .2s var(--ease); }
@keyframes modal-in { from { transform: scale(0.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }
/* A phone (or a short screen): the whole screen below the status bar, the sides and the bottom padded for the insets. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  .modal.full { width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; }
  .modal-head { padding: 10px calc(14px + var(--safe-right)) 8px calc(14px + var(--safe-left)); }
  /* The scrolling part stops above the home indicator (a margin, not padding, so nothing scrolls under it); the modal's
     own background still reaches the edge. */
  .modal-body { padding: 0 calc(14px + var(--safe-right)) 14px calc(14px + var(--safe-left)); margin-bottom: var(--safe-bottom); }
}
.quote { border-left: 3px solid var(--line); padding: 8px 0 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.quote q { font-style: italic; color: var(--ink); }
.quote .meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 14px; height: 8px; border-radius: 2px; background: var(--line-2); display: inline-block; }


/* ---------- sign in ---------- */
.signin { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
/* The panel is the menu's colour (--side-bg), so the status bar above it matches in light and dark. */
.signin .panel { background: var(--side-bg); color: #fff; padding: calc(48px + var(--safe-top)) 48px calc(48px + var(--safe-bottom)) calc(48px + var(--safe-left)); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.signin .panel h1 { color: #fff; font-size: 34px; line-height: 1.2; max-width: 460px; }
.signin .panel p { color: var(--side-text); max-width: 440px; font-size: 16px; }
.signin .form { display: flex; align-items: center; justify-content: center; padding: calc(32px + var(--safe-top)) calc(16px + var(--safe-right)) calc(32px + var(--safe-bottom)) 16px; }
.signin form { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.signin form .input { width: 100%; }
@media (max-width: 860px) { .signin { grid-template-columns: 1fr; } .signin .panel { padding: calc(28px + var(--safe-top)) calc(20px + var(--safe-right)) 28px calc(20px + var(--safe-left)); } .signin .panel h1 { font-size: 26px; }
  .signin .form { padding: 32px calc(16px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(16px + var(--safe-left)); } }
/* A plain note is neutral. A tone says what kind it is: good, warn, bad. The brand's accent is never a message colour
   (a calm note in an accent tint read as an error: UX review, K11). */
.notice { border-radius: 8px; padding: 12px 14px; font-size: 14px; background: var(--line-2); color: var(--ink-2); }
.notice.warn { background: var(--amber-wash); color: var(--amber-dark); }
.notice.bad { background: var(--red-wash); color: var(--red-dark); }
.notice.good { background: var(--good-wash); color: var(--good-dark); }
.notice ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- small charts ---------- */
.chart { width: 100%; height: auto; display: block; }
/* Parts of an SVG chart, so it switches with dark mode: axis text, grid lines, the series line, its dots and area. */
.chart text { fill: var(--muted); }
.chart .c-label { fill: var(--ink-2); }
.chart .c-grid { stroke: var(--line); fill: none; }
.chart .c-grid.soft { stroke: var(--line-2); }
.chart .c-ref { stroke: var(--muted); fill: none; }
.chart .c-line { stroke: var(--series); fill: none; }
.chart .c-dot { fill: var(--series); }
.chart .c-area { fill: color-mix(in srgb, var(--series) 14%, transparent); stroke: var(--series); }
/* Columns and a second series (ColumnChart, LineChart, Sparkline, ChartKey in kit.js): the second series is the accent
   (--series-2). A chart-box is the width the chart is drawn at; the chart is never stretched. */
.chart-box { width: 100%; min-width: 0; }
.chart-box > .chart { width: auto; max-width: none; }
.chart .c-bar { fill: var(--series); }
.chart .c-bar.alt, .chart .c-dot.alt { fill: var(--series-2); }
.chart .c-line.alt { stroke: var(--series-2); }
.chart rect.c-bar:hover, .chart circle.c-dot:hover { opacity: 0.8; }
.chart.spark { display: inline-block; width: auto; height: auto; vertical-align: middle; overflow: visible; }
.chart-key { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.chart-key .swatch { margin: 0; }
.swatch.c-key { background: var(--series); }
.swatch.c-key.alt { background: var(--series-2); }

/* ---------- heatmap (Heatmap in kit.js) ----------
   Five steps of one colour, mixed into the card so they read in light and dark: under 10%, 10 to 24, 25 to 39, 40 to 59
   and 60% or more. Ink on the first four (4.8 to 1 or better on white), white on the last (6.5 to 1). --heat is the
   kit's deep red; a tool showing good news (more is better) sets it to --good. */
.hm-s0 { --hm: color-mix(in srgb, var(--heat) 6%, var(--card)); }
.hm-s1 { --hm: color-mix(in srgb, var(--heat) 20%, var(--card)); }
.hm-s2 { --hm: color-mix(in srgb, var(--heat) 36%, var(--card)); }
.hm-s3 { --hm: color-mix(in srgb, var(--heat) 54%, var(--card)); }
.hm-s4 { --hm: var(--heat); }
.swatch[class*="hm-s"] { background: var(--hm); box-shadow: inset 0 0 0 1px var(--line); }
.heatmap-wrap { border-radius: 10px; }
table.heatmap { --hm-head: 240px; --hm-col: 84px; width: 100%; min-width: calc(var(--hm-head) + var(--hm-n, 6) * var(--hm-col)); table-layout: fixed;
  border-collapse: separate; border-spacing: 4px; font-size: 13px; }
table.heatmap col.hm-col-head { width: var(--hm-head); }
table.heatmap th { font-weight: 600; color: var(--ink-2); text-align: center; vertical-align: bottom; padding: 4px 6px 8px; font-size: 12.5px; line-height: 1.25; }
table.heatmap th > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
table.heatmap th small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
table.heatmap .hm-row-head { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; vertical-align: middle; padding: 6px 12px 6px 4px; overflow-wrap: anywhere; }
table.heatmap thead .hm-row-head { vertical-align: bottom; }
table.heatmap tbody .hm-row-head > span { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
table.heatmap th.lead { color: var(--heading); }
.hm-td { padding: 0; }
.hm-td.lead { padding-right: 10px; }
.hm-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; min-height: 48px; border: 0; border-radius: 8px;
  background: var(--hm, transparent); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; padding: 4px 6px; }
.hm-cell b { font-size: 14px; font-weight: 700; }
.hm-cell small { font-size: 11.5px; }
.hm-cell.hm-s4 { color: #ffffff; }
.hm-td.lead .hm-cell { box-shadow: inset 0 0 0 2px var(--heading); }
.hm-td.lead .hm-cell b { font-size: 15px; }
button.hm-cell { cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
button.hm-cell:hover { box-shadow: inset 0 0 0 2px var(--heading); }
button.hm-cell:focus-visible { outline: 3px solid var(--heading); outline-offset: 1px; }
.hm-cell.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.hm-cell.low { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.hm-cell.low b { font-weight: 600; }
.hm-cell.hidden { background: repeating-linear-gradient(135deg, var(--line-2) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { table.heatmap { --hm-head: 150px; --hm-col: 78px; } table.heatmap tbody .hm-row-head > span { font-size: 13px; } .hm-td.lead { padding-right: 4px; } .hm-cell small { white-space: nowrap; } }
@media (pointer: coarse) { .hm-cell { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { button.hm-cell { transition: none; } }
.stack { display: flex; height: 36px; border-radius: 8px; overflow: hidden; background: var(--line-2); }
.stack > i { display: block; height: 100%; }
.key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; font-size: 14px; }
.key > div { display: flex; align-items: center; gap: 10px; }
.key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.key span { flex: 1; }
.cols { display: flex; gap: 10px; align-items: flex-end; height: 160px; }
.cols > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-size: 13px; font-weight: 600; }
.cols > div > i { width: 100%; border-radius: 6px 6px 0 0; display: block; }
/* A message (kit.js toast): in the middle at the foot of the window on a laptop; at the top on a phone or tablet, where a
   sheet fills the width and its buttons are at the foot. Never over a sheet's or a page's own buttons. */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + var(--safe-bottom)); z-index: 60; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--card); padding: 12px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: max-content; max-width: min(520px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))); }
.toast[hidden] { display: none; }
.toast-action { flex: none; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) { .toast { bottom: auto; top: calc(12px + var(--safe-top)); } }
@media (pointer: coarse) { .toast-action { min-height: 44px; min-width: 44px; } }


/* Feedback button (every page) */
.fb-launch { position: fixed; right: calc(20px + var(--safe-right)); bottom: calc(20px + var(--safe-bottom)); z-index: 40; min-height: 44px; background: var(--navy); color: var(--on-primary); border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.18); cursor: pointer; }
.fb-launch:hover { background: var(--navy-dark); }
.fb-back { position: fixed; inset: var(--safe-top) 0 0 0; z-index: 50; background: rgba(15,20,40,0.4); display: flex; align-items: flex-end; justify-content: flex-end; padding: 20px calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
.fb-sheet { background: var(--card); border-radius: 12px; width: 100%; max-width: 440px; max-height: calc(100vh - 40px - var(--safe-top) - var(--safe-bottom)); max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom)); overflow: auto; overscroll-behavior: contain; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 12px; }
.fb-head { display: flex; justify-content: space-between; align-items: center; }
.fb-head h2 { font-size: 18px; }
.fb-sheet form { display: flex; flex-direction: column; gap: 14px; }
.fb-choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fb-choice legend { font-weight: 600; margin-bottom: 6px; }
.fb-choice label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fb-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.fb-field textarea { font: inherit; font-weight: 400; border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px; resize: vertical; background: var(--card); color: var(--ink); }
.fb-field textarea:focus { outline: none; border-color: var(--heading); box-shadow: 0 0 0 3px var(--navy-tint); }
.fb-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fb-ok { background: var(--good-wash); color: var(--good-dark); padding: 12px; border-radius: 8px; margin: 0; }
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fb-list li { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.fb-list p { margin: 6px 0 0; }
.fb-reply { color: var(--heading); font-style: italic; }
.fb-status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--navy-tint); color: var(--navy); margin-left: 6px; }
.fb-status.s-done { background: var(--good-wash); color: var(--good-dark); }
/* On a phone the floating button would cover the end of a long page, so the page keeps room for it below its last
   line (the button's 44px, its 20px gap and the home indicator). Screens with a top bar put it there instead. */
@media (max-width: 600px) {
  /* (.acc-centre and .acc-main already keep 88px and 96px.) */
  :root:has(.fb-launch) .main { --pad-bottom: 84px; }
  :root:has(.fb-launch) .signin .form { padding-bottom: calc(84px + var(--safe-bottom)); }
}
/* On a phone the form rises from the bottom edge: its own padding keeps Send above the home indicator. */
@media (max-width: 600px) {
  .fb-back { padding: 0; }
  .fb-sheet { max-width: none; border-radius: 12px 12px 0 0; max-height: calc(100dvh - var(--safe-top) - 12px); padding: 20px calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
  .toast { left: calc(16px + var(--safe-left)); right: calc(16px + var(--safe-right)); transform: none; width: auto; max-width: none; }
}
/* In the top bar (Frame's bar): a compact button beside the bell; the form drops down under it, as the bell's list does. */
.fb-top { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; white-space: nowrap; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.fb-top svg { width: 18px; height: 18px; flex: 0 0 18px; }
.fb-top:hover { border-color: var(--line-hover); }
.topbar .actions { position: relative; }
.fb-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 35; width: min(440px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))); max-height: calc(100vh - 96px - var(--safe-top) - var(--safe-bottom)); max-height: calc(100dvh - 96px - var(--safe-top) - var(--safe-bottom)); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(10, 10, 20, 0.18); }
@media (max-width: 600px) {
  .fb-top { width: 40px; padding: 0; justify-content: center; }
  .fb-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Its own bottom padding keeps its last row (Send) clear of the home indicator even where the drop-down reaches the
     bottom of the screen, as the floating form's does (issue #175). */
  .fb-pop { border-radius: 14px; padding: 20px 20px calc(20px + var(--safe-bottom)); }
}
:root[data-theme="dark"] .fb-status { background: var(--navy-tint); color: var(--heading); }
:root[data-theme="dark"] .fb-status.s-done { background: var(--good-wash); color: var(--good-dark); }
:root[data-theme="dark"] .fb-launch { background: var(--btn-primary-bg); color: var(--btn-primary-text); }

/* ---------- tabs (sections of one page) ---------- */
/* The line under the tabs is drawn inside the row (no negative margin), so nothing overflows downwards: with overflow-x
   set, any overflow made browsers that always show scrollbars (macOS set to "Always") draw a scroller at the end of
   the row. No scrollbar ever; a soft fade at an edge with more tabs past it (Tabs sets fade-start and fade-end). */
.kit-tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.kit-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.kit-tabs.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.kit-tabs.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.kit-tabs.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.kit-tabs button { flex: 0 0 auto; background: none; border: 0; padding: 10px 14px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.kit-tabs button:hover { color: var(--ink); }
.kit-tabs button[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--mint); }
.kit-tabs .count { font-size: 12px; font-weight: 600; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); text-align: center; }
.kit-tabs button[aria-selected="true"] .count { background: var(--navy-tint); color: var(--heading); }

/* ---------- status dot ---------- */
.dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--line-2); }
.dot.good::before { background: var(--good); box-shadow: 0 0 0 3px var(--good-wash); }
.dot.bad::before { background: var(--red-deep); box-shadow: 0 0 0 3px var(--red-wash); }
.dot.off::before { background: #b9b6c2; }
.dot.planned::before { background: transparent; box-shadow: none; border: 1.5px dashed var(--muted); width: 9px; height: 9px; box-sizing: border-box; }

/* A key for a chart or diagram, made of Dots. */
.legend { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.legend .dot { font-weight: 500; color: var(--muted); font-size: 12.5px; }

/* ---------- chips (filter toggles) ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.chip:hover { border-color: var(--line-hover); color: var(--ink); }
/* Chosen: the accent's tint, edged in the accent (--control, as a ticked checkbox) and ticked, never only a darker grey. */
.chip[aria-pressed="true"] { background: var(--control-wash); border-color: var(--control); color: var(--heading); box-shadow: inset 0 0 0 1px var(--control); }
.chip .chip-tick { display: none; }
.chip[aria-pressed="true"] .chip-tick { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; background: var(--control);
  -webkit-mask: none; position: relative; }
.chip[aria-pressed="true"] .chip-tick::before { content: ''; position: absolute; inset: 2px; background: var(--card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.6-5.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.6-5.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.chip:disabled { cursor: default; }
.chip:disabled:not([aria-pressed="true"]) { color: var(--muted); }
.chip:focus-visible { outline: none; box-shadow: var(--control-ring); }
.chip .count { font-size: 11.5px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); text-align: center; }
.chip[aria-pressed="true"] .count { background: var(--card); color: var(--heading); }
/* Segmented: one choice from a few, side by side (Segmented). The chosen one is filled with the primary. */
.segmented { display: inline-flex; align-self: flex-start; width: fit-content; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); max-width: 100%; }
.segmented button { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--heading); box-shadow: 0 1px 3px rgba(20, 25, 50, 0.16); }
.segmented .count { font-size: 11.5px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); text-align: center; }
.segmented button[aria-pressed="true"] .count { background: var(--navy-tint); color: var(--heading); }

/* ---------- flowchart (Flowchart in kit.js): nested containers, boxes and right-angled arrows, kit colours only ---------- */
.flowchart { width: 100%; min-height: 120px; }
.flowchart svg.fc { display: block; overflow: visible; font-family: var(--font); }
.fc-band > .fc-frame { fill: var(--card); stroke: var(--line); }
.fc-group > .fc-frame { fill: var(--ground); stroke: var(--line-2); }
.fc-group.d2 > .fc-frame { fill: var(--card); stroke: var(--line); }
.fc-group.d3 > .fc-frame { fill: var(--ground); stroke: var(--line-2); }
.fc-box.sel > .fc-frame { stroke: var(--heading); stroke-width: 2; }
.fc-box.hov:not(.sel) > .fc-frame { stroke: var(--line-hover); }
.fc-head { cursor: pointer; outline: none; }
.fc-head .fc-hit { fill: transparent; }
.fc-head:focus-visible .fc-hit { stroke: var(--mint); stroke-width: 2; }
.fc-band .fc-head .fc-name { font: 600 15px var(--display); letter-spacing: var(--track-display); fill: var(--heading); }
.fc-band .fc-head .fc-sub { font: 400 12.5px var(--font); fill: var(--muted); }
.fc-group .fc-head .fc-name { font: 600 12px var(--font); fill: var(--ink-2); }
.fc-group .fc-head .fc-sub { font: 400 11.5px var(--font); fill: var(--muted); }
.fc-tag rect { fill: var(--card); stroke: var(--line-strong); }
.fc-tag text { font: 600 10.5px var(--font); fill: var(--ink-2); text-anchor: middle; }
.fc-link { cursor: pointer; outline: none; }
.fc-link rect { fill: transparent; transition: fill .15s var(--ease); }
.fc-link .fc-link-hit { fill: transparent; stroke: none; }
.fc-link:hover .fc-link-hit, .fc-link:focus-visible .fc-link-hit { fill: transparent; stroke: none; }
.fc-link path { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fc-link:hover rect, .fc-link:focus-visible rect { fill: var(--navy-tint); }
.fc-link:hover path, .fc-link:focus-visible path { stroke: var(--heading); }
.fc-link:focus-visible rect { stroke: var(--mint); stroke-width: 2; }
/* Arrows: at rest neutral; the selected box's in the accent; planned ones dashed; secondary calls lighter; releases dotted. */
.fc-arrow { fill: none; stroke: var(--line-hover); stroke-width: 1.5; stroke-linejoin: round; transition: opacity .15s var(--ease); }
.fc-tip.rest { fill: var(--line-hover); }
.fc-arrow.planned { stroke-dasharray: 6 4; }
.fc-arrow.release { stroke-dasharray: 2 3; }
.fc-arrow.minor { stroke-width: 1.1; }
.fc-arrow.dim { opacity: 0.18; }
.fc-tip.dim { fill: var(--line-hover); opacity: 0.18; }
.fc-arrow.on { stroke: var(--mint); stroke-width: 2; opacity: 1; }
.fc-arrow.on.minor { stroke-width: 1.5; }
.fc-tip.on { fill: var(--mint); }
.fc-label rect { fill: var(--ground); }
.fc-label.d1 rect { fill: var(--card); }
.fc-label.d2 rect { fill: var(--ground); }
.fc-label.d3 rect { fill: var(--card); }
.fc-label text { font: 600 11px var(--font); fill: var(--muted); text-anchor: middle; }
.fc-label.on text { fill: var(--mint-dark); }
.fc-label.dim { opacity: 0.3; }
.fc-node { cursor: pointer; outline: none; transition: opacity .15s var(--ease); }
.fc-node .fc-card { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; transition: stroke .15s var(--ease); }
.fc-node.wide .fc-card { stroke: var(--line-hover); }
.fc-node.hov .fc-card { stroke: var(--line-hover); stroke-width: 1.5; }
.fc-node.sel .fc-card, .fc-node:focus-visible .fc-card { stroke: var(--heading); stroke-width: 2; }
.fc-node.hit .fc-card { stroke: var(--mint); stroke-width: 2; }
.fc-node.dim, .fc-node-wrap.dim { opacity: 0.32; }
.fc-node-wrap { transition: opacity .15s var(--ease); }
.fc-node .fc-name { font: 600 13px var(--font); fill: var(--ink); }
.fc-node .fc-sub { font: 400 11.5px var(--font); fill: var(--muted); }
.fc-bar { fill: var(--line-strong); }
.fc-node.t-good .fc-bar { fill: var(--good); }
.fc-node.t-bad .fc-bar { fill: var(--red-deep); }
.fc-node.t-bad .fc-card { stroke: color-mix(in srgb, var(--red-deep) 45%, var(--line-strong)); }
.fc-node.t-off .fc-bar { fill: #b9b6c2; }
.fc-node.planned .fc-card { fill: transparent; stroke-dasharray: 5 4; stroke: var(--line-hover); }
.fc-node.planned .fc-bar { fill: none; }
.fc-node.planned .fc-name { fill: var(--ink-2); font-weight: 500; }
.fc-node.retired { opacity: 0.55; }
.fc-node.retired .fc-name { text-decoration: line-through; }
.fc-badge rect { fill: var(--mint); }
.fc-badge text { font: 700 10.5px var(--font); fill: #fff; text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .fc-node, .fc-arrow, .fc-node .fc-card, .fc-link rect { transition: none; } }

/* ---------- top bar: search and the signed-in person ---------- */
/* Sticks just under the status bar (var(--safe-top), 0 where there is none) and reaches .main's edges. */
.topbar { position: sticky; top: var(--safe-top); z-index: 30; display: flex; align-items: center; gap: 16px; margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-right)) 28px calc(-1 * var(--pad-left)); padding: 12px var(--pad-right) 12px var(--pad-left); background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .grow { flex: 1 1 auto; }
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) { .topbar { margin-bottom: 20px; padding-top: 10px; padding-bottom: 10px; } }
.search { position: relative; flex: 0 1 460px; min-width: 0; }
.search input { width: 100%; min-height: 40px; padding: 0 64px 0 38px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 14px; }
.search input:focus { outline: none; border-color: var(--heading); box-shadow: 0 0 0 3px var(--navy-tint); }
.search .glass { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--font); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 6px; background: var(--ground); }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(10, 10, 20, 0.18); padding: 6px; max-height: 60vh; overflow-y: auto; }
.results a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.results a b { font-weight: 600; font-size: 14px; }
.results a span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results a[aria-selected="true"], .results a:hover { background: var(--navy-wash); }
.results .kind { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px 4px; }
.results .none { padding: 12px; font-size: 14px; color: var(--muted); }
.me-menu { position: relative; }
.me-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 14px; }
.me-btn .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.me-btn .avatar::before { content: attr(data-initials); }
.me-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(10, 10, 20, 0.18); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.me-pop .who-line { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.me-pop .who-line b { color: var(--heading); }
.me-pop .who-line span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 10px; background: var(--ground); border: 1px solid var(--line); }
.theme-pick button { border: 0; background: none; color: var(--ink-2); padding: 7px 0; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; }
.theme-pick button[aria-pressed="true"] { background: var(--card); color: var(--heading); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.me-pop .btn { width: 100%; }
.side .who.out { flex-direction: row; }
@media (max-width: 560px) { .me-btn .name { display: none; } .search kbd { display: none; } }

/* ---------- dark mode (a tool turns it on with useTheme; [data-theme] on <html>) ---------- */
:root[data-theme="dark"] {
  --ground: #121116; --card: #1b1a21; --ink: #ecebf1; --ink-2: #c9c7d3; --muted: #aaa7b6; --line: #2d2b35; --line-2: #24222b;
  --line-strong: #3a3843; --line-hover: #57545f; --surface-2: #24222b; --shade: rgba(0, 0, 0, 0.55);
  --heading: #f5f4f8; --navy-wash: #221f29; --navy-tint: #2e2b36;
  --btn-primary-bg: #f5f4f8; --btn-primary-hover: #ffffff; --btn-primary-text: #1b1a21;
  --side-bg: #0d0c10;
  --red-wash: color-mix(in srgb, var(--red-deep) 24%, var(--card)); --red-dark: #ff9d93;
  --amber-wash: color-mix(in srgb, var(--amber) 20%, var(--card)); --amber-dark: #ffd27a;
  --good-wash: color-mix(in srgb, var(--good) 24%, var(--card)); --good-dark: #7fdcaa;
  --mint-wash: color-mix(in srgb, var(--mint) 22%, var(--card));
  /* The accent's text colour, lightened so it reads on a dark card (the light one is a dark shade of the accent). */
  --mint-dark: color-mix(in srgb, var(--mint) 55%, #ffffff);
  /* Choices: the accent as it is (it stands out on a dark card), a deeper tint behind a chosen card. */
  --control: var(--mint); --control-wash: color-mix(in srgb, var(--mint) 14%, var(--card));
  --series: color-mix(in srgb, var(--navy) 40%, #ffffff);
  color-scheme: dark;
}
:root[data-theme="dark"] .pill.navy { background: var(--navy-tint); color: var(--heading); }
:root[data-theme="dark"] a:hover { color: var(--ink-2); }
:root[data-theme="dark"] .btn.accent:hover { background: color-mix(in srgb, var(--accent-fill) 80%, #000000); }
:root[data-theme="dark"] .band.Competent { background: color-mix(in srgb, var(--mint) 24%, var(--card)); }
:root[data-theme="dark"] .fb-launch:hover { background: var(--btn-primary-hover); }
:root[data-theme="dark"] .toast { background: #f5f4f8; color: #1b1a21; }

/* ---------- bell (notifications) ---------- */
.bell { position: relative; }
.bell-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bell-btn svg { width: 19px; height: 19px; }
.bell-btn:hover { border-color: var(--line-hover); }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--ground); }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(10, 10, 20, 0.18); overflow: hidden; z-index: 35; display: flex; flex-direction: column; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bell-head b { color: var(--heading); }
.bell-head .link-btn { font-size: 13px; }
.bell-list { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.bell-list button { width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px 12px 10px 26px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; color: var(--ink); position: relative; }
.bell-list button:hover { background: var(--navy-wash); }
.bell-list li.unread button::before { content: ''; position: absolute; left: 10px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.bell-list li.p-urgent b, .bell-list li.p-high b { color: var(--red-dark); }
.bell-list b { font-size: 14px; font-weight: 600; }
.bell-list li:not(.unread) b { font-weight: 500; color: var(--ink-2); }
.bell-list .b { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bell-list .m { font-size: 12px; color: var(--muted); }
.bell-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.topbar .actions { display: flex; align-items: center; gap: 10px; }

/* ---------- touch screens (phones, tablets, the app): docs/design-kit.md, "Phones and the app" ---------- */
/* Everything you can tap is at least 44 by 44 points (Apple's default control size), and every field's text is at
   least 16px so iOS does not zoom the page when it is tapped. A laptop keeps the denser sizes above. */
@media (pointer: coarse) {
  .btn, .btn.small, .chip, .segmented button, .fb-top, .me-btn, .side a.nav, .kit-tabs button, .theme-pick button, .fb-launch,
  .search input, select.input, input.input { min-height: 44px; }
  .bell-btn { width: 44px; height: 44px; }
  .fb-top { min-width: 44px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .menu-btn, .btn.small { min-width: 44px; }
  .side .who button { min-height: 44px; }
  .fb-choice label, label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  /* Small text links on a line of their own (breadcrumbs, a back link, a name in a table): a taller tap area
     without moving anything. */
  .crumbs a, a.back, .who-cell a { padding: 13px 0; margin: -13px 0; }
  /* A card's own link on a line of its own ("See every skill"), or one among a heading's tools ("Edit character"). */
  .card > a:not(.btn), .head .tools > a:not(.btn), .card-head .tools > a:not(.btn), .tools > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
  /* A short breadcrumb ("Cars", "Drives") is narrower than 44: a wider tap area, again without moving anything. */
  .crumbs a { padding: 13px 9px; margin: -13px -9px; }
  input[type="range"] { min-height: 44px; }
  /* A lone checkbox or radio (in a table row, say): wrap it in <label class="tap"> for a 44 by 44 tap area. */
  label.tap { min-width: 44px; min-height: 44px; margin: -12px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea,
  .input, select.input, input.input, textarea.input, .search input, textarea.input.mono, .fb-field textarea { font-size: 16px; }
  @media (max-width: 600px) { .fb-top { width: 44px; } }
}

/* ---------- Accounts (kit/accounts.js): the sign-in layout, sign-in form, providers' buttons, pickers, support bar ---------- */
/* The sign-in pages are used on iPhones inside the AI Test Drive app: safe areas, 16px inputs, 44px tap targets.
   Laptop: the organisation's brand panel (the menu's colour, so it reads as the same portal) beside the form. Phone, or a
   phone on its side: the panel becomes a band above the form, and the status bar takes its colour. */
.acc-centre { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: max(24px, var(--safe-top)) max(16px, var(--safe-right)) max(88px, calc(var(--safe-bottom) + 72px)) max(16px, var(--safe-left)); }
.acc-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; background: var(--ground); }
.acc-panel { position: relative; isolation: isolate; overflow: hidden; background-color: var(--side-bg); color: #fff;
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(44px + var(--safe-top)) 56px calc(48px + var(--safe-bottom)) calc(56px + var(--safe-left)); }
/* The one flourish: the accent's horizon, rings spreading from the panel's lower corner over a low glow, as the portal's
   hero glows. Drawn, not an image, so it takes any organisation's accent. */
.acc-panel::before { content: ''; position: absolute; z-index: -1; right: -360px; bottom: -640px; width: 1180px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 34%, transparent), transparent 72%),
    repeating-radial-gradient(circle, transparent 0 38px, color-mix(in srgb, var(--mint) 55%, transparent) 38px 39.5px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); opacity: 0.8; }
:root[data-theme="dark"] .acc-panel { box-shadow: inset -1px 0 0 var(--line); }
.acc-panel-top { min-height: 40px; display: flex; align-items: center; }
/* Logos are made white (they sit on the brand colour), shown at one height and contained, whatever their own size. */
.acc-logo { display: block; height: 48px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.acc-word { color: #fff; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.acc-panel-copy { max-width: 440px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 8vh; }
.acc-panel-name { font-family: var(--display); font-size: clamp(36px, 3.6vw, 54px); line-height: 1.02; letter-spacing: var(--track-display); color: #fff; text-wrap: balance; }
.acc-panel-line { font-size: 17px; line-height: 1.5; color: var(--side-text); max-width: 34ch; }
.acc-main { display: flex; align-items: center; justify-content: center; min-width: 0;
  padding: calc(48px + var(--safe-top)) calc(48px + var(--safe-right)) calc(96px + var(--safe-bottom)) 48px; }
.acc-box { width: min(400px, 100%); display: flex; flex-direction: column; }
.acc-title { font-family: var(--display); font-size: 32px; line-height: 1.12; letter-spacing: var(--track-display); text-wrap: balance; }
.acc-sub { color: var(--muted); margin-top: 8px; font-size: 16px; }
.acc-body { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.acc-box > .notice, .acc-body > .notice { margin: 0; }
.acc-form { display: flex; flex-direction: column; gap: 16px; }
.acc-form .input, .acc-stack .input, .acc-centre .input, .acc-box .input { width: 100%; }
.acc-box .input { min-height: 48px; font-size: 16px; }
.acc-form p { font-size: 15px; }
.btn.block { width: 100%; min-height: 48px; font-size: 15px; }
.btn.danger { background: var(--red-deep); border-color: var(--red-deep); color: #fff; font-weight: 600; }
.btn.danger:hover { background: color-mix(in srgb, var(--red-deep) 85%, #000); color: #fff; }
.acc-form .input.acc-code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 24px; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; min-height: 56px; }
.acc-guest-link { display: flex; justify-content: center; }
.acc-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.acc-or::before, .acc-or::after { content: ''; flex: 1; border-top: 1px solid var(--line-strong); }
.acc-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; overflow-wrap: anywhere; }
.acc-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
.acc-links a, .acc-links .link-btn, .acc-who .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px; color: var(--heading); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acc-who .link-btn { margin: 0; }
.acc-links.quiet a, .acc-links.quiet .link-btn { color: var(--ink-2); font-weight: 500; }
.acc-foot { color: var(--muted); font-size: 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
/* A sign-in finishing: words and a slim bar that sweeps (still for anyone who prefers less motion). */
.acc-wait { display: flex; flex-direction: column; gap: 14px; color: var(--muted); }
.acc-wait-bar { display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.acc-wait-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 36%; border-radius: 3px; background: var(--mint); animation: acc-sweep 1.4s var(--ease) infinite; }
@keyframes acc-sweep { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .acc-wait-bar::after { animation: none; width: 100%; opacity: 0.5; } }

/* The providers' own buttons (docs/design-kit.md, "Sign-in buttons"). Microsoft: its logo and words, Segoe UI (or the
   system font), white with a grey line or dark grey, square, 41px high (44 on touch screens, Apple's minimum), 12px
   inside and between logo and words. Google: its "G" and words, Google Sans (or the system font) 14/20, white with a
   grey line or near black, 4px corners, 12px inside and 10px between. Colours are theirs: they do not follow a brand. */
.acc-idps { display: flex; flex-direction: column; gap: 12px; }
.acc-idp { display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; padding: 0 12px; white-space: nowrap; }
.acc-idp-logo { flex: 0 0 auto; display: block; }
.acc-idp[disabled] { cursor: default; opacity: 0.7; }
.acc-idp.ms { gap: 12px; min-height: 41px; background: #ffffff; color: #5e5e5e; border: 1px solid #8c8c8c; border-radius: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 600; font-size: 15px; }
.acc-idp.ms:hover:not([disabled]) { border-color: #5e5e5e; }
.acc-idp.google { gap: 10px; min-height: 40px; background: #ffffff; color: #1f1f1f; border: 1px solid #747775; border-radius: 4px;
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; }
.acc-idp.google:hover:not([disabled]) { background: #f8f9fa; }
:root[data-theme="dark"] .acc-idp.ms { background: #2f2f2f; color: #ffffff; border-color: #2f2f2f; }
:root[data-theme="dark"] .acc-idp.ms:hover:not([disabled]) { border-color: #8c8c8c; }
:root[data-theme="dark"] .acc-idp.google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
:root[data-theme="dark"] .acc-idp.google:hover:not([disabled]) { background: #1f1f20; }
@media (pointer: coarse) { .acc-idp.ms, .acc-idp.google { min-height: 44px; } }
.acc-company .acc-idp-logo { opacity: 0.85; }

/* Phones, and phones on their side: the brand as a band above the form. */
@media (max-width: 900px), (max-height: 560px) and (pointer: coarse) {
  .acc-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acc-panel { position: relative; height: auto; gap: 20px; justify-content: flex-start;
    padding: calc(22px + var(--safe-top)) calc(24px + var(--safe-right)) 28px calc(24px + var(--safe-left)); }
  .acc-panel::before { right: -330px; bottom: -470px; width: 760px; opacity: 0.85; }
  :root[data-theme="dark"] .acc-panel { box-shadow: inset 0 -1px 0 var(--line); }
  .acc-panel-top { min-height: 56px; }
  .acc-logo { height: 34px; max-width: 180px; }
  /* The form's heading names the product on a phone; the band carries the brand alone. */
  .acc-panel-copy { display: none; }
  .acc-main { align-items: flex-start; padding: 28px calc(20px + var(--safe-right)) calc(96px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
  .acc-box { width: min(480px, 100%); }
  .acc-title { font-size: 26px; }
  .acc-body { margin-top: 22px; }
}
.acc-stack { display: flex; flex-direction: column; gap: 16px; }
.acc-choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acc-choice legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.acc-choice label, .acc-toggles label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; background: var(--card);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease); }
.acc-choice label:hover, .acc-toggles label:hover { border-color: var(--line-hover); }
/* A chosen card: the accent's line and a light tint of it (never a grey fill). */
.acc-choice label.on, .acc-choice label:has(input:checked) { border-color: var(--control); background: var(--control-wash); box-shadow: inset 0 0 0 0.5px var(--control); }
.acc-choice label:has(input:focus-visible), .acc-toggles label:has(input:focus-visible) { box-shadow: var(--control-ring); }
.acc-choice label:has(input:focus-visible) input, .acc-toggles label:has(input:focus-visible) input { box-shadow: none; }
.acc-choice label span, .acc-toggles label span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-choice label b, .acc-toggles label b { font-weight: 600; color: var(--heading); }
.acc-choice small, .acc-toggles small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.acc-choice input, .acc-toggles input { margin-top: 1px; }
.acc-choice.inline { flex-direction: row; flex-wrap: wrap; }
.acc-choice.inline label { flex: 1 1 140px; }
/* On/off rows: the words first, the switch at the end, centred on the row. */
.acc-toggles label { align-items: center; justify-content: space-between; }
.acc-toggles label > span { flex: 1 1 auto; }
.acc-toggles input[role="switch"] { order: 2; margin: 0; }
/* Not available: quiet, not greyed out to nothing. */
.acc-choice[disabled] label, .acc-choice label:has(input:disabled), .acc-toggles label.off, .acc-toggles label:has(input:disabled) { cursor: not-allowed; background: transparent; border-style: dashed; }
.acc-choice[disabled] label:hover, .acc-choice label:has(input:disabled):hover, .acc-toggles label:has(input:disabled):hover { border-color: var(--line-strong); }
.acc-choice[disabled] label b, .acc-choice label:has(input:disabled) b, .acc-toggles label.off b, .acc-toggles label:has(input:disabled) b { color: var(--muted); }
/* A checked answer (a quiz, the recall check after a Ghost Drive): the right option in the good colour, a wrong one
   chosen in the problem colour, each with a word as well as the colour; the rest stay quiet. */
.acc-choice label.right, .acc-choice label.right:has(input) { border-style: solid; border-color: var(--good-dark); background: var(--good-wash); }
.acc-choice label.wrong, .acc-choice label.wrong:has(input) { border-style: solid; border-color: var(--red-dark); background: var(--red-wash); }
.acc-choice label.right small { color: var(--good-dark); font-weight: 600; }
.acc-choice label.wrong small { color: var(--red-dark); font-weight: 600; }
.acc-choice[disabled] label.right span, .acc-choice[disabled] label.wrong span { color: var(--ink); }
.acc-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.acc-toggles { display: flex; flex-direction: column; gap: 8px; }
.acc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.acc-facts dt { color: var(--muted); }
.acc-facts dd { margin: 0; overflow-wrap: anywhere; }
.acc-person { display: flex; gap: 16px; align-items: center; }
.acc-person > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-person h2 { overflow-wrap: anywhere; }
.acc-colour { display: flex; gap: 8px; align-items: center; }
.acc-colour input[type="color"] { width: 48px; height: 44px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); flex: 0 0 48px; }
.acc-perms { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.acc-perms li { font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); padding: 4px 10px; border-radius: 999px; }
.acc-matrix input { width: 20px; height: 20px; }
.acc-support { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--amber-wash); color: var(--amber-dark); font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
  /* Phones: 16px stops iOS zooming into a field; 44px is the smallest comfortable tap target. */
  .acc-centre .input, .acc-stack .input, .acc-form .input, .fb-sheet .input, .fb-sheet textarea { font-size: 16px; }
  table.t .hide-s { display: none; }
}

/* ---------- maps, place lists, numbered rows (the Drive lab and Drive Studio's route editor) ---------- */
/* A map (Google's, drawn by the tool) in a rounded box, with a note laid over its foot for loading or a problem. */
.map-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); min-height: 240px; }
.map-wrap .map { position: absolute; inset: 0; }
.map-note { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 8px; background: var(--card); color: var(--muted); font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.map-note.bad { color: var(--red-dark); background: var(--red-wash); }
/* A search box with its button on one line. */
.search-row { display: flex; gap: 8px; }
.search-row .input { flex: 1 1 auto; min-width: 0; }
/* Places found by a search: each a full-width button, the name over its address. */
.places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.places button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.places button:hover { border-color: var(--line-hover); }
.places small { color: var(--muted); font-size: 13px; }
/* A list of choices (one chosen): aria-pressed marks it; a swatch ties it to its colour on a map or chart. */
.places button[aria-pressed="true"] { border-color: var(--heading); box-shadow: 0 0 0 1px var(--heading) inset; }
.places .swatch, .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
/* A numbered list of rows (stops, pins, spoken directions, talking points): the number, the body, actions on the right. */
ol.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ol.rows > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-2); }
ol.rows > li:first-child { border-top: 0; padding-top: 0; }
ol.rows > li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
ol.rows > li small { color: var(--muted); font-size: 13px; }
ol.rows > li.muted .input, ol.rows > li.muted b { color: var(--muted); text-decoration: line-through; }
ol.rows > li.warn { background: var(--amber-wash); border-radius: 8px; padding: 10px; }
ol.rows .row-actions { flex-wrap: nowrap; }
.n { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px; background: var(--btn-primary-bg); color: var(--btn-primary-text); font-size: 12px; font-weight: 700; }
.n.accent { background: var(--accent-fill); color: var(--on-accent); }
/* A named place rather than a step number (Drive Studio's "Checkpoint 1"): outlined, so it never reads as one. */
.n.outline { background: var(--card); color: var(--heading); border: 2px solid var(--heading); white-space: nowrap; padding: 0 10px; }
ol.rows > li.checkpoint { background: var(--line-2); border-radius: 8px; padding: 10px; border-top: 0; margin: 4px 0; }
/* In a narrow column (beside a map): the actions go under the body, as on a phone, so the body keeps its width. */
ol.rows.stacked > li { grid-template-columns: auto minmax(0, 1fr); }
ol.rows.stacked > li > .row-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 600px) { ol.rows > li { grid-template-columns: auto minmax(0, 1fr); } ol.rows > li > .row-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; } }
/* A main column and a narrower side column (a map with its list beside it); one column below 1100px. */
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* A form inside a sheet; facts as a list of label and value. */
.sheet-body { display: flex; flex-direction: column; gap: 16px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 8px; } }
/* A checkbox or radio with words (the touch screen rules above make it 44 tall). */
label.check { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: 15px; cursor: pointer; }
label.check input { margin: 0; }
/* Chips in a row (a set of tags to choose from). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* A big number with what it is under it, in a row of a few (distance, time, stops). */
.readout { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.readout div { display: flex; flex-direction: column; }
.readout b { font-family: var(--display); font-size: 24px; color: var(--heading); font-variant-numeric: tabular-nums; }
.readout span { font-size: 13px; color: var(--muted); }
@media (pointer: coarse) { label.check { min-height: 44px; } }

/* Step cards (StepCard): a set-up done in order. The number in a circle, done steps ticked and quieter, the step to do
   next marked; waiting steps are dimmed but readable. */
.step-card-head h2 { display: flex; align-items: center; gap: 12px; }
.step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 700;
  background: var(--navy-wash); color: var(--heading); border: 1px solid var(--line-strong); }
.step-card.now { box-shadow: inset 3px 0 0 var(--amber, #d97706); }
.step-card.now .step-n { background: var(--heading); color: var(--card); border-color: var(--heading); }
.step-card.done .step-n { background: var(--good-wash); color: var(--good-dark); border-color: transparent; }
/* A step still to come is marked by its head, not by fading its body: faded hint text falls below the 4.5:1 contrast the
   kit keeps (the sweep's contrast check). */
.step-card.later .card-head h2 { color: var(--ink-2); }
.step-aside { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
/* Progress rows (ol.rows.progress): a numbered list where each row is a step on a way through (a training path, coaching
   points in order). The number in a circle (.step-n, as step cards), joined by a line; li.done ticked and quieter,
   li.now (the step to do next) marked down its left edge, with aria-current="step". */
ol.rows.progress > li { position: relative; }
ol.rows.progress > li > .step-n { position: relative; z-index: 1; }
ol.rows.progress > li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 42px; bottom: -12px; width: 1px; background: var(--line-strong); }
ol.rows.progress > li:first-child:not(:last-child)::after { top: 30px; }
ol.rows.progress > li.now { box-shadow: inset 3px 0 0 var(--amber, #d97706); border-radius: 0 8px 8px 0; background: var(--amber-wash); padding: 12px 10px 12px 12px; border-top-color: transparent; }
ol.rows.progress > li.now + li { border-top-color: transparent; }
ol.rows.progress > li.now::after { display: none; }
ol.rows.progress > li.now .step-n { background: var(--heading); color: var(--card); border-color: var(--heading); }
/* Quiet text on the tinted row stays readable (muted grey on the amber wash falls below AA in dark mode). */
ol.rows.progress > li.now :is(small, .note, .muted) { color: var(--ink-2); }
ol.rows.progress > li.done .step-n { background: var(--good-wash); color: var(--good-dark); border-color: transparent; }
ol.rows.progress .row-actions { display: flex; align-items: center; gap: 8px; }
/* A short code to read out or type (a guest code): large, spaced, easy to tell apart. */
.code-display { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(34px, 9vw, 56px); font-weight: 700; letter-spacing: 0.25em; text-align: center;
  padding: 18px 12px 18px calc(12px + 0.25em); border-radius: 12px; background: var(--navy-wash); color: var(--heading); border: 1px solid var(--line-strong); user-select: all; margin: 0; }

/* Tab panels (TabPanel): the space under the tabs, laid out as the page is (cards one under another). */
.kit-tab-panel { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kit-tab-panel:focus-visible { outline: none; }
/* A table in groups (Table's groups): a heading row per group, with its count. */
table.t.grouped tr.group th { padding: 22px 10px 8px; border-bottom: 1px solid var(--line); color: var(--heading); font-size: 14px; font-weight: 700; white-space: normal; text-align: left; }
table.t.grouped tbody:first-of-type tr.group th { padding-top: 14px; }
table.t.grouped tr.group small { margin-left: 10px; font-weight: 500; color: var(--muted); font-size: 13px; }
table.t td .note, table.t td small { display: block; }
/* Set-up checklist (Checklist): progress rows with a status pill beside each title and one action at the end. */
ol.rows.checklist .checklist-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
ol.rows.checklist > li { align-items: center; }
ol.rows.checklist > li.done b { color: var(--ink-2); }
/* A bar of actions at the foot of the window (ActionBar): stays in view while a long review scrolls. */
.action-bar { position: sticky; bottom: calc(12px + var(--safe-bottom)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--card); box-shadow: 0 10px 30px rgba(20, 25, 50, 0.16); }
:root[data-theme="dark"] .action-bar { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.action-bar-text { font-size: 14px; color: var(--ink-2); min-width: 0; }
.action-bar .row-actions { margin-left: auto; }
@media (max-width: 600px) { .action-bar .row-actions { width: 100%; } .action-bar .row-actions .btn { flex: 1 1 0; } }
/* "Show more" under a row (details.more): the summary is a quiet link-like line, the content indented under it. */
details.more > summary { cursor: pointer; color: var(--heading); font-size: 13px; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s var(--ease); }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > :not(summary) { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--line-strong); color: var(--ink-2); font-size: 14px; }
/* Icons (Icon): drawn in the text colour, at the size given. */
svg.icon { flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
/* One line of a longer text (.one-line): a preview cut with an ellipsis, the whole text in the row's editor. */
.one-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
/* Review rows (ol.rows.review-rows): a new version shown as one list, each row once with a plain status Pill beside its
   title (New, Reworded, Unchanged, Removed), the new text, the old text folded in details.more, and a removed row struck
   through. docs/design-kit.md, "Reviewing a new version". */
.review-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
ol.rows.review-rows .review-now { margin: 2px 0 0; color: var(--ink); max-width: 100ch; }
ol.rows.review-rows > li.review-removed .review-title b { text-decoration: line-through; color: var(--ink-2); }
ol.rows.review-rows .review-note { color: var(--amber-dark); }
.review-counts { margin: 0; color: var(--ink-2); }