/* The v2 layer, part 3: the customer app, its sign-in pages and the pages its e-mail links open (REDESIGN phase 2, APP-V2 2026-11-02;
   DESIGN-v2.md "The Line Diagram"). Loads after core.css. It replaces the app's eleven stylesheets of the first system (app.css, app-v2.css,
   polish.css, design3.css, checks.css, explain.css, funnel.css, sitesec.css, support.css, auth-v3.css, auth-methods.css); the components of
   the first days (app/css/activation.css) keep their own sheet because the landing page draws them too (web_assets.SITE_APP_FILES).
   The app is a work surface used every day, so clarity comes first: a cool canvas, white panels lifted by a ring and a soft navy shadow
   with a little roundness (APP-WOW 2026-11-02: core.css --e-1, --r-3), headings carried by weight and space instead of ink rules,
   Overpass for every word, the navy sign field for the rail, the lamp on the rail's current entry and on the page's main action.
   A status is a lit lamp (its glyph in the lamp colour with its own halo) with its word in the status ink; a gap is an unlit lamp.
   Status colours mean status only and always come with a glyph and a word.
   Rules this file keeps (tests/test_web_motion.py, test_web_contract.py, test_web_polish.py read it): only transform and opacity move,
   every duration is a motion token, nothing loops (the loading shimmer passes four times, Full motion only), one focus ring that is never
   removed from anything a person can operate, every url reference a /static/ path. Class names are the views' own (views/*.js build the DOM);
   the prototype's names (.board, .site-row, .tracks, .why-cols ...) stay for web/prototype-2026-10-29 until phase 2 deletes it. */

:root {
  --toast-ms: 5000ms;          /* equals TOKENS.toast in motion.js: how long a toast stays */
  --rail-w: 256px;
  --topbar-h: 64px;
  --app-control: 44px;         /* the app's control height: dense enough for daily work, never under 44 px on touch */
  --trouble: #fdf5f4;          /* the faint ground of a row or card in trouble (its glyph and word say why) */
  --uneasy: #fdf8ef;           /* the faint ground of a row or card with a regional issue or a warning */
  --card: var(--paper);        /* a panel on the canvas: white, lifted by --e-1, corners --r-3 */
}
/* the tab is hidden: every animation waits (motion-fixed.js sets the attribute) */
:root[data-hidden] *, :root[data-hidden] *::before, :root[data-hidden] *::after { animation-play-state: paused !important; }

/* ==== the ground and the type of the app ===================================================================================== */
html { scroll-padding-top: calc(var(--topbar-h) + var(--s-4)); }   /* the sticky top bar never covers a control that focus scrolls to */
.app-body { background: var(--canvas); }
.app-body h1, .auth-page h1 { font-size: var(--t-2xl); font-weight: var(--w-display); line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.app-body h2, .auth-page h2 { font-size: var(--t-xl); font-weight: var(--w-strong); line-height: 1.15; letter-spacing: -0.015em; }
.app-body h3, .auth-page h3 { font-size: var(--t-lg); font-weight: var(--w-strong); line-height: 1.2; letter-spacing: 0; }
.app-body h4, .auth-page h4 { font-size: var(--t-md); font-weight: var(--w-strong); line-height: 1.25; }
.app-body p + p { margin-top: 0; }
/* a reading measure for every sentence in the app: about 75 characters of Overpass (56ch), however wide its panel (impeccable detect line-length) */
.view p { max-width: 56ch; }
.mono { font-family: var(--mono); font-size: var(--t-xs); overflow-wrap: anywhere; }
.muted { color: var(--ink-2); }
.lead { color: var(--ink-2); }
.narrow { max-width: 28rem; }
.aside { margin-top: var(--s-4); }
.loading { color: var(--ink-2); }
/* the development build's line (brand.dev_footer): TEST violet, the honest label */
.dev-build { padding: 8px var(--s-4) 6px; background: var(--test-bg); color: var(--test); font-size: var(--t-xs); font-weight: var(--w-label); text-align: center; }
.on-night { background: var(--sign); color: var(--on-sign); }            /* the first system's name for the sign field, still built by a few views */
.on-night a:not(.btn) { color: var(--on-sign); }
.on-night :focus-visible, .on-night:focus-visible, .on-sign:focus-visible { outline-color: var(--lamp); }

/* ==== the shell: the rail (the sign field) beside the work area ============================================================== */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; box-shadow: inset var(--rail-w) 0 0 var(--sign); }
/* The rail never outgrows the window: the entries scroll inside it, the person and "Sign out" stay in view. */
.rail { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  padding: var(--s-3) var(--s-3) var(--s-3); background: var(--sign); color: var(--on-sign); }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-inline: 10px; }
.rail .wordmark { color: var(--on-sign); min-height: 44px; }
.rail .wordmark .mb-a, .rail .wordmark .mb-b { transform-box: fill-box; transition: transform var(--dur-move) var(--ease-standard); }
.rail .wordmark .mb-a { transform-origin: 100% 100%; }
.rail .wordmark .mb-b { transform-origin: 100% 0; }
@media (hover: hover) {
  .rail .wordmark:hover .mb-a { transform: rotate(-3deg); }   /* the two beams close a little on the lamp: two regions agreeing */
  .rail .wordmark:hover .mb-b { transform: rotate(3deg); }
}
.rail-body { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: var(--s-3); }
/* the box reaches the rail's edges so the lamp bar of the current entry (left: -12px) is not cut off */
.rail-nav { position: relative; display: grid; gap: 2px; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-inline: calc(-1 * var(--s-3)); padding: 0 var(--s-3) var(--s-2); scrollbar-width: thin; scrollbar-color: var(--sign-3) transparent; }
.rail-label { padding-inline: 10px; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--on-sign-2); }
.org-name { margin: 0 0 var(--s-1); min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 2px 10px 0; background: var(--sign-2);
  border-radius: var(--r-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-weight: var(--w-strong); color: var(--on-sign); overflow-wrap: anywhere; }
/* the organisation's initial: a small lamp-lit plate in front of its name (a picture of the name, the name is read out) */
.org-name::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--r-round); background: var(--lamp);
  filter: drop-shadow(0 0 4px var(--halo-lamp)); }
.org-switch { margin: 4px 0 var(--s-1); }
.nav-group { margin: 10px 10px 2px; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--on-sign-2); }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-link { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 2px 10px 0; color: var(--on-sign);
  border-radius: var(--r-2); font-weight: var(--w-label); font-size: var(--t-sm); text-decoration: none; transition: transform var(--dur-press) var(--ease-standard); }
.rail .nav-link { color: var(--on-sign-2); }
.rail .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-sign); text-decoration: none; }
.nav-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-link .nav-icon { color: var(--on-sign-2); }
.nav-text { min-width: 0; overflow-wrap: anywhere; }
/* "you are here": the lamp, once, on the current entry: a 4 px bar on its edge and the icon lit (the screen's one amber moment) */
.nav-link::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--lamp); filter: drop-shadow(0 0 4px var(--halo-lamp)); transform: scaleY(0); transition: transform var(--dur-move) var(--ease-standard); }
.rail .nav-link[aria-current="page"] { background: var(--sign-2); color: var(--on-sign); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.nav-link[aria-current="page"]::before { transform: scaleY(1); }
.nav-link[aria-current="page"] .nav-icon { color: var(--lamp); }
.nav-link:active { transform: scale(var(--press-scale)); }
.rail-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s-3); padding: var(--s-2) 10px 0;
  box-shadow: inset 0 1px 0 var(--sign-3); color: var(--on-sign-2); }
.nav-list.secondary { flex: 0 0 calc(100% + 20px); margin: 0 -10px 2px; }
.rail-foot .nav-link { min-height: 30px; }
.rail-foot > .btn { flex: none; }
.rail-foot .who { flex: 1 1 100%; min-width: 0; font-size: var(--t-xs); overflow-wrap: anywhere; }   /* an address is never broken to fit beside a button */
.nav-hint { flex: 1 1 100%; min-height: 28px; padding: 2px 0 0; border: 0; background: none; color: var(--on-sign-2); font: inherit;
  font-size: var(--t-xs); text-align: left; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.nav-hint:hover { color: var(--on-sign); }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 2px 16px 0; border: 0; border-radius: var(--r-2); background: var(--sign-2); color: var(--on-sign);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: inherit; font-weight: var(--w-strong); cursor: pointer;
  transition: transform var(--dur-press) var(--ease-standard); }
.menu-toggle:hover { background: var(--sign-2); }
.menu-toggle:active { transform: scale(var(--press-scale)); }
.menu-bars { position: relative; width: 16px; height: 2px; background: currentColor; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
  transition: transform var(--dur-move) var(--ease-standard); }
.menu-bars::before { top: -5px; }
.menu-bars::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-bars::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars::after { transform: translateY(-5px) rotate(-45deg); }
/* the client portal: whose portal, which client, read only; its "Powered by" line in the rail's foot */
.portal-head { margin: 0 0 var(--s-1); }
.portal-head .portal-logo { display: block; width: auto; max-width: 120px; height: auto; max-height: 40px; margin: 0 10px var(--s-2); padding: 4px 6px; background: #fff; }
.portal-client { margin: 0 10px var(--s-1); color: var(--on-sign); font-size: var(--t-sm); font-weight: var(--w-strong); overflow-wrap: anywhere; }
.note.portal-note, .note.portal-powered { margin: 0 10px; color: var(--on-sign-2); font-size: var(--t-xs); }
.note.portal-powered { margin: 0; }

/* ==== the work area ========================================================================================================== */
.stage { min-width: 0; display: flex; flex-direction: column; }
.shell, .stage { overflow-x: clip; }   /* the narrow screen never scrolls sideways because of a decoration */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-3); min-height: var(--topbar-h);
  padding: 8px clamp(16px, 3vw, 32px) 6px; background: var(--paper); box-shadow: 0 1px 0 var(--hair), 0 4px 14px -10px rgba(13, 36, 51, 0.25); }
/* the bar frosts once the work scrolls under it (the sign band's recipe, DESIGN-v2.md 6.1): at least 86 % white, so its words keep their contrast */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
}
@media (prefers-reduced-transparency: reduce) { .topbar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.topbar .crumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); min-width: 0; flex: 1; padding: 0; font-size: var(--t-sm); color: var(--ink-2); }
.crumb-org { font-weight: var(--w-strong); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.crumb-page { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb-page::before { content: "/"; margin-right: var(--s-2); color: var(--ink-3); }
/* the live sign: once the portfolio has been read, the sites that need a person, said as a status block that opens the portfolio */
.live-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 16px 0 14px; border-radius: var(--r-pill); font-weight: var(--w-strong);
  font-size: var(--t-sm); text-decoration: none; white-space: nowrap; transition: transform var(--dur-press) var(--ease-standard); }
.live-pill svg { width: 14px; height: 14px; flex: none; margin-top: -2px; }
.live-pill:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.live-pill:active { transform: scale(var(--press-scale)); }
/* the alarm lamp: red, lit, with a soft glow under it */
.live-pill.down { background: var(--down); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(13, 36, 51, 0.25), 0 4px 10px -6px rgba(13, 36, 51, 0.35); }
.live-pill.down svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55)); }
.live-pill.regional_issue { background: var(--regional-bg); color: var(--regional); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.18); }
.live-pill.steady { background: var(--steady-bg); color: var(--steady); box-shadow: inset 0 0 0 1px rgba(25, 112, 79, 0.16); }
/* Ask Beam's launcher in the bar (beam.css draws it on the sign field; here it sits on white, so it is the bar's quiet button) */
.topbar .beam-launcher.is-inline { min-height: 40px; padding: 2px 14px 0; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  box-shadow: var(--e-1); font-size: var(--t-sm); font-weight: var(--w-strong); }
.topbar .beam-launcher.is-inline:hover, .topbar .beam-launcher.is-inline[aria-expanded="true"] { background: var(--raise); }
/* a demo organisation (synthetic data) says so on every page, above the bar: a quiet amber strip with the lamp dot */
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px var(--s-4) 4px; background: var(--lamp-soft); color: var(--ink);
  font-size: var(--t-xs); font-weight: var(--w-strong); text-align: center; box-shadow: inset 0 -1px 0 rgba(138, 86, 0, 0.16); }
.demo-banner::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: -2px; border-radius: var(--r-round); background: var(--lamp-regional); }
.view { width: 100%; max-width: 1320px; padding: var(--s-6) clamp(16px, 3vw, 40px) var(--s-8); }
.view:focus { outline: none; }
/* a new page's blocks rise in one after another (the router fades the whole view); nothing is hidden waiting for it */
.view > * { animation: mi-rise-md var(--dur-enter) var(--ease-enter) both; }   /* a new page: the work area fades in and its blocks rise 8 px, one after another; the rail stays still */
.view > :nth-child(2) { animation-delay: var(--stagger); }
.view > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.view > :nth-child(n+4) { animation-delay: calc(var(--stagger) * 3); }
body.auth-mode .view > * { animation-duration: 0ms; }

/* ==== the head of a page and its sections ==================================================================================== */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.page-head-text { min-width: 0; max-width: 46rem; }
.page-head h1:focus { outline: none; }
.page-head .lead { margin-top: 8px; max-width: 56ch; color: var(--ink-2); font-size: var(--t-sm); text-wrap: pretty; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.block { margin-top: var(--s-7); }
.view > .block + .block { margin-top: var(--s-7); }
/* a section is named by its heading's weight and the air above it; no rule under it */
.block > h2 { margin-bottom: var(--s-3); font-size: var(--t-lg); letter-spacing: -0.01em; }
.block h3 { margin: var(--s-5) 0 var(--s-2); }
.block > .note { margin-bottom: var(--s-3); }
.block > p + .form { margin-top: var(--s-3); }
.block > .facts-list + *, .block > .notice + .note { margin-top: var(--s-3); }
.export-list { margin-top: var(--s-4); }
.quota, .lead-gap { margin-bottom: var(--s-3); }
.note { line-height: 1.5; text-wrap: pretty; }
.note.warn { color: var(--regional); font-weight: var(--w-label); }   /* a warning said beside its object (the homograph note of a channel) */
.hint { text-wrap: pretty; }
.tag { margin-left: var(--s-2); vertical-align: 1px; }
.app-body .tag, .auth-page .tag { border-radius: var(--r-1); }

/* ==== buttons: the app's sizes on core.css's signs ============================================================================ */
/* the primary is the ink sign with a little depth; the secondary is quiet (white, a ring, no boxed ink outline); the page's main action
   (the lamp button in the page's head) is the lamp, lit, with its own warm light under it; on the sign field every lamp button is lit */
.app-body .btn, .auth-page .btn { min-height: var(--app-control); padding-inline: 18px; border-radius: var(--r-2); font-size: var(--t-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(13, 36, 51, 0.22), 0 3px 8px -4px rgba(13, 36, 51, 0.35); }
.app-body .btn:hover, .auth-page .btn:hover { background: #1f313d; }
.app-body .btn.small, .auth-page .btn.small { min-height: var(--control-sm); padding-inline: 14px; }
@media (pointer: coarse) { .app-body .btn.small, .auth-page .btn.small { min-height: 44px; } }
.btn.secondary, .app-body .btn.secondary, .auth-page .btn.secondary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.16), 0 1px 2px rgba(13, 36, 51, 0.06); }
.btn.secondary:hover, .app-body .btn.secondary:hover, .auth-page .btn.secondary:hover { background: var(--raise); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.28), 0 1px 2px rgba(13, 36, 51, 0.06); }
.btn.danger, .app-body .btn.danger { background: var(--down); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(177, 38, 28, 0.3); }
.btn.danger:hover, .app-body .btn.danger:hover { background: #8f1d15; }
/* "lamp" in a card or a list is the ink primary (one lit control per screen); in the page's head it is the lit lamp (10.7:1 ink on it) */
.btn.lamp { background: var(--ink); color: var(--paper); }
.btn.lamp:hover { background: #1f313d; }
.app-body .page-actions .btn.lamp { background: var(--lamp); color: var(--on-lamp);
  box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(13, 36, 51, 0.2), 0 4px 10px -6px rgba(13, 36, 51, 0.35); }
.app-body .page-actions .btn.lamp:hover { background: #f7cd66; }
.on-sign .btn.lamp, .on-night .btn.lamp, .app-body .on-sign .btn.lamp { background: var(--lamp); color: var(--on-lamp); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); }
.on-sign .btn.lamp:hover, .on-night .btn.lamp:hover { background: var(--lamp-soft); }
.on-sign .btn.lamp:focus-visible, .on-night .btn.lamp:focus-visible { outline-color: var(--on-sign); }   /* a lamp ring beside a lamp button reads as its edge */
.btn.ghost-night, .app-body .btn.ghost-night { background: rgba(255, 255, 255, 0.04); color: var(--on-sign); box-shadow: inset 0 0 0 1px rgba(194, 210, 220, 0.4); }
.btn.ghost-night:hover, .app-body .btn.ghost-night:hover { background: var(--sign-2); }
.on-sign .btn.secondary, .on-night .btn.secondary { background: transparent; color: var(--on-sign); box-shadow: inset 0 0 0 1px rgba(194, 210, 220, 0.45); }
.on-sign .btn.secondary:hover, .on-night .btn.secondary:hover { background: var(--sign-2); }
.linkish { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.22em; cursor: pointer; }
.linkish:hover { text-decoration-thickness: 2px; }
.upgrade-link { font-weight: var(--w-label); }

/* ==== fields: the app builds plain inputs (ui.js field()), so the field look is given by element here ======================== */
:is(.app-body, .auth-page) :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea) {
  width: 100%; min-height: var(--app-control); padding: 0 12px; border: 1px solid var(--edge); border-radius: var(--r-2);
  background-color: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-md); box-shadow: var(--e-inset); }
:is(.app-body, .auth-page) textarea { padding-block: 10px; line-height: var(--lh-body); resize: vertical; }
:is(.app-body, .auth-page) select { appearance: none; padding-right: 40px; background-image: url("/static/shared/img/v2/chevron.svg");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
@media (hover: hover) {
  :is(.app-body, .auth-page) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(:focus-visible):not(:disabled):hover { border-color: var(--ink-2); }
}
:is(.app-body, .auth-page) :is(input, select, textarea):focus-visible { border-color: var(--focus); box-shadow: var(--e-inset), 0 0 0 4px rgba(11, 92, 173, 0.12); }
:is(.app-body, .auth-page) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--down); }
:is(.app-body, .auth-page) :is(input, select, textarea):disabled { background-color: var(--paper-2); color: var(--ink-2); border-color: var(--rule); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.field > label { font-weight: var(--w-label); }
.field .hint, .field-error { margin: 0; }
.field.inline { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px; }
.field.inline select { width: auto; min-width: 10rem; }
.field.label-hidden > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check > input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }
.check.small { font-size: var(--t-sm); gap: 8px; }
.check.small input { width: 18px; height: 18px; }
.form { display: grid; gap: var(--s-4); max-width: 32rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.form-actions > .form-msg { flex: 1 1 8rem; min-height: 0; }
.form-msg.error, .action-msg.error { color: var(--down); font-weight: var(--w-label); }
.form[aria-busy="true"] .btn[type="submit"] { cursor: progress; }
.action { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.action-msg { font-size: var(--t-sm); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--s-3); }
fieldset { min-width: 0; }
fieldset.plans, fieldset.bulk-checks { border: 0; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: 10px; }
fieldset.plans legend, fieldset.bulk-checks legend { font-weight: var(--w-label); margin-bottom: 6px; padding: 0; }
fieldset.plans > .hint, .bulk-checks > .hint { margin: 0 0 4px; }
.plan-choice { display: flex; align-items: flex-start; gap: 10px; }
.plan-choice input[type="radio"] { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.plan-choice .badge-test { margin-left: 8px; }
.plan-limits { display: block; color: var(--ink-2); font-size: var(--t-sm); margin-top: 2px; }
.fake-checkout { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); display: grid; gap: 10px; max-width: 36rem; border-radius: var(--r-3); background: var(--test-bg); box-shadow: inset 0 0 0 1px rgba(107, 63, 160, 0.16); }
.color-pick { width: 48px; height: 40px; padding: 2px; margin-top: 8px; }
.file-pick { cursor: pointer; }
.file-pick[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
input.visually-hidden:focus-visible + .file-pick { outline: 3px solid var(--focus); outline-offset: 2px; }

/* disclosures: long or advanced material stays one click away; the chevron turns, the content rises in */
details.add-site, details.more, details.danger-zone, details.perf, details.evidence, details.crawl-kind { margin-top: var(--s-2); }
:is(details.add-site, details.more, details.danger-zone, details.perf, details.evidence, details.crawl-kind) > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; list-style: none; cursor: pointer; font-weight: var(--w-label); color: var(--link); }
:is(details.add-site, details.more, details.danger-zone, details.perf, details.evidence, details.crawl-kind) > summary::-webkit-details-marker { display: none; }
:is(details.add-site, details.more, details.danger-zone, details.perf, details.evidence, details.crawl-kind) > summary::before {
  content: ""; flex: none; width: 14px; height: 14px; background: url("/static/shared/img/v2/chevron.svg") center / contain no-repeat; transform: rotate(-90deg);
  transition: transform var(--dur-move) var(--ease-standard); }
:is(details.add-site, details.more, details.danger-zone, details.perf, details.evidence, details.crawl-kind)[open] > summary::before { transform: none; }
details.danger-zone > summary { color: var(--ink-2); }
details.perf > summary, details.crawl-kind > summary { color: var(--ink); }
details[open]:is(.add-site, .evidence) > :not(summary), details[open]:is(.more, .danger-zone) > .more-body { animation: lx-rise var(--dur-state) var(--ease-standard) both; }
details.add-site > .form { margin-top: var(--s-3); }
.more-body { display: grid; gap: var(--s-2); padding: var(--s-2) 0 var(--s-2) 22px; }
.more-body > * { min-width: 0; }
/* a field's long helper text: its first sentence stays in view, the rest is one click away, word for word (ui.js hintBlock) */
details.more.hint-more { margin-top: 0; }
details.more.hint-more > summary { font-size: var(--t-sm); }
details.more.hint-more > .more-body { padding-block: 0 var(--s-1); }
.danger-zone { margin-top: var(--s-6); }
summary { cursor: pointer; }
summary:focus-visible, [tabindex="0"]:focus-visible, .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ==== status: a glyph and a word, the colour repeats them (ui.js statusMark, outcomeMark) ===================================== */
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--w-label); white-space: nowrap; }
.status svg { width: 14px; height: 14px; flex: none; margin-top: -2px; }
.status.steady { color: var(--steady); }
.status.regional_issue { color: var(--regional); }
.status.down { color: var(--down); }
.status.data_unavailable, .status.paused, .status.not_monitored, .status.x { color: var(--unknown); }
.status.maintenance, .status.planned { color: var(--planned); }
/* the lamps: the glyph is lit in its lamp colour and throws a little light (drop-shadow follows its shape: circle, triangle, half ring);
   "no data", paused and not checked are unlit lamps, so a gap never glows */
.status.steady > svg, .rg.steady > svg { color: var(--lamp-steady); filter: drop-shadow(0 0 3px var(--halo-steady)); }
.status.down > svg, .rg.down > svg { color: var(--lamp-down); filter: drop-shadow(0 0 3px var(--halo-down)); }
.status.regional_issue > svg { color: var(--lamp-regional); filter: drop-shadow(0 0 3px var(--halo-regional)); }
.status.maintenance > svg, .status.planned > svg { color: var(--lamp-planned); filter: drop-shadow(0 0 3px var(--halo-planned)); }
/* a region's name is a machine value: a small mono tag */
.region { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px 0; border-radius: var(--r-1); background: var(--raise); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--mono); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.err { font-family: var(--mono); font-size: var(--t-xs); color: var(--down); }
.target { color: var(--ink-2); }
/* a label that says a state in words beside a list entry (status pages, reports, maintenance): a filled tag, never a control */
.pub-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 24px; padding: 2px 10px 0; border-radius: var(--r-pill); font-size: var(--t-xs);
  font-weight: var(--w-strong); background: var(--paper-3); color: var(--ink-2); }
.pub-badge.live { background: var(--steady-bg); color: var(--steady); }
.pub-badge.live::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--lamp-steady); filter: drop-shadow(0 0 3px var(--halo-steady)); }
.pub-badge.off { background: var(--unknown-bg); color: var(--unknown); }
.pub-badge.warn { background: var(--regional-bg); color: var(--regional); }
.pub-badge.bad { background: var(--down-bg); color: var(--down); }
.pub-badge.planned { background: var(--planned-bg); color: var(--planned); }
.pub-badge.planned::before { content: ""; width: 7px; height: 7px; background: var(--planned-fill); transform: rotate(45deg); }   /* the diamond of the planned state */
.pub-badge.restricted::before { content: ""; width: 8px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px 0; border-radius: var(--r-pill); background: var(--raise); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--t-xs); font-weight: var(--w-label); }
.sev { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-strong); font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.sev svg { width: 14px; height: 14px; flex: none; margin-top: -2px; }
.sev.critical { color: var(--down); }
.sev.warning { color: var(--regional); }
.sev.critical > svg { color: var(--lamp-down); filter: drop-shadow(0 0 3px var(--halo-down)); }
.sev.warning > svg { color: var(--lamp-regional); filter: drop-shadow(0 0 3px var(--halo-regional)); }
.sev.notice { color: var(--ink); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; display: inline-flex; }   /* a mark, never a box */
.fd-count.notice, .fd-card.notice { margin: 0; }
.sev.unavailable, .sev.info { color: var(--unknown); }
.before { color: var(--regional); font-weight: var(--w-strong); }

/* ==== notices: a tinted plate with a glyph, the words, the way on (ui.js notice); never a coloured stripe on one side ======== */
/* the banner is a div (ui.js notice); "notice" is also a severity of a finding (a mark, a tile and a card below): those are never boxes */
div.notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 12px; margin: var(--s-3) 0; padding: 14px 18px 12px; background: var(--paper);
  box-shadow: var(--e-1); color: var(--ink); }
.app-body div.notice, .auth-page div.notice { border-radius: var(--r-3); }
div.notice:has(> .notice-glyph) { grid-template-columns: 18px minmax(0, 1fr); }
div.notice > :not(.notice-glyph) { grid-column: -2; min-width: 0; }
.notice-glyph { grid-row: span 3; width: 18px; height: 18px; margin-top: 2px; }
div.notice p { max-width: 56ch; color: var(--ink); }
div.notice.info { background: var(--paper); box-shadow: var(--e-1); }
div.notice.ok { background: var(--steady-bg); box-shadow: inset 0 0 0 1px rgba(25, 112, 79, 0.14); }
div.notice.ok > .notice-glyph { color: var(--lamp-steady); filter: drop-shadow(0 0 3px var(--halo-steady)); }
div.notice.warn { background: var(--regional-bg); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.16); }
div.notice.warn > .notice-glyph { color: var(--lamp-regional); filter: drop-shadow(0 0 3px var(--halo-regional)); }
div.notice.error { background: var(--down-bg); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.16); }
div.notice.error > .notice-glyph { color: var(--lamp-down); filter: drop-shadow(0 0 3px var(--halo-down)); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
div.notice ul { padding-left: 1.2em; list-style: disc; }
/* the test build says so: TEST violet, the honest label, nowhere else */
.test-banner { margin-bottom: var(--s-5); padding: 12px 18px 10px; background: var(--test-bg); color: #3d2363; }
.app-body .test-banner { border-radius: var(--r-3); box-shadow: inset 0 0 0 1px rgba(107, 63, 160, 0.16); }
.test-banner strong { color: var(--test); }
.prefill-note { margin: 0 0 var(--s-3); padding: 10px 14px 8px; max-width: 46rem; border-radius: var(--r-2); background: var(--paper); box-shadow: var(--e-1);
  font-weight: var(--w-label); }

/* ==== the branded wait (APP-WOW 2026-11-02): the mark, its lamp lighting and its two beams sweeping in to it, beside the word ======
   It appears only once a wait has lasted --wait-delay (a fast load never shows it), sweeps five half-cycles (4.5 s, under WCAG 2.2.2's
   five seconds) and rests lit; with reduced motion it is a still, lit mark. The boot of the app (index.html) and every loading()
   skeleton use it; the skeleton's bars below it hold the room of what is coming. */
.loading:has(> .wait-mark) { display: flex; align-items: center; gap: 12px; min-height: 36px; font-weight: var(--w-label); color: var(--ink-2);
  animation: lx-fade var(--dur-state) var(--ease-standard) var(--wait-delay) both; }
.wait-mark { display: inline-flex; flex: none; width: 40px; }
.wait-mark svg { display: block; width: 40px; height: auto; overflow: visible; }
.wait-mark .mb-a, .wait-mark .mb-b { transform-box: fill-box; }
.wait-mark .mb-a { transform-origin: 100% 100%; animation: lx-sweep-a var(--dur-scene) var(--ease-standard) var(--wait-delay) 5 alternate both; }
.wait-mark .mb-b { transform-origin: 100% 0; animation: lx-sweep-b var(--dur-scene) var(--ease-standard) var(--wait-delay) 5 alternate both; }
.wait-mark circle:last-of-type { transform-box: fill-box; transform-origin: 50% 50%;
  animation: lx-lamp-on var(--dur-scene) var(--ease-standard) var(--wait-delay) 5 alternate both; }
@keyframes lx-sweep-a { from { transform: rotate(-16deg); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes lx-sweep-b { from { transform: rotate(16deg); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes lx-lamp-on { from { transform: scale(0.4); opacity: 0.2; } to { transform: none; opacity: 1; } }
/* the boot: the mark in the middle of the work area while the app starts */
.view > .loading.boot { justify-content: center; min-height: 50vh; font-size: var(--t-sm); }
.view > .loading.boot .wait-mark, .view > .loading.boot .wait-mark svg { width: 56px; }

/* ==== micro-interactions (APP-WOW 2026-11-02; docs/design/micro-interactions.md): transform and opacity only, every time a token,
   nothing that holds input back; with reduced motion every one of them stands still ================================================ */
/* the primary lights up under the pointer or the keyboard: its lamp glow is a layer whose opacity moves */
.app-body .btn:not(.secondary):not(.danger):not(.ghost-night):not(.copy-btn)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 22px -8px rgba(245, 196, 81, 0.75); opacity: 0; transition: opacity var(--dur-state) var(--ease-standard); }
@media (hover: hover) { .app-body .btn:not(.secondary):not(.danger):not(.ghost-night):not(.copy-btn):hover::before { opacity: 1; } }
.app-body .btn:not(.secondary):not(.danger):not(.ghost-night):not(.copy-btn):active::before { opacity: 1; }
.app-body .btn[aria-disabled="true"]::before, .app-body .btn[disabled]::before { display: none; }
/* a status that changed while the page was open: its lamp pulses once (ui.js noteChange adds the class) while the mark crossfades in */
.lamp-pulse > svg, .lamp-pulse .status > svg, .status.lamp-pulse > svg { animation: lx-lamp-pulse var(--dur-enter) var(--ease-enter) both; }
@keyframes lx-lamp-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* copied: a tick rises in front of the word */
.copy-stack .copy-done { display: inline-flex; align-items: center; gap: 6px; }
.copy-stack .copy-done::before { content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid var(--lamp-steady); border-bottom: 2px solid var(--lamp-steady);
  transform: rotate(-45deg) scale(var(--pop-scale)); opacity: 0; transition: transform var(--dur-enter) var(--ease-enter), opacity var(--dur-state) var(--ease-standard); }
.copied .copy-stack .copy-done::before { transform: rotate(-45deg); opacity: 1; }
/* a step of the setup list finished while the person watched: its check arrives with a pop (views/activation.js marks it) */
.app-body .act-item.just-done > .act-mark { animation: lx-check-pop var(--dur-enter) var(--ease-enter) both; }
.app-body .act-item.just-done > .act-mark svg { animation: lx-check-in var(--dur-enter) var(--ease-enter) var(--dur-press) both; }
@keyframes lx-check-pop { 0% { transform: scale(var(--pop-scale)); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
@keyframes lx-check-in { from { transform: scale(0.3) rotate(-25deg); opacity: 0; } }
/* a disclosure turns its chevron and lets its content rise in (core.css and the rules above); a card that opens a page rises 2 px */

/* ==== empty, loading and error states ======================================================================================== */
/* empty: the end of the line (a terminus), one sentence and at most one action (ui.js empty) */
.state-empty { justify-items: start; padding: var(--s-6); border-radius: var(--r-3); box-shadow: var(--e-1); }
.state-empty > p { color: var(--ink-2); max-width: 30em; }
.state-empty .terminus { margin-bottom: 0; }
/* the end of the line, drawn (the sprite's e-line: a line with two stops running into a terminus); the old CSS line steps aside */
.terminus:has(> .terminus-art) { display: block; width: auto; }
.terminus:has(> .terminus-art)::before, .terminus:has(> .terminus-art)::after { display: none; }
.terminus-art { display: block; width: 168px; height: 48px; color: var(--ink); }
.state-empty > .terminus { animation: lx-fade var(--dur-enter) var(--ease-enter) both; }
.state-empty > p { animation: lx-rise var(--dur-enter) var(--ease-enter) var(--stagger) both; }
.state-empty > .btn { animation: lx-rise var(--dur-enter) var(--ease-enter) calc(var(--stagger) * 2) both; }
/* loading: the word and still bars in the shape of what is coming; a light passes over them four times at most (Full motion) */
/* the container (ui.js loading) keeps core.css's class, which motion.js crossfade() looks for; core.css's .skeleton is one bar */
div.skeleton { display: grid; gap: 10px; height: auto; max-width: 40rem; padding: 2px 0 12px; overflow: visible; background: none; }
div.skeleton::after { display: none; }
.sk-line, .sk-dot, .sk-chips i { position: relative; display: block; overflow: hidden; border-radius: var(--r-1); background: var(--paper-3); }
.sk-line { height: 12px; }
.sk-line:nth-of-type(2) { width: 82%; }
.sk-line:nth-of-type(3) { width: 64%; }
.sk-line:nth-of-type(4) { width: 46%; }
.sk-line::after, .sk-dot::after, .sk-chips i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%); }
:root[data-motion="full"] .sk-line::after, :root[data-motion="full"] .sk-dot::after, :root[data-motion="full"] .sk-chips i::after {
  animation: lx-shimmer var(--dur-shimmer) var(--ease-standard) 4; }
.sk-grid { max-width: none; }
.sk-cards { display: grid; gap: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.sk-card { display: grid; grid-template-columns: 16px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: 18px 18px 16px; background: var(--paper);
  box-shadow: inset 0 -1px 0 var(--hair); }
.sk-card .sk-line { width: auto; }
.sk-dot { width: 14px; height: 14px; border-radius: var(--r-round); }
.sk-chips { display: flex; gap: 6px; }
.sk-chips i { width: 44px; height: 18px; border-radius: var(--r-pill); }
/* the crossfade (motion.js): the leaving skeleton lies over the arriving content, so nothing below moves twice */
.xfade-host { position: relative; }
.skeleton.leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }

/* ==== panels of facts, lists of rows ========================================================================================= */
.facts-list { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.facts-list dt { color: var(--ink-2); font-size: var(--t-sm); }
.facts-list dd { margin: 0; overflow-wrap: anywhere; }
.block > .facts-list { gap: 0 var(--s-5); padding: var(--s-1) var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1);
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); }
.block > .facts-list dt, .block > .facts-list dd { padding: var(--s-3) 0 10px; box-shadow: inset 0 1px 0 var(--hair); }
.block > .facts-list dt:first-of-type, .block > .facts-list dt:first-of-type + dd { box-shadow: none; }
.block > .facts-list dt { font-size: var(--t-sm); }
.block > .facts-list dd { font-weight: var(--w-label); font-variant-numeric: tabular-nums; }
.roles-legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 8px; font-size: var(--t-sm); }
.roles-legend dt { font-weight: var(--w-strong); }
.roles-legend dd { margin: 0; color: var(--ink-2); }
.summary-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.steps-plain { margin: 0; padding-left: 1.25rem; display: grid; gap: 8px; line-height: 1.55; }
/* a plain list inside a section keeps its marks and indent (core.css resets lists for its components) */
.block :is(ul, ol):not([class]), .step-panel :is(ul, ol):not([class]), .dialog :is(ul, ol):not([class]) { padding-left: 1.3em; display: grid; gap: 6px; }
.block ul:not([class]), .step-panel ul:not([class]), .dialog ul:not([class]) { list-style: disc; }
.block ol:not([class]), .step-panel ol:not([class]), .dialog ol:not([class]) { list-style: decimal; }
.steps-plain li::marker { font-weight: var(--w-strong); }

/* lists of things as cards on the fog: status pages, reports, alert channels, maintenance windows; the whole card opens its page */
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
/* a card that opens its page: lifted by the ring and the soft shadow; under the pointer it rises 2 px and its deeper shadow fades in
   (the shadow is a layer whose opacity moves, so only transform and opacity animate) */
.rows .row { position: relative; isolation: isolate; display: grid; align-content: start; gap: 8px; padding: 18px 20px 16px; border-radius: var(--r-3); background: var(--paper);
  box-shadow: var(--e-1); transition: transform var(--dur-move) var(--ease-standard); }
.rows .row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-move) var(--ease-standard); }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
@media (hover: hover) {
  .rows .row:has(.row-title a:hover) { transform: translateY(calc(-1 * var(--move-xs))); }
  .rows .row:has(.row-title a:hover)::before { opacity: 1; }
}
.row-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s-3); }
.row-title a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--t-lg); font-weight: var(--w-strong); color: var(--ink); text-decoration: none; }
.row-title a::after { content: ""; position: absolute; inset: 0; }
.row-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.row-title a:focus-visible { outline-offset: -3px; }
.row-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.row .row-actions { margin-top: 0; position: relative; z-index: 1; }
.rows .row .btn, .rows .row .action, .rows .row details, .rows .row .switch { position: relative; z-index: 1; }   /* controls stay above the card's link */
.pick-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.pick-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1.3fr) auto; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4);
  box-shadow: inset 0 -1px 0 var(--rule); }
.pick-row:last-child { box-shadow: none; }
.form:has(> .pick-list) { max-width: 54rem; }
.pick-row .field, .pick-row .check { min-width: 0; margin: 0; }
.pick-row .check label { overflow-wrap: anywhere; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.tool-list li { padding-bottom: var(--s-4); box-shadow: inset 0 -1px 0 var(--rule); }
.tool-list li:last-child { box-shadow: none; padding-bottom: 0; }
.tool-list p + p { margin-top: var(--s-1); }
.tool-names { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.code-sample { margin: 0; padding: var(--s-3) var(--s-4); overflow-x: auto; border-radius: var(--r-2); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--t-xs); line-height: 1.6; }
.block > .code-sample, .panel .code-sample { background: var(--paper); box-shadow: var(--e-1); }
/* a sample is as wide as its longest line (a one-line header is not a full-width bar); a longer one still scrolls inside the column */
.code-sample { width: fit-content; min-width: min(100%, 20rem); max-width: 100%; }
.secret { font-size: var(--t-md); letter-spacing: 0.06em; border-radius: var(--r-1); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); padding: 2px 6px; overflow-wrap: anywhere; }
.codes { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: 6px 18px; }
.codes code { font-size: var(--t-md); }
.codes-block { padding: 14px 18px; border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }

/* ==== tables: a heavy rule under the head, row lines inside; wide tables scroll inside a focusable region ===================== */
.table-wrap { position: relative; overflow-x: auto; max-width: 100%; background: var(--paper); }
/* a table that stands on the canvas is a panel: rounded, lifted; a table inside a panel keeps a hairline frame instead */
.app-body .table-wrap { border-radius: var(--r-3); box-shadow: var(--e-1); }
.app-body :is(.monitor, .incident, .why, .report-site, .dialog, .fd-card, .sec-card, .step-panel, .add-check, .add-panel, details.perf, details.evidence, .mcp-flow > .block,
  .ask-card, .brand-sheet, .rows .row) .table-wrap { border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair); }
/* a form that stands in its own section on the canvas is a plate (forms inside a panel stay as they are) */
.view .block > form.form, .view .block > div:not([class]) > form.form, .brand-grid > div > form.form, .brand-grid > form.form { max-width: 36rem; padding: var(--s-5);
  border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.mcp-flow > .block > form.form { padding: 0; border-radius: 0; background: none; box-shadow: none; }
/* a list inside a plate is framed by a hairline, never a second plate (no card in a card) */
.view .block > form.form .pick-list, .add-panel .pick-list, .step-panel .pick-list { box-shadow: inset 0 0 0 1px var(--hair); }
.view .block > form.form:has(.pick-list) { max-width: 56rem; }
/* the value line of the month (activation.css draws it for the app and the landing) */
.app-body .act-value { border-radius: var(--r-3); box-shadow: var(--e-1); }
.table-wrap + .note, .table-wrap + p { margin-top: 10px; }
.table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.table caption { text-align: left; padding: 14px 16px 8px; color: var(--ink); font-size: var(--t-sm); font-weight: var(--w-strong); }
.table th, .table td { padding: 12px 16px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.table thead th { padding-block: 10px 8px; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-3); white-space: nowrap; background: var(--raise);
  border-bottom: 1px solid var(--hair); }
.table tbody th { font-weight: var(--w-label); color: var(--ink); font-size: var(--t-sm); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table td.repeat { color: var(--ink-2); }
@media (hover: hover) { .table tbody tr:hover > * { background: var(--raise); } }
.cell-actions { white-space: nowrap; }
.portfolio-table tbody tr[data-status="down"] > * { background: var(--trouble); }
.portfolio-table tbody tr[data-status="regional_issue"] > * { background: var(--uneasy); }
.portfolio-table tbody a { display: inline-flex; align-items: center; min-height: 40px; font-weight: var(--w-strong); }
.evidence-table { min-width: 46rem; }
.evidence-table td:nth-child(2) { white-space: nowrap; }
.perf-table th, .perf-table td { white-space: nowrap; }
.report-table tr.soon > * { background: var(--regional-bg); }

/* ==== overlays: dialog, toast, tooltip. A sign band titles a dialog; the one shadow (core.css --lift) ========================= */
.dialog { width: min(32rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r-4); background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(13, 36, 51, 0.12), var(--lift); overflow: auto; }
.dialog::backdrop { background: var(--scrim); }
.dialog[open] { animation: lx-pop var(--dur-enter) var(--ease-enter) both; }
.dialog[open]::backdrop { animation: lx-fade var(--dur-state) var(--ease-standard) both; }
.dialog.closing::backdrop { animation: lx-fade-out var(--dur-state) var(--ease-exit) both; }
@keyframes lx-fade-out { to { opacity: 0; } }
.dialog > h2:first-child { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; min-height: 56px; margin: 0; padding: 10px 20px 8px;
  background: var(--sign); color: var(--on-sign); font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: 0; }
.dialog > :not(h2:first-child) { margin: 20px; }
.dialog .form { max-width: none; }
.dialog:has(.keys) { width: min(40rem, calc(100vw - 32px)); }
/* PLANS-V2: the Free plan's dialog (views/free-plan.js) is one calm stack; its paused-site list reads like the dialog's own lists;
   the lead holds the first focus only so a screen reader starts there (it is not a control), so it shows no ring */
.free-notice { display: grid; gap: var(--s-4); }
.free-notice h3 { margin: 0 0 var(--s-2); }
.free-notice .free-paused-list { display: grid; gap: 6px; padding-left: 1.3em; list-style: disc; }
.free-lead:focus { outline: none; }
.toasts { position: fixed; right: var(--s-4); bottom: var(--s-4); left: auto; z-index: 90; height: auto; display: grid; gap: var(--s-2); justify-items: end;
  width: min(26rem, calc(100vw - 32px)); pointer-events: none; }
.toast { position: relative; overflow: hidden; pointer-events: auto; width: 100%; padding: 12px 8px 10px 16px; border-radius: var(--r-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), var(--lift); animation: lx-toast var(--dur-enter) var(--ease-enter) both; }
@keyframes lx-toast { from { opacity: 0; transform: translateY(var(--move-md)) scale(var(--enter-scale)); } }
.toast .lamp-dot { filter: drop-shadow(0 0 4px var(--halo-lamp)); }
.toast p { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-close { flex: none; width: 40px; height: 40px; }
.toast-close .icon { width: 18px; height: 18px; }
.toast :focus-visible { outline-color: var(--lamp); }
/* a bar shows how long a toast stays; it pauses with the timer while hovered or focused */
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lamp); transform-origin: 0 50%;
  animation: lx-drain var(--toast-ms) linear both; }
.toast:hover .toast-bar, .toast:focus-within .toast-bar { animation-play-state: paused; }
@keyframes lx-drain { to { transform: scaleX(0); } }
.tooltip { position: fixed; left: 0; top: 0; z-index: 95; max-width: min(20rem, calc(100vw - 16px)); }
.tip { position: absolute; left: 0; top: 0; pointer-events: none; max-width: 22rem; padding: 8px 10px 6px; border-radius: var(--r-2); background: var(--ink); color: var(--paper);
  font-size: var(--t-xs); font-weight: var(--w-label); box-shadow: var(--lift); animation: lx-fade var(--dur-press) var(--ease-standard) both; }

/* copy (ui.js copyButton): "Copy" and "Copied" share one cell, so the button never changes size */
.copy-stack { display: inline-grid; }
.copy-stack > span { grid-area: 1 / 1; transition: opacity calc(var(--dur-state) / 2) var(--ease-standard); }
.copy-stack .copy-idle { transition-delay: calc(var(--dur-state) / 2); }
.copy-stack .copy-done { opacity: 0; }
.copied .copy-stack .copy-idle { opacity: 0; transition-delay: 0ms; }
.copied .copy-stack .copy-done { opacity: 1; transition-delay: calc(var(--dur-state) / 2); }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.btn.copy-btn { color: var(--ink); }

/* switch (ui.js switchButton, core.css's square track): the thumb slides once the server has confirmed the change */
.switch { text-align: left; color: var(--ink); }
/* the switch: a rounded track that the round thumb crosses (core.css draws it square for the site) */
.app-body .switch-track { width: 46px; height: 26px; border-radius: var(--r-pill); background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--edge); }
.app-body .switch-thumb { top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-round); background: var(--paper);
  box-shadow: 0 0 0 1px rgba(13, 36, 51, 0.2), 0 1px 3px rgba(13, 36, 51, 0.3); }
.app-body .switch[aria-checked="true"] .switch-track { background: var(--ink); box-shadow: none; }
.app-body .switch[aria-checked="true"] .switch-thumb { transform: translateX(20px); background: var(--paper); }
.switch[aria-disabled="true"] { cursor: progress; }
.switch.is-busy .switch-thumb { opacity: 0.55; transition: transform var(--dur-move) var(--ease-standard), opacity var(--dur-state) var(--ease-standard) var(--busy-delay); }
.switch:active:not([aria-disabled="true"]) .switch-track { transform: scale(var(--press-scale)); }
.switch-track { transition: transform var(--dur-press) var(--ease-standard); }
.switch-label { min-width: 0; }
/* segmented control: a sunken track; the chosen segment is a raised white plate that slides under it (the app's segments are pressed buttons) */
.seg { padding: 4px; border-radius: var(--r-3); background: #e3e8ec; box-shadow: inset 0 1px 2px rgba(13, 36, 51, 0.1); }
.seg .seg-ink { top: 4px; bottom: 4px; left: 4px; border-radius: var(--r-2); background: var(--paper);
  box-shadow: 0 0 0 1px rgba(13, 36, 51, 0.08), 0 1px 2px rgba(13, 36, 51, 0.12), 0 3px 8px -4px rgba(13, 36, 51, 0.25); }
.seg .seg-opt { border-radius: var(--r-2); color: var(--ink-2); }
.seg .seg-opt[aria-pressed="true"], .seg .seg-opt[aria-checked="true"] { color: var(--ink); }
.seg:not(:has(.seg-ink)) .seg-opt[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(13, 36, 51, 0.12); }
.page-actions .seg { --seg-n: 3; }   /* the portfolio's three views (the 3D one is not offered on a phone: two) */
.seg-opt[aria-pressed="true"] { transition: transform var(--dur-press) var(--ease-standard); }
.seg-opt { min-width: 44px; transition: transform var(--dur-press) var(--ease-standard); }
.seg-opt:active:not([aria-disabled="true"]) { transform: scale(var(--press-scale)); }
.seg-opt[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; text-decoration: line-through; }
.seg-opt:focus-visible { outline-offset: -3px; }
kbd { font-family: var(--mono); }

/* ==== the period bar of a check (ui.js periodBar): up, down, not measured; the words beside it are the accessible version ===== */
.periods { display: grid; gap: 6px; margin-top: 2px; max-width: 34rem; }
.periods > .bar { position: relative; height: 10px; overflow: hidden; border-radius: var(--r-1); background: var(--paper-3); }
.bar-seg, .bar-gap { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform var(--dur-move) var(--ease-standard); }
.bar-seg.up { background: var(--steady); }
.bar-seg.down { background: var(--down); }
.bar-seg.missing { background: repeating-linear-gradient(135deg, var(--unknown) 0 2px, transparent 2px 4px); }
.bar-gap::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--paper); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: var(--t-xs); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.legend .sw { width: 10px; height: 10px; flex: none; border-radius: var(--r-1); }
.legend .sw.up { background: var(--steady); }
.legend .sw.down { background: var(--down); }
.legend .sw.missing { background: repeating-linear-gradient(135deg, var(--unknown) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--unknown); }

/* ==== the portfolio ========================================================================================================== */
/* the state counts: status blocks that filter the board (a press shows only those sites; pressed again, every site) */
/* the state counts are the screen's headline: one tile per state, the number large on top, the lit lamp and the state's word under
   it; a press filters the board (the pressed tile is framed in ink) */
.counts { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); padding: 0; }
.counts li { display: flex; min-width: 0; }
.count-btn { position: relative; isolation: isolate; display: flex; align-items: stretch; width: 100%; min-height: 88px; padding: 14px 18px 12px; border: 0;
  border-radius: var(--r-3); background: var(--paper); color: var(--ink); box-shadow: var(--e-1); font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-standard); }
.count-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-move) var(--ease-standard); }
.count-btn:active { transform: scale(var(--press-scale)); }
.count-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }
.count-btn:focus-visible { outline-offset: 2px; }
.counts .status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: space-between; align-items: center; column-gap: 8px; row-gap: 6px;
  width: 100%; font-size: var(--t-sm); font-weight: var(--w-strong); white-space: normal; }
.counts .status svg { width: 14px; height: 14px; margin-top: -2px; }
.count-n { order: -1; grid-column: 1 / -1; font-size: var(--t-2xl); font-weight: var(--w-display); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--ink); }
.count-btn:has(.status.down) { background: var(--down); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--e-1); }
.count-btn:has(.status.down) .status, .count-btn:has(.status.down) .count-n { color: #fff; }
.count-btn:has(.status.down) .status > svg { color: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)); }
.count-btn:has(.status.down)[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px #fff, var(--e-1); }
.count-btn:has(.status.regional_issue) { background: var(--regional-bg); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.16), var(--e-1); }
.count-btn:has(.status.regional_issue)[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }
.count-btn:has(.status.maintenance) { background: var(--planned-bg); box-shadow: inset 0 0 0 1px rgba(15, 76, 122, 0.14), var(--e-1); }   /* a running window: the planned blue of the status page */
.count-btn:has(.status.maintenance)[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }
.count-btn:has(.status.data_unavailable) .status, .count-btn:has(.status.paused) .status, .count-btn:has(.status.not_monitored) .status { color: var(--unknown); }
@media (hover: hover) {
  .count-btn:hover { transform: translateY(calc(-1 * var(--move-xs))); }
  .count-btn:hover::before { opacity: 1; }
}
/* adding sites: one panel above the sites, opened by the button in the header */
.add-panel { margin: 0 0 var(--s-5); padding: var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.add-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); padding-bottom: var(--s-3);
  box-shadow: inset 0 -1px 0 var(--hair); }
.add-head h2 { margin: 0; }
.add-panel .bulk { max-width: 40rem; }
.filter-bar { position: relative; margin: 0 0 var(--s-2); max-width: 26rem; }
/* the search box carries a magnifier drawn in the box's own corner (the sprite's search icon as a mask-free background) */
.app-body .filter-bar .filter-input { padding-left: 40px; background-image: url("/static/shared/img/v2/search.svg"); background-repeat: no-repeat; background-position: 13px center;
  background-size: 16px; }
.filter-count { min-height: 1.5em; margin: 0 0 var(--s-3); }
.portfolio-note, .board-note { margin-top: var(--s-4); max-width: 40em; color: var(--ink-2); font-size: var(--t-sm); }
.portfolio-3d { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-3); background: var(--sign); margin-bottom: 8px; overflow: hidden; }
.portfolio-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.portfolio-3d canvas.pointing { cursor: pointer; }

/* the board: one line per client, one row (a station) per site; trouble first (cards.js) */
/* The board (the signature of the app): each client is a line on its own plate, each site a station on it. A row reads across like a
   departure board: the station, its state as a lit lamp and a word, the two regions as two small signal lamps, the response time of its
   last 24 hours as a thin line (drawn only from stored checks), the open incidents and the last check. Trouble sits first. */
.board, .cards-view { display: grid; gap: var(--s-4); }
.board-head, .site-row { --board-cols: minmax(0, 1.5fr) 160px 150px minmax(120px, 164px) 104px 96px; }
.board-head { display: grid; grid-template-columns: var(--board-cols); gap: var(--s-4); padding: 0 20px 2px;
  font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-3); }
.board-head span:last-child { text-align: right; }
.client-line { overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.client-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: 60px; padding: 10px 20px 8px;
  background: var(--raise); box-shadow: inset 0 -1px 0 var(--hair); }
.client-head h2 { font-size: var(--t-md); font-weight: var(--w-strong); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.client-head .note { margin-right: auto; font-size: var(--t-xs); font-weight: var(--w-label); color: var(--ink-3); }
.site-row { position: relative; display: grid; grid-template-columns: var(--board-cols); gap: var(--s-4); align-items: center;
  min-height: 60px; padding: 8px 20px 6px; box-shadow: inset 0 -1px 0 var(--hair); }
.site-row:last-child { box-shadow: none; }
.site-row.is-down, .site-row[data-status="down"] { background: var(--trouble); }
.site-row[data-status="regional_issue"] { background: var(--uneasy); }
/* the station's name opens its page; its hit area is the whole row (the controls in the row stay above it) */
.site-row .host { min-width: 0; display: inline-flex; flex-direction: column; justify-content: center; min-height: 40px; font-weight: var(--w-strong); color: var(--ink);
  text-decoration: none; overflow-wrap: anywhere; }
.site-row .host::after { content: ""; position: absolute; inset: 0; }
.site-row > :not(.host) { position: relative; z-index: 1; pointer-events: none; }
.site-row .regions-now, .site-row .regions-now * { pointer-events: auto; }
@media (hover: hover) {
  .site-row:has(.host:hover) { background: var(--raise); }
  .site-row[data-status="down"]:has(.host:hover) { background: #fbeceb; }
  .site-row[data-status="regional_issue"]:has(.host:hover) { background: #fbf2e1; }
  .site-row .host:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.site-row .sub { display: block; margin-top: 1px; font-weight: var(--w-text); font-size: var(--t-xs); color: var(--ink-3); }
.site-row .open, .site-row .site-open { font-size: var(--t-sm); color: var(--ink-3); }
.site-row .open b, .site-row .site-open b { color: var(--down); font-weight: var(--w-display); }
.site-row time, .site-row .site-when { text-align: right; color: var(--ink-3); font-size: var(--t-sm); }
.site-row .svc { justify-self: start; }
/* the state of a site: a pill with its lit lamp; "Down" is the red sign itself, lit from inside */
.svc { gap: 7px; min-height: 30px; padding: 2px 12px 0 10px; border-radius: var(--r-pill); font-size: var(--t-sm); white-space: nowrap; }
.svc .status { color: inherit; font-weight: inherit; }
.svc .svc-glyph { width: 14px; height: 14px; flex: none; margin-top: -2px; }
.svc-paused, .svc-not_monitored, .svc-data_unavailable { color: var(--unknown); background: var(--unknown-bg); }
.svc-steady { color: var(--steady); background: var(--steady-bg); box-shadow: inset 0 0 0 1px rgba(25, 112, 79, 0.12); }
.svc-maintenance { color: var(--planned); background: var(--planned-bg); box-shadow: inset 0 0 0 1px rgba(15, 76, 122, 0.12); }   /* a running window: the planned blue of the status page */
.svc-regional_issue { color: var(--regional); background: var(--regional-bg); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.16); }
.svc-down { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(177, 38, 28, 0.3), 0 6px 14px -6px var(--halo-down); }
.svc-down .status > svg, .svc.svc-down > svg { color: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
/* the latest check of each region: two signal lamps with their names; the words are in the row's label for screen readers */
.regions-now { display: flex; flex-wrap: wrap; gap: 6px 12px; min-height: 26px; align-items: center; margin: 0; padding: 0; list-style: none; }
.rg { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; background: transparent; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
.rg svg { width: 11px; height: 11px; flex: none; margin-top: -2px; }   /* the outcome's glyph: its shape says it, the colour repeats it */
.rg.down { color: var(--down); }
.rg.data_unavailable svg { color: var(--unknown); }
.rg.none { color: var(--unknown); background: transparent; padding-left: 0; }
.rg-name { font-family: var(--mono); font-size: var(--t-xs); }
.rg.sk { background: transparent; padding: 0; }
.rg.sk i { position: relative; overflow: hidden; display: block; width: 52px; height: 16px; border-radius: var(--r-pill); background: var(--paper-3); }
/* the response time of the last 24 hours (cards.js, from the site summary the row already reads): a thin ink line and its p95 in words */
.rt { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; color: var(--ink-3); font-size: var(--t-xs); font-weight: var(--w-label);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-spark { flex: 1 1 auto; min-width: 48px; max-width: 96px; height: 24px; overflow: visible; }
.rt-spark .rt-line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rt-spark .rt-base { fill: none; stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rt-spark .rt-end { fill: var(--ink); }
.rt-ms b { color: var(--ink); font-weight: var(--w-strong); }
.rt.none { color: var(--ink-3); }
.rt.sk i { display: block; width: 88px; height: 16px; border-radius: var(--r-pill); background: var(--paper-3); }
/* the same line beside a check's response-time summary on the site page */
details.perf > summary .rt-spark { flex: none; width: 120px; max-width: none; margin-left: 4px; }
.rg.sk i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: translateX(-100%); }
:root[data-motion="full"] .rg.sk i::after { animation: lx-shimmer var(--dur-shimmer) var(--ease-standard) 4; }
.regions-now.ready .rg { animation: lx-fade var(--dur-state) var(--ease-standard) both; }
/* the prototype's two tracks: what each region saw, one square per check */
.board.is-compact .tracks { display: none; }
.board.is-compact .site-row { grid-template-columns: minmax(0, 1.6fr) 220px 120px 110px; padding-block: 8px 6px; }

/* ==== a site ================================================================================================================= */
/* the summary under the host name: the state as a status block and a sentence, then three facts */
/* the site's headline: its state as a large lit sign and the sentence, then three facts as figures */
.site-status { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-5) var(--s-6); margin: 0 0 var(--s-6); border-radius: var(--r-4); background: var(--paper); box-shadow: var(--e-1); }
.site-status:has(.status.down) { background: var(--trouble); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.14), var(--e-1); }
.site-status:has(.status.regional_issue) { background: var(--uneasy); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.14), var(--e-1); }
.site-state { display: grid; justify-items: start; gap: var(--s-3); min-width: 0; }
.site-state .status { min-height: 44px; padding: 2px 18px 0 14px; border-radius: var(--r-pill); font-size: var(--t-lg); font-weight: var(--w-display); letter-spacing: -0.01em; }
.site-state .status svg { width: 18px; height: 18px; }
.site-state .status.steady { background: var(--steady-bg); box-shadow: inset 0 0 0 1px rgba(25, 112, 79, 0.14); }
.site-state .status.regional_issue { background: var(--regional-bg); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.16); }
.site-state .status.down { background: var(--down); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(177, 38, 28, 0.3), 0 10px 24px -10px var(--halo-down); }
.site-state .status.down > svg { color: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65)); }
.site-state .status.data_unavailable, .site-state .status.paused, .site-state .status.not_monitored { background: var(--unknown-bg); }
.site-state p { max-width: 40em; font-size: var(--t-md); color: var(--ink); }
/* the hero's three figures stand on the hero itself, divided by rules (a white box inside the tinted hero was a card in a card) */
.site-facts { display: grid; grid-template-columns: repeat(3, minmax(88px, auto)); gap: 0; margin: 0; padding: 0; }
.site-facts > div { display: grid; gap: 4px; padding: 6px 20px 4px; box-shadow: inset 1px 0 0 var(--rule); }
.site-facts > div:first-child { box-shadow: none; }
.site-facts dt { font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-3); white-space: nowrap; }
.site-facts dd { margin: 0; font-size: var(--t-xl); font-weight: var(--w-display); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-facts dd time, .site-facts dd .muted { font-size: var(--t-md); font-weight: var(--w-strong); letter-spacing: 0; }
.site-facts dd.has-incident { color: var(--down); }
/* the checks of a site: one plate, a check per row */
.monitors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.monitor { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); background: var(--paper); box-shadow: inset 0 -1px 0 var(--hair); }
.monitor:last-child { box-shadow: none; }
.monitor.is-down { background: var(--trouble); }
.monitor.is-regional_issue { background: var(--uneasy); }
.monitor > * { min-width: 0; }
.monitor-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); align-items: center; }
.monitor-head h3 { margin: 0; font-size: var(--t-md); overflow-wrap: anywhere; }
.monitor-state { font-size: var(--t-sm); }
.monitor-line { color: var(--ink-2); font-size: var(--t-sm); }
.monitor .target { margin-top: calc(-1 * var(--s-2)); }
.monitor-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.regions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.regions li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); min-height: 36px; padding: 4px 12px 2px 6px; border-radius: var(--r-2); background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--t-sm); }
.monitor.is-down .regions li { background: rgba(255, 255, 255, 0.7); }
.add-check { display: grid; gap: var(--s-4); margin-top: var(--s-3); padding: var(--s-5); max-width: 40rem; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.add-check .form { max-width: none; }
.add-check > .field select { max-width: 28rem; }
.add-check > h3 { margin: 0; }
.more-checks .kind-fields { display: grid; gap: var(--s-3); }
.duration-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-3); align-items: end; }
.ping-box { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); animation: lx-rise var(--dur-enter) var(--ease-enter) both; }
.ping-url { width: 100%; font-size: var(--t-sm); }
.heartbeat, .blocklist, .perf { margin-top: var(--s-2); }
.heartbeat p, .blocklist p { font-size: var(--t-sm); }
.heartbeat-more { display: grid; gap: var(--s-2); }
.heartbeat .pings, .heartbeat-more .pings { margin: var(--s-1) 0; padding-left: 1.1rem; font-size: var(--t-sm); }
.spark { width: 10rem; height: 2.25rem; vertical-align: middle; margin-right: var(--s-3); }
.spark polyline { stroke: var(--ink); }
.vital-rating { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-label); }
.vital-rating::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: var(--r-round); background: var(--unknown); }
.vital-rating.good { color: var(--steady); }
.vital-rating.good::before { background: var(--steady); }
.vital-rating.needs_improvement { color: var(--regional); }
.vital-rating.needs_improvement::before { border-radius: 0; background: var(--regional); transform: rotate(45deg) scale(0.85); }
.vital-rating.poor { color: var(--down); }
.vital-rating.poor::before { border-radius: 0; background: var(--down); }
@media (max-width: 40rem) { .vital-limits { display: none; } }
.badge-box { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-4) var(--s-5); max-width: 46rem; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.badge-box > img { justify-self: start; }
.badge-codes { display: grid; gap: var(--s-3); margin: 0; }
.badge-codes dt { font-size: var(--t-sm); font-weight: var(--w-label); }
.badge-codes dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.badge-codes code { flex: 1 1 22rem; min-width: 0; padding: 8px 10px 6px; border-radius: var(--r-2); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--t-xs); overflow-wrap: anywhere; }

/* incidents: a vertical line, one stop per incident (open: the interchange ring in down red; resolved: the filled green dot) */
/* incidents: the stops of a vertical line on the canvas; each incident is a plate beside its stop (open: the red interchange ring, lit;
   resolved: the filled green dot) */
.incidents { list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: var(--s-5); position: relative; }
.incident { position: relative; display: grid; gap: 8px; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.incident > * { min-width: 0; }
.incident::before { content: ""; position: absolute; left: -25px; top: 30px; bottom: calc(-1 * var(--s-5) - 30px); width: 4px; border-radius: var(--r-pill); background: var(--paper-3); }
.incident:last-child::before { display: none; }
.incident::after { content: ""; position: absolute; left: -32px; top: 20px; width: 18px; height: 18px; border: 4px solid var(--lamp-steady); border-radius: var(--r-round);
  background: var(--lamp-steady); box-shadow: 0 0 0 4px var(--canvas); filter: drop-shadow(0 0 5px var(--halo-steady)); }
.incident.open::after { left: -36px; top: 16px; width: 26px; height: 26px; border-color: var(--lamp-down); background: var(--paper);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 7px var(--lamp-down); filter: drop-shadow(0 0 7px var(--halo-down)); }
.incident.open { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.2), var(--e-1); }
.incident.open::before { background: var(--down); }
.incident-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ink-2); font-size: var(--t-sm); }
.incident-head > .status { min-height: 28px; padding: 2px 12px 0 10px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: var(--w-strong); }
.incident-head > .status.down { background: var(--down); color: #fff; box-shadow: 0 1px 2px rgba(177, 38, 28, 0.3), 0 6px 14px -6px var(--halo-down); }
.incident-head > .status.down > svg { color: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
.incident-head > .status.steady { background: var(--steady-bg); }
.incident-head .dur { color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.incident-head .dur::before { content: "\00b7"; margin-right: 10px; color: var(--ink-3); }
.incident-target { font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.incident-ack { margin: 4px 0; }
.incident-handled { margin: 0; }
details.evidence h4 { margin: 12px 0 6px; font-size: var(--t-md); }
details.evidence .table-wrap { margin-top: 10px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--hair); }
.evidence-item { padding: 10px 0; box-shadow: inset 0 1px 0 var(--rule); }
/* the stored checks behind an incident as two tracks: one row per region, one lamp per check, oldest first */
.lanes { list-style: none; margin: 8px 0 4px; padding: 14px 16px 12px; display: grid; gap: 8px; border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.lane { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 12px; align-items: center; }
.lanes .region { background: var(--paper); }
.lane-track { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 14px; }
.pip { display: block; width: 12px; height: 12px; border-radius: var(--r-1); background: var(--paper-3); }
.pip.steady { background: var(--lamp-steady); }
.pip.down { background: var(--lamp-down); filter: drop-shadow(0 0 3px var(--halo-down)); }
.pip.data_unavailable { background: repeating-linear-gradient(135deg, var(--unknown) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--unknown); }
.pip.recovery { box-shadow: inset 0 -3px 0 var(--ink); }   /* the fresh checks that closed it: green with an ink foot */

/* what changed: the same vertical line; a change is a hollow square, an opened incident the down ring, a resolved one the green dot */
.timeline { list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: var(--s-2); position: relative; }
.tl-item { position: relative; display: block; padding: 14px 18px 12px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.tl-item::before { content: ""; position: absolute; left: -25px; top: 0; bottom: calc(-1 * var(--s-2)); width: 4px; border-radius: var(--r-pill); background: var(--paper-3); }
.tl-item:first-child::before { top: 20px; }
.tl-item:last-child::before { bottom: auto; height: 20px; }
.tl-item:only-child::before { display: none; }
.tl-dot { position: absolute; left: -33px; top: 14px; width: 20px; height: 20px; border: 4px solid var(--ink); border-radius: var(--r-round); background: var(--canvas); }
.tl-item.change .tl-dot { border-radius: var(--r-1); transform: scale(0.86); }
.tl-item.incident_opened .tl-dot { border-color: var(--lamp-down); box-shadow: 0 0 0 3px var(--canvas), 0 0 0 6px var(--lamp-down); filter: drop-shadow(0 0 5px var(--halo-down)); }
.tl-item.incident_resolved .tl-dot { border-color: var(--lamp-steady); background: var(--lamp-steady); filter: drop-shadow(0 0 4px var(--halo-steady)); }
.tl-item.incident_opened { background: var(--trouble); }
.tl-body { display: grid; gap: 2px; }
.tl-body > * { min-width: 0; }
.tl-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.tl-head time { color: var(--ink-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

/* a site crawl (migration 0025): addresses from the crawled site are text in <code>, wrapped, never links */
.crawl-kind { margin: 10px 0; }
.crawl-items, .report-crawl-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.crawl-item { padding-top: 8px; box-shadow: inset 0 1px 0 var(--rule); }
.crawl-item:first-child { padding-top: 0; box-shadow: none; }
.crawl-url, .crawl-found code { overflow-wrap: anywhere; word-break: break-word; }
.crawl-found { margin: 2px 0 0; }
.report-crawl-items { padding-left: 1.2rem; list-style: disc; }

/* DNS record watch (migration 0034) and the custom domain's records: records are other people's data, they wrap, nothing is a link */
.dom-head { margin-bottom: 4px; }
.dns-records { list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.dns-records li { display: flex; gap: var(--s-2); align-items: baseline; }
.dns-records code { overflow-wrap: anywhere; word-break: break-word; }
.dns-record { display: block; padding: 12px 16px 10px; border-radius: var(--r-2); background: var(--paper); box-shadow: var(--e-1); }
.dns-record-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dns-seen { font-size: var(--t-xs); color: var(--ink-2); }
.dns-seen.ok { color: var(--steady); font-weight: var(--w-strong); }
.dns-seen.no { color: var(--down); font-weight: var(--w-strong); }
.dns-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; }
.dns-fields dt { color: var(--ink-2); font-size: var(--t-xs); }
.dns-fields dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dns-changes { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 2px; }
.dns-change { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--paper); box-shadow: var(--e-1); }
.dns-change.open { background: #fdf8ef; }
.dns-change-head { margin: 0; }
.dns-mark { flex: none; width: 1ch; font-weight: var(--w-strong); }
.dns-records.add .dns-mark { color: var(--steady); }
.dns-records.del .dns-mark { color: var(--down); }
.dns-clean { color: var(--ink-2); margin: var(--s-3) 0 0; }
.dns-watched { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.block .dns-choose { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-md); }
.dns-change .action { margin-top: var(--s-2); display: inline-block; }
@media (max-width: 480px) { .dns-fields { grid-template-columns: minmax(0, 1fr); } }

/* ==== set-up and first checks ================================================================================================ */
/* the wizard: its steps are stops on a vertical line (done: the ink dot with a tick, current: the ink ring, still to do: the pale ring) */
.wizard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.wizard > * { min-width: 0; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step { position: relative; counter-increment: step; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 6px 0; color: var(--ink-2); font-weight: var(--w-label); }
.step::before { content: ""; position: absolute; left: 11px; top: 30px; height: calc(100% - 16px); width: 4px; background: var(--paper-3); }
.step:last-child::before { display: none; }
.step.done::before { background: var(--ink); }
.step-mark { position: relative; z-index: 1; width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; border: 4px solid var(--edge);
  border-radius: var(--r-round); background: var(--canvas); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
.step-mark::before { content: counter(step); }
.step.done { color: var(--ink); }
.step.done .step-mark { border-color: var(--ink); background: var(--ink); }
.step.done .step-mark::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg); }
.step.just-done .step-mark { animation: lx-stop var(--dur-enter) var(--ease-enter) both; }
.step.current { color: var(--ink); font-weight: var(--w-strong); }
/* the step being done is the lit stop: the lamp in its ring, "you are here" */
.step.current .step-mark { border-color: var(--ink); color: var(--ink); background: var(--lamp); filter: drop-shadow(0 0 5px var(--halo-lamp)); }
.step-panel { display: grid; gap: 14px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-4); background: var(--paper); box-shadow: var(--e-1); }
.step-panel > * { min-width: 0; }
.step-panel h2 { font-size: var(--t-xl); }
.step-panel h2:focus { outline: none; }
.step-flow { display: grid; gap: 14px; }
.step-flow > * { min-width: 0; }
.next-steps { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.next-steps h3 { margin: 0 0 8px; }
/* authenticator enrolment: the text, then the code beside it when there is room */
.enrol { display: grid; gap: 14px; }
.enrol-scan { display: grid; row-gap: 8px; }
.enrol-scan > * { min-width: 0; margin: 0; }
.qr-frame { justify-self: start; width: fit-content; max-width: 100%; padding: 12px; border-radius: var(--r-3); background: #fff; box-shadow: var(--e-1); line-height: 0; }
.qr-code { width: 14rem; max-width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.enrol-manual { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.enrol-manual .secret { user-select: all; }
@media (min-width: 48rem) {
  .enrol-scan { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: start; }
  .enrol-scan > .qr-frame { grid-column: 2; grid-row: 1 / span 3; }
  .enrol-scan > :not(.qr-frame) { grid-column: 1; }
}
/* adding sites in bulk and following their first checks (bulk.js) */
.bulk { display: grid; gap: 14px; }
.bulk-field textarea { min-height: 9.5rem; font-family: var(--mono); font-size: var(--t-sm); }
.bulk-count:empty, .bulk-results:empty, .bulk-msg:empty, .after-add:empty, .first-detail:empty { display: none; }
.bulk-results { display: grid; gap: 12px; }
.bulk-list { list-style: none; margin: 0; padding: 0 var(--s-3); max-height: 28rem; overflow-y: auto; border-radius: var(--r-3); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.bulk-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 8px 4px 6px; box-shadow: inset 0 -1px 0 var(--rule); }
.bulk-label { font-weight: var(--w-strong); font-size: var(--t-sm); }
.bulk-row.ok .bulk-label { color: var(--steady); }
.bulk-row.same .bulk-label { color: var(--unknown); }
.bulk-row.bad .bulk-label { color: var(--down); }
.bulk-host { font-family: var(--mono); font-size: var(--t-sm); overflow-wrap: anywhere; }
.bulk-line { color: var(--ink-2); font-size: var(--t-xs); }
.bulk-msg { grid-column: 2 / -1; color: var(--ink-2); font-size: var(--t-sm); }
.after-add, .meanwhile { margin-top: 20px; display: grid; gap: 12px; }
.first-checks, .first-result { padding: var(--s-4) var(--s-5); display: grid; gap: 10px; border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.first-checks h3, .first-result h3 { margin: 0; font-size: var(--t-md); }
/* the link to the site page stands beside the heading: the per-check results come in a moment later and grow the box downwards, so
   nothing already on screen moves when they arrive (the link under them was pushed down: layout shift 0.0192 at 375 px) */
.first-result { grid-template-columns: minmax(0, 1fr) auto; }
.first-result > * { grid-column: 1 / -1; }
.first-result > h3 { grid-column: 1; }
.first-result > p:last-child { grid-column: 2; grid-row: 1; align-self: baseline; margin: 0; }
.first-line { font-weight: var(--w-strong); margin: 0; }
.first-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 24rem; overflow-y: auto; }
.first-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.first-row > a { overflow-wrap: anywhere; }
.first-when { color: var(--ink-2); font-size: var(--t-xs); }
.first-detail { display: grid; gap: 10px; }
.first-check p { margin: 0 0 4px; }
.first-regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.first-region { font-family: var(--mono); font-size: var(--t-sm); }

/* ==== the first days' cards in the app (app/css/activation.css draws them for the app and the landing; in the app they take the
   app's plates): the setup list as a line of stops whose next stop is lit, the trial as a sign plate with the lamp button ======== */
.app-body .act-card { border-radius: var(--r-3); box-shadow: var(--e-1); }
.app-body .act-list .act-head h2 { font-size: var(--t-lg); }
.app-body .act-list .act-progress { font-weight: var(--w-strong); }
.app-body .act-item.done .act-item-title { color: var(--ink-2); }
/* only the next step explains itself in full; the others keep their title and their action (the words stay for screen readers) */
.app-body .act-item.todo:not(:nth-child(1 of .todo)) .act-item-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the next step: its stop is the lamp in an ink ring ("you are here"), its title in full ink */
.app-body .act-item.todo:nth-child(1 of .todo) > .act-mark.pending { background: var(--lamp); box-shadow: inset 0 0 0 4px var(--ink); filter: drop-shadow(0 0 5px var(--halo-lamp)); }
.app-body .act-item.todo:nth-child(1 of .todo) .act-item-title { color: var(--ink); }
.app-body .act-item > .btn { min-height: 36px; padding-inline: 12px; font-size: var(--t-xs); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.16), 0 1px 2px rgba(13, 36, 51, 0.06); }
@media (pointer: coarse) { .app-body .act-item > .btn { min-height: 44px; } }
.app-body .act-item > .btn.lamp { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(13, 36, 51, 0.22), 0 3px 8px -4px rgba(13, 36, 51, 0.35); }
/* the trial is a slim strip (coordinator 2026-11-02): one line with the days left and what happens when the trial ends, and its one call;
   never a big dark plate. The month's value line stays in it for a screen reader only (Billing says it too). */
.app-body .act-card.act-trial { flex-wrap: nowrap; gap: var(--s-2) var(--s-5); padding: 10px 12px 10px var(--s-5); background: var(--paper); color: var(--ink);
  box-shadow: var(--e-1); }
.app-body .act-trial-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); flex: 1 1 auto; max-width: none; }
.app-body .act-trial h2 { font-size: var(--t-md); }
.app-body .act-trial-text p { margin: 0; max-width: none; }   /* one line beside the days left where the strip has room */
.app-body .act-trial .act-value { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; border-radius: 0; box-shadow: none; }
.app-body .act-trial .btn.lamp { flex: none; }
/* while an incident is open the set-up list and the trial follow the sites (views/portfolio.js) */
.act-stack.after-sites { margin: var(--s-6) 0 0; }

/* ==== Ask Beam in the app (shared/css/beam.css draws it for the site and the app; v2's radius names are square, so the app gives the
   panel its own plates here): a raised panel, a navy head, the answers as soft bubbles, the question box like the app's fields ======== */
.app-body .beam-panel { border: 0; border-radius: var(--r-4); box-shadow: 0 0 0 1px rgba(13, 36, 51, 0.1), var(--lift); }
.app-body .beam-panel.is-drawer { border-radius: var(--r-4) 0 0 var(--r-4); }
.app-body .beam-avatar, .app-body .beam-close { border-radius: var(--r-2); }
.app-body .beam-log { background: var(--canvas); }
.app-body .beam-bubble { border-radius: var(--r-3); }
.app-body .is-user .beam-bubble { border-radius: var(--r-3) var(--r-3) var(--r-1) var(--r-3); box-shadow: 0 1px 2px rgba(13, 36, 51, 0.2); }
.app-body .is-bot .beam-bubble { border: 0; border-radius: var(--r-3) var(--r-3) var(--r-3) var(--r-1); box-shadow: var(--e-1); }
.app-body .is-bot.is-unknown .beam-bubble { box-shadow: inset 0 0 0 1px var(--edge); }
.app-body .beam-chip { border: 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.16); transition: transform var(--dur-press) var(--ease-standard); }
.app-body .beam-chip:hover { background: var(--raise); }
.app-body .beam-chip:active { transform: scale(var(--press-scale)); }
.app-body .beam-form { border-top: 1px solid var(--hair); }
.app-body .beam-input { border: 1px solid var(--edge); border-radius: var(--r-2); box-shadow: var(--e-inset); }
.app-body .beam-human { border: 0; border-radius: var(--r-3); box-shadow: var(--e-1); }
@media (max-width: 40rem) { .app-body .beam-panel, .app-body .beam-panel.is-drawer { border-radius: var(--r-4) var(--r-4) 0 0; } }

/* ==== monthly client reports (views/reports.js): a document page that prints cleanly ======================================== */
.report-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.report-list li { position: relative; isolation: isolate; display: grid; gap: 4px; padding: 18px 20px 16px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1);
  transition: transform var(--dur-move) var(--ease-standard); }
.report-list li::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--e-2); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-move) var(--ease-standard); }
@media (hover: hover) {
  .report-list li:has(a:hover) { transform: translateY(calc(-1 * var(--move-xs))); }
  .report-list li:has(a:hover)::before { opacity: 1; }
}
.report-list a { display: inline-flex; align-items: center; min-height: 40px; font-weight: var(--w-strong); color: var(--ink); text-decoration: none; }
.report-list a::after { content: ""; position: absolute; inset: 0; }
.report-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.report-site { margin-bottom: var(--s-5); padding: clamp(18px, 2.6vw, 32px); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.report-site > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 0; font-size: var(--t-xl); overflow-wrap: anywhere; }
.report-site h4 { margin: 22px 0 8px; padding-bottom: 6px; font-size: var(--t-md); box-shadow: inset 0 -1px 0 var(--hair); }
.report-site > .table-wrap { margin-top: 12px; }
.report-site .periods { max-width: none; margin: 8px 0 14px; }
.report-table .region-line { margin: 0 0 4px; font-size: var(--t-sm); }
.report-table .region { margin-right: 8px; }
.report-incidents, .report-actions, .report-changes { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.report-incidents p { margin: 0 0 4px; max-width: 56ch; }
/* white label: the agency's bar on a report and in the branding preview; --brand and --brand-on come from the validated accent
   (set through the CSSOM); without one the bar is white with an ink rule. The accent never recolours a status. */
.brandbar { display: flex; align-items: center; gap: 14px; padding: 12px 16px 10px; margin-bottom: 16px; background: var(--brand, var(--paper));
  color: var(--brand-on, var(--ink)); box-shadow: inset 0 -6px 0 var(--brand, var(--ink)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.brandbar-logo { flex: none; display: grid; place-items: center; border-radius: var(--r-1); background: #fff; padding: 4px 8px; }
.brandbar-logo img { display: block; max-height: 40px; max-width: 12rem; width: auto; height: auto; }
.brandbar-name { font-weight: var(--w-strong); font-size: var(--t-lg); overflow-wrap: anywhere; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-5); align-items: start; }
.brand-grid > :last-child { position: sticky; top: calc(var(--topbar-h) + var(--s-3)); }   /* the preview stays in view while the settings are edited */
.logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.brand-sheet { padding: 18px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.brand-sheet .brandbar { margin-bottom: 12px; }
.brand-sheet-empty { color: var(--ink-2); margin: 0 0 12px; }
.brand-sheet-body h3 { margin: 0 0 6px; }
.brand-sheet-status { padding: 8px 12px 6px; background: var(--steady-bg); color: var(--steady); font-weight: var(--w-strong); }
.restricted-reason { overflow-wrap: anywhere; white-space: pre-line; font-weight: var(--w-label); max-width: 70ch; }

/* ==== first day and the client risk radar: ranked findings; severity keeps its glyph and word, colour is never alone ========== */
/* the severity counts: one tile each, the number large on top and the lit mark with its word under it (so a long word such as "Data
   unavailable" wraps under its number instead of running into the next tile; first-day at 1280 px clipped it, VID 2026-11-02) */
/* as many equal tracks as fit (empty ones kept, so one tile never stretches): five tiles stay on one row at 1280 and 1440 (a 228 px
   cap fitted four and left the fifth alone on a second row) */
.fd-counts { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.fd-count { display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 8px; min-width: 0; min-height: 92px; margin: 0;
  padding: 14px 18px 12px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.fd-count.notice { display: flex; grid-template-columns: none; padding: 14px 18px 12px; background: var(--paper); box-shadow: var(--e-1); }
.fd-count > .sev { white-space: normal; overflow-wrap: anywhere; }
.fd-count.critical { background: var(--trouble); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.16), var(--e-1); }
.fd-count.critical .fd-n { color: var(--down); }
.fd-count.warning { background: var(--uneasy); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.16), var(--e-1); }
.fd-count.warning .fd-n { color: var(--regional); }
.fd-n { font-size: var(--t-2xl); font-weight: var(--w-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; }
.fd-wait { padding: var(--s-5); margin-bottom: 20px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.fd-wait h2 { margin-top: 0; }
.fd-progress-line { font-weight: var(--w-strong); font-variant-numeric: tabular-nums; margin: 10px 0 8px; }
.fd-bar { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--paper-3); }
.fd-fill { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left center; transform: scaleX(var(--p, 0));
  animation: lx-draw var(--dur-enter) var(--ease-enter) backwards; }
/* a finding is a card: its rank and severity on top, the title, the detail, the client and the evidence it rests on */
.fd-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.fd-card { position: relative; display: grid; gap: 10px; align-content: start; margin: 0; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-3); background: var(--paper);
  box-shadow: var(--e-1); }
.fd-card.notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: var(--s-5) var(--s-5) var(--s-4); background: var(--paper); box-shadow: var(--e-1); }
.fd-card.critical { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.22), var(--e-1); }
.fd-card.warning { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, 0.2), var(--e-1); }
.fd-card.critical .fd-top { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; padding: 12px var(--s-5) 10px; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--trouble); }
.fd-card.warning .fd-top { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; padding: 12px var(--s-5) 10px; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--uneasy); }
.fd-cards .rv.in { animation: lx-rise var(--dur-enter) var(--ease-enter) backwards; }
.fd-cards .rv.in:nth-child(2) { animation-delay: var(--stagger); }
.fd-cards .rv.in:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.fd-cards .rv.in:nth-child(n+4) { animation-delay: calc(var(--stagger) * 3); }
.fd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.fd-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4) 10px; box-shadow: inset 0 -1px 0 var(--hair); }
.fd-row:last-child { box-shadow: none; }
.fd-row-text { color: var(--ink-2); overflow-wrap: anywhere; }
.fd-row-text strong { color: var(--ink); }
.fd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fd-rank { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 0; border-radius: var(--r-pill); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair);
  font-family: var(--font); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fd-card.critical .fd-rank, .fd-card.warning .fd-rank { background: rgba(255, 255, 255, 0.75); }
.fd-title { margin: 0; font-size: var(--t-lg); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fd-detail { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.fd-card .tag-line { margin: 0; }
.fd-card .tag-line .tag { margin-left: 0; }
.fd-evidence { margin: 4px 0 0; padding-top: 10px; box-shadow: inset 0 1px 0 var(--hair); font-size: var(--t-sm); overflow-wrap: anywhere; }
.fd-ev-label { font-weight: var(--w-strong); color: var(--ink); }
.fd-soonest td, .fd-soonest th { font-variant-numeric: tabular-nums; }
.fd-body .table-wrap + .table-wrap { margin-top: var(--s-4); }
.fd-body > .note { margin-top: var(--s-4); max-width: 56ch; }
.radar-summary { margin: 0 0 var(--s-3); font-size: var(--t-lg); font-weight: var(--w-strong); }
.radar-cards { margin-top: var(--s-4); }
.radar-card .fd-detail { margin-bottom: var(--s-2); }
.radar-due { margin: 0 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.radar-card .more-body { display: grid; gap: var(--s-2); }
.radar-card .more-body p { margin: 0; }
.radar-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.radar-sites li { display: inline-flex; align-items: baseline; gap: var(--s-2); overflow-wrap: anywhere; }

/* ==== "Why this happened" (views/explain.js): one disclosure; the verdict, then the reasons and the evidence in two columns ====
   Confidence, evidence roles and reasons are neutral (ink, rules, a word): colour in this app means status and nothing else. */
/* the disclosure: a plate of its own inside the incident, its head a quiet bar with the one-line cause */
.why { margin: var(--s-3) 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.12), 0 1px 2px rgba(13, 36, 51, 0.05); }
.why > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); min-height: 56px; padding: 10px 20px 8px; list-style: none; cursor: pointer;
  background: var(--raise); }
.why > summary::-webkit-details-marker { display: none; }
.why > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: url("/static/shared/img/v2/chevron.svg") center / contain no-repeat;
  transform: rotate(-90deg); transition: transform var(--dur-move) var(--ease-standard); }
.why[open] > summary::before { transform: none; }
.why[open] > summary { box-shadow: inset 0 -1px 0 var(--hair); }
@media (hover: hover) { .why > summary:hover .why-title { text-decoration: underline; text-underline-offset: 0.2em; } }
.why-title { font-size: var(--t-md); font-weight: var(--w-strong); }
.why-line { color: var(--ink-2); font-size: var(--t-sm); }
.why-body { display: grid; gap: var(--s-5); padding: var(--s-5) 20px var(--s-5); }
.why[open] .why-body { animation: lx-rise var(--dur-state) var(--ease-standard) both; }
/* the verdict across the panel; the reasoning (left) and what to do (right) under it; the message to the client across the foot */
.why-content { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6) var(--s-6); align-items: start; }
.why-content > .why-verdict, .why-content > .more, .why-content > .msg { grid-column: 1 / -1; }
.why-content > * { min-width: 0; }
.why-main, .why-side { display: grid; gap: var(--s-6); align-content: start; min-width: 0; }
.why-main > *, .why-side > * { min-width: 0; }
/* the verdict: the likely cause in large type, its confidence as a meter and a word (ink, never a status colour), the summary under it */
.why-verdict { position: relative; display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-6) var(--s-5); border-radius: var(--r-3); background: var(--sign); color: var(--on-sign); }
.why-verdict p { margin: 0; max-width: 46em; }
.why-verdict > p:not(.why-cause):not(.note) { color: var(--on-sign); font-size: var(--t-md); font-weight: var(--w-text); }
.why-verdict .note { color: var(--on-sign-2); font-size: var(--t-sm); }
.why-cause { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--t-xl); font-weight: var(--w-strong); line-height: 1.2;
  letter-spacing: -0.015em; }
.why-cause strong { font-weight: var(--w-display); }
.conf { --c1: var(--ink); --c2: var(--ink); --c3: var(--ink); display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 11px 0 10px;
  border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--t-xs); font-weight: var(--w-strong); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.16);
  vertical-align: 2px; letter-spacing: 0; white-space: nowrap; }
/* the meter: three bars, as many lit as the confidence is high (high 3, medium 2, low 1); the word says it */
.conf::before { content: ""; flex: none; width: 13px; height: 12px; margin-top: -2px;
  background: linear-gradient(var(--c1), var(--c1)) 0 100% / 3px 5px no-repeat, linear-gradient(var(--c2), var(--c2)) 5px 100% / 3px 8px no-repeat,
    linear-gradient(var(--c3), var(--c3)) 10px 100% / 3px 12px no-repeat; }
.conf[data-level="medium"] { --c3: var(--paper-3); }
.conf[data-level="low"] { --c2: var(--paper-3); --c3: var(--paper-3); }
.conf[data-level="unknown"] { --c1: var(--paper-3); --c2: var(--paper-3); --c3: var(--paper-3); }
.conf[data-level="medium"], .conf[data-level="low"] { color: var(--ink-2); }
.why-verdict .conf { background: var(--sign-2); color: var(--on-sign); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --c1: var(--lamp); --c2: var(--lamp); --c3: var(--lamp); }
.why-verdict .conf[data-level="medium"] { --c3: rgba(194, 210, 220, 0.3); }
.why-verdict .conf[data-level="low"] { --c2: rgba(194, 210, 220, 0.3); --c3: rgba(194, 210, 220, 0.3); }
.why-verdict .conf[data-level="unknown"] { --c1: rgba(194, 210, 220, 0.3); --c2: rgba(194, 210, 220, 0.3); --c3: rgba(194, 210, 220, 0.3); }
.why-h, .why-block h3 { margin: 0 0 var(--s-3); font-size: var(--t-sm); font-weight: var(--w-strong); color: var(--ink); letter-spacing: 0; }
.why-block > p { margin: 0 0 var(--s-2); }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.why-list.steps { list-style: none; padding-left: 0; gap: var(--s-2); counter-reset: fix; }
/* the steps to fix it: numbered stops on a short line */
.why-list.steps > li { position: relative; padding: 2px 0 4px 38px; counter-increment: fix; }
.why-list.steps > li::before { content: counter(fix); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; display: grid; place-items: center; padding-top: 2px;
  border-radius: var(--r-round); background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); font-size: var(--t-xs); font-weight: var(--w-display); color: var(--ink); }
.why-list.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 25px; bottom: calc(-1 * var(--s-2) - 1px); width: 4px; background: var(--ink); }
.why-reason { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); padding: 10px 14px 8px; border-radius: var(--r-2); background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--hair); }
.why-kind, .why-src, .why-role, .why-state { font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
.why-kind { align-self: start; justify-self: start; padding: 2px 8px 0; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.14); }
.why-at { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* the evidence: a card per piece, its source and role as small labels; what points away from the cause is framed, not filled */
.why-evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.why-ev { display: grid; gap: 4px; padding: 12px 16px 10px; border-radius: var(--r-2); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 2px rgba(13, 36, 51, 0.04); }
.why-ev.against { background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.why-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0 0 2px; }
.why-src { padding: 2px 8px 0; border-radius: var(--r-pill); background: var(--sign); color: var(--on-sign); }
.why-role { padding: 2px 8px 0; border-radius: var(--r-pill); background: var(--paper-3); color: var(--ink); }
.why-ev.supports .why-role { background: var(--ink); color: var(--paper); }
.why-ev-head .why-at { margin-left: auto; }
.why-ev p { margin: 0; }
.why-quote { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); color: var(--ink); background: var(--raise); overflow-wrap: anywhere; }
.why-quote::before { content: "\201C"; }
.why-quote::after { content: "\201D"; }
.why-link { margin-top: var(--s-1); overflow-wrap: anywhere; }
/* the timeline of the incident: stops on a vertical line (the system's signature), the offset beside each */
.why-tl { list-style: none; margin: 0; padding: 0 0 0 28px; display: grid; gap: 0; }
.why-tl-item, .why-tl li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 0 var(--s-4); }
.why-tl-item::before { content: ""; position: absolute; left: -27px; top: 2px; width: 14px; height: 14px; border-radius: var(--r-round); background: var(--paper); box-shadow: inset 0 0 0 4px var(--ink); }
.why-tl-item::after { content: ""; position: absolute; left: -22px; top: 16px; bottom: -2px; width: 4px; background: var(--ink); }
.why-tl-item:last-child { padding-bottom: 0; }
.why-tl-item:last-child::after { display: none; }
.why-tl-item:last-child::before { box-shadow: inset 0 0 0 4px var(--lamp-down); filter: drop-shadow(0 0 4px var(--halo-down)); }
.why-tl-item > :last-child { font-weight: var(--w-strong); }
.why-off, .why-tl .when { font-size: var(--t-xs); color: var(--ink-2); }
.why-steps { padding-left: 1.4em; display: grid; gap: var(--s-2); }
.why-steps li::marker { font-weight: var(--w-strong); }
.why-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.why-gap { margin-top: var(--s-5); }
/* what to do sits on its own quiet plate in the right column */
.why-side > .why-who { padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
/* the message to the client: in the agency's name, four lengths, a count, copy */
.msg { margin: var(--s-3) 0; overflow: hidden; border-radius: var(--r-3); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.msg > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 20px 8px; font-weight: var(--w-strong); list-style: none; cursor: pointer; }
.msg > summary::-webkit-details-marker { display: none; }
.msg > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: url("/static/shared/img/v2/chevron.svg") center / contain no-repeat;
  transform: rotate(-90deg); transition: transform var(--dur-move) var(--ease-standard); }
.msg[open] > summary::before { transform: none; }
.msg-body { padding: 0 18px 18px; }
.msg-form { display: grid; gap: var(--s-3); }
.msg-form > p { margin: 0; }
.msg-form .field > label { display: grid; gap: 6px; }
.msg-text, .app-body .msg-text { width: 100%; min-height: 12em; font-weight: var(--w-text); line-height: var(--lh-body); }
/* one ink action per row: after the first action, the next ones are quiet */
.msg-tools > .action ~ .action .btn { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.16), 0 1px 2px rgba(13, 36, 51, 0.06); }
.msg-tools > .action ~ .action .btn:hover { background: var(--raise); }
.msg-count { margin: 0; }
.msg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.msg-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
/* deploy sources (change markers) */
.sources { display: grid; gap: var(--s-4); }
.src-list, .marker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.src { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--paper); box-shadow: var(--e-1); }
.src.disabled { color: var(--ink-2); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.src-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-1); }
.src-state { font-size: var(--t-sm); color: var(--ink-2); }
.src .note { margin: 0 0 var(--s-1); overflow-wrap: anywhere; }
.src-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-2); }
.secret-once { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: inset 0 0 0 1px rgba(13, 36, 51, 0.2), var(--e-1); }
.secret-once p { margin: 0; }
.src-facts { margin: 0; display: grid; gap: var(--s-3); }
.src-facts div { display: grid; gap: var(--s-1); }
.src-facts dt { font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
.src-facts dd { margin: 0; overflow-wrap: anywhere; }
.marker { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: 10px 14px 8px; border-radius: var(--r-2); background: var(--paper); box-shadow: var(--e-1); }

/* ==== site security and SEO integrity (views/sitesec.js): the verdict, the findings, what was and was not checked =============
   amber is the colour of "possible" (red stays for a confirmed outage); everything from a scanned site is data and wraps. */
.sec-verdict { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.sec-sentence { margin: 0; max-width: 34em; font-size: var(--t-xl); font-weight: var(--w-strong); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.sec-verdict .note, .sec-verdict .notice { margin: 0; }
.sec-sentence.warning { display: flex; gap: var(--s-2); align-items: flex-start; }
.sec-sentence.warning svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--regional); }
.sec-page .block > h3 { margin-top: var(--s-6); }
.sec-page .note { max-width: 56ch; }
.sec-counts { margin: 0; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.sec-counts .fd-count.new { background: var(--uneasy); }
.sec-counts .fd-count.sec-quiet { background: var(--paper); }
.sec-counts .fd-count.sec-hero { min-height: 72px; }
.sec-counts .fd-count.sec-hero .fd-n { font-size: var(--t-2xl); }
.sec-counts .fd-count span:first-child { overflow-wrap: anywhere; }
.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.sec-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.sec-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sec-top .tag { margin-left: 0; }
.sec-top .tag.seen { background: transparent; box-shadow: inset 0 0 0 1.5px var(--edge); }
.sec-top .tag.sec-new, .sec-row .tag.sec-new { background: var(--sign); color: var(--on-sign); }
.sec-card .sec-title { margin: 0; font-size: var(--t-lg); overflow-wrap: anywhere; }
.sec-summary { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.sec-subject { margin: 0; overflow-wrap: anywhere; }
.sec-card details.more { margin-top: var(--s-1); }
.sec-card .row-actions { margin: 0; }
.sec-card .more-body h4, .sec-row .more-body h4 { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.sec-card .more-body p, .sec-row .more-body p { max-width: 56ch; }
.sec-advice { padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); }
.sec-facts { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-2); }
.sec-facts dt { padding-top: 2px; font-size: var(--t-xs); color: var(--ink-2); }
.sec-facts dd { margin: 0; overflow-wrap: anywhere; }
.sec-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--s-1); }
.sec-accepted { margin-top: var(--s-4); }
.sec-accepted-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; box-shadow: inset 0 -1px 0 var(--rule); }
.sec-accepted-row:last-child { box-shadow: none; }
.sec-accepted-row > span { min-width: 0; overflow-wrap: anywhere; }
.sec-areas { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.sec-area { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr); gap: var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4) 10px; box-shadow: inset 0 -1px 0 var(--rule); }
.sec-area:last-child { box-shadow: none; }
.sec-area-name { font-weight: var(--w-label); }
.sec-area-state { color: var(--ink-2); overflow-wrap: anywhere; }
.sec-area-state.partial, .sec-area-state.needs_proof { color: var(--regional); font-weight: var(--w-label); }
.sec-area-state.unavailable { color: var(--unknown); }          /* a gap is slate, never amber and never green (the honest gap) */
.sec-software, .sec-prevention { margin: 0 0 var(--s-3); padding-left: 1.3rem; display: grid; gap: var(--s-2); }
.sec-switch { display: grid; gap: var(--s-1); margin: 0 0 var(--s-4); }
.sec-switch > .note { max-width: 46em; margin-left: calc(52px + var(--s-3)); }
.sec-rows { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.sec-row { box-shadow: inset 0 -1px 0 var(--rule); }
.sec-row:last-child { box-shadow: none; }
.sec-row-details { margin: 0; padding: var(--s-2) var(--s-4); }
details.more.sec-row-details > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); width: 100%; font-weight: var(--w-text);
  color: var(--ink); min-height: 40px; padding-block: var(--s-1); }
details.more.sec-row-details > summary::before { align-self: flex-start; margin-top: 7px; }
.sec-row-title { font-weight: var(--w-strong); }
.sec-row-summary { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.sec-row .tag { margin-left: 0; }
.sec-row .more-body { padding-left: var(--s-5); }
.sec-item { display: grid; gap: var(--s-1); padding: var(--s-3) 0; box-shadow: inset 0 1px 0 var(--rule); }
.sec-row .more-body h4.sec-item-title { margin: 0; font-size: var(--t-md); color: var(--ink); overflow-wrap: anywhere; }
.sec-item .sec-subject { margin: 0; }
.sec-proof { display: grid; gap: var(--s-3); }
.sec-proof > * { margin: 0; }
.sec-proof .dns-records { margin: 0; }
.sec-proof h4 { margin: var(--s-2) 0 0; font-size: var(--t-md); }

/* ==== help and support (views/support.js, views/mail.js) ===================================================================== */
.help-search { display: grid; gap: var(--s-3); }
.help-search > .field { max-width: 40rem; }
.help-search .hint { margin: 0; color: var(--ink-2); min-height: 1.4em; }
.help-box { position: relative; }
.help-box .search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.help-box input[type="text"], .help-box input[type="search"] { min-height: 52px; padding-left: 46px; font-size: var(--t-lg); }
/* the groups flow down balanced columns in their own order (a grid row left a short group beside a long one with a hole under it) */
.help-groups { columns: 3 18rem; column-gap: var(--s-3); margin-top: var(--s-2); }
.help-group { break-inside: avoid; margin-bottom: var(--s-3); padding: var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.help-group-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-3); box-shadow: inset 0 -1px 0 var(--hair); }
.help-group h3 { margin: 0; font-size: var(--t-lg); }
.topic-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-2); background: var(--sign); color: var(--lamp); }
.topic-tile .nav-icon { width: 20px; height: 20px; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.help-list li { display: grid; gap: 2px; }
.help-list a { font-weight: var(--w-strong); color: var(--link); line-height: 1.35; }
.help-summary { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.help-found { gap: 2px; max-width: 46rem; }
.help-found li { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--paper); box-shadow: var(--e-1); }
.block-form { margin-top: var(--s-5); max-width: 46rem; }
.block-form textarea { min-height: 8em; }
.ask-card { padding: var(--s-5) var(--s-6); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.ask-card h3 { margin: 0 0 var(--s-2); }
.ask-card .form { max-width: none; margin-top: var(--s-4); }
.ticket-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); max-width: 46rem; }
.ticket-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.ticket-main { min-width: 0; }
.ticket-main a { font-weight: var(--w-strong); overflow-wrap: anywhere; }
.ticket-main a::after { content: ""; position: absolute; inset: 0; }
.ticket-row:focus-within { box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }
.ticket-sub { margin: 2px 0 0; color: var(--ink-2); font-size: var(--t-sm); }
/* the state of a request: a word and a mark of its own shape (ring: waiting, filled: answered, dash: closed) */
.help-state { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 24px; padding: 2px 9px 0; font-size: var(--t-xs); font-weight: var(--w-strong);
  white-space: nowrap; background: var(--unknown-bg); color: var(--ink); }
.help-state::before { content: ""; width: 9px; height: 9px; border-radius: var(--r-round); border: 2px solid currentColor; }
.help-state.open { background: var(--regional-bg); color: var(--regional); }
.help-state.answered { background: var(--steady-bg); color: var(--steady); }
.help-state.answered::before { background: currentColor; }
.help-state.closed::before { width: 10px; height: 0; border-radius: 0; border-width: 1px 0 0; }
.ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.ticket-head h2 { margin: 0; overflow-wrap: anywhere; }
.ticket-view .facts-list { margin: var(--s-4) 0 0; }
.ticket-thread { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); max-width: 46rem; }
.ticket-msg { padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.ticket-msg.support { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }   /* support's reply: framed in ink */
.ticket-meta { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--t-sm); }
.ticket-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; max-width: 44em; }

/* ==== billing: the plan, change and cancel, who pays, withdrawal, fiscal invoices (views/billing*.js, withdrawal.js) ========== */
.plan-actions { display: grid; gap: 14px; margin-top: var(--s-4); }
.plan-actions .row-actions, .block > .row-actions { margin-top: var(--s-4); }
.plan-actions .row-actions { margin-top: 0; }
.portal-box:empty { display: none; }
.fake-portal { margin-top: 0; max-width: 40rem; }
.fake-portal .plan-limits { display: block; font-size: var(--t-sm); color: var(--ink-2); font-weight: var(--w-text); }
.next-line { max-width: 46rem; margin-top: 10px; }
.lead-in { max-width: 46rem; margin: 0 0 var(--s-4); color: var(--ink-2); }
.profile-form { display: grid; gap: var(--s-3); max-width: 40rem; }
.who-pays { display: grid; gap: var(--s-2); min-width: 0; margin: 0 0 var(--s-2); padding: 0; border: 0; }
.who-pays legend { margin-bottom: var(--s-2); padding: 0; font-weight: var(--w-label); }
.who-choice { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--app-control); padding: var(--s-3) var(--s-4) 10px; border-radius: var(--r-3); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--edge); cursor: pointer; }
.who-choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; }
.who-choice > span { display: grid; gap: 2px; }
.who-choice .hint { color: var(--ink-2); font-size: var(--t-sm); }
.who-choice:hover { background: var(--raise); }
.who-choice:has(input:checked) { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), var(--e-1); }
.who-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-row { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .field-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } }
.checkout-who { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); max-width: 46rem; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.checkout-who h3 { margin: 0; font-size: var(--t-md); }
.profile-summary, .profile-panel, .withdraw-step { display: grid; gap: var(--s-3); }
.profile-facts dd, .withdraw-step .facts-list dd { overflow-wrap: anywhere; }

/* ==== maintenance windows, status-page updates and subscribers =============================================================== */
.rows.mt-list { grid-template-columns: 1fr; gap: var(--s-3); }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-3) var(--s-5); }
.mt-row .row-title { justify-content: flex-start; gap: var(--s-2) var(--s-3); }
.mt-effects { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.mt-details { margin: var(--s-2) 0 0; max-width: 60ch; }
.mt-row .row-actions { margin-top: 0; justify-content: flex-end; }
.mt-part { display: grid; gap: var(--s-3); }
.mt-days { border: 0; margin: 0; padding: 0; }
.mt-days legend { font-weight: var(--w-label); margin-bottom: var(--s-2); padding: 0; }
.mt-day-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.rows.sp-incident-rows { grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); align-items: start; }
.sp-upd { margin-top: var(--s-4); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--hair); }
.sp-upd h3 { margin: 0 0 var(--s-1); font-size: var(--t-md); }
/* the updates a reader sees under an incident: stops on a short line, newest first */
.sp-updates { list-style: none; margin: var(--s-2) 0; padding: 0 0 0 28px; display: grid; gap: var(--s-3); }
.sp-updates li { position: relative; }
.sp-updates li::before { content: ""; position: absolute; left: -27px; top: 3px; width: 14px; height: 14px; border: 4px solid var(--ink); border-radius: var(--r-round); background: var(--paper); }
.sp-updates li::after { content: ""; position: absolute; left: -22px; top: 17px; bottom: calc(-1 * var(--s-3) - 3px); width: 4px; background: var(--ink); }
.sp-updates li:last-child::after { display: none; }
.sp-upd-head { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.sp-upd-head strong { color: var(--ink); }
.sp-upd-body { margin: var(--s-1) 0 var(--s-2); white-space: pre-line; overflow-wrap: anywhere; }
.sp-upd .disclosure, .sp-upd details { margin-top: var(--s-2); }
.sp-sub-counts { margin: var(--s-4) 0 var(--s-3); }
.sp-sub-more { margin-top: var(--s-3); }
/* AI assistants (views/mcp.js): three numbered steps, each its own panel, so the order of the work is the layout */
/* one column that may shrink below its widest line: the long config sample scrolls inside its panel (an auto track grew to the sample's
   width and cut every panel off at the right edge of a phone) */
.mcp-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.mcp-flow > .block { margin: 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.mcp-flow > .block > h2 { margin-bottom: var(--s-3); }
.mcp-flow > :first-child { max-width: 46rem; }
/* the walkthrough video of a page (views/video.js): the frame keeps its room (CLS 0), the transcript is one click away */
.vid-card { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); max-width: 46rem; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-2); background: var(--sign); overflow: hidden; }
.video-frame video, .video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-transcript-body { white-space: pre-line; max-width: 44em; }

/* ==== the sign-in pages: the app's sign in / create account / check your inbox / second step, and the pages the e-mail links open
   (/verify /reset /forgot /invite /confirm-alerts /sign-in-link /unsubscribe /disconnect /ack). The sign field on one side with the
   product's line (an incident's journey, drawn once), a white panel with the form on the other. Square fields with their label above,
   the ink button, the busy bar that fills once. Nothing loops. ============================================================== */
.auth-page { background: var(--canvas); }
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: var(--canvas); }
.auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); min-height: 100vh;
  padding: clamp(24px, 3.4vw, 48px); background: var(--sign); color: var(--on-sign);
  --ground: var(--sign); --night-line: #c2d2dc; --night-regional: #e8a531; --night-down: #ff9d93; --night-steady: #7fd8ad; }
.auth-figure { margin: var(--s-5) 0 0; }
/* the pages the e-mail links open put the side in #visual-slot once their script runs: the slot holds its room until then (CLS 0) */
#visual-slot { min-height: 100vh; background: var(--sign); }
.auth-line-note { margin-top: var(--s-3); color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-label); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; color: var(--on-sign); text-decoration: none;
  font-family: var(--font-mark); font-weight: 800; font-stretch: 125%; font-size: var(--t-lg); letter-spacing: 0.01em; line-height: 1; }
.auth-brand .mb-a, .auth-brand .mb-b { transform-box: fill-box; transition: transform var(--dur-move) var(--ease-standard); }
.auth-brand .mb-a { transform-origin: 100% 100%; }
.auth-brand .mb-b { transform-origin: 100% 0; }
/* the logo comes on as the page loads (owner, 2026-11-02): the lamp lights, then the two beams sweep in to it, once; with reduced motion
   it is simply there. The rail's mark does the same when the app starts (the rail is drawn once and stays). */
.auth-brand svg circle, .rail .wordmark svg circle { transform-box: fill-box; transform-origin: 50% 50%; animation: lx-lamp-on var(--dur-enter) var(--ease-enter) var(--dur-press) backwards; }
.auth-brand .mb-a, .rail .wordmark .mb-a { animation: lx-sweep-a var(--dur-scene) var(--ease-enter) var(--dur-state) backwards; }
.auth-brand .mb-b, .rail .wordmark .mb-b { animation: lx-sweep-b var(--dur-scene) var(--ease-enter) calc(var(--dur-state) + var(--stagger)) backwards; }
@media (hover: hover) {
  .auth-brand:hover .mb-a { transform: rotate(-3deg); }
  .auth-brand:hover .mb-b { transform: rotate(3deg); }
}
.auth-pitch { display: grid; gap: var(--s-3); max-width: 30rem; }
.auth-pitch-title { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: var(--w-display); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.auth-pitch-sub { color: var(--on-sign-2); font-size: var(--t-lg); line-height: 1.4; }
/* the line on the sign field: what changed, one region, both regions and the one alert (an illustration; the pitch says it in words) */
.auth-line { --stop: 22px; --line-w: 6px; max-width: 24rem; gap: var(--s-4); padding-left: 52px; }
.auth-line .stop::before { background: var(--night-line); left: calc(-27px - var(--line-w) / 2); top: 9px; }
.auth-line .stop[data-next="regional"]::before { background: var(--night-regional); }
.auth-line .stop[data-next="down"]::before { background: var(--night-down); }
.auth-line .stop-mark { left: -38px; top: -2px; border-width: 5px; border-color: var(--night-line); background: var(--sign); }
.auth-line .stop-change .stop-mark { border-radius: 0; }
.auth-line .stop-regional .stop-mark { border-color: var(--night-regional); background: linear-gradient(90deg, var(--sign) 50%, var(--night-regional) 50%); }
.auth-line .stop-down .stop-mark { left: -42px; top: -6px; width: 30px; height: 30px; border-color: var(--night-down); box-shadow: 0 0 0 4px var(--sign), 0 0 0 8px var(--night-down); }
.auth-line .stop-title { font-size: var(--t-md); color: var(--on-sign); }
.auth-line .stop-text { color: var(--on-sign-2); font-size: var(--t-sm); max-width: none; }
.auth-line .stop-time { color: var(--on-sign-2); font-size: var(--t-xs); }
.auth-panel { display: grid; align-items: start; justify-items: center; padding: clamp(48px, 14vh, 160px) clamp(20px, 5vw, 72px) 48px; min-width: 0; }   /* top-anchored: a card that grows as the link is read never moves what is already shown (CLS 0) */
/* the form stands on a white plate lifted off the canvas */
.auth-card { display: grid; gap: 20px; width: 100%; max-width: 30rem; min-width: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-4); background: var(--paper);
  box-shadow: var(--e-1); }
.auth-card > * { animation: lx-rise var(--dur-enter) var(--ease-enter) both; }
.auth-card > :nth-child(2) { animation-delay: var(--stagger); }
.auth-card > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.auth-card > :nth-child(n+4) { animation-delay: calc(var(--stagger) * 3); }
.auth-title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: var(--w-display); line-height: 1.05; letter-spacing: -0.02em; }
.auth-title:focus { outline: none; }
.auth-lead { color: var(--ink-2); max-width: 36em; }
.auth-aside { color: var(--ink-2); font-size: var(--t-md); }
.auth-aside-row { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.auth-fine { color: var(--ink-2); font-size: var(--t-xs); }
.auth-pane { display: grid; gap: 20px; }
.auth-pane:not([hidden]) { animation: lx-rise var(--dur-enter) var(--ease-enter) both; }
.auth-pane-fields { display: grid; gap: 12px; }
.auth-pane > .linkish { justify-self: start; }
/* a thumb needs 44 px: the links and link-like buttons of the panes grow their hit area and give the room back, so nothing moves */
.auth-card a:not(.auth-cta, .auth-brand, .btn) { display: inline-block; padding-block: 10px; margin-block: -6px; }
.auth-pane .linkish { min-height: 44px; margin-block: -10px; }
.auth-subtitle { margin: 0; font-size: var(--t-xl); font-weight: var(--w-strong); line-height: 1.15; }
/* the single-app shell steps aside on these routes */
body.auth-mode { background: var(--paper); }
body.auth-mode .shell { display: block; min-height: 100vh; box-shadow: none; }
body.auth-mode .rail, body.auth-mode .topbar { display: none; }
body.auth-mode .stage { display: block; }
body.auth-mode .view { padding: 0; max-width: none; }

/* fields of the sign-in pages (auth-kit.js authField): the label sits above the box, the eye and the tick sit inside it */
.af { display: grid; gap: 6px; }
.af-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.af .af-input { grid-row: 2; grid-column: 1; width: 100%; min-height: 48px; padding: 0 48px 0 14px; border: 1px solid var(--edge); border-radius: var(--r-2);
  background: var(--paper); font-size: var(--t-md); box-shadow: var(--e-inset); }
.af .af-input::placeholder { color: transparent; }
.af .af-input:hover { border-color: var(--ink-2); }
.af .af-input:focus-visible { border-color: var(--focus); }
.af.invalid .af-input { border-color: var(--down); }
.af-label { grid-row: 1; grid-column: 1; font-weight: var(--w-label); color: var(--ink); }
.af-line { display: none; }
.af-hint { color: var(--ink-2); font-size: var(--t-xs); }
.af-msg { margin: 0; color: var(--down); font-weight: var(--w-label); font-size: var(--t-sm); animation: lx-rise var(--dur-state) var(--ease-standard) both; }
.af-ok { grid-row: 2; grid-column: 1; justify-self: end; align-self: center; width: 18px; height: 18px; margin-right: 14px; color: var(--steady); pointer-events: none;
  opacity: 0; transform: scale(var(--pop-scale)); transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-enter) var(--ease-enter); }
.af.valid .af-ok { opacity: 1; transform: none; }
.af-ok-icon { width: 100%; height: 100%; }
.af-eye { grid-row: 2; grid-column: 1; justify-self: end; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 2px; padding: 0;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: transform var(--dur-press) var(--ease-standard); }
.af-eye:hover { background: var(--paper-2); color: var(--ink); }
.af-eye:active { transform: scale(var(--press-scale)); }
.af-eye-icon { width: 22px; height: 22px; overflow: visible; }
.eye-slash, .eye-pupil { transform-box: fill-box; transition: transform var(--dur-move) var(--ease-standard); }
.eye-slash { transform-origin: 0 100%; }
.eye-pupil { transform-origin: 50% 50%; transform: scale(0.55); }
.af.shown .eye-slash { transform: scale(0); }
.af.shown .eye-pupil { transform: none; }
.af.has-eye .af-ok { margin-right: 52px; }
.af .af-input::-ms-reveal, .af .af-input::-ms-clear { display: none; }
.af-caps { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--regional); font-weight: var(--w-label); font-size: var(--t-xs); }
.af-caps:empty { display: none; }
.af-caps:not(:empty) { animation: lx-rise var(--dur-state) var(--ease-standard) both; }
.af-caps::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.af-meter { display: flex; align-items: center; gap: 12px; }
.af-meter-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 9rem; flex: none; }
.af-meter-bars i { position: relative; display: block; height: 6px; overflow: hidden; background: var(--paper-3); }
.af-meter-bars i::after { content: ""; position: absolute; inset: 0; background: var(--bar, var(--edge)); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-move) var(--ease-standard); }
.af-meter[data-score="1"] { --bar: var(--down); }
.af-meter[data-score="2"] { --bar: var(--regional-bar); }
.af-meter[data-score="3"], .af-meter[data-score="4"] { --bar: var(--steady); }
.af-meter[data-score="1"] i:nth-child(-n+1)::after, .af-meter[data-score="2"] i:nth-child(-n+2)::after,
.af-meter[data-score="3"] i:nth-child(-n+3)::after, .af-meter[data-score="4"] i::after { transform: scaleX(1); }
.af-meter-word { font-size: var(--t-xs); font-weight: var(--w-label); color: var(--ink-2); min-height: 1.2em; }
/* the button: the ink sign, full width; busy: the label fades and a bar fills once under it; done: green with a tick */
.auth-submit, .auth-cta { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 2px 18px 0; border: 0;
  border-radius: var(--r-2); background: var(--ink); color: var(--paper); font: inherit; font-weight: var(--w-strong); font-size: var(--t-md);
  text-decoration: none; cursor: pointer; transition: transform var(--dur-press) var(--ease-standard);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(13, 36, 51, 0.22), 0 4px 10px -6px rgba(13, 36, 51, 0.4); }
.auth-submit:hover:not([aria-disabled="true"]), .auth-cta:hover { background: #1f313d; text-decoration: none; }
/* the main button lights up under the pointer or a press (the app's primary: its lamp glow is a layer whose opacity moves) */
.auth-submit::before, .auth-cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 22px -8px rgba(245, 196, 81, 0.75); opacity: 0; transition: opacity var(--dur-state) var(--ease-standard); }
@media (hover: hover) { .auth-submit:hover:not([aria-disabled="true"])::before, .auth-cta:hover::before { opacity: 1; } }
.auth-submit.done::before { opacity: 0; }
.auth-submit:active:not([aria-disabled="true"]), .auth-cta:active { transform: scale(var(--press-scale)); }
.auth-submit[aria-disabled="true"] { cursor: progress; }
.auth-cta { display: inline-flex; width: auto; min-width: 12rem; }
.as-label { transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard); }
.as-spin { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: opacity var(--dur-state) var(--ease-standard); }
.as-done { position: absolute; width: 26px; height: 26px; opacity: 0; transform: scale(var(--pop-scale));
  transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-enter) var(--ease-enter); }
.auth-submit.busy .as-label { opacity: 0.35; transition-delay: var(--busy-delay); }
.auth-submit.busy .as-spin { opacity: 1; transform: none; animation: lx-draw var(--dur-scene) var(--ease-standard) var(--busy-delay) both; }
.auth-submit.done { background: var(--steady); }
.auth-submit.done .as-label { opacity: 0; transform: translateY(10px); }
.auth-submit.done .as-spin { opacity: 0; }
.auth-submit.done .as-done { opacity: 1; transform: none; }
.auth-msg { min-height: 1.4em; font-size: var(--t-md); }
.auth-msg.error { color: var(--down); font-weight: var(--w-label); }
.auth-msg:empty { min-height: 0; margin-block: -9px; }   /* the status line keeps its place for screen readers, without a gap */
.auth-form { display: grid; gap: 18px; }
/* six boxes for a code (core.css's `.code` is a code block: these are the boxes of auth-kit.js codeBoxes) */
.code[role="group"] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; background: none; }
.code .code-box { width: 100%; min-width: 0; min-height: 60px; padding: 0; border: 1px solid var(--edge); border-radius: var(--r-2); background: var(--paper);
  text-align: center; font: inherit; font-size: var(--t-2xl); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; box-shadow: var(--e-inset); }
.code .code-box:hover { border-color: var(--ink-2); }
.code .code-box:focus-visible { border-color: var(--focus); }
.code.invalid .code-box { border-color: var(--down); }
/* the status mark of the e-mail link pages: reading the link is a dashed ring (a stop still to come); done, a problem, a note */
.auth-state { display: flex; align-items: flex-start; gap: 16px; }
.auth-state p { padding-top: 10px; min-width: 0; overflow-wrap: anywhere; }
.auth-mark { position: relative; flex: none; width: 44px; height: 44px; color: var(--ink-2); }
.auth-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.am-spin { position: absolute; inset: 4px; border: 4px dashed var(--edge); border-radius: var(--r-round); opacity: 0; }
.auth-mark[data-kind="wait"] .am-spin { opacity: 1; }
.auth-mark[data-kind="ok"] { color: var(--steady); }
.auth-mark[data-kind="bad"] { color: var(--down); }
.auth-mark[data-kind="info"] { color: var(--regional); }
.auth-mark[data-kind="ok"] .am-ring, .auth-mark[data-kind="bad"] .am-ring, .auth-mark[data-kind="info"] .am-ring { opacity: 1; animation: lx-stop var(--dur-enter) var(--ease-enter) both; }
.auth-mark[data-kind="ok"] .am-check { opacity: 1; }
.auth-mark[data-kind="bad"] .am-cross { opacity: 1; animation: lx-stop var(--dur-enter) var(--ease-enter) both; }
/* the envelope of "check your inbox": the flap opens, the letter rises, the tick arrives; once */
.auth-envelope { width: min(200px, 60%); height: auto; overflow: visible; }
.env-back { fill: var(--sign); }
.env-front { fill: var(--sign-3); }
.env-flap, .env-flap-open { fill: var(--sign-2); }
.env-flap, .env-flap-open, .env-letter, .env-badge { transform-box: fill-box; }
.env-flap { transform-origin: 50% 0; animation: env-flap var(--dur-enter) var(--ease-enter) var(--dur-enter) both; }
.env-flap-open { opacity: 0; animation: env-show var(--dur-enter) var(--ease-enter) var(--dur-enter) both; }
.env-letter { animation: env-rise var(--dur-enter) var(--ease-enter) calc(var(--dur-enter) * 1.6) both; }
.env-badge { transform-origin: 50% 50%; animation: lx-stop var(--dur-enter) var(--ease-enter) calc(var(--dur-enter) * 2.6) both; }
@keyframes env-flap { from { transform: scaleY(1); opacity: 1; } 55% { opacity: 1; } to { transform: scaleY(-1); opacity: 0; } }
@keyframes env-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes env-rise { from { transform: translateY(0); } to { transform: translateY(-26px); } }
.inbox-hero { display: grid; justify-items: start; }
/* the steps after sign-up: stops on a short line, numbered because they are a sequence */
.inbox-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.inbox-steps li { position: relative; display: flex; align-items: center; min-height: 32px; padding: 2px 0 0 46px; counter-increment: step;
  animation: lx-rise var(--dur-enter) var(--ease-enter) both; }
.inbox-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center; padding-top: 2px;
  border: 4px solid var(--ink); border-radius: var(--r-round); background: var(--paper); color: var(--ink); font-weight: var(--w-display); font-size: var(--t-sm); }
.inbox-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; height: 14px; width: 4px; background: var(--ink); }
.inbox-steps li:nth-child(2) { animation-delay: var(--stagger); }
.inbox-steps li:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
/* the plan picked on the landing, and the site of the free check */
.auth-plan { padding: 10px 14px 8px; border-radius: var(--r-2); background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); font-weight: var(--w-label); }
.auth-site .linkish { font-weight: var(--w-text); margin-left: 4px; }
/* "Continue with Google / GitHub / email": three equal buttons. Google's custom-button rules (light theme): white fill, 1 px #747775
   stroke, #1F1F1F text, the four-colour G, hover and press layers of #303030 at 8 and 12 %. GitHub's mark in black, unaltered. The e-mail
   button wears the same coat, so no way to continue is more prominent than another; the face is the app's own (Overpass). */
.methods, .method-list { display: grid; gap: var(--s-3); }
.method-btn {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 2px var(--s-3) 0; border: 1px solid #747775; border-radius: 0; background: #ffffff; color: #1f1f1f;
  font-family: var(--font); font-size: var(--text-sm); font-weight: 500; line-height: 20px; text-align: left;
  cursor: pointer; transition: transform var(--dur-press) var(--ease-standard);
}
.method-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #303030; opacity: 0; transition: opacity var(--dur-state) var(--ease-standard); }
.method-btn, .method-btn::before { border-radius: var(--r-2); }   /* the app's control corner (Google's rules allow a rounded rectangle) */
.method-btn:hover::before { opacity: 0.08; }
.method-btn:active::before { opacity: 0.12; }
.method-btn:active { transform: scale(var(--press-scale)); }
.method-btn .mark { width: 20px; height: 20px; flex: none; }
.method-email .mark { color: #1f1f1f; }
.mb-label { min-width: 0; overflow-wrap: anywhere; }
.mb-spin { display: none; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 3px; background: #1f1f1f; transform-origin: left; }
.method-btn.busy .mb-spin { display: block; animation: lx-draw var(--dur-scene) var(--ease-standard) both; }
.method-btn[aria-disabled="true"] { cursor: progress; }
.method-btn[aria-disabled="true"]:not(.busy) { opacity: 0.55; }
.mb-last { position: absolute; top: -10px; right: var(--s-3); padding: 2px 8px 0; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); font-size: var(--t-xs);
  font-weight: var(--w-strong); line-height: 1.4; box-shadow: inset 0 0 0 1px var(--rule); }
.auth-terms { display: grid; gap: var(--s-2); }
.auth-check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding-block: var(--s-2); cursor: pointer; }
.auth-check input { flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.auth-check-text { padding-top: 2px; }
.auth-check-err { margin: 0; color: var(--down); font-weight: var(--w-label); }
.auth-terms:has(input[aria-invalid="true"]) .auth-check input { outline: 2px solid var(--down); outline-offset: 2px; }
.auth-alert-slot:empty { display: none; }
.auth-alert { padding: var(--s-3) var(--s-4) 10px; border-radius: var(--r-2); background: var(--down-bg); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(177, 38, 28, 0.16);
  animation: lx-rise var(--dur-state) var(--ease-standard) both; }
.auth-alert.info { background: var(--raise); box-shadow: inset 0 0 0 1px var(--hair); }
.auth-alert p { margin: 0; }
.link-sent { gap: var(--s-4); }
.link-sent .inbox-hero { margin-bottom: calc(var(--s-2) * -1); }
.link-sent button:disabled { color: var(--ink-2); cursor: default; text-decoration: none; font-variant-numeric: tabular-nums; }
/* Account security: the ways to sign in */
.sim { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sim-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--paper); box-shadow: inset 0 -1px 0 var(--hair); }
.sim { overflow: hidden; border-radius: var(--r-3); box-shadow: var(--e-1); }
.sim-row:last-child { box-shadow: none; }
.sim-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-2); background: #ffffff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 2px rgba(13, 36, 51, 0.08); }
.sim-mark .mark { width: 22px; height: 22px; }
.sim-name { margin: 0; font-weight: var(--w-strong); }
.sim-state { margin: 0; color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.sim-action { display: flex; gap: var(--s-2); justify-content: flex-end; }
.stepup-methods { display: grid; gap: var(--s-3); margin-block: var(--s-4); }
.terms-accept { display: grid; gap: var(--s-4); max-width: 34rem; margin-block: var(--s-5); }

/* ==== narrow screens ========================================================================================================= */
@media (max-width: 1240px) {
  .board-head, .site-row { --board-cols: minmax(0, 1.4fr) 156px 124px minmax(110px, 140px) 92px; }
  .site-row .site-when, .board-head span:last-child { display: none; }
}
@media (max-width: 1100px) {
  .board-head, .site-row { --board-cols: minmax(0, 1.4fr) 156px 124px 92px; }
  .site-row .rt, .board-head span:nth-child(4) { display: none; }
  .why-content, .why-cols { grid-template-columns: minmax(0, 1fr); }
  /* one column: the two columns open and the blocks stand in the order they always had */
  .why-main, .why-side { display: contents; }
  .why-content > .why-verdict { order: 0; }
  .why-content .why-reasons { order: 1; }
  .why-content .why-who { order: 2; }
  .why-content .why-alts { order: 3; }
  .why-content .why-evidence-block { order: 4; }
  .why-content .why-ruled { order: 5; }
  .why-content .why-could { order: 6; }
  .why-content .why-time { order: 7; }
  .why-content .why-sources { order: 8; }
  .why-content > .msg { order: 9; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); align-content: start; box-shadow: none; }   /* no rail stretch while #view is short (no CLS) */
  .rail { position: static; height: auto; overflow: visible; padding: 10px var(--s-4); }
  .rail-top { padding-inline: 0; min-height: 52px; }
  .menu-toggle:not([hidden]) { display: inline-flex; }
  .rail-body { display: none; margin-top: var(--s-3); }
  .rail-body.open { display: flex; animation: lx-drop var(--dur-state) var(--ease-standard) both; }   /* the menu sheet drops in */
  .rail-nav { overflow: visible; margin-inline: 0; padding: 0 0 var(--s-2); }
  .rail-label, .org-name, .nav-group { margin-inline: 0; }
  .nav-link::before { left: -16px; }
  .rail-foot { padding-inline: 0; }
  .nav-list.secondary { flex-basis: 100%; margin-inline: 0; }
  .topbar { position: static; min-height: 56px; }
  .crumb-org { max-width: 10rem; }
  .wizard { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .step::before { display: none; }
  .portfolio-3d { aspect-ratio: 4 / 3; }
  .facts-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts-list dd { margin-bottom: 8px; }
  .codes { grid-template-columns: minmax(0, 1fr); }
  .board-head { display: none; }
  .site-row { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: var(--s-2) var(--s-3); padding-block: 12px 10px; }
  .site-row .tracks { grid-column: 1 / -1; }
  .site-row .rt { display: flex; justify-self: end; }
  .site-row .open, .site-row .site-open { display: none; }
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-grid > :last-child { position: static; }
  .site-status { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .site-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--rule); }
  .site-facts > div { padding-inline: 14px; }
  .site-facts > div:first-child { padding-left: 0; }
  .auth-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-visual { min-height: 72px; padding: 14px var(--s-4); gap: 0; }
  #visual-slot { min-height: 72px; }   /* the band's own height: 14 + 44 + 14 */
  .auth-pitch { display: none; }
  .auth-panel { align-items: start; padding: 28px var(--s-4) 48px; }
  .why-reason { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .why-tl-item, .why-tl li { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .why-tl-item > :last-child, .why-tl .when + span { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .view { padding-top: var(--s-5); }
  .view > .block + .block { margin-top: var(--s-5); }
  /* a panel of facts puts each label over its value on a phone: two columns there left the value a sliver one letter wide (billing) */
  .block > .facts-list { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-2); }
  .block > .facts-list dt { padding-bottom: 2px; }
  .block > .facts-list dd { margin-bottom: 0; padding-top: 0; box-shadow: none; }
  /* on a phone the first result's link sits under its heading (still above the results that arrive later, so it never moves) */
  .first-result > h3 { grid-column: 1 / -1; }
  .first-result > p:last-child { grid-column: 1 / -1; grid-row: 2; }
  .app-body .act-card.act-trial { flex-wrap: wrap; padding-block: 12px; }   /* the trial strip's words wrap, its button goes under them */
  .topbar { flex-wrap: wrap; gap: 8px; padding-block: 8px; }
  .crumb-page { display: none; }
  .crumbs { flex: 1 1 0; }
  .crumb-org { max-width: none; }
  .live-pill { max-width: 100%; white-space: normal; }
  .seg { display: flex; width: 100%; }
  .seg-opt { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .seg-3d { display: none; }   /* a phone has no use for the 3D view */
  .page-actions .seg { --seg-n: 2; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .page-actions .seg { flex: 1 1 100%; }
  .field.inline { display: grid; grid-auto-flow: row; width: 100%; }
  .field.inline select { width: 100%; min-width: 0; }
  .rows, .report-list, .fd-cards { grid-template-columns: minmax(0, 1fr); }
  .counts .count-btn { padding-inline: 12px; }
  .lane { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pick-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .bulk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bulk-label, .bulk-msg { grid-column: 1 / -1; }
  .first-row { grid-template-columns: minmax(0, 1fr) auto; }
  .first-when { grid-column: 1 / -1; }
  .fd-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the state tiles stay side by side on a phone: three across, smaller */
  .counts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-2); }
  .count-btn { min-height: 76px; padding: 12px 12px 10px; }
  .count-n { font-size: var(--t-xl); }
  .counts .status { font-size: var(--t-xs); }
  .fd-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .sec-counts { grid-template-columns: minmax(0, 1fr); }
  .sec-facts { grid-template-columns: minmax(0, 1fr); }
  .sec-facts dd { margin-bottom: var(--s-2); }
  .sec-area { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .sec-switch > .note { margin-left: 0; }
  .sec-card { padding: var(--s-3) var(--s-4); }
  .sec-row-details { padding: var(--s-2) var(--s-3); }
  .sec-row .more-body { padding-left: var(--s-2); }
  .table.stack.sec-table caption { display: block; padding: 0 0 var(--s-2); }
  .why-body, .msg-body { padding-left: var(--s-3); padding-right: var(--s-3); }
  .why > summary, .msg > summary { padding-left: var(--s-3); padding-right: var(--s-3); }
  .incidents, .timeline { padding-left: 30px; }
  .incident::before { left: -18px; }
  .incident::after { left: -25px; }
  .incident.open::after { left: -29px; }
  .tl-item::before { left: -17px; }
  .tl-dot { left: -25px; }
  .incident { padding: 14px 14px 12px; }
  .incident > .why, .incident > .msg { margin-inline: -6px; }   /* the incident's own panels only: a message inside the Why stays in it */
  .why-body { gap: var(--s-4); }
  .why-content { gap: var(--s-5); }
  .why-verdict { padding: var(--s-4) var(--s-4) var(--s-4); }
  .why-cause { font-size: var(--t-lg); }
  .site-status { padding: var(--s-4); gap: var(--s-4); }
  .site-facts > div { padding: 10px 12px 8px; }
  .site-facts dd { font-size: var(--t-lg); }
  .monitor { padding: var(--s-4); }
  .mt-row { grid-template-columns: 1fr; }
  .mt-row .row-actions { justify-content: flex-start; }
  .duration-row { grid-template-columns: 1fr; }
  /* the portfolio table as one block per site; the cells and their text are the table's */
  .portfolio-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .portfolio-table, .portfolio-table tbody, .portfolio-table caption { display: block; }
  .portfolio-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px 10px; box-shadow: inset 0 -1px 0 var(--rule);
    grid-template-areas: "site site site" "status status client" "monitors incidents last"; }
  .portfolio-table tbody tr > * { display: block; padding: 0; border: 0; }
  .portfolio-table [data-col="site"] { grid-area: site; font-size: var(--t-lg); }
  .portfolio-table [data-col="status_label"] { grid-area: status; }
  .portfolio-table [data-col="client"] { grid-area: client; text-align: right; }
  .portfolio-table [data-col="monitors"] { grid-area: monitors; }
  .portfolio-table [data-col="open_incidents"] { grid-area: incidents; }
  .portfolio-table [data-col="last_check"] { grid-area: last; }
  .portfolio-table td[data-col="monitors"]::before, .portfolio-table td[data-col="open_incidents"]::before, .portfolio-table td[data-col="last_check"]::before {
    content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--ink-2); }
  .portfolio-table td.repeat { color: var(--ink); }
  .portfolio-table tbody tr[data-status="down"] > *, .portfolio-table tbody tr[data-status="regional_issue"] > * { background: transparent; }
  .portfolio-table tbody tr[data-status="down"] { background: var(--trouble); }
  .portfolio-table tbody tr[data-status="regional_issue"] { background: #fdf8ef; }
  /* invoices: one block per invoice instead of a table that scrolls sideways */
  .invoice-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .invoice-table, .invoice-table tbody { display: block; }
  .invoice-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px 10px; box-shadow: inset 0 -1px 0 var(--rule); }
  .invoice-table tbody tr:last-child { box-shadow: none; }
  .invoice-table tbody tr > * { display: block; padding: 0; border: 0; min-width: 0; }
  .invoice-table tbody th[scope="row"] { grid-column: 1 / -1; font-size: var(--t-lg); }
  .invoice-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--ink-2); }
  /* a table of people, keys or sessions becomes one card per row on a phone: the cell labels come from data-label */
  .table-wrap.stackable { overflow: visible; background: none; }
  .app-body .table-wrap.stackable { border-radius: 0; box-shadow: none; }
  .table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack th, .table.stack td { display: block; }
  .table.stack { background: none; }
  .table.stack tbody tr { margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
  .portfolio-table tbody tr[data-status="regional_issue"] { background: var(--uneasy); }
  .table.stack th, .table.stack td { padding: 2px 0; border: 0; }
  .table.stack tbody th { margin-bottom: 2px; overflow-wrap: anywhere; }
  .table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--ink-2); }
  .table.stack td.cell-actions { padding-top: var(--s-2); }
}
@media (max-width: 480px) {
  .topbar .crumbs { display: none; }   /* the page's own title says where you are; the organisation is in the menu */
  .topbar { justify-content: flex-end; }
}
@media (max-width: 560px) {
  .site-row { gap: 8px 12px; padding-inline: 16px; }
  .site-row .host { grid-column: 1 / -1; overflow-wrap: normal; word-break: normal; }
  .site-row .svc { justify-self: start; }
  .site-row .regions-now { grid-column: 1 / -1; }
  .client-head { padding-inline: 16px; }
  .sim-row { grid-template-columns: auto minmax(0, 1fr); }
  .sim-action { grid-column: 1 / -1; justify-content: stretch; }
  .sim-action .btn { flex: 1; }
  .ticket-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ask-card { padding: var(--s-4); }
  .notice { padding: 12px 14px 10px; }
}
@media (max-width: 420px) {
  .code[role="group"] { gap: 6px; }
  .code .code-box { min-height: 54px; font-size: var(--t-xl); }
  .af-meter { flex-wrap: wrap; gap: 6px; }
}
@media (pointer: coarse) {
  .nav-link, .rail-foot .nav-link { min-height: 44px; }
  .site-row .host { min-height: 44px; }
}

/* ==== the system's high-contrast mode drops backgrounds: marks and bars keep an edge ========================================= */
@media (forced-colors: active) {
  .count-btn, .live-pill, .rg, .pip, .bar-seg, .notice, .why, .incident::after, .tl-dot { forced-color-adjust: auto; border: 1px solid CanvasText; }
  .nav-link[aria-current="page"] { outline: 2px solid Highlight; }
}

/* ==== print: a report prints as a document ================================================================================== */
@media print {
  .rail, .skip-link, .menu-toggle, .page-actions, .dev-build, .toasts, .topbar, .demo-banner, .beam-launcher, .more-checks, .ping-box, .add-check, .qr-frame { display: none !important; }
  .shell { display: block; }
  .app-body, body { background: #fff; color: #000; }
  .view { max-width: none; padding: 0; }
  .view > * { animation-duration: 0ms; }
  .table-wrap { overflow: visible; }
  .report-site, .report-table tr, .report-incidents li { break-inside: avoid; }
  .report-site { padding: 0; }
  .block { margin-top: 24px; }
  a { color: inherit; }
}

/* ==== the phase-1 prototype screens (web/prototype-2026-10-29/pages/app-*.html): their own markup, kept drawable until phase 2
   deletes that folder; the product's screens above do not use these names ================================================== */
.rail-link { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 2px 10px 0; color: var(--on-sign); text-decoration: none; font-weight: var(--w-label); }
.rail-link:hover { background: var(--sign-2); text-decoration: none; }
.rail-link .icon { color: var(--on-sign-2); }
.rail-link[aria-current="page"] { background: var(--sign-2); }
.rail-link[aria-current="page"] .icon { color: var(--lamp); }
.rail-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px; background: var(--lamp); }
.rail-link .count { margin-left: auto; background: var(--down); color: #fff; }
.rail > h2 { margin: var(--s-4) 10px var(--s-1); font-size: var(--t-xs); font-weight: var(--w-strong); letter-spacing: 0; color: var(--on-sign-2); }
.rail > ul, .rail-foot > ul { list-style: none; }
.rail-foot > .note { padding: var(--s-2) 10px; color: var(--on-sign-2); font-size: var(--t-xs); overflow-wrap: anywhere; }
.org-pick { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: 44px; margin: var(--s-4) 0 var(--s-2);
  padding: 2px 10px 0; border: 0; background: var(--sign-2); color: var(--on-sign); font: inherit; font-weight: var(--w-strong); text-align: left; cursor: pointer; }
.main { min-width: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.attention { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 14px 0; background: var(--down); color: #fff; font-weight: var(--w-strong);
  font-size: var(--t-sm); text-decoration: none; }
.rail-toggle { display: none; }
.demo-strip { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 32px; padding: 4px var(--s-4) 2px; background: var(--lamp-soft);
  color: var(--ink); font-size: var(--t-sm); font-weight: var(--w-label); text-align: center; }
.content { padding: var(--s-6) var(--s-6) var(--s-8); max-width: 1280px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.drawer-body.stack { display: grid; gap: var(--s-4); }
.setup { padding: var(--s-5); background: var(--paper); }
.setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.setup .line { --n: 6; --line-top: 0px; --stop: 24px; --line-w: 6px; }
.setup .stop-mark { border-width: 5px; }
.setup .stop-title { margin-top: 14px; font-size: var(--t-sm); }
.setup .stop-text { font-size: var(--t-xs); }
.setup .stop.is-done .stop-mark { border-color: var(--ink); background: var(--ink); }
.setup .stop[data-next="todo"]::before { background: var(--paper-3); }
.setup .stop-text .btn { display: flex; width: max-content; margin-top: var(--s-2); }
.summary { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-4); }
.summary .svc { min-height: 44px; padding-inline: 14px; font-size: var(--t-md); border: 0; font-family: inherit; cursor: pointer; transition: transform var(--dur-press) var(--ease-standard); }
.summary .svc:active { transform: scale(var(--press-scale)); }
.summary .svc[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.summary .svc b { font-size: var(--t-lg); font-weight: var(--w-display); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.toolbar .input { max-width: 420px; }
.inc-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.inc-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.inc-title .svc { font-size: var(--t-md); min-height: 40px; }
.inc-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-2); }
.inc-grid { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); gap: var(--s-4); align-items: start; }
.inc-grid > .panel { min-width: 0; }
.journey-panel .panel-body { padding-top: var(--s-6); }
.stop-pending .stop-mark { border-style: dashed; border-color: var(--edge); }
.stop-pending .stop-title { color: var(--ink-2); }
.readings { width: 100%; border-collapse: collapse; }
.readings th, .readings td { text-align: left; padding: 12px 14px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.readings thead th { font-size: var(--t-xs); color: var(--ink-2); border-bottom: var(--rule-heavy) solid var(--ink); }
.change-plate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; margin-top: var(--s-4); padding: 14px 16px 12px; background: var(--paper-2); }
.change-plate .stop-mark { position: static; width: 20px; height: 20px; border-width: 5px; border-radius: 0; transform: none; }
.change-plate code { white-space: nowrap; }
.evidence-kept, .trial-note { margin-top: var(--s-4); }
@media (max-width: 1100px) { .inc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .rail-toggle { display: inline-flex; }
  .content { padding: var(--s-5) var(--s-4) var(--s-8); }
  .setup .line { --n: 1; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-left: 48px; }
  .setup .stop::before { left: calc(-31px - var(--line-w) / 2 + 6px); top: 9px; width: var(--line-w); height: calc(100% + var(--s-3)); transform-origin: top; }
  .setup .stop:last-child::before { display: none; }
  .setup .stop-mark { position: absolute; left: -40px; top: -3px; }
  .setup .stop-title { margin-top: 0; }
  .change-plate { grid-template-columns: auto minmax(0, 1fr); }
}

/* ==== PREMIUM-GATE (2026-11-02) ===========================================================================================
   The set-up list as a strip map (activation.css, its card 56rem or wider) gives each step a column of about 120 px: a boxed secondary
   action there broke into a three-line box ("Invite a / client / contact"). Beside the next step's one filled button, the later steps'
   actions read as links (the same words, the same target, the focus ring of every link); in a narrower card they stay buttons. */
@container (min-width: 56rem) {
  .app-body .act-item > .btn.secondary, .app-body .act-item > .btn.secondary:hover {
    justify-content: flex-start; min-height: 32px; padding: 0; background: none; box-shadow: none; color: var(--link);
    font-weight: var(--w-label); line-height: 1.3; text-align: left; white-space: normal;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .app-body .act-item > .btn.secondary:hover { text-decoration-thickness: 2px; }
  .app-body .act-item > .btn.secondary::before { content: none; }
}
/* touch: what is still under 44 px on a phone (measured at 375 px with a coarse pointer): the bar's Ask Beam and attention pill,
   the disclosures, "Hide the list", the report links and the links in the first-day, radar and help lists */
@media (pointer: coarse) {
  .topbar .beam-launcher.is-inline, .live-pill { min-height: 44px; }
  .app-body .act-hide { display: inline-flex; align-items: center; min-height: 44px; }
  :is(details.add-site, details.more, details.danger-zone, details.perf, details.evidence, details.crawl-kind) > summary { min-height: 44px; }
  .report-list a { min-height: 44px; }
  .fd-row > a, .radar-sites li > a, .help-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .app-body .act-item > .btn.secondary { min-height: 44px; }
}
/* the sign-in pages side by side (wider than 900 px): the navy side stood as tall as the form beside it, so on the longer forms
   (sign-up) its pitch and the line sat under the fold, cut through a stop. It now holds the window while the form scrolls: the
   logo, the pitch and the whole line stay in view, whatever the length of the form (a window too short for them keeps the old flow). */
@media (min-width: 901px) and (min-height: 760px) {
  .auth-visual { position: sticky; top: 0; align-self: start; height: 100vh; min-height: 0; overflow: hidden; }
}
/* the portfolio's header actions arrive with the sites (portfolio.js `data-pending`): their room is held until then, one row of
   controls on a wide screen (beside the title it adds nothing), the three stacked rows of a phone under 640 px, so the skeleton and
   the sites below never jump down when they come (measured CLS 0.11 at 375 px before, on the first load) */
.page-actions[data-pending] { min-height: 48px; }
@media (max-width: 640px) { .page-actions[data-pending] { min-height: 152px; } }
@media (max-width: 640px) and (pointer: coarse) { .page-actions[data-pending] { min-height: 156px; } }