/* qa.pro: light, one look for everybody; dense, quiet. */
/* designer2: ee.account.css changed on 2026-09-30, 11:10 */
:root { --bg: #E8EBEF; --bg-2: #E1E5EA; --surface: #FFFFFF; --surface-2: #F3F6FA; --line: rgba(17,24,39,.12); --line-2: rgba(17,24,39,.16); --line-3: rgba(17,24,39,.48);   /* .48: a field's edge on the light ground is 3.11:1 (it was 2.92 at .46; the hero debate, change 2) */
         
          --ink: #111827; --ink-2: #374151; --muted: #566173;                       /* one cool-granite ramp at the accent's hue */
          /* 2026-09-29: the accent leaves the verdict colours. Jade was both "press this" and "this passed", so a page of green
             buttons and green pills read as one mood; now actions are night-blue ink (7.6:1 on white, 4.6:1 on the tinted
             surfaces) and green means passed, red means failed, nothing else. Revert this one commit to get jade back. */
          --accent: #0B2D57; --accent-2: #082041; --accent-ink: #ffffff; --link: #1D4ED8; --live: #3B82F6; --green-fill: #0E9F6E;   /* the colours, a little more alive (design-critic's COLOURS-2026-10-05.md): navy the house, ONE blue the live thing — #1D4ED8 for link words, #3B82F6 for what is not words */ --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
          --green: #0B7D55; --green-2: #075441; --green-bg: rgba(14,159,110,.10); --red: #B91C1C; --red-bg: rgba(220,38,38,.07); --amber: #9A5200; --amber-bg: rgba(199,106,0,.11);
          --red-mark: #DC2626; --amber-mark: #C76A00;                                /* dots and rules: brighter than the words */
          --shadow: 0 1px 2px rgba(17,24,39,.06), 0 6px 16px -8px rgba(17,24,39,.10); --shadow-pop: 0 10px 30px -10px rgba(17,24,39,.20); --shadow-deep: 0 24px 60px -30px rgba(17,24,39,.30);
          --media-bg: #EDF1F6; --glow: radial-gradient(60% 50% at 50% -10%, color-mix(in srgb, #3B82F6 6%, transparent), transparent 70%);
          /* the MARK is the owner's own drawing, clean vectors over his crop (static/brand/logo-mark.svg, tools/logo/clean.py, row 1 15:02 UTC 5 Oct; before it static/mark-b2.svg, square, crowd2's B-001 with the owner's longer top bar and two close-button holes, 2026-09-30; favicon.svg and logo.svg are drawn from the same file; the mask is inlined below as a data URI; a new mark means a new ee.css, which carries the stamp) painted in --mark;
             Swap the file and its ratio and every use follows. */
          --mark: #0B2D57; --mark-2: #082041; --mark-ratio: 1.215;   /* the eye in the action's blue (the owner, 2026-09-29: "i agree with blue"; round brand-colour, B): green means one thing only, this passed */
          --r-s: 6px; --r-m: 10px; --r-l: 12px; --ring: #2563EB;   /* the focus edge: the live blue one step darker, so it holds 3:1 on white (5.2), the ground and the tinted bars (the look tests: #3B82F6 at 75 % fell under 3:1) */ --ctl: 40px; --ctl-s: 30px; --ctl-l: 48px;   /* the focus halo (V6 #5) and the three control heights (V2 #2, V6 #8) */
          --t-quick: .2s; --t-settle: .5s; --accent-on-dark: #7aa3d6;
          --section: clamp(64px, calc(4vw / var(--zoom, 1)) + 32px, 88px); --group: 24px;
          color-scheme: light;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;   /* the OS face, tuned for, not a font we never ship */
}
/* THEMES (2026-09-29, the owner: "add a toggle for dark/light version", then "one mode to be selected for site by default, no change
   based on browser themes"). <html> always carries data-theme="light" | "dark": the site's default from templates/_theme.html, or the
   visitor's own choice, set before the first paint by the script in the head. Nothing follows the browser or the system. A DARK RULE
   IS WRITTEN ONCE, under :where(:root[data-theme="dark"]); the tokens under :root[data-theme="dark"]. */
/* DARK: KEPT, NOT OFFERED (the owner's word of 2026-09-29: light only). Nothing sets data-theme="dark" any more; the rules stay so that
   dark can come back in one commit. Nobody mends dark, and no finding about dark is built.
   the night palette: the same tokens, redefined for a visitor who chose dark with the switch
   with the header's switch (a merchant reading the 3 am alert on a phone in bed gets a dark page). Verdict colours stay verdict
   colours: green for passed, red for failed, lifted for contrast on the dark ground; the accent is a lighter night-blue. */
/* the same rules for a reader who chose dark on a light system */
  :root[data-theme="dark"] { --bg: #121716; --bg-2: #181f1d; --surface: #161c1a; --surface-2: #1d2422; --line: rgba(232,236,233,.09); --line-2: rgba(232,236,233,.17); --line-3: rgba(232,236,233,.42);
          --launch-bg: var(--surface-2); --launch-lift: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -28px rgba(0,0,0,.8); --launch-focus-lift: 0 24px 50px -28px rgba(0,0,0,.8); --pill: color-mix(in srgb, var(--ink) 10%, var(--bg-2));   /* the Launch box at night has a body and a lift, its switch a pill (hero debate, changes 3 and 10) */
          --ink: #e8ece9; --ink-2: #c3cbc7; --muted: #8f9a95;
          --accent: #7aa3d6; --accent-2: #8fbde0; --accent-ink: #0b1a26; --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);   /* 6.9 L* from the passed green, 6.8:1 on its ink (round-2 L9 ruling #1) */
          --green: #63c4a4; --green-2: #85d4bb; --green-bg: rgba(99,196,164,.14); --red: #f0919a; --red-bg: rgba(240,145,154,.13); --amber: #e0a552; --amber-bg: rgba(224,165,82,.14);
          --red-mark: #f0919a; --amber-mark: #e0a552;
          --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-pop: 0 10px 30px -10px rgba(0,0,0,.6); --shadow-deep: 0 24px 60px -30px rgba(0,0,0,.7);
          --media-bg: #1d2422; --glow: radial-gradient(60% 50% at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
          color-scheme: dark; }
  html[data-theme="dark"] { background: var(--bg); }
  :where(:root[data-theme="dark"]) .demobar { background: var(--accent-soft); }
  :where(:root[data-theme="dark"]) header.top { background: color-mix(in srgb, var(--bg) 82%, transparent); }
  :where(:root[data-theme="dark"]) input:not([type=checkbox]), :where(:root[data-theme="dark"]) textarea, :where(:root[data-theme="dark"]) select { box-shadow: none; }
  :where(:root[data-theme="dark"]) .next-report, :where(:root[data-theme="dark"]) .next-list li, :where(:root[data-theme="dark"]) .nr-row.bad { border-color: var(--line-2); }
  :where(:root[data-theme="dark"]) .fail-card .shot { background: #0f1413; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: calc(100dvh / var(--zoom, 1)); display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 15.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; }
main p a, main li a, main dd a, .docs-ref td a, .small a, .muted a, figcaption a { text-decoration: underline; text-underline-offset: 3px; }   /* table links sit in a column of links: context names them */   /* a link in prose is not colour alone */
main p a.button, main li a.button { text-decoration: none; }
code, pre, .mono, td.num { font-family: var(--mono); }

/* the mark, painted through a mask so they take the current text colour in either theme; size with font-size
   (the width follows each file's art box); as empty inline-blocks they sit on the text baseline. */
.mark { display: inline-block; width: calc(var(--mark-ratio) * 1em); height: 1em; flex: none; }
.mark { background: url("/static/brand/logo-mark.svg?v=21") center / contain no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* HIS mark, drawn in his colours wherever a .mark stands (row 1, senior 15:02 (5): one mark everywhere) */
:root[data-theme="dark"] .mark { background-image: url("/static/brand/logo-mark-white.svg?v=21"); }

/* header */
header.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 0 20px; min-height: 54px;
  border-bottom: 1px solid var(--line); background: var(--surface); }   /* its own ground, the cards' near-white over the page, and its hairline (senior 13:44 / 14:12 UTC 13 Oct) */   /* opaque: the page never reads through it (DC-H106) */
header.top { padding-inline: max(20px, calc((100% - 1192px) / 2)); }   /* the header sits on the content grid: its right group ends where the page's content ends, not at the window's edge (the owner, 2026-09-29: "notifications icon sits too right") */
.brand { color: var(--ink); font-family: var(--mono); font-size: 16.5px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; }   /* the mark's link is a thumb's target on every page */
.brand:hover { text-decoration: none; } .brand .org { color: var(--muted); font-weight: 400; }
.brand b { letter-spacing: -.02em; line-height: 1; }
/* the mark stands on the wordmark's baseline at cap height: the same bottom edge as the letters, feet on the line */
.brand .mark { font-size: 2.3em; align-self: center; color: var(--mark); margin-top: 1px; }   /* the mark ALONE, 38 by 38 (the owner, 2026-09-30: no wordmark beside it, bigger), beside the 14.5px nav ("a lil bit bigger", the owner, 22:58: it was 23 by 51) */
.brand b { color: var(--ink); font-weight: 700; } .brand .brand-word { font: 700 20px/1 var(--sans); letter-spacing: -.02em; }   /* the wordmark: QA in the blue, .pro in ink (the owner, 2026-09-30) */
.brand-word .qa { color: var(--mark); font-size: 1.4em; line-height: 0; }   /* lowercase qa as tall as the capitals were: its x-height meets the cap height (the owner, 2026-09-30: "'qa', but to be same size as uppercase"); line-height 0 so the line box keeps the header's height */
.brand:hover .mark { color: var(--mark-2); }
.hero h1 .brand-word, .hero .lead .brand-word { color: #374151; letter-spacing: -.01em; }   /* the lead's .pro in the soft slate ink, not black (the owner, 2026-09-30); qa keeps the blue */ .hero .lead .brand-word { font-weight: 600; }   /* the name leads the lead in the mark's blue now the h1 is one line (copy round 2) */ .hero h1 .nowrap { white-space: nowrap; } .hero h1 .brand-word .pro { color: inherit; }   /* '.pro' a shade lighter than the headline's ink */
header nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; margin-left: 12px; justify-content: flex-end; }   /* the public menu sits at the right (the user's ask, 2026-09-29) */
header.top:not(:has(nav.anon)) nav { justify-content: flex-start; margin-left: 10px; }   /* the app bar: the tabs beside the mark; the bell and the account at the far right, on the content's edge */
header nav a { padding: 5px 10px; border-radius: var(--r-s); color: var(--ink-2); font-size: 14.5px; }
header nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
header nav a.on { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
nav.anon { margin-left: auto; display: flex; gap: 10px; align-items: center; } nav.anon a { color: var(--ink-2); }
.anon-links { display: flex; gap: 4px; align-items: center; } .anon-acts { display: flex; gap: 10px; align-items: center; margin-left: 4px; }
nav.anon a[aria-current] { color: var(--ink); background: var(--surface-2); }   /* the current page, the same soft pill the app tabs use */
/* the bell (round notifications): 44px to the finger where the switch stood, a navy dot with the page's ring when something is new;
   its panel hangs from the right; at 720px and under the bell is a link to /notifications */
details.bell { position: relative; margin-left: auto; margin-block: -5px; } details.bell > summary, a.bell-page { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; position: relative; border-radius: var(--r-s); color: var(--ink-2); }
details.bell > summary::-webkit-details-marker { display: none; } details.bell > summary:hover, a.bell-page:hover { color: var(--ink); background: var(--surface-2); }
.bell .dot, .bell-page .dot { display: none; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); } .bell.fresh .dot, .bell-page.fresh .dot { display: block; }
details.bell > .panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(400px, calc(100vw / var(--zoom, 1)) - 24px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m); box-shadow: var(--shadow-pop); text-align: left; }
.notes-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); } .notes-hd h2 { margin: 0; font-size: 15px; } .notes-hd span { font-size: 13px; font-weight: 600; color: var(--accent-2); }
ol.notes { list-style: none; margin: 0; padding: 4px 0; max-height: min(480px, calc(100dvh / var(--zoom, 1)) - 160px); overflow-y: auto; }
ol.notes li a { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start; min-height: 48px; padding: 8px 14px; font-size: 14px; line-height: 20px; color: var(--ink); text-decoration: none; } ol.notes li a:hover { background: var(--surface-2); text-decoration: none; }
ol.notes li .nd { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; } ol.notes li.new .nd { background: var(--accent); } ol.notes li.new .s { font-weight: 600; }
ol.notes time { font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-top: 1px; } ol.notes b.red { color: var(--red); } ol.notes b.green { color: var(--green); } ol.notes b.amber, ol.notes span.amber { color: var(--amber); }
.notes-empty { margin: 0; padding: 14px; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: none; } .notes-empty b { color: var(--ink); }
.notes-ft { padding: 8px 14px 10px; border-top: 1px solid var(--line); font-size: 13.5px; }
a.bell-page { display: none; } .notes-card { padding: 0; } .notes-card ol.notes { max-height: none; } .notes-card .notes-empty { padding: 18px 20px; }
/* the account: the team's menu behind a person's icon, 44px like the bell, the team's name beside it where it fits (the owner, 2026-09-29) */
.orgpick { position: relative; }
.orgpick summary { cursor: pointer; list-style: none; color: var(--ink); font-weight: 600; padding: 0; border-radius: var(--r-s); border: 0; font-size: 14.5px; display: inline-flex; align-items: center; gap: 4px; }
.orgpick .acct { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-s); color: var(--ink-2); } .orgpick summary:hover .acct, .orgpick[open] .acct { color: var(--ink); background: var(--surface-2); }
.menu-who { padding: 7px 10px 9px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; }
.orgpick .menu .menu-logout button { display: block; width: 100%; text-align: left; text-decoration: none; color: var(--ink); font-size: 14.5px; padding: 7px 10px; border-radius: var(--r-s); min-height: 0; } .orgpick .menu .menu-logout button:hover { background: var(--surface-2); }   /* Log out reads as a row of the menu, not a link */
.menu-logout { padding: 0; margin: 0; } .menu-logout button { width: 100%; text-align: left; }
.orgpick .orgname { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } @media (max-width: 1210px) { .orgpick .orgname { max-width: 14ch; } }   /* a name of 120 letters made the header 176px tall at 1024 (hunt D-7, 8); 14 characters there keep the five links on the name's row */ .orgpick summary::-webkit-details-marker { display: none; }
.orgpick .menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: min(260px, calc(calc(100vw / var(--zoom, 1)) - 24px)); max-width: calc(calc(100vw / var(--zoom, 1)) - 24px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-pop); }
.orgpick .menu a { display: block; padding: 7px 10px; border-radius: var(--r-s); color: var(--ink); font-size: 14.5px; } .orgpick .menu a:hover { background: var(--surface-2); text-decoration: none; }
.orgpick .menu a.on { background: var(--accent-soft); color: var(--accent-2); }
.newteam { display: flex; gap: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 6px; } .newteam input { margin: 0; padding: 6px 8px; font-size: 14.5px; }

main { max-width: 1232px; margin: 0 auto; padding: 26px 20px 72px; width: 100%; flex: 1; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; font-family: var(--mono); border-top: 1px solid var(--line); }
h1 { font-size: 26.5px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 17.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.card > h2, .card .head h2 { font-size: 17.5px; }
h3 { font-size: 15.5px; font-weight: 600; margin: 18px 0 8px; color: var(--ink); }
.card > p { max-width: 72ch; }   /* help text reads at 60-80 characters, not across a 1192px card (V3 #9) */
.card > p.intro { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 12px; }   /* a multi-sentence intro is prose, not a hint (V3 #10) */
p { margin: 0 0 10px; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card.narrow { max-width: 440px; margin: 56px auto; } .card.narrow-left { max-width: 506px; }
.card.note { border-color: var(--line); background: var(--surface); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .row.head { justify-content: space-between; margin-bottom: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; box-shadow: var(--shadow); }
.tile b { display: block; font-size: 26.5px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile span { color: var(--muted); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-family: var(--mono); }
.tile.warn { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); } .tile.warn b { color: var(--amber); }
.tile .tile-note { display: block; font-style: normal; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 3px; }
@media (max-width: 899px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
td.n, th.n { text-align: right; white-space: nowrap; }   /* pure-number columns only (V3 #4 ruling): never a number followed by prose */
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--mono); }
h2 .h-link { color: inherit; text-decoration: none; } h2 .h-link:hover { color: var(--accent); text-decoration: none; }   /* a card's heading that leads to the page of the same name */
tbody tr:hover > td { background: var(--surface-2); } tr.detail:hover > td, tr.detail td { background: transparent; }
tbody tr:last-child > td { border-bottom: 0; }
tr.off td { color: var(--muted); } tr.off td a { color: var(--muted); } td.actions { white-space: nowrap; text-align: right; }
tr.detail td { padding-top: 0; }

/* status */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.pill.writes { background: var(--bg-2); color: var(--ink-2); border-color: var(--line); font-weight: 600; } .pill.writes::before { content: "✎"; width: auto; height: auto; border-radius: 0; background: none; color: var(--muted); font-size: 12px; line-height: 1; }   /* a property, in a neutral pill; amber stays for attention (round-2 L10 ruling #7) */   /* 'writes data' is a property with a caution, never a warning state (V5 ruling #16) */
.pill:not(.green):not(.red):not(.amber):not(.look):not(.writes):not(.on):not(.busy) { background: none; border-color: transparent; padding: 2px 0; gap: 7px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }   /* a state, not a badge: only problems carry a tint */
.pill.green { background: var(--green-bg); color: var(--green-2); border-color: transparent; } .pill.green::before { background: var(--green); }
.pill.red { background: var(--red-bg); color: var(--red); border-color: transparent; } .pill.red::before { background: var(--red-mark); }
.pill.amber { background: var(--amber-bg); color: var(--amber); border-color: transparent; } .pill.amber::before { background: var(--amber-mark); }
h1 .pill { font-size: 13px; }
td .pill.red, td .pill.green, td .pill.amber, td .pill.on { background: none; padding: 2px 0; font-weight: 600; color: var(--ink); }   /* in a table the dot carries the colour; twenty tinted pills are a ribbon (V5 ruling #5) */
td .pill.verified { background: none; color: var(--muted); font-weight: 400; padding: 0; white-space: nowrap; } td .pill.verified::before { display: none; }
td a.num, td .muted a { color: var(--ink-2); font-weight: 400; } td a.num:hover, td .muted a:hover { color: var(--accent); }
.pill.on, .pill.busy { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; } .pill.on::before, .pill.busy::before { background: var(--accent); }   /* .busy: a report that runs now, in the action's blue, never the passed green */   /* active, running, current plan, client link: a state that is on, not a verdict (round 1, L8 #2) */
.chk { display: inline-block; margin: 3px 12px 3px 0; font-size: 14.5px; color: var(--muted); font-family: var(--sans); }   /* the same face as the run page */
.chk.pass, .chk.found { color: var(--green); } .chk.fail, .chk.blocked { color: var(--red); } .chk.absent { color: var(--muted); } .chk.skip { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.spark { vertical-align: middle; } .spark.ok polyline { stroke: var(--green); } .spark.warn polyline { stroke: var(--amber); } .spark.bad polyline { stroke: var(--red); }

/* forms */
label { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }   /* the label names the field; the field is bigger and darker than it (V6 #12) */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range])), textarea, select { display: block; width: 100%; min-height: var(--ctl); margin-top: 5px; padding: 8px 11px; border: 1px solid var(--line-3); border-radius: var(--r-s); box-shadow: inset 0 1px 2px rgba(17,24,39,.04);
  background: var(--surface); color: var(--ink); font: 400 15px/1.4 var(--sans); transition: border-color .12s, box-shadow .12s; }   /* the typed value is bigger than its label (V6 #1) */
@media (max-width: 640px), (pointer: coarse) { input:where(:not([type=checkbox]):not([type=radio]):not([type=range])), select, textarea { font-size: 16px; } }   /* no zoom on focus on a phone */
input:where(:not([type=checkbox]):not([type=radio]):not(:focus):not(:disabled)):hover, select:where(:not(:focus):not(:disabled)):hover, textarea:where(:not(:focus):not(:disabled)):hover { border-color: var(--ink-2); }
::placeholder { color: var(--muted); opacity: 1; }   /* 5.57:1 on white; at 70% it was 2.99 */
input[type=number] { max-width: 11rem; }
label .hint, label > .muted.small { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; font-weight: 400; color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { opacity: 1; background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); box-shadow: none; cursor: not-allowed; -webkit-text-fill-color: var(--ink-2); }   /* read-only is a designed state, not a greyed one (V6 #3) */
[aria-invalid="true"], input:user-invalid { border-color: var(--red); }
[aria-invalid="true"]:focus, input:user-invalid:focus, select[aria-invalid="true"]:focus { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 0 0 6px color-mix(in srgb, var(--red) 18%, transparent); }   /* a 2px red edge and the halo, on a select too (the look tests, 2026-09-30) */   /* the eye lands on the field, not only on the banner (V6 #4) */
select { appearance: none; padding-right: 34px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%235e6b66' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center / 12px; }   /* one chevron, ours, in the muted ink (V6 #7) */
input:where(:not([type=checkbox]):not([type=radio])):focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }   /* DC-H110 (design-critic 09:26): the 1-px navy edge + 2 px of #2563EB, every field; it was 4 px */   /* 1 px accent edge and a 4 px halo that can be seen (V6 #5, the L7 ruling) */
textarea { min-height: 4.5em; font-family: var(--mono); font-size: 13px; }
@media (max-width: 640px), (pointer: coarse) { textarea { font-size: 16px; } }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
/* a disabled checkbox is drawn, so a checked one stays legible in a read-only card (V6 #3, the ruling: drawn only where disabled) */
fieldset:disabled input[type=checkbox], .dim input[type=checkbox], input[type=checkbox]:disabled { appearance: none; border: 1.5px solid var(--line-3); border-radius: 4px; background: var(--surface) center / 12px no-repeat; display: inline-grid; opacity: 1; cursor: not-allowed; }
fieldset:disabled input[type=checkbox]:checked, .dim input[type=checkbox]:checked, input[type=checkbox]:checked:disabled { background-color: color-mix(in srgb, var(--accent) 55%, var(--surface)); border-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); } label.check input { margin: 0; }
label.inl { display: inline; color: var(--ink); margin: 0; font-size: 14.5px; }
.dim { opacity: .8; }
button, .button { font: inherit; font-size: 14.5px; font-weight: 400; min-height: var(--ctl); padding: 6px 13px; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, var(--ink) 52%, transparent); box-shadow: 0 1px 2px rgba(17,24,39,.06); background: var(--surface); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, transform .06s; }   /* a button is lighter than a field: 22 % edge, a real hover (V2 #1, the SUMMARY's do-first #7) */
button:hover, .button:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--ink) 60%, transparent); text-decoration: none; } button:active, .button:active { transform: translateY(1px); }
button.small, .button.small { font-size: 13px; min-height: var(--ctl-s); padding: 3px 10px; }   /* the three heights: 30 / 40 / 48 (V2 #2) */
@media (pointer: coarse) { button.small, .button.small { min-height: 40px; } }
/* a thumb, at any width (engineer2's Fold walk, 344 closed and 884 open with a touch pointer, 2026-09-30): 44px for every pressable thing that is not a .small control */
@media (pointer: coarse), (max-width: 720px) {
  button:not(.small):not(.ghost), .button:not(.small), .addsites-row button { min-height: 44px; }
  .orgpick .menu a, .orgpick .menu .switch button, .orgpick .menu .menu-logout button, .orgpick .menu .newteam button { min-height: 44px; display: flex; align-items: center; }
  footer nav.foot a, .foot-row a, .auth-alt a, a.auth-forgot, .easy-go a, .plans-go a, .story-go a, .onboarding .steps li a, .usage-go, .sitemore, .numbers a, a.mailto, .idle-line a, .site-url a { display: inline-flex; align-items: center; min-height: 44px; }   /* + the site page's "Open the site ↗" (design-critic 23:14) */
  .stream ol.notes.flat li a { min-height: 44px; align-items: center; }
  a.tap44 { display: inline-block; padding-block: 12px; margin-block: -12px; }   /* a link inside a sentence: the thumb's 44 px without moving the line (/billing "Pricing page", /usage "See the plans →"; design-critic 03:30 #3) */   /* the stream's rows: a grid, not inline-flex (overview loop-02 #9) */
  /* the header's links: a 44px box under the thumb, the 32px pill drawn inside it, the bar no taller (the critics' blocked list) */
  header nav a:not(.button), nav.anon a:not(.button) { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; box-sizing: border-box; padding-block: 11px !important; margin-block: -6px; background: none !important; box-shadow: none !important; } header .brand { position: relative; z-index: 1; }   /* !important: the phone's own padding rule for these links is more specific and came back to 32px */
  header nav a.on::before, nav.anon a[aria-current]:not(.button)::before, header nav a:not(.button):hover::before, nav.anon a:not(.button):hover::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: var(--r-s); background: var(--surface-2); }
  header nav a.on::before { box-shadow: inset 0 0 0 1px var(--line); }
  .docs-nav a { display: inline-flex; align-items: center; min-height: 44px; }   /* the docs' table of contents, a pill a thumb can take */
}
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.08); }
button.primary:hover, .button.primary:hover { background: var(--accent-2); }
button.big, .button.big { font-size: 16.5px; min-height: var(--ctl-l); padding: 9px 18px; border-radius: var(--r-m); }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); padding: 4px 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); } button.ghost:hover { background: var(--accent-soft); border-color: transparent; }
button.danger, .button.danger { color: var(--red); } button.danger:hover, .button.danger:hover { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 40%, transparent); }   /* the quiet red of a destructive entry point; the filled red is the confirm (V2 #4) */
button:disabled { opacity: .45; cursor: default; }
form.inline { display: inline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .grid3 { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0 14px; align-items: end; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } header.top { padding: 0 12px; gap: 8px; } main { padding: 18px 14px 60px; } }
.msg, .err { padding: 10px 12px; border-radius: var(--r-m); font-size: 14.5px; margin-bottom: 16px; border: 1px solid transparent; }
.msg, .err { position: relative; padding-left: 32px; } .msg::before, .err::before { position: absolute; left: 12px; top: 10px; font-weight: 700; } .msg::before { content: "✓"; content: "✓" / ""; } .err::before { content: "!"; content: "!" / ""; }   /* the glyph is placed, not flexed: a link inside the sentence never becomes a column (round 2, every lens) */
.msg { background: var(--accent-soft); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }   /* "Saved." and "Sent." in the night's blue: green means a check passed, nothing else (dw-B#1) */
.err { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
p.note { padding: 9px 12px; border-radius: var(--r-m); font-size: 14.5px; margin-bottom: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
pre.err { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
[hidden] { display: none !important; }
p code, li code { overflow-wrap: break-word; box-decoration-break: clone; -webkit-box-decoration-break: clone; }   /* a token or a long command inside prose wraps instead of leaving the card */
p.tabs { margin: 0 0 10px; color: var(--muted); } p.tabs a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }   /* the author display rules on button/.button must not beat the attribute */
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; } ul.plain li.row { justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); margin: 0; } ul.plain li.row:last-child { border-bottom: 0; }
pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
code { font-size: 13px; background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 1px 4px; border-radius: 4px; border: 0; color: var(--ink); } pre code { background: none; border: 0; padding: 0; }
.logo { height: 26px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } main:focus { outline: none; }   /* the skip link's target is the page, not a control */

/* landing */
.hero { text-align: center; padding: 64px 0 32px; position: relative; isolation: isolate; background: var(--glow) no-repeat top center; }   /* its own stacking context: the grid (::before, z-index -1) sits above the glow and below the words, instead of under the body's background (the user missed it, 2026-09-29) */
/* the hero grid (the owner's pick from /grids, 2026-09-29): a fine, faint grid at the top that fades out downward, meeting a
   perspective floor that rises from the bottom edge — one surface bending away. Lines use --line, so dark mode follows. */
.hero { overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  --faint: rgba(0,0,0,.045);   /* near-black in both themes (the owner: lines read almost white in dark). Half as strong as it was (.09), felt rather than read: the owner, 2026-09-29, "just make the top grid lines less visible" */
  background-image: linear-gradient(var(--faint) 1px, transparent 1px), linear-gradient(90deg, var(--faint) 1px, transparent 1px); background-size: 24px 24px;
  --sides: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);   /* soft edges left and right, never a cut */
  mask-image: radial-gradient(ellipse 58% 52% at 50% 0%, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 0%, #000 0%, rgba(0,0,0,.55) 50%, transparent 100%); }   /* one soft ellipse from the top, gone before the box: no edge anywhere (the owner, 2026-09-30) */
.hero::after { content: none; /* the perspective floor is gone (the owner, 2026-09-30: "the bottom grid doesn't look right"); the rule stays for the record */ position: absolute; left: -25%; right: -25%; bottom: 0; height: 58%; z-index: -1; pointer-events: none;
  --floor: rgba(0,0,0,.18);   /* the floor a step darker than the page lines; a step fainter than it was (.26; the owner, 2026-09-30) */
  background-image: linear-gradient(var(--floor) 1px, transparent 1px), linear-gradient(90deg, var(--floor) 1px, transparent 1px); background-size: 56px 56px;
  transform: perspective(620px) rotateX(58deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 8%, transparent 88%), linear-gradient(to bottom, transparent 0, #000 80px), linear-gradient(to right, transparent 12%, #000 34%, #000 66%, transparent 88%); mask-composite: intersect;   /* eased in over its first 80px: no hard edge where it starts */
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%), linear-gradient(to bottom, transparent 0, #000 80px), linear-gradient(to right, transparent 12%, #000 34%, #000 66%, transparent 88%); -webkit-mask-composite: source-in; }
@media (prefers-reduced-motion: reduce) { .hero::after { transform: none; height: 30%; } }
.hero .kicker { display: inline-block; margin: 14px 0 10px; font: 600 12px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }   /* a label, not a button: bare caps at every width (round-2 L7 #16, L10 #6) */
.hero h1 { display: block; justify-content: center; font-size: clamp(33px, calc(5vw / var(--zoom, 1)), 51px); font-weight: 600; letter-spacing: -.028em; line-height: 1.08; text-wrap: balance; max-width: 900px; margin: 8px auto 14px; color: var(--ink); }   /* solid ink: the promise is never the palest line (V1 #14, V10 #7); 600 / -.028em (V10 #1, V3 #6) */
@media (max-width: 560px) { main:not(:has(.plans)) .hero.small-hero .lead { text-align: left; margin-left: 0; } }   /* a lead of five centred lines on a phone reads left, at the cards' edge (public loop-00 FIX 10); the H1 stays centred */
.hero .lead { max-width: 680px; margin: 0 auto 24px; font-size: 17.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; } .hero .lead b { color: var(--ink); font-weight: 600; }
/* the landing's lead: two balanced lines as wide as the box under it (the hero debate, change 5) */
.hero.front .lead { max-width: 34em; text-wrap: balance; line-height: 1.45; font-size: 17px; }
@media (min-width: 900px) { .hero.front .lead { font-size: 20px; } }
.hero .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.term { max-width: 760px; margin: 28px auto 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; text-align: left; box-shadow: var(--shadow-deep); }
.term .bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.term pre { border: 0; border-radius: 0; margin: 0; background: transparent; padding: 14px 16px; font-size: 13px; }
.term .ok { color: var(--green); } .term .bad { color: var(--red); } .term .dim { color: var(--muted); opacity: 1; pointer-events: auto; }
.who3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 34px 0 14px; } .who3 .card { margin: 0; }
.who3 h2 { font-size: 16.5px; }
.who3 .card p { color: var(--ink-2); margin: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* v0.3: demo bar, one-line test box, step editor, devices, pricing, tour, terminal playback */
.demobar { background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 6px 20px; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.db-acts { display: flex; gap: 12px; align-items: center; } .db-acts a.cta { font-weight: 600; padding: 12px 6px; margin: -12px 0; } .db-acts a.cta::after { content: " →"; }
.demobar form { display: inline; } .db-short { display: none; }
form.oneline input { padding: 10px 12px; font-size: 16.5px; }
details.step { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin: 0 0 10px; background: var(--bg-2); }
details.step summary { cursor: pointer; font-weight: 600; padding: 4px 0; } details.step summary .mono { color: var(--accent); margin-right: 8px; font-size: 13px; }
details.step[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; } .acts label { margin: 0; } .acts code { font-size: 12px; }
label.check.top { align-self: end; margin-bottom: 14px; }
.devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin: 0 0 14px; }
label.dev { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2); margin: 0; }
label.dev:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.small-hero { padding: 40px 0 10px; } .small-hero h1 { font-size: clamp(29px, calc(4vw / var(--zoom, 1)), 42px); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 22px; align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.plan h3 { margin: 0; font: 600 14.5px/1.4 var(--sans); color: var(--ink); }
.plan .price { font-size: 40px; font-weight: 600; letter-spacing: -.03em; font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; } .plan .price span { font-size: 14.5px; color: var(--muted); font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 6px 0 12px; color: var(--ink-2); font-size: 14.5px; flex: 1; } .plan ul { display: grid; gap: 8px; align-content: start; } .plan li { padding: 0; border-top: 0; } .plan li:first-child { border-top: 0; }
.plan .button { justify-content: center; }
.plans:has(.plan > .button) { align-items: stretch; }   /* with a way in on each card (new sites open) the cards of a row are one height and their buttons one line, the list taking the room between (THE OPEN DOOR); closed, a card is its words */
.faq dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 24px; margin: 0; } .faq .qa { min-width: 0; } .faq dt { font-weight: 600; margin-bottom: 3px; } .faq dd { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.teaser { margin: var(--section) 0 0; } .teaser h2 { font-size: clamp(24px, calc(2.2vw / var(--zoom, 1)), 30px); letter-spacing: -.02em; margin-bottom: 12px; }   /* 24 on a phone, 30 on a desktop: no louder than the story's headings (dw-A#7) */
.teaser .card { text-align: center; padding: 26px; } .teaser p { max-width: 640px; margin: 0 auto 10px; }
.term .bar span { margin-left: auto; font-size: 12px; color: var(--muted); }
.term.play .l { display: block; opacity: 0; animation: termline .4s ease forwards; }
.term.play .l:nth-child(1) { animation-delay: .2s } .term.play .l:nth-child(2) { animation-delay: 1s } .term.play .l:nth-child(3) { animation-delay: 1.9s }
.term.play .l:nth-child(4) { animation-delay: 2.7s } .term.play .l:nth-child(5) { animation-delay: 3.5s } .term.play .l:nth-child(6) { animation-delay: 4.4s }
.term.play .l:nth-child(7) { animation-delay: 5.2s } .term.play .l:nth-child(8) { animation-delay: 6.3s } .term.play .l:nth-child(9) { animation-delay: 7.4s }
@keyframes termline { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .term.play .l { opacity: 1; animation: none; } }

/* v0.4: alert cards with screenshots, live camera feed */
.alert { border: 0; border-top: 2px solid var(--red-mark); background: none; border-radius: 0; padding: 14px 0 0; margin: 0 0 20px; box-shadow: none; }
.alert.compact.broke { border-top: 1px solid var(--line); }   /* the Overview's failing section: a plain rule like the others; the red stays in the number and the dots (rule 9; design-critic 11:18) */
.alert-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .alert-head h2 { color: var(--ink); font-size: 16.5px; margin: 0 0 2px; } .alert-head h2 .red { color: var(--red); }
.alert-head p { color: var(--ink-2); margin: 0; font-size: 14.5px; }
.alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
article.fail, a.fail { display: grid; grid-template-columns: 150px 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; color: var(--ink); text-decoration: none; }
.fail.link:hover { border-color: var(--red); text-decoration: none; }
.fail .shot { display: block; background: var(--bg-2); border-right: 1px solid var(--line); min-height: 110px; max-height: 210px; overflow: hidden; } .fail .shot img { display: block; width: 100%; height: 100%; min-height: 110px; max-height: 210px; object-fit: cover; object-position: top; }
article.fail, a.fail { align-items: stretch; }
.fail .shot.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }
.fail-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fail-site b { font-size: 14.5px; } .fail-test { font-size: 14.5px; } .fail-test > .pill, .fail-test > b, .fail-test > .muted { vertical-align: middle; } .fail-test > .muted { white-space: nowrap; } .fail-why { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.fail-links a { color: var(--accent); }
.shots-more { display: flex; gap: 6px; margin-top: 6px; } .shots-more img { height: 54px; width: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
.alert.compact .fail { grid-template-columns: 120px 1fr; } .alert.compact .fail-body { gap: 3px; }
.live { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.live h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; }
.rec { width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: none; position: relative; flex: none; }
.rec::after { content: none; }   /* a live light is a steady dot in the accent (c2-motion's house rule): no ring that loops */
@keyframes live-ring { to { box-shadow: 0 0 0 7px transparent; } }
@keyframes live-beat { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } to { box-shadow: 0 0 0 6px transparent; } }   /* one beat per new picture, 600 ms, then still */
.live-kicker .rec::after { display: none; }   /* on the live page only the LIVE badge beats */
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.cams.expect { min-height: 220px; } @media (max-width: 480px) { .cams.expect { min-height: 236px; } }   /* a report runs: the wall keeps a row's height until the first picture, so nothing jumps (c2-motion FIX 3) */
.cam { margin: 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.cam img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; background: #000; }
.cam figcaption { padding: 8px 10px; font-size: 13px; display: grid; gap: 2px; } .cam b { font-family: var(--mono); font-weight: 400; } .cam span { color: var(--accent); } .cam em { color: var(--muted); font-style: normal; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .rec::after { animation: none; } }

footer nav.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 10px; font-family: var(--sans); font-size: 14.5px; }
footer nav.foot a { color: var(--ink-2); } footer nav.foot a:hover { color: var(--ink); }
.legal h2 { font-size: 16.5px; margin: 18px 0 6px; } .legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-2); max-width: 72ch; }
.cmd { position: relative; } .cmd pre { margin: 0; padding-right: 84px; } .cmd .copy { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 52%, transparent); box-shadow: 0 1px 2px rgba(17,24,39,.06); color: var(--ink); font-size: 13px; min-height: var(--ctl-s); padding: 3px 10px; text-decoration: none; } .cmd .copy:hover { background: var(--surface-2); }

/* the Overview (live-overview ruling, 2026-09-30): the verdict line, the Now band with small windows, the sites' rows and the stream side by side, one numbers line */
.verdict { margin: 0 0 var(--group); } .verdict .v-line { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.verdict .vd { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); align-self: center; } .verdict.red .vd { background: var(--red-mark); } .verdict.amber .vd { background: var(--amber); } .verdict.green .vd { background: var(--green); }
.verdict .v-sub { margin: 4px 0 0 20px; font-size: 14px; } .now .win-tab .dev-glyph { flex: none; vertical-align: -3px; margin-right: 3px; } .verdict.first .v-words { color: var(--ink); } .verdict.first .v-sub { margin-left: 0; }   /* no report yet (O-73): plain ink, no dot, the line starts under the words */
@media (max-width: 720px) { .verdict .v-line { font-size: 18px; line-height: 26px; } }
.now .now-body { display: grid; gap: 4px; } .now .now-l1 { margin: 0; font-size: 16px; } .now .now-l1.amber { color: var(--amber-2, var(--amber)); } .now .now-l2, .now .now-l3 { margin: 0; font-size: 14px; } .now .now-l2 .cd { font-weight: 600; color: var(--ink); }
.now .now-links { margin: 6px 0 0; }
.now .wins { display: flex; gap: 10px; align-items: stretch; margin: 10px 0 2px; overflow-x: auto; scrollbar-width: none; } .now .wins:empty { display: none; }
.win.small { flex: none; height: 216px; display: flex; flex-direction: column; box-shadow: 0 18px 40px -30px rgba(17,24,39,.45); } .win.small .win-bar { height: 24px; padding: 2px 4px 0; } .win.small .win-tab { height: 22px; font-size: 11.5px; padding: 0 8px; flex: 1 1 auto; }
.win.small .win-screen { position: relative; background: var(--media-bg); overflow: hidden; height: 156px; } .win.small.desk .win-screen { width: 277px; } .win.small.phone .win-screen { width: 72px; }
.win.small .win-screen img.ok + .pad-idle { display: none; }   /* the sentence is for a tile with no picture; a loaded frame is never covered (checker 01) */
.win.small .win-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .win.small .pad-idle { display: block; padding: 10px; font-size: 12px; color: var(--muted); }
.win.small .win-cap { padding: 5px 8px; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; max-width: 277px; }   /* two lines, not "Search product · st…" (critic list §1) */ .win.small.phone .win-cap { max-width: 72px; }
.win .dot.beat { animation: live-beat 600ms cubic-bezier(.2,.7,.2,1) 1; }
@media (max-width: 720px) { .now .wins .win:not(:first-child) { display: none; } .win.small { height: 200px; } .win.small .win-screen { height: 140px; } }
.two:not(.lp) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; } .two.one { grid-template-columns: minmax(0, 1fr); } .two > .card { margin: 0; }   /* not the live page's "lp two" (two browsers): this grid split it into two columns and its windows ran 300 px past the window (design-critic's L2) */
@media (max-width: 1209px) { .two:not(.lp) { grid-template-columns: minmax(0, 1fr); } }
.siterows { display: grid; gap: 6px; margin: 4px 0 14px; }
.siterow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 6px 10px 6px 12px; border-left: 4px solid var(--line-2); border-radius: 4px; color: var(--ink); text-decoration: none; background: var(--surface-2); }
.siterow:hover { text-decoration: none; background: var(--bg-2); } .siterow .sr-name { grid-column: 1; font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }   /* a name wraps between its words; only one word longer than the line ("wanderlustoutdoorequipment0.example") ends in "…" inside the card — at 320 it pushed the page 25 px sideways (crowd5's 320 look; the Sites list's rule) */ .siterow .sr-words { grid-column: 1; font-size: 13.5px; color: var(--ink-2); } .siterow .sr-rep { grid-column: 2; grid-row: 1 / span 2; font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
.siterow.failing { border-left-color: var(--red-mark); } .siterow.failing .sr-words { color: var(--red); } .siterow.unfinished, .siterow.no_proof { border-left-color: var(--amber); } .siterow.unfinished .sr-words, .siterow.no_proof .sr-words { color: var(--amber-2, var(--amber)); }
.siterow.checking { border-left-color: var(--mark); } .siterow.checking .sr-words { color: var(--mark); } .siterow.passed { border-left-color: var(--green); } .siterow.passed .sr-words { color: var(--green); } .siterow.none .sr-words, .siterow.paused .sr-words { color: var(--muted); }
/* the Overview's right column (the owner's O-65 a): "Last report" on top — three big numbers over one thin stacked bar in the same three
   colours (green = passed only, amber = not checked, the fail colour only when something fails; a zero is muted) and one line why — and
   "What happened" under it, each row with its verdict dot and, for a report, its numbers as a small strip. The column ends where its
   rows end: no reserved emptiness, and its height need not match the left's */
.right-col { display: grid; gap: 14px; align-content: start; min-width: 0; } .right-col > .card { margin: 0; }
@media (max-width: 899px) {   /* a phone reads headline → Now → the last report's numbers → sites → what happened (design-critic's o65-fix 4) */
  .two > .right-col { display: contents; } .two > .right-col > .lastrep { order: -1; } .two > .right-col > .stream { order: 1; }
}
.lastrep .lr-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 2px 0 12px; }
.lastrep .lr-n { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); } .lastrep .lr-n b { font-size: 30px; line-height: 1.1; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.lastrep .lr-n.pass b { color: var(--green); } .lastrep .lr-n.nc b { color: var(--amber); } .lastrep .lr-n.fail b { color: var(--red); }
.lastrep .lr-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.lastrep .lr-bar i { display: block; min-width: 2px; } .lastrep .lr-bar .pass { background: var(--green-fill); } .lastrep .lr-bar .nc { background: var(--amber-mark); } .lastrep .lr-bar .fail { background: var(--red-mark); }
.lastrep .lr-why { margin: 8px 0 0; } .lastrep .lr-none { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--ink-2); } .lastrep .lr-run { margin: 6px 0 0; }
.stream .ev-dot { grid-column: 1; grid-row: 1; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); } .stream .ev-dot.red { background: var(--red-mark); } .stream .ev-dot.amber { background: var(--amber-mark); } .stream .ev-dot.green { background: var(--green); }
.stream ol.notes.flat li a .s { grid-column: 2; grid-row: 1; } .stream ol.notes.flat li a time { grid-column: 3; grid-row: 1; }
.stream .ev-strip { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 2px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stream .ev-strip .pass { color: var(--green); } .stream .ev-strip .nc { color: var(--amber); } .stream .ev-strip .fail { color: var(--red); }
/* the same sentence on every listed site is the list's lead, said once (O-65 b); the rows keep their amber bar */
.sites-lead { margin: 0 0 10px; font-size: 14px; font-weight: 600; } .sites-lead.amber { color: var(--amber); }
@media (pointer: coarse) { .now a.now-run { display: inline-flex; align-items: center; min-height: 44px; } }
.sitefold summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); padding: 6px 12px; } .sitefold[open] summary { margin-bottom: 6px; } .sitefold .siterow { margin-bottom: 6px; }
.stream ol.notes.flat { max-height: none; margin: 0; padding: 0; list-style: none; } .stream ol.notes.flat li a { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; padding: 8px 0; min-height: 0; } .stream ol.notes.flat li + li { border-top: 1px solid var(--line); } .stream .notes-empty { padding: 8px 0 0; }
.failrows.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1209px) { .failrows.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .failrows.three { grid-template-columns: 1fr; } .failrows.three .failrow:nth-child(n+5) { display: none; } }
.more-fail { margin: 10px 0 0; }
.numbers { margin: 0; } .numbers a { white-space: nowrap; } .verdict .v-sub .nw { white-space: nowrap; }   /* "All reports →" and a time range never break inside (overview loop-02 #9, #10) */
/* loop-00 (s1's critics): the rest of the sites in one line; the amber verdict's link; the dot on the headline's first line; the report number in the body's figures */
.sitemore { display: flex; align-items: center; min-height: 36px; padding: 6px 12px; font-size: 13.5px; color: var(--ink-2); border-radius: 4px; } .sitemore:hover { background: var(--bg-2); }
.verdict .v-why { font-size: 15px; font-weight: 400; white-space: nowrap; }
.verdict .vd { align-self: flex-start; margin-top: 9px; } @media (max-width: 720px) { .verdict .vd { margin-top: 8px; } }
.siterow .sr-rep { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 13px; }
.now .wins { min-width: 0; } .win.small { max-width: 100%; margin: 0; } .win.small.phone .pad-idle { padding: 4px; font-size: 11px; } .win.small.desk .win-screen { width: min(277px, 100%); } .win.small .win-cap { max-width: min(277px, 100%); }
@media (min-width: 1210px) {   /* the tiles beside their lines, not alone under them */
  .two > .right-col { position: sticky; top: 70px; align-self: start; }   /* What happened stays in view beside a long list, below the 54 px header (70 px: the house value, .stage) */
}
@media (pointer: coarse) { .now h2 .h-link, .sites-now > .row.head > a.small, .stream > .row.head > a.small, .now .now-links a, .verdict .v-why, .verdict .v-run { display: inline-flex; align-items: center; min-height: 44px; } }
/* v0.5: onboarding, error page, org menu extras, plan name */
.errorpage { text-align: center; } .errorpage .mark { font-size: 65px; color: var(--mark); } .errorpage .code { font-size: 48.5px; color: var(--muted); letter-spacing: .04em; } .errorpage h1 { justify-content: center; }
.errorpage p { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.menusep { border-top: 1px solid var(--line); margin: 6px 0; }
.planname { font-size: 20px; }
.button[aria-disabled] { opacity: .45; cursor: default; }
/* phones: the header becomes two rows, the nav scrolls sideways in one line */
@media (max-width: 720px) {
  header.top { height: auto; padding: 12px 12px 8px; row-gap: 6px; flex-wrap: wrap; }   /* 12 above: the 38px mark is not against the window's edge */
  header nav { order: 3; flex: 0 0 100%; flex-wrap: wrap; margin-left: 0; row-gap: 2px; justify-content: flex-start; }   /* six links wrap to two rows: nothing hides off-screen */
  header nav a { flex: none; }
  .orgpick .orgname { display: none; } header.top .orgpick { margin-block: -12px; }   /* a phone: the icon alone, and the bar no taller */
  nav.anon { display: contents; }
  .anon-acts { order: 2; margin-left: auto; } .anon-acts .button { margin-block: -4px; }   /* the way in is 40px to the finger and adds nothing to the bar's height */
  header.top > details.bell { display: none; } header.top > a.bell-page { display: grid; margin: -12px 0 -12px auto; order: 0; }
  header.top .brand { margin-block: -10px; }   /* the mark's 44px link must not make the phone's bar taller */
  .anon-links { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
  .anon-links::-webkit-scrollbar { display: none; } .anon-links a { white-space: nowrap; }
  header.top:has(nav.anon) { padding-inline: 12px; }
  .demobar { font-size: 13px; padding: 0 12px; gap: 12px; min-height: 44px; flex-wrap: nowrap; justify-content: space-between; } .db-long, .db-acts a[href="/dashboard"] { display: none; }   /* the way out stays on a phone */
  .db-who, .db-acts a { white-space: nowrap; } .db-the { display: none; } .db-short { display: inline; } .db-acts { gap: 10px; } .db-acts a { display: inline-flex; align-items: center; min-height: 44px; }   /* ONE 44 px line: "Demo · read-only" left, the way on right (critic-lead #24) */
  @media (max-width: 380px) { .demobar { flex-wrap: wrap; justify-content: center; gap: 0 12px; } }   /* 320 and 344 cannot hold the line: it wraps, never wider than the page */
  header.top:not(:has(nav.anon)) nav a { padding: 5px 8px; }
}
@media (max-width: 360px) { header.top:not(:has(nav.anon)) nav { gap: 0; } header.top:not(:has(nav.anon)) nav a { padding: 5px 5px; font-size: 13.5px; } }   /* five links in one row at 320 */
@media (max-width: 720px) {
  .alert-grid { grid-template-columns: 1fr; } article.fail, a.fail { grid-template-columns: 110px 1fr; }   /* the cards only: a bare .fail also gave the 16px disc of a failing row two columns and pushed its cross out (hunt F-5, 20) */
  h1 { font-size: 22px; }
}
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }   /* positioned: absolutely placed .sr labels inside stay inside */
@media (max-width: 720px) { .tablewrap table { min-width: 640px; } }
.share .shots-more img, body > main .shots-more img { height: 84px; }

/* landing: the three-step install strip */
.easy-go { margin: var(--group) 0 0; }

/* landing: the one-line flow animation */

.now .now-l1 a, .onboarding .steps li .go, .night-line a[href="/billing"] { white-space: nowrap; }   /* the "word →" lines whose templates crowd2 holds today: the arrow never wraps alone (design-critic T9) */

/* landing: use cases */
.proofs td:first-child { width: 90px; } .card.verified { border-color: var(--line-2); }   /* green is a verdict about the site's checks; a proof that was found is said by its pill (hunt D-9, K3 8) */

@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }
p.center { text-align: center; }

/* accessibility: skip link, visually hidden labels, anchored rows land below the sticky header */
a.skip { position: absolute; left: 8px; top: -52px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 6px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600; }   /* 44px under a thumb (it was 35) */
a.skip:focus { top: 8px; }   /* a.skip, never .skip alone: a report's skipped cell and chip carry that class too, and the bare rule took them out of their row (crowd2, 2026-09-30) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; margin: -1px; }
/* a link into a page lands 16px under the header. --hdr is the header's measured height (a ResizeObserver in base.html sets it; 54px and
   95px are what it is before the script runs). One offset, on the page: a margin on the target as well added to it, and a phone landed
   73 to 182px off (scroll-2 ruling, change 1) */
html { scroll-padding-top: calc(var(--hdr, 54px) + 16px); } @media (max-width: 720px) { :root { --hdr: 95px; } }
article.fail:target { outline: 2px solid var(--red); outline-offset: 3px; }
@media (forced-colors: active) { input:focus, textarea:focus, select:focus { outline: 2px solid Highlight; outline-offset: 1px; }
  .hero, .card, .tile, .alert, .plan, .case { border: 1px solid CanvasText; }
  .pill::before, .rec, .flow-dots b { forced-color-adjust: none; background: CanvasText; }
  button.primary, .button.primary, .easy-steps .n { forced-color-adjust: none; background: ButtonText; color: Canvas; }
  .mark { forced-color-adjust: none; }   /* his mark keeps its own colours (a picture, not a glyph) */
  html table.grid td.cell.look a, html table.grid td.cell.look .q, html .mk.look { forced-color-adjust: none; color: CanvasText; } html .mk.look { background: CanvasText; }   /* needs a look's "?" (crowd5) */
  html table.grid td.cell .x, html .grid-card .legend .x, html .share .chk .x, html .share .legend .x, html .alert.fail .x, html .failrow .fr-name .x, html .failcard .x, html .bell.fresh .dot, html .bell-page.fresh .dot, html .chkrow.fail .st { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; box-shadow: none; } html table.grid td.cell.blocked .x { forced-color-adjust: none; background: GrayText; }
}
/* footer: the version line and the theme switch share one row */
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; }
a.tile { color: inherit; text-decoration: none; transition: border-color .12s; } a.tile:hover { border-color: var(--line-2); text-decoration: none; }
.orgpick .menu a[href="/account"] { display: block; }
@media (max-width: 720px) { .orgpick .menu a[href="/account"] { display: block; } .foot-row { flex-direction: column; } }
.cams .empty { grid-column: 1 / -1; margin: 0; }
.shot img, .cam img, .tour img { background: var(--media-bg); }
.inl-details { display: inline; } .inl-details summary { display: inline; cursor: pointer; color: var(--accent); } .inl-details summary.danger { color: var(--red); }
.inl-details summary::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: currentColor; transform: rotate(-90deg); transition: transform .15s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.inl-details[open] summary::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .inl-details summary::before { transition: none; } }
@media (forced-colors: active) { .inl-details summary::before { background: ButtonText; } }
.docmd pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.docmd > .copy { margin: 4px 0 8px; }   /* one press puts the whole workflow on the clipboard (public loop-00 FIX 4); 44 px on touch as every .button */ .docmd h2 { margin-top: 18px; } .docmd h2:first-child { margin-top: 0; }
.hero.small-hero { padding: 26px 0 32px; } .hero.small-hero h1 { font-size: clamp(28px, calc(3.4vw / var(--zoom, 1)) + 14px, 38px); }
@media (max-width: 640px) { .hero.small-hero { padding-top: 13px; } }
@media (max-width: 600px) { .hero.small-hero { padding-bottom: 32px; } .hero.small-hero > :last-child { margin-bottom: 0; } .hero.small-hero + * { margin-top: 0; } }   /* DC-H28 (design-critic 02:42/02:43 UTC 2 Oct): every public hero → its first card is ONE gap at a phone, 32px — not the lead's 24 + the hero's 32 + the next block's own 0–34 — so the first card starts on the first screen */   /* a phone: the public hero's top padding halves, the kicker sits under the header (critic #38) */

.orgpick .menu form.switch { margin: 0; } .orgpick .menu form.switch button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: var(--r-s); color: var(--ink); font: inherit; cursor: pointer; }
.orgpick .menu form.switch button:hover { background: var(--surface-2); } .orgpick .menu form.switch button.on { background: var(--accent-soft); color: var(--accent-2); }

/* share page: evidence a client can actually look at */
.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; grid-auto-rows: 1fr; }
.evidence:has(> .ev:only-child) { grid-template-columns: minmax(0, 720px); }   /* one failing screenshot is shown big enough to prove the failure */
.ev { margin: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ev img { display: block; width: 100%; aspect-ratio: 1920 / 548; max-height: none; object-fit: cover; object-position: top; background: var(--media-bg); }
.ev figcaption { padding: 8px 10px; font-size: 13px; }
.share .logo { max-width: 160px; object-fit: contain; }
@media (max-width: 720px) { .share .tablewrap table { min-width: 560px; } .tablewrap.can-scroll::after { content: "scroll sideways for the rest →"; display: block; font-size: 12px; color: var(--muted); padding: 4px 0; } }   /* only when the table overflows: base.js measures it (can-scroll) at load and on resize; a grid that fits the phone says nothing (design-critic DC-H15, 02:29 UTC 2 Oct) */

/* ---- run page, redesigned: a summary strip, evidence cards, a tests × results grid */
.tiles.stats .tile b small { font-size: 15.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.tiles.stats .tile { padding: 14px 16px 12px; } .tiles.stats .tile b { min-height: 1.15em; }
.tiles.stats .tile.result b { text-wrap: balance; } .tile-when time { font-variant-numeric: tabular-nums; }
.tile.good b { color: var(--green); } .tile.bad b { color: var(--red); }
.row.actions { gap: 8px; align-items: center; }
details.more { position: relative; } details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: var(--ctl); padding: 0 10px; border: 1px solid color-mix(in srgb, var(--ink) 52%, transparent); border-radius: var(--r-s); color: var(--muted); }   /* the overflow trigger is its neighbour's height (V2 #5) */
details.more > summary .dots { width: 16px; height: 16px; display: block; }
details.more > summary::-webkit-details-marker { display: none; } details.more > summary:hover { color: var(--ink); background: var(--surface-2); }
details.more .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-pop); min-width: 180px; }
details.more .menu form { margin: 0; } details.more .menu button { width: 100%; text-align: left; }
.sharebar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: -4px 0 14px; font-size: 14.5px; }
.sharebar a { font-family: var(--mono); font-size: 13px; min-width: 0; overflow-wrap: anywhere; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 10px; }   /* the link reads as a field with its Copy control beside it (round-2 L5 #14) */
.attention { margin: 0 0 16px; padding: 4px 0 0; border-top: 1px solid var(--line); }   /* the red count heading carries it; no second red rule (V10 ruling #9) */
.attention > .row.head { align-items: baseline; margin: 10px 0 10px; } .attention h2 { color: var(--ink); margin: 0; } .attention h2 .red { color: var(--red); }   /* ink heading, the count in red: one red per fact (round-2 L5 #13) */
.fails { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.failcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.failcard:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 45%, transparent), var(--shadow); outline: none; }
.failcard .pic { display: block; background: var(--media-bg); aspect-ratio: 1920 / 548; overflow: hidden; border-bottom: 1px solid var(--line); }
.failcard .pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.failcard .pic.phone { display: flex; justify-content: center; background: color-mix(in srgb, var(--media-bg) 70%, var(--surface-2)); }
.failcard .pic.phone img { width: auto; max-width: 46%; height: 100%; object-fit: cover; object-position: top; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.failcard .pic.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14.5px; aspect-ratio: auto; padding: 18px; }
.failcard .body { padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.failcard .where { font-size: 14.5px; } .failcard .where b { font-size: 14.5px; }
.failcard h3.fail-name { margin: 6px 0 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.failcard .x { color: var(--red); }
.failcard .why { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.failcard .meta { margin: 0; } .failcard .tools { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.grid-card .row.head { margin-bottom: 8px; } .grid-card label.check { font-weight: 400; color: var(--muted); }
table.grid { border-collapse: separate; border-spacing: 0; font-size: 14.5px; width: auto; min-width: 0; }   /* as wide as its columns, never stretched over an empty card */
table.grid th.rowhead { text-align: left; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 400; color: var(--ink); white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; border-right: 1px solid var(--line); }
table.grid thead th.rowhead { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-family: var(--mono); }
table.grid th.colhead { text-align: center; font-family: var(--sans); text-transform: none; letter-spacing: 0; vertical-align: bottom; min-width: 96px; padding: 8px 6px; }
table.grid th.colhead .site { display: block; font-size: 13px; font-weight: 600; color: var(--ink); max-width: 150px; margin: 0 auto; overflow-wrap: break-word; line-height: 1.25; }
table.grid th.colhead .site.url { overflow-wrap: anywhere; }   /* a bare URL has no spaces to break at */
table.grid th.colhead .site:not(.url) { min-width: min-content; }   /* DC-H103 (design-critic 19:24 UTC 4 Oct): a named head is never narrower than its longest word — "Documentation" (102 px) in a 90-px head spilled under the sticky CHECK column and into its neighbour at 390; the grid scrolls sideways already */
table.grid th.colhead .site a { color: var(--accent); } table.grid th.colhead .dev { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
table.grid th.colhead.red .site::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red-mark); margin-right: 5px; vertical-align: 1px; }   /* ink heads, a dot says which site failed (V5 #10) */
table.grid td.cell { text-align: center; padding: 6px 6px; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.2; vertical-align: middle; }
table.grid td.cell.pass { color: var(--green); font-weight: 400; } table.grid td.cell.found { color: var(--ink-2); font-weight: 400; } table.grid td.cell.absent, table.grid td.cell.skip { color: var(--line-3); } table.grid td.cell.fail { color: var(--red); background: color-mix(in srgb, var(--red) 5%, transparent); }
table.grid td.cell.fail a, table.grid td.cell.blocked a { color: var(--red); font-weight: 600; font-size: 16.5px; text-decoration: none; display: inline-block; min-width: 24px; }
/* a check the site stopped (BLOCKED) is not a failure: grey like "not checked", never red (validator audit V8) */
table.grid td.cell.blocked, table.grid td.cell.blocked a { color: var(--muted); background: none; } table.grid td.cell.blocked .x { background: var(--line-3); }
table.grid td.cell.fail a:hover { text-decoration: underline; }
table.grid tr.has-fail th.rowhead { color: var(--ink); font-weight: 600; }
table.grid td.cell .dur { display: none; font-size: 12px; color: var(--muted); font-family: var(--mono); margin-left: 2px; }
.grid-card.with-dur td.cell .dur { display: inline-block; } .grid-card.with-dur td.cell.foot .dur { display: block; margin: 2px 0 0; }
table.grid tfoot td.cell { border-bottom: 0; border-top: 2px solid var(--line-2); padding-top: 8px; font-size: 14.5px; vertical-align: top; } table.grid tfoot .amber { color: var(--amber); }
table.grid tfoot .links { display: block; font-size: 12px; margin-top: 3px; } table.grid tfoot .links a { display: inline-block; padding: 5px 4px; } table.grid tfoot .green { color: var(--green); } table.grid tfoot .red, .red { color: var(--red); } .green { color: var(--green); }
table.grid tfoot th.rowhead { border-top: 2px solid var(--line-2); }
.legend { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .legend > span { white-space: nowrap; }
@media (max-width: 720px) { .legend > span { white-space: normal; } }   /* a long entry wraps on a phone: at 320 the page was wider than the screen */
table.grid tr.fold th { color: var(--muted); font-weight: 400; } table.grid tr.fold button { padding: 0; } .grid-card:not(.show-absent) tr.absent-row { display: none; }   /* the rows that do not apply fold into one line (round-2 L5 #9) */
@media (max-width: 720px) { .fails { grid-template-columns: 1fr; } .tablewrap table.grid { min-width: 0; } table.grid th.colhead { min-width: 72px; } table.grid th.colhead .site { max-width: 90px; } }
/* phone: the summary strip keeps one line per tile — smaller figures, captions under them, the date in one piece */
@media (max-width: 600px) {
  .grid-card table.grid th.rowhead { width: calc(32vw / var(--zoom, 1)); min-width: calc(32vw / var(--zoom, 1)); max-width: calc(32vw / var(--zoom, 1)); }   /* the row-head column's width is the phone's, never its names': a fold opened does not re-lay the grid (design-critic 17:07; Agreed-with: crowd5) */
  .tiles.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tiles.stats .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tiles.stats .tile { padding: 10px 12px; } .tiles.stats .tile b { font-size: 21px; white-space: nowrap; }
  .tiles.stats .tile b small { font-size: 13px; white-space: normal; }
  .tiles.stats .tile span { font-size: 11.5px; }
  .nowrap { white-space: nowrap; }
}
.nowrap { white-space: nowrap; }

/* landing v2: compact use cases, a visual how-it-works */
.cases { margin: var(--section) 0 0; } .cases-head { text-align: center; margin-bottom: 18px; }
.cases-head h2 { letter-spacing: -.02em; font-size: clamp(24px, calc(2.2vw / var(--zoom, 1)), 30px); margin: 0 0 6px; } .cases-head p { margin: 0 auto; max-width: 62ch; }
.cases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .cases-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0; }
.cases .cases-head { text-align: left; } .cases .cases-head p { margin: 0; }   /* the cases share the plans' left edge, the eye does not swing to the centre inside one screen (round-3 L4 #11) */
.case { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .2s, transform .2s; }
.case:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.case-eyebrow { font: 600 12px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }   /* a label, not a link: the same as .story .kicker (round-3 L4 #10) */
.case h3 { margin: 0; font-weight: 600; font-size: 17.5px; letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }
.case p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.moment { margin-top: auto; padding: 9px 11px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.moment span { font-family: var(--mono); color: var(--muted); margin-right: 8px; } .moment b { color: var(--ink); }
.case-go { font-size: 14.5px; color: var(--accent); font-weight: 600; } .case:hover .case-go { text-decoration: underline; }
@media (max-width: 1144px) { .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cases-grid, .cases-grid.two { grid-template-columns: 1fr; } }

.bar { display: inline-block; width: 6px; height: 14px; margin-left: 3px; border-radius: 2px; background: var(--green); opacity: .7; vertical-align: middle; } .bar.b2 { height: 10px; } .bar.b4 { height: 16px; } .bar.r { background: var(--red); }
.mpill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; } .mpill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mpill.ok { background: var(--green-bg); color: var(--green-2); } .mpill.bad { background: var(--red-bg); color: var(--red); }

.how { margin: var(--section) 0 0; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; position: relative; }
.how-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; box-shadow: var(--shadow); }
.how-n { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-2); font: 600 14px/28px var(--sans); text-align: center; }   /* a number, not a button */
.how-steps li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 33px; width: 14px; height: 1px; background: var(--line-3); }
.how-steps h3 { margin: 2px 0 0; font-weight: 600; font-size: 17.5px; letter-spacing: -.01em; } .how-steps p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.how-vis { margin-top: auto; padding-top: 10px; display: grid; gap: 6px; font-size: 13px; }
.hv-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.hv-row.dim { opacity: .85; } .hv-row.dim .hv-tag { color: var(--ink-2); } .hv-row.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: var(--red-bg); }
.hv-url { color: var(--ink); font-family: var(--mono); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .hv-tag { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hv-url .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .hv-url .dot.off { background: var(--amber-mark); }   /* a browser answering is not a verdict: no green, no glow (round 1, L8 ruling #13) */
.hv-chips { display: flex; gap: 6px; } .hv-chip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; color: var(--muted); } .hv-chip.on { background: var(--green-bg); color: var(--green); border-color: transparent; font-weight: 600; }
@media (max-width: 820px) { .how-steps { grid-template-columns: 1fr; } .how-steps li:not(:last-child)::after { display: none; } }

/* pricing: questions as cards */
.faq h2 { text-align: center; font-size: 24px; letter-spacing: -.02em; margin-bottom: 16px; }
.faq dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.faq .qa { min-width: 0; padding: 12px 0 14px; border-top: 1px solid var(--line); }   /* hairlines, no tiles, no "?" discs (round-2 L10 ruling #16) */
.faq dt { font-weight: 600; margin-bottom: 4px; font-size: 15.5px; } .faq dd { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 720px) { .faq dl { grid-template-columns: 1fr; } }

/* dashboard: getting started as a progress strip, failures one per test */
.onboarding { padding: 16px 20px 18px; }
.onboarding .row.head { margin-bottom: 10px; } .onboarding .row.head h2 { display: flex; align-items: center; gap: 10px; }
.progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin: 0 0 14px; } .progress i { display: block; height: 100%; background: var(--ink-2); border-radius: 2px; transition: width .6s ease; }
.onboarding .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: st; }
.onboarding .steps li { counter-increment: st; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); position: relative; min-width: 0; font-size: 14.5px; }
.onboarding .steps li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.onboarding .steps li.ok::before { content: "✓"; background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }   /* a finished setup step is our progress, not a verdict about the site (L8 ruling #10) */
.onboarding .steps li.ok { background: var(--bg-2); } .onboarding .steps li.ok a { color: var(--ink-2); }
.onboarding .steps li.next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .onboarding .steps li.next::before { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.onboarding .steps li a { font-weight: 600; color: var(--ink); } .onboarding .steps li .hint { color: var(--muted); font-size: 13px; line-height: 1.4; }
.onboarding .steps li.next .hint { color: var(--ink-2); } .onboarding .steps li .go { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .onboarding .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .onboarding .steps { grid-template-columns: 1fr; } }
/* a phone: a done step is ONE line — the ✓ and its title, no hint, no card — the open step keeps its card (design-critic DC-H12, 02:27 UTC 2 Oct:
   four done cards stacked to ~1,000 px) */
@media (max-width: 600px) {
  .onboarding .steps { grid-template-columns: 1fr; gap: 0; }
  .onboarding .steps li.ok { flex-direction: row; align-items: center; gap: 10px; padding: 0 2px; border: 0; border-radius: 0; background: none; }
  .onboarding .steps li.ok::before { margin: 0; flex: none; } .onboarding .steps li.ok .hint { display: none; }
  .onboarding .steps li:not(.ok) { margin-top: 8px; }
}
.failrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 820px) { .failrows { grid-template-columns: 1fr; } }
a.failrow { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px 8px 8px; color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .2s, transform .2s; }
a.failrow:hover { border-color: var(--red); text-decoration: none; transform: translateY(-1px); }
.failrow .thumb { width: 120px; height: 78px; border-radius: 7px; overflow: hidden; background: var(--media-bg); border: 1px solid var(--line-3); display: flex; align-items: center; justify-content: center; }
.failrow .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .failrow .thumb.phone img { width: auto; max-width: 54%; }
.failrow .thumb.none { color: var(--muted); font-size: 11.5px; text-align: center; padding: 4px; font-family: var(--mono); }
.failrow .fr-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.failrow .fr-name { font-weight: 600; font-size: 15.5px; display: flex; gap: 8px; align-items: baseline; }
.failrow .fr-why { color: var(--ink-2); font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.failrow .fr-meta { color: var(--muted); font-size: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }   /* the whole line, wrapped: the site, the device, the report and since when are never cut (the look tests' box faults) */ .failrow .fr-meta b { color: var(--ink-2); font-weight: 600; }
.failrow .chev { color: var(--muted); font-size: 20px; transition: transform .15s, color .15s; } a.failrow:hover .chev { color: var(--red); transform: translateX(2px); }

/* the hero demo panel is the one dark thing on the page: it reads as a screen */
/* (the hero window's scoped dark palette was here; the window is light like the product now, with a dark title bar and dark frames — see the end of this file) */

/* a finger, not a mouse: the small evidence links and checkboxes grow */
@media (pointer: coarse) { table.grid tfoot .links a, .sharebar a { display: inline-block; padding: 8px 6px; } input[type=checkbox] { width: 24px; height: 24px; } }
/* the run grid card hugs its table; the runs page tabs are a real control */
.grid-card { width: 100%; } table.grid { width: 100%; }   /* the report grid fills its card at every column count (round-2 L10 #11) */
.spark.big { max-width: 100%; height: auto; }
table.grid td.cell .passive small { font-size: 11px; vertical-align: super; color: var(--ink-2); margin-left: 1px; }   /* a pass earned without acting */
/* the client's report on a phone: one stacked card per site and device, not a sideways table */
.share .chk.passive small { font-size: 10px; vertical-align: super; color: var(--muted); }
/* the same stacking for any table of the app that carries class="stack": each row a block, each cell under the other with its column's
   name above it from data-l; the first cell is the row's head and needs no name (hunt D-9 B3: the Overview's sites, a site's history) */
@media (max-width: 720px) {
  .tablewrap table.stack { min-width: 0; width: 100%; } .tablewrap:has(> table.stack)::after { content: none; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack tbody td { border: 0; padding: 0; min-width: 0; text-align: left; } table.stack tbody td:first-child, table.stack tbody td.wide, table.stack tbody td.actions { grid-column: 1 / -1; } table.stack tbody td:first-child { font-weight: 600; overflow-wrap: anywhere; }
  table.stack tbody td:empty { display: none; } table.stack tbody td { overflow-wrap: anywhere; }
  table.stack tbody td.n { text-align: left; } table.sitelist td.n { display: none; } table.sitelist td.trend { display: none; }   /* the trend is the site page's on a phone (no orphan column, sites/loop-02 #6) */
  /* one 44 px line per site (design-critic's #9 and T12): mark · name · state (or the passed fraction), the row's actions behind its ···; the page's
     "Check every site now" stays the one button. The sentence, the host and the age live on the site page */
  table.sitelist tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; min-height: 44px; padding: 4px 0; }
  table.sitelist tbody td:first-child, table.sitelist tbody td.wide, table.sitelist tbody td.actions { grid-column: auto; }
  table.sitelist tbody td.wide { text-align: right; white-space: normal; max-width: 5.6em; line-height: 1.3; } table.sitelist tbody td.wide .pill { white-space: normal; text-align: left; }   /* "6 checks failing" may take two short lines so the site's name keeps the width its words need (design-critic 13:30) */ table.sitelist td.wide > .muted, table.sitelist td.wide > .small, table.sitelist .sitewords .pill, table.sitelist .sitewords .sitehost { display: none; }
  table.sitelist td.wide > .muted.counts { display: inline; }   /* the row's whole count stays on a phone card: "1 needs a look · 2 passed · 7 not run" (design-critic LOOP-10 row 21) */
  table.sitelist td.wide .dot, table.sitelist td.wide .rep, table.sitelist td.actions > form.inline { display: none; }
  table.sitelist td.actions .menu form.phone-only { display: block; }
    /* a phone card keeps the site and its last report; the checks count is the site page's (sites/loop-02 #7) */ table.stack tbody tr:hover td { background: none; } table.stack tbody td:first-child .muted { font-weight: 400; } table.stack td[data-l] svg { display: block; margin-top: 7px; } table.stack td.actions { position: relative; } table.stack td.actions details.more { margin-left: 6px; position: static; } table.stack td.actions details.more .menu { left: 0; right: auto; max-width: 100%; box-sizing: border-box; }   /* the row's menu hangs from the row's left edge and is as wide as the row at most: hung from its button it left the screen, and the table let the page pan (the look tests, /sites at 320 and 390) */
  table.stack td.actions button.small, table.stack td.actions details.more > summary { min-height: 44px; min-width: 44px; }   /* a thumb's size (they were 30 and 32 by 30) */
  @media (hover: none) { table.stack.rows-reveal td.actions > form > button.small, table.stack.rows-reveal td.actions details.more > summary { opacity: 1; } }
  table.sitelist td.actions details.more .menu { left: auto; right: 0; max-width: calc(calc(100vw / var(--zoom, 1)) - 32px); }   /* T12: the ··· sits at the line's right end, so its menu hangs leftwards inside the screen */
  table.stack tbody td[data-l]::before { content: attr(data-l); display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
}
@media (max-width: 720px) {
  .share .tablewrap table { min-width: 0; width: 100%; }
  .share .tablewrap::after { display: none; }
  .share .tablewrap thead { display: none; }
  .share .tablewrap tr, .share .tablewrap td { display: block; width: 100%; box-sizing: border-box; }
  .share .tablewrap tr { border: 0; padding: 6px 0 2px; margin: 0; background: none; }             /* no box inside the card: a hairline between sites is enough */
  .share .tablewrap tbody tr:not(.detail):not(:first-child) { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
  .share .tablewrap tr.detail { padding-top: 0; }
  .share .tablewrap td { border: 0; padding: 4px 0; } .share tr.detail td { display: block; }
  .share .tablewrap td[data-l]::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 480px) { .orgpick .menu { min-width: 0; width: min(260px, calc(calc(100vw / var(--zoom, 1)) - 24px)); } }   /* a phone: the menu hangs from the icon's right edge, inside the screen with a gutter of 12px */   /* the team's name stands at the left on a phone: a menu hung from its right edge opened 51px off the screen (hunt D-5 B1); 84px is the mark, the gap and the two paddings */
.share .chk { display: block; min-width: 0; margin: 0; } .share .chk.absent { color: var(--muted); }
.share tr.detail td { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }   /* its own grid, never a fake row of the table above */
td.when, td.dur { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
/* a site is an entity: a 40px mark opens its row, the site's own logo or a tile in the brand's blue with its first letter (O-39, the owner, 2026-09-30); the same box for both */
table.sitelist td { vertical-align: middle; } .siteflex { display: flex; align-items: center; gap: 12px; }   /* the flex lives inside the cell: on the <td> itself it left table layout and its hairline broke from the row's (s1's loop-00 #8) */ .sitemark, a.sitemark:hover { color: var(--ink-2); text-decoration: none; } .sitemark { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 18px/40px var(--sans); text-align: center; overflow: hidden; } .sitemark img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.sitewords { min-width: 0; } .sitehost { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 1px; } tr.off .sitemark { opacity: .55; } .sitemark-h1 { display: inline-block; width: 32px; height: 32px; border-radius: 8px; vertical-align: -5px; margin-right: 10px; } .sitemark-sm { display: inline-block; width: 20px; height: 20px; border-radius: 5px; vertical-align: -4px; margin-right: 8px; }   /* O-70: the site's own icon, only when its newest report saved one */ .sitetally { margin: -4px 0 14px; }
table.sitelist td.wide .spark { display: inline-block; vertical-align: middle; margin-left: 8px; }   /* the trend beside the last report's words, only where three reports exist (sites/loop-02 #6) */
/* the TREND column (the owner's O-66): 88 px, right-aligned, centred; a 72 × 20 spark of the last 7 reports over a faint baseline, ink-2,
   the fail colour only when the newest report failed; "—" with fewer than two. The last report's words stay on one line, clipped */
table.sitelist th.trend, table.sitelist td.trend { width: 88px; text-align: right; vertical-align: middle; white-space: nowrap; }
table.sitelist td.trend .spark { display: inline-block; vertical-align: middle; }
.spark.trend polyline { stroke: var(--ink-2); } .spark.trend.bad polyline { stroke: var(--red); } .spark.trend .base { stroke: var(--line-2); stroke-width: 1; }
@media (min-width: 721px) { table.sitelist td.wide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 46%; } }
/* the one shared sentence is said once over the list (.sites-lead, O-65's rule; O-66 with design-critic's #9); each row its fraction and its report */
table.sitelist .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } table.sitelist .dot.amber { background: var(--amber-mark); } table.sitelist .dot.live { background: var(--accent); }   /* DC-H119: a site whose report is running */
table.sitelist.same td.wide .rep { margin-left: 10px; } table.sitelist .menu form.phone-only { display: none; }
.addstrip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; } .addstrip input { flex: 1 1 260px; max-width: 420px; min-height: 44px; } .addstrip button { min-height: 44px; }   /* the demo's one action, on the first screen (sites/loop-02 #4) */
@media (hover: none) { .sitewords > a { display: inline-block; padding: 12px 0; margin: -12px 0; } }
table.sitelist .sitewords > a { overflow-wrap: normal; word-break: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }   /* a site's name wraps between words only ("Wanderlus|t" was cut mid-word at 390); a single word longer than the cell is clipped with …, never split (design-critic 13:30) */   /* the name is the way into a site: a thumb's 44px, the row's height unchanged (s1's loop-00 #9) */
@media (max-width: 360px) { table.sitelist .sitemark { display: none; } }   /* a Fold closed and a small phone: the name takes the letter-mark's 44 px, so its words fit between the edges */
@media (hover: hover) { table.rows-reveal td.actions > form > button.small, table.rows-reveal td.actions details.more > summary { opacity: .7; transition: opacity .12s; }   /* quiet until the row is hovered, but readable: at .55 the words measured 4.06:1, at .7 they are 6.8 (the look tests) */ table.rows-reveal tr:hover td.actions > form > button.small, table.rows-reveal tr:hover td.actions details.more > summary, table.rows-reveal td.actions :focus-visible, table.rows-reveal td.actions details[open] > summary { opacity: 1; } }   /* 49 rows of bordered buttons are heavier than the data: quiet at rest, full on the row's hover (V2 #7) */
.tiles.stats .tile-note { display: block; font-style: normal; font-size: 13px; color: var(--muted); font-family: var(--sans); text-transform: none; letter-spacing: 0; margin-top: 3px; line-height: 1.35; text-wrap: pretty; }
.devg { display: inline-block; width: 12px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: -1px; margin-right: 6px; opacity: .8; }
.devg.mobile { width: 8px; height: 12px; vertical-align: -2px; }

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

/* about page: facts strip, illustrated principle cards, a timeline and the mark */
.about-facts { margin: var(--group) 0 0; }
.about-facts .tile { text-align: center; }
.about-cards { margin-top: var(--group); }
.about-cards .card { display: flex; flex-direction: column; gap: 10px; }
.about-cards h2 { margin: 6px 0 0; }
.about-viz { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; display: grid; gap: 10px; min-height: 118px; align-content: center; }
.about-viz .mono { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }
.about-verdict { display: flex; align-items: center; gap: 10px; }
.about-shot { flex: 1; display: grid; gap: 4px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; }
.about-shot i { display: block; height: 6px; border-radius: 3px; background: var(--line-2); width: 85%; }
.about-shot i.w60 { width: 60%; } .about-shot i.w40 { width: 40%; } .about-shot i.w70 { width: 70%; } .about-shot i.w30 { width: 30%; }
.about-shot.red { border-color: color-mix(in srgb, var(--red) 45%, transparent); } .about-shot.red i:first-child { background: color-mix(in srgb, var(--red) 55%, transparent); }
.about-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; }
.about-flow .node { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); }
.about-flow .node.accent { border-color: var(--accent); color: var(--accent-2); }
.about-flow .arrow { color: var(--muted); }
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.about-split b { display: block; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.about-split div:last-child b { color: var(--accent); }
.about-split ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--ink-2); }
.about-split li::before { content: "✓ "; color: var(--accent); }
.how-vis .accent-text { color: var(--accent-2); font-weight: 600; }
.how-vis s { color: var(--muted); }
.about-story { margin-top: var(--section); }
.about-timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; }
.about-timeline::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: var(--line-2); }
.about-timeline li { position: relative; padding-top: 22px; }
.about-timeline .dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--line-3); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.about-timeline b { display: block; margin-bottom: 4px; }
.about-timeline p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.about-mark { display: flex; gap: 22px; align-items: center; margin-top: 14px; }
.about-mark .mark.big { font-size: 64px; color: var(--mark); } .about-mark p { max-width: 62ch; }
.about-mark p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .about-timeline { grid-template-columns: 1fr; gap: 14px; } .about-timeline::before { left: 7px; right: auto; top: 7px; bottom: 7px; width: 2px; height: auto; }
  .about-timeline li { padding-top: 0; padding-left: 26px; }
  .about-mark { flex-direction: column; text-align: center; } .about-split { grid-template-columns: 1fr; }
}

/* landing: the two doors and the price ladder */
.slide .ladder { padding: 18px 20px; } .slide .rung { padding: 12px 14px; }
.ladder { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rung { flex: 1 1 130px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
.rung b { font-size: 14.5px; } .rung > span { font-family: var(--mono); font-size: 14.5px; color: var(--ink); text-align: right; }
.rung small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.rung.on { border-color: var(--line-2); } a.rung { color: var(--ink); text-decoration: none; position: relative; } a.rung:hover { border-color: var(--accent); text-decoration: none; }
.ladder .button { align-self: center; margin-left: auto; }
@media (max-width: 720px) { .doors { grid-template-columns: 1fr; } .ladder .button { margin-left: 0; width: 100%; justify-content: center; } }

/* docs: jump nav, option lists, four-step start, reference table; pricing: compare table */
.docs-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 22px; }
.docs-nav a { font-family: var(--sans); font-size: 13px; color: var(--ink-2); border: 1px solid var(--line-2); background: var(--surface); padding: 5px 11px; border-radius: 999px; }   /* a table of contents: words, in the sans (round-2 L7 ruling #16) */
.docs-nav a:hover { border-color: var(--accent); color: var(--accent-2); text-decoration: none; }
.docs-ref .refusals { list-style: none; margin: 6px 0 0; padding: 0; } .docs-ref .refusals li { margin: 3px 0; } .docs-ref .refusals b { display: inline-block; min-width: 2.6em; font-variant-numeric: tabular-nums; }   /* one refusal per line (DC-H42) */
.docs-sec + .docs-sec { margin-top: 18px; }
.docs-sec h2 .muted { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; margin-left: 8px; }
.docs-opts { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 18px; color: var(--ink-2); font-size: 14.5px; }
.docs-opts code { margin-right: 6px; }
.docs-list { margin: 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 6px; }
.how-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .how-steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how-steps.four { grid-template-columns: 1fr; } }
.docs-ref th { text-align: left; white-space: nowrap; color: var(--ink); font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; vertical-align: top; padding-right: 18px; }
.docs-ref td code { margin: 1px 0; display: inline-block; } .docs-ref tr:last-child th { border-bottom: 0; }
.ent-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 16px 0 0; padding: 16px 20px; } .ent-strip > div { flex: 1 1 320px; min-width: 0; } .ent-strip > .button { flex: none; } .free-strip { margin: 0 0 12px; } .free-strip > div { flex: 1 1 260px; }
.compare { margin-top: var(--group); }
.compare tbody th { color: var(--ink); font: 400 14.5px/1.5 var(--sans); text-transform: none; letter-spacing: 0; } .compare tbody tr:last-child th { border-bottom: 0; }   /* a row's header reads like the cell it was */
.compare td, .compare th { text-align: center; } .compare tr > :first-child { text-align: left; }
.compare th.feat { box-shadow: inset 0 2px 0 var(--accent); }   /* the featured column: one rule, not a wash; a class, so a column added before it cannot move the rule (round-3 L2 #1) */
.compare > p.muted { max-width: none; margin-top: 16px; font-size: 13px; }
.compare h2 { text-align: center; font-size: 24px; letter-spacing: -.02em; margin-bottom: 16px; } .agency-pitch .cases-head h2 { font-size: 24px; }   /* the page's three section heads are one size (round-3 L2 #9) */
.compare thead th { font: 600 12px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .compare tbody tr:first-child :is(td, th) { font-weight: 600; }
.plans-foot { margin: 12px 0 0; font-size: 13px; max-width: none; } .plans-go { text-align: center; margin: -6px 0 0; }   /* the one way on while no plan can be started */
@media (max-width: 900px) { .compare tr > :first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--line); min-width: 132px; } .compare tbody td { white-space: nowrap; } }   /* up to 900px, not 720: at 768 the first column was 107px and eight labels wrapped */
@media (max-width: 640px) { .compare tr > :first-child { min-width: 112px; max-width: 112px; } .compare tbody td { white-space: normal; min-width: 88px; max-width: 120px; } .compare thead th { min-width: 88px; } }   /* DC-H6 (design-critic 02:25 UTC 2 Oct): the labels stand still and a plan column is a phone's width, its words wrapped — two plans beside the labels, never one and a word cut at the edge */
.plan p.muted { min-height: 1.5em; }

p.center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }

/* auth cards */
main:has(> .card.auth) { display: grid; align-content: center; }   /* the card sits in the middle between the header and the footer, not high over empty grey (s1 loop-00 #5) */
.card.narrow.auth { width: 100%; margin-block: 32px; }
.auth { padding: 30px 30px 26px; }
.auth-head { text-align: center; margin-bottom: 18px; } .auth-head .mark { font-size: 50px; color: var(--mark); display: block; margin: 0 auto 8px; }
@media (max-width: 640px) { .auth-head .mark { display: none; } }   /* on a phone the header's mark is enough: the second one pushed the form down (s1 loop-00 #6) */
.auth-head h1 { justify-content: center; margin: 0 0 4px; } .auth-head p { margin: 0; }
.auth label { position: relative; }
@media (pointer: coarse) { .auth input:where(:not([type=checkbox]):not([type=radio])) { min-height: 44px; } }   /* a field is a thumb's height, like the buttons (s1 loop-00 #2) */
.auth-pw { position: relative; margin: 0 0 12px; } .auth-pw > label { margin: 0; }
.pw-field { position: relative; display: block; margin-top: 5px; } .pw-field input { margin-top: 0; padding-right: 76px; }
.auth button.pw-show { position: absolute; top: 0; right: 0; height: 100%; min-height: 0; padding: 0 14px; font-size: 14px; font-weight: 600; }   /* Show / Hide: a text button (.ghost) in the field's right end, as tall as the field: 44px on touch (s1 loop-00 #3) */
.auth button.pw-show:hover { background: none; } .auth button.pw-show:active { transform: none; } .auth button.pw-show:focus-visible { outline-offset: -3px; }
.auth-forgot { position: absolute; right: 0; top: 0; }
@media (pointer: coarse) { .auth a.auth-forgot { position: static; display: flex; width: fit-content; margin: 2px 0 0 auto; } }   /* on touch its 44px box sits under the field, not over its top edge (s1 loop-00 #1) */
button.wide, .button.wide { width: 100%; justify-content: center; margin-top: 4px; }
.auth-alt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; } .auth-alt .button { white-space: nowrap; flex: none; }
.auth-head p.auth-sub { color: var(--ink-2); max-width: 46ch; margin: 0 auto; }
.auth-legal { text-align: center; margin: 12px 0 0; }
.auth-alt .muted { font-size: 14px; }
.auth .hint { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.claim-receipt { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2); }
.claim-receipt .thumb { flex: none; width: 92px; height: 60px; border-radius: 5px; overflow: hidden; background: var(--media-bg); border: 1px solid var(--line); }
.claim-receipt .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.claim-receipt > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .claim-receipt b { font-weight: 600; overflow-wrap: anywhere; } .claim-receipt .amber { color: var(--amber); }   /* stopped by the site: the amber of "not checked", never red */
.claim-receipt .small { color: var(--ink-2); } .claim-receipt .small.muted { color: var(--muted); }
.auth .inline { display: inline; } .auth .inline .linkish { padding: 0 2px; }
.docs-opts { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; }
.settings-col { max-width: 760px; }
.subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; } .subnav a { padding: 4px 11px; border-radius: 999px; font-size: 14px; color: var(--ink-2); background: var(--bg-2); text-decoration: none; }
.subnav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
@media (pointer: coarse), (max-width: 600px) { .subnav a { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; } }   /* a thumb's 44 px (critic-lead #23) */
@media (max-width: 720px) { table.invites tr, table.invites td { display: block; width: 100%; box-sizing: border-box; } table.invites td { border: 0; padding: 4px 0; } table.invites tr { padding: 8px 0; border-top: 1px solid var(--line); } table.invites tr:first-child { border-top: 0; } }
table.invites .cmd pre { white-space: pre-wrap; word-break: break-all; }   /* the invite link wraps inside the 760 px settings column instead of running under the Copy button */
.docs-opts li { display: grid; gap: 2px; } .docs-opts code { justify-self: start; }

.plans-wrap { margin: var(--section) 0 0; } .plans-wrap .cases-head { text-align: left; } .plans-wrap .cases-head p { margin: 0; } .plans-note { margin: var(--group) 0 0; font-size: 14.5px; max-width: 72ch; }   /* plans are the first ordinary section after the three slides, left-aligned like them (round-1 L4 ruling #10) */

.share td.again { color: var(--muted); }
@media (max-width: 720px) { .share td.again { color: var(--ink); } }

/* security: the data-flow strip, the controls grid, the report card */
.sec-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; padding: 22px; }
.sec-node { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); }
.sec-node.accent { border-color: var(--accent); background: var(--accent-soft); }
.sec-node b { font-size: 16.5px; letter-spacing: -.01em; } .sec-node p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 64ch; }
@media (max-width: 720px) { main:has(> .sec-flow) { display: flex; flex-direction: column; } main:has(> .sec-flow) > .cases-head, main:has(> .sec-flow) > .sec-grid { order: 1; } main:has(> .sec-flow) > .sec-flow { order: 2; } main:has(> .sec-flow) > .sec-flow ~ :not(.cases-head):not(.sec-grid) { order: 3; } }   /* on a phone the Controls come before the figure of how data moves (senior, public loop-00 FIX 5) */
.sec-kicker { font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sec-flow > .sec-arrows { align-self: center; max-width: 16ch; margin: 0; text-align: center; text-wrap: balance; font-size: 13px; line-height: 1.45; color: var(--muted); }   /* one arrow-less muted line per gap (critic #21) */
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.sec-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; box-shadow: var(--shadow); }
.sec-item p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.sec-report { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.sec-report h2 { margin-bottom: 6px; } .sec-report p { margin: 0 0 6px; }
.sec-facts { display: flex; gap: 22px; } .sec-facts span { display: grid; text-align: center; } .sec-facts b { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sec-facts small { color: var(--muted); font-size: 12px; max-width: 110px; }
@media (max-width: 900px) { .sec-flow { grid-template-columns: 1fr; } .sec-flow > .sec-arrows { max-width: none; } .sec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sec-grid { grid-template-columns: 1fr; } .sec-report { grid-template-columns: 1fr; } .sec-facts { justify-content: space-between; } }
@media (max-width: 720px) { .tablewrap table.docs-ref { min-width: 0; } .tablewrap:has(> .docs-ref)::after { content: none; } .docs-ref th, .docs-ref td { display: block; padding-right: 0; } .docs-ref th { padding-bottom: 0; border-bottom: 0; white-space: normal; } .tablewrap .docs-ref code { white-space: normal; overflow-wrap: anywhere; } }   /* the Reference on a phone: one row under the other, nothing to scroll sideways */

/* privacy: fact cards with labelled rows; terms: numbered clauses */
.legal-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; max-width: 880px; margin-inline: auto; }   /* one reading column, as the terms have (public loop-00 FIX 6): no 30 characters a line at 884 */
.legal-card { margin: 0; } .legal-card h2 { margin-bottom: 10px; }
.legal-rows { margin: 0; display: grid; gap: 8px; }
.legal-rows div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.legal-rows div:first-child { border-top: 0; padding-top: 0; }
.legal-rows dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.legal-rows dd { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 60ch; }   /* legal prose at the body's size, not under it (design-whole dw-A#6) */
.legal-where { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 880px; margin-inline: auto; } .legal-where p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.note-card { border-color: var(--line-2); background: var(--bg-2); margin-bottom: var(--group); } .note-card { max-width: 880px; margin-inline: auto; } .changelog-card { max-width: 880px; margin-inline: auto; } .note-card p { margin: 0; max-width: 64ch; }
.legal-rows.changelog div { grid-template-columns: 110px 1fr; } .legal-rows.changelog dt { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.legal-rights { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; margin-top: 14px; } .legal-rights p { margin: 0; color: var(--ink-2); max-width: 60ch; } .legal-rights p + p { margin-top: 8px; }
.legal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.terms li.card { display: grid; grid-template-columns: 34px 1fr; gap: 16px; margin: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 16px 0 18px; } .terms li.card:first-child { border-top: 0; padding-top: 4px; }   /* hairlines, no tiles: the clause titles are the loudest thing, not seven discs (light-live, 10) */
.terms-n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font: 600 15.5px/30px var(--mono); text-align: center; }
.terms h2 { margin: 3px 0 6px; } .terms p { margin: 0 0 4px; color: var(--ink-2); max-width: 64ch; }
@media (max-width: 480px) { .terms li.card { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) { .legal-grid, .legal-where, .legal-rights { grid-template-columns: 1fr; } .legal-rows div, .legal-rows.changelog div { grid-template-columns: 1fr; gap: 2px; } }   /* the changelog too: its own two-column rule outranked this one, so a phone read 138px of text beside a date (dw-A#2) */

.terms { max-width: 880px; margin: 0 auto; }

/* test rows, one component on the run page (failures, grouped by site and device) and on the site page (every test of the last run):
   the verdict in the summary, the last screenshot, the reason and the evidence when the row is open; the left rule carries the verdict */
.alerts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }   /* one surface per group, hairlines between the rows (V4 ruling #8) */
details.alert { background: var(--surface); border: 0; padding: 0; margin: 0; }   /* no rail: the ✕ (or the amber clock) carries the verdict, the section rule sits above (round-2 L5 ruling #6) */
details.alert + details.alert { border-top: 1px solid var(--line); }
details.alert:target { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.alert > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px 10px 12px; }
.alert > summary::-webkit-details-marker { display: none; }
.alert > summary:hover { background: var(--surface-2); }
.alert > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* THE MARK BESIDE A CHECK (the owner, 2026-09-29: "remove the red X, they do nothing"). A cross in a disc had the shape of a
   control that closes or removes the row, and a press did nothing. A mark is a shape nobody presses: a filled dot for a check that
   failed, the grid's green ✓ for one that passed (P2-4: one passed mark everywhere), a short line for one that was left out; the amber clock of a check that ran out of time stays.
   The shape tells them apart without colour. The glyph a template may still write inside the element is not drawn (font-size 0). */
.alert .x, .failrow .fr-name .x, .failcard .x, .nr-row .x { display: inline-block; flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: currentColor; color: var(--red); font-size: 0; line-height: 0; overflow: hidden; align-self: center; vertical-align: middle; }
.alert .x { margin: 0 4px; }
.alert.pass .x { color: var(--green); width: auto; height: auto; margin: 0 2px; border-radius: 0; background: none; font-size: 16.5px; line-height: inherit; overflow: visible; text-align: center; }   /* the report grid's ✓, not a ring of its own (design-critic 07:40, P2-4); one mark per row, its small ○ retired (LOOP-10 row 26) */
.alert.skip .x, .alert.absent .x, .alert.unsure .x { color: var(--muted); height: 2px; border-radius: 1px; }
.alert.nc .x { width: 10px; height: auto; background: none; border-radius: 0; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; overflow: visible; }
.alert.nc .x::before { content: "◌"; font-size: 18px; line-height: 1; }   /* DC-H100's mark (crowd2 18:4x): a not-checked row wears the house's not-checked mark, the report grid's muted ◌, not the 2-px dash of a skipped one */
.alert.timeout .x, .alert.warn .x { color: var(--amber); width: 18px; height: auto; margin: 0; border-radius: 0; background: none; font-size: 16px; line-height: inherit; overflow: visible; text-align: center; } .alert.timeout .x svg { width: 15px; height: 15px; vertical-align: -2px; }   /* a timeout is not a confirmed break: a clock, in amber (V5 #1) */
.al-main { display: grid; gap: 1px; min-width: 0; } .al-main b { font-size: 15.5px; line-height: 1.3; }
.al-where { color: var(--muted); font-size: 13px; }
.al-where.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }   /* the group head says it; read aloud, and shown again on a deep link */
.al-ctx { display: none; font-size: 12.5px; line-height: 1.3; } .alert:target .al-ctx, .alert:has(.al-anchor:target, .al-dev-part:target) .al-ctx { display: block; }   /* a deep link's card names its report: "Report #286 · night report · 30 Sep" (design-critic 07:40, P2-3) */
details.alert:target .al-where.quiet { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
.al-why { color: var(--ink-2); font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }   /* a folded card's sentence takes TWO lines before any "…": at 344 "No check reached a result; the chec…" (design-critic 10:08, 13:57 (3)) */
.al-why.muted { color: var(--muted); }
.al-meta { white-space: nowrap; font-family: var(--sans); font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }   /* a row's duration: sans, muted, the device words' size; mono is for addresses and code (critic #29) */
.al-open { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); display: grid; place-items: center; line-height: 0; transition: background .15s, border-color .15s, color .15s; } .al-open:hover { color: var(--accent); }
.al-open svg { display: block; transition: transform .18s ease; }
details.alert > summary:hover .al-open { background: var(--surface); border-color: var(--accent); } .alert[open] .al-open svg { transform: rotate(180deg); }
.alert[open] .al-why { display: none; }
.al-lead { margin: 0 0 12px; color: var(--amber); font-size: 14.5px; }   /* one cause said once over the list (critic list §1) */
.al-both .al-dev-part + .al-dev-part { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; } .al-both .al-dev-part .why { margin-bottom: 4px; }   /* one site cut off on both devices: one row, each device's note inside (LIST-2026-10-01 #7) */
.alert.look:not([open]) .al-why { display: block; overflow: visible; }   /* needs a look: the sentence IS the card ("Stopped at 'open about'. Watch what happened."), it wraps, never "…" (DC-H77, design-critic 17:27) */
.al-both .al-why { display: block; overflow: visible; }   /* that row's line is its devices' numbers ("desktop 1 of 1 passed · phone no result"): never cut with "…", two lines at 320 (design-critic 18:30's shapes) */
.al-body { display: grid; grid-template-columns: 168px 1fr; gap: 16px; padding: 12px 14px 14px 42px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) { details.alert[open] > .al-body { animation: al-in .15s cubic-bezier(.2,.7,.2,1); } @keyframes al-in { from { opacity: 0; transform: translateY(-2px); } } }   /* the body fades in; the height still snaps (V9 ruling #14) */
.al-body.single { grid-template-columns: 1fr; }
.al-pic { display: block; position: relative; background: var(--media-bg, var(--bg-2)); border: 1px solid var(--line-3); border-radius: 8px; overflow: hidden; max-height: 128px; padding: 0; margin: 0; width: 100%; font: inherit; color: inherit; text-align: center; }
a.al-pic { cursor: zoom-in; } button.al-pic { cursor: pointer; transition: border-color .15s; } button.al-pic:hover, button.al-pic:focus-visible { border-color: var(--accent); }
.al-pic img { display: block; width: 100%; height: 126px; object-fit: cover; object-position: top; } .al-pic.phone img { width: auto; max-width: 52%; margin: 0 auto; }
.al-zoom, .al-play { position: absolute; right: 6px; bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: rgba(17,24,39,.72); color: #fff; padding: 2px 7px; border-radius: 999px; }
.al-play { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 36px; height: 36px; padding: 0; display: grid; place-items: center; background: rgba(17,24,39,.66); box-shadow: 0 0 0 2px rgba(255,255,255,.5); transition: background .15s, transform .15s; }
.al-play svg { margin-left: 2px; }
.al-pic:hover .al-zoom, button.al-pic:hover .al-play, button.al-pic:focus-visible .al-play { background: var(--accent); }
.al-pic.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; min-height: 120px; }
.al-text { min-width: 0; display: grid; gap: 6px; align-content: start; } .al-text .why { margin: 0; color: var(--ink); line-height: 1.5; } .al-text .why.muted { color: var(--muted); }
.al-earlier { margin: 0; }
/* the run page groups the failing rows by site and device: the head names the where once, the rows say what */
.al-group { margin: 0 0 32px; } .al-group:last-child { margin-bottom: 0; }
.al-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 2px 10px; font-size: 14.5px; }
.al-group-head b { font-size: 15.5px; }
/* a site's name that leads to its page reads as a link everywhere (the owner's O-86; design-critic 13:00 site-links): the one blue the
   body's "see why →" links wear, bold kept, underlined on hover and focus only; a name that is not a link stays ink — no grey link, no ink
   link that only underlines on hover. The device words beside it stay muted. A whole-row link (.siterow, .failrow, the bell's lines) keeps
   its ink name: the row is the link, not the name. */
.al-group-head b a, table.grid th.colhead .site a, .al-where a, .sitewords > a, .film-back a { color: var(--accent); text-decoration: none; }
.al-group-head b a:hover, .al-group-head b a:focus-visible, table.grid th.colhead .site a:hover, table.grid th.colhead .site a:focus-visible, .al-where a:hover, .al-where a:focus-visible, .sitewords > a:hover, .sitewords > a:focus-visible, .film-back a:hover, .film-back a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .al-group-head b a, table.grid th.colhead .site a, .al-where a, .sitewords > a { display: inline-block; padding-block: 12px; margin-block: -12px; } }   /* a thumb's 44px, the line's height unchanged */
.al-dev { color: var(--muted); } .al-dev::before { content: "· "; }
/* the devices of a meta line as a trio of glyphs, always desktop · tablet · phone (the owner's O-84; design-critic 12:30 device-trio): failing
   filled in the fail colour, passed an ink outline, not run (or not finished) a faint outline; a thumb's 44 px tall as a group on touch */
.dev-trio { display: inline-flex; align-items: center; gap: 3px; vertical-align: -3px; line-height: 1; } .dev-trio .dt { display: inline-flex; color: var(--ink); }
.dev-trio .dev-glyph { display: block; margin: 0; } .dev-trio .dt-fail { color: var(--red-mark); } .dev-trio .dt-fail .dev-glyph { fill: currentColor; fill-opacity: .3; }   /* the sprite's shapes inherit the fill (O-90: <use>, the shadow tree takes no selector) */
.dev-trio .dt-none, .dev-trio .dt-cut { color: var(--line-3); } .al-group-head .dev-trio { align-self: center; }
@media (pointer: coarse) { .dev-trio { min-height: 44px; vertical-align: middle; } }
.al-tally { margin-left: auto; font-family: var(--sans); font-size: 14.5px; color: var(--muted); }   /* the site's tally: sans, muted, the device words' size (critic #29) */ .al-tally .red { font-weight: 600; } .al-tally .amber { color: var(--amber); font-weight: 600; }
/* the report's count of sites that did not finish: apart from the failing checks, in amber (hunt F-2, F4) */
.attention h2 .amber, .tile-note .amber { color: var(--amber); } .grid-card .none-yet { margin: 0 0 10px; } .grid-card > .none-yet:only-child { margin: 0; }
.attention h2 .al-count { font-weight: 400; font-size: 14.5px; letter-spacing: 0; margin-left: 6px; }
@media (max-width: 720px) {
  .alert > summary { grid-template-columns: auto 1fr auto; gap: 6px 10px; padding: 10px 10px 10px 10px; }
  .al-meta { grid-column: 2; grid-row: 2; white-space: normal; } .al-meta:empty { display: none; }
  .al-open { width: 24px; height: 24px; }
  .al-body { grid-template-columns: 1fr; padding: 12px 12px 12px 12px; gap: 10px; }
  .al-group-head { padding-bottom: 6px; } .al-tally { margin-left: 0; flex-basis: 100%; }
}
/* the play chip under a check, a small button in the verdict's colour; the browser's log, every step, site history beside it */
.rp-test { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.rp-test:hover, .rp-test:focus-visible { background: var(--accent-2); border-color: var(--accent-2); }
.rp-test svg { width: 13px; height: 13px; flex: none; }
.tools-line { margin: 12px 0 0; }
.allgood { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-m); background: var(--green-bg); color: var(--green-2); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); font-size: 14.5px; }
.allgood .ok { font-weight: 700; }
/* the report's notes: what the server, the browser and the alerts had to say, in one quiet box; a failed line is red text, not a banner each */
.run-notes { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 0 0 16px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: 13.5px; }
.run-notes-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.run-notes > div { display: grid; gap: 3px; min-width: 0; } .run-notes p { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; } .run-notes p.note-err { color: var(--amber); }   /* a dead report's note: amber, never the fail red (nothing on the merchant's site failed; critic list §1) */
   /* one mark per failure, not one per traceback line */ .run-notes pre.raw { margin: 6px 0 0; max-height: 240px; overflow: auto; }
@media (max-width: 600px) { .run-notes { grid-template-columns: 1fr; gap: 4px; } }

/* a code token never breaks inside itself; at tablet widths the option list shows one option per row */
.docs-opts code, .docs-ref code { white-space: nowrap; }
@media (max-width: 900px) { .docs-opts { grid-template-columns: 1fr; } .docs-opts li { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; } }

/* the screenshot lightbox on the run page */
dialog.lightbox { border: 0; border-radius: 12px; padding: 0; max-width: min(calc(96vw / var(--zoom, 1)), 1400px); max-height: calc(94vh / var(--zoom, 1)); background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog.lightbox::backdrop { background: rgba(17,24,39,.56); backdrop-filter: blur(2px); }
dialog.lightbox img { display: block; max-width: calc(96vw / var(--zoom, 1)); max-height: calc(84vh / var(--zoom, 1)); width: auto; height: auto; margin: 0 auto; background: var(--bg-2); }
dialog.lightbox .lb-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(17,24,39,.72); color: #fff; padding: 0; cursor: pointer; display: grid; place-items: center; line-height: 0; } dialog.lightbox .lb-close svg { display: block; }
dialog.lightbox .lb-close:hover { background: var(--accent); }
dialog.lightbox .lb-nav { position: absolute; top: calc(50% - 44px); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(17,24,39,.72); color: #fff; padding: 0; cursor: pointer; display: grid; place-items: center; }   /* the next picture one press away (the owner's click and zoom, 5 Oct); over the picture's edge, a thumb's 44 px */
dialog.lightbox .lb-prev { left: 8px; } dialog.lightbox .lb-next { right: 8px; } dialog.lightbox .lb-nav:hover, dialog.lightbox .lb-nav:focus-visible { background: var(--accent); } dialog.lightbox .lb-nav[hidden] { display: none; }
dialog.lightbox .lb-end { display: inline-flex; gap: 12px; align-items: baseline; white-space: nowrap; }
dialog.lightbox .lb-foot { margin: 0; padding: 8px 14px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) { dialog.lightbox[open] { animation: lbin .18s ease-out; } @keyframes lbin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } }

/* discover: the URL box, the depth knob, site cards, and the per-site tiles */
.disc-hero { padding: 22px; }
.disc-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.disc-url { flex: 1 1 380px; margin: 0; } .disc-url input { font-size: 16.5px; padding: 11px 12px; }
.disc-depth { border: 0; padding: 0; margin: 16px 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.disc-depth legend { padding: 0; margin-bottom: 6px; }
.disc-depth label { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14.5px; margin: 0; cursor: pointer; }
.disc-depth label input { grid-row: 1 / span 2; margin: 0; } .disc-depth label b { font-size: 14.5px; } .disc-depth label span { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.disc-depth label.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .disc-depth label.soon { opacity: .7; cursor: default; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.disc-card { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); box-shadow: var(--shadow); }
.disc-card:hover { text-decoration: none; border-color: var(--accent); } .disc-card.unknown { border-style: dashed; }
.disc-name { font-weight: 600; font-size: 15.5px; } .disc-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-state { margin-top: 4px; font-size: 14px; } .disc-state b { font-size: 18px; }
.disc-bar { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; } .disc-bar i { display: block; height: 100%; background: var(--accent); }
.disc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 14px; }
.disc-tile { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.disc-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--bg-2); color: var(--muted); }
.disc-tile.found .disc-mark { background: var(--accent-soft); color: var(--accent-2); } .disc-tile.absent { opacity: .82; } .disc-tile.unsure .disc-mark { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.disc-body { display: grid; gap: 3px; } .disc-body b { font-size: 15px; } .disc-body .small { color: var(--ink-2); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 720px) { .disc-depth { grid-template-columns: 1fr; } }

/* discover: proposed tests */
.disc-look { display: inline-flex; gap: 8px; align-items: center; } .disc-look select { padding: 8px 10px; }
.props { display: grid; gap: 8px; }
.prop { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.prop.rejected { opacity: .7; } .prop.approved { border-color: var(--accent-soft); }
.prop-main { display: grid; gap: 3px; min-width: 0; } .prop-main b { font-size: 15px; } .prop-main .small { color: var(--ink-2); }
.prop-acts { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
@media (max-width: 720px) { .prop { flex-direction: column; align-items: stretch; } .prop-acts { justify-content: flex-end; } }

/* dashboard: right now */
.now .now-acts { display: flex; gap: 8px; align-items: center; }
.now .now-pause { position: relative; } .now .now-pause > summary { list-style: none; } .now .now-pause > summary::-webkit-details-marker { display: none; }
.now .now-pause-q { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-pop); width: max-content; max-width: min(320px, calc(calc(100vw / var(--zoom, 1)) - 32px)); }
.now .now-pause-q p { margin: 0 0 8px; }   /* the owner 00:33 UTC 7 Oct: Pause asks whether to stop the night running now */
.now-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.now-row:first-of-type { border-top: 0; }
.now-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1; min-width: 0; } .now-body .small { color: var(--ink-2); overflow-wrap: anywhere; } .now-body a { overflow-wrap: anywhere; }   /* an address has no place to break: it breaks anywhere rather than widen the page (333px at 320) */
.now-state { flex-shrink: 0; }
details.stopall { position: relative; } details.stopall summary { list-style: none; cursor: pointer; } details.stopall summary::-webkit-details-marker { display: none; }
details.stopall .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 300px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-2, 0 10px 30px rgba(0,0,0,.12)); }
details.stopall .menu p { margin: 0 0 10px; }
button.danger-fill { background: var(--red, #b3261e); color: var(--bg); border-color: transparent; }   /* the filled red of a real stop; button.danger stays the quiet red text */
/* "Right now" on a phone: the report's name and its line take the width, "Cancel" stands under them on a line of its own; the head's
   buttons wrap under the heading; the stop menu hangs inside the card, not from the button's right edge (it left the screen at 320px) */
@media (max-width: 720px) {
  .now { position: relative; } .now .row.head { flex-wrap: wrap; row-gap: 8px; } .now .now-acts { flex-wrap: wrap; }
  .now-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  .now-row > form { grid-column: 2; justify-self: start; }
  details.stopall { position: static; } details.stopall .menu { left: 12px; right: 12px; top: auto; width: auto; margin-top: 6px; }
  .now button.small, .now details.stopall summary { min-height: 44px; }   /* a finger's height: they were 30 and 40 */
}
.now h2 .rec { display: inline-block; margin-right: 6px; vertical-align: middle; }
details.stopall summary { font: inherit; font-size: 13px; letter-spacing: 0; min-height: var(--ctl-s); display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--ink) 52%, transparent); border-radius: var(--r-s); background: var(--surface); color: var(--red); }   /* the red-text entry point of a stop (V2 #4) */
details.stopall summary:hover { background: var(--bg-2); }

/* sites: one quiet primary action per row, the rest behind ··· */
td.actions { white-space: nowrap; text-align: right; } td.actions > .inline, td.actions > details { vertical-align: middle; }
td.actions details.more { display: inline-block; margin-left: 6px; } td.actions details.more > summary { height: var(--ctl-s); min-width: 30px; padding: 0 7px; }
details.more .menu a.button { display: block; width: 100%; text-align: left; box-sizing: border-box; }
details.more .menu button.ghost, details.more .menu a.button.ghost { text-decoration: none; color: var(--ink); padding: 8px 10px; border-radius: var(--r-s); min-height: 0; }
details.more .menu button.ghost:hover, details.more .menu a.button.ghost:hover { background: var(--bg-2); }
details.more .menu button.ghost.danger { color: var(--red); }

.tablewrap:has(details.more[open]) { overflow: visible; }
.tablewrap.can-scroll:not(:has(details.more[open])) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }   /* only while it can scroll: the last column fades so the rest is discoverable (V5 #9) */
details.more .menu a.button.ghost { border-color: transparent; background: transparent; font-weight: 400; }

/* live view: CCTV-style cameras, dark on purpose, one per browser; click one to follow it in the pop-up */
.cams { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.cam { cursor: zoom-in; background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.cam:hover, .cam:focus-visible { border-color: var(--accent); outline: none; }
.cam .cam-pic { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--media-bg); }
.cam .cam-pic img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top; }
.cam.nosig img { visibility: hidden; }
.cam .nosig-word { position: absolute; inset: 0; display: none; place-items: center; font: 600 12px var(--mono); letter-spacing: .22em; color: var(--muted); }
.cam.nosig .nosig-word { display: grid; }
.cam .cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 5px 9px; font: 12px var(--mono); color: #fff; background: linear-gradient(transparent, rgba(17,24,39,.72)); }
.cam figcaption .cam-bar { position: static; padding: 0 0 2px; background: none; color: var(--ink); }   /* the same line at the top of the caption, once engineer2 moves it there */
.cam .led, .camdlg .led { width: 7px; height: 7px; border-radius: 50%; background: #56637a; flex: none; } .cam .led { background: var(--line-3); }
.cam.on .led, .camdlg.on .led { background: var(--accent-on-dark); box-shadow: none; }   /* a camera's light: the accent on the bar's dark foot, steady; green means "passed" (report loop-00 FIX 6, c2-motion FIX 2) */
.cam .led.beat, .camdlg .led.beat { animation: live-beat-dark 600ms cubic-bezier(.2,.7,.2,1) 1; } @keyframes live-beat-dark { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-on-dark) 55%, transparent); } to { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .cam .led.beat, .camdlg .led.beat, .win .dot.beat { animation: none; } }
.cam .cam-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cam .cam-age { margin-left: auto; color: var(--muted); flex: none; } .cam .cam-pic .cam-age { color: rgba(255,255,255,.8); }
.cam figcaption { padding: 8px 10px; display: grid; gap: 2px; } .cam .cam-scn { color: var(--accent); font-weight: 600; font-size: 13px; } .cam .cam-step { color: var(--ink-2); font-style: normal; font-size: 12.5px; line-height: 1.35; }
.cam.done { opacity: .75; } .cam.done .cam-scn { color: var(--muted); }
dialog.camdlg { width: min(calc(96vw / var(--zoom, 1)), 1400px); max-height: calc(94vh / var(--zoom, 1)); padding: 0; border: 1px solid #1d2a25; border-radius: 12px; background: #0b0f0e; color: #cfe0d8; overflow: hidden; }
dialog.camdlg[open] { display: flex; flex-direction: column; } dialog.camdlg::backdrop { background: rgba(17,24,39,.56); backdrop-filter: blur(2px); }
.cd-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 14px; font: 13px var(--mono); border-bottom: 1px solid #1d2a25; }
.cd-head b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-age { margin-left: auto; color: #8fa39a; white-space: nowrap; flex: none; }
.cd-nav { display: flex; gap: 4px; } .camdlg .ib { background: #14201b; color: #9fb3aa; border: 1px solid #6b7a74; border-radius: 6px; padding: 2px 9px; font-size: 15px; line-height: 1.3; cursor: pointer; } .camdlg .ib:hover { color: #fff; border-color: var(--accent); }
/* (the pop-ups' layout, the picture and what stands under it: see "the two dialogs" below) */

/* replay: a check picture by picture, played like a film */
.rp-bar { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 8px 14px 2px; }
.rp-bar .ib { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 18px; }
.rp-play { display: inline-grid; place-items: center; width: 34px; padding: 2px 0 !important; }
.rp-bar .rp-play { width: 46px; height: 46px; padding: 0 !important; background: #7aa3d6; color: #0b0f0e; border-color: #7aa3d6; }
.rp-bar .rp-play:hover, .rp-bar .rp-play:focus-visible { background: #9dbde6; border-color: #9dbde6; color: #0b0f0e; }
.rp-seek-row { display: flex; align-items: center; gap: 12px; padding: 0 14px; } .rp-seek-row .rp-seek-wrap { flex: 1; padding: 0; }
.rp-pos { flex: none; font: 12px var(--mono); color: #8fa39a; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.rp-full { flex: none; font: 12.5px var(--sans, inherit); color: #9dbde6; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .rp-full:hover { color: #fff; } .rp-full[hidden] { display: none; } .rp-full:focus-visible { outline: 2px solid #7aa3d6; outline-offset: 3px; border-radius: 3px; }
.rp-play svg { display: block; } .rp-play .i-pause { display: none; } .rp-play.on .i-play { display: none; } .rp-play.on .i-pause { display: block; }
.rp-play.on { color: #0b0f0e !important; background: #7aa3d6 !important; border-color: #7aa3d6 !important; }
.rp-seek-wrap { display: block; margin: 0; padding: 6px 14px 0; }
#rp-seek { display: block; width: 100%; margin: 0; padding: 0; height: 18px; accent-color: #7aa3d6; background: transparent; border: 0; box-shadow: none; cursor: pointer; }
#rp-seek:disabled { opacity: .4; cursor: default; } #rp-seek:focus-visible { outline: 2px solid #7aa3d6; outline-offset: 2px; }
dialog.replay img { transition: opacity .15s; } dialog.replay img.cd-wait { opacity: .4; } dialog.replay.rp-row img.cd-wait { opacity: .25; }
@media (prefers-reduced-motion: reduce) { dialog.replay img { transition: none; } }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the hero's app window: as wide as the sections below, light like the product, with a dark title bar and dark screenshot frames for contrast */


/* the tools under a failure: the browser's log, every step, site history — small buttons, not bare links */
.tools.small { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; align-items: center; }
.tools.small a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; text-decoration: none; transition: border-color .15s, background .15s; }
.tools.small a:hover { border-color: var(--accent); background: var(--bg-2); color: var(--ink); text-decoration: none; }
.tools.small a svg { width: 13px; height: 13px; color: var(--accent); flex: none; }
.failcard .tools.small { border-top: 0; padding-top: 0; }
@media (pointer: coarse) { .tools.small a, .rp-test { padding: 9px 13px; } }
/* the two dialogs (the video): the picture takes the width at the frame's own ratio (the script sizes the dialog to it, so there is
   no band above or under a picture); under it the controls, then the check: its name and verdict, what it looked for, its steps in a
   row one can press, the reason. A check that kept no picture is one sentence with its verdict, at that size. Dark in both themes. */
dialog.camdlg { width: min(calc(96vw / var(--zoom, 1)), 1400px); } dialog.camdlg.cd-bare { width: min(calc(96vw / var(--zoom, 1)), 560px); }
.cd-body { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.cd-film { flex: none; display: flex; flex-direction: column; align-items: center; background: #000; } .cd-film[hidden] { display: none; }
/* the action colour of the dialogs is a blue (crowd2's ruling "theme-default"): mint on a failed check's controls said "passed" */
.cd-film img { display: block; max-width: 100%; height: auto; background: #000; object-fit: scale-down; }   /* a picture smaller than the box stands in its middle at its own size, never enlarged */ .cd-film img[hidden] { display: none; }
.rp-frames { display: flex; gap: 6px; justify-content: center; max-width: 100%; }
dialog.rp-row .rp-frames img { opacity: .45; cursor: pointer; } dialog.rp-row .rp-frames img.cd-cur { opacity: 1; cursor: default; outline: 2px solid #7aa3d6; outline-offset: -2px; }
.cd-film .rp-controls { align-self: stretch; background: #0b0f0e; padding-bottom: 6px; } .cd-film.cd-single .rp-controls { display: none; }
.cd-held { align-self: stretch; margin: 0; padding: 8px 14px; background: #0b0f0e; font-size: 13.5px; color: #b4c6bd; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .cd-held[hidden] { display: none; }
.cd-held .ib, .rp-play-word { font: 600 13.5px var(--sans, inherit); }
.camdlg .cd-held .ib { padding: 6px 14px; background: #7aa3d6; color: #0b0f0e; border-color: #7aa3d6; min-height: 0; }
.rp-bar .rp-play:has(.rp-play-word:not([hidden])) { width: auto; border-radius: 999px; padding: 0 18px 0 14px !important; display: inline-flex; gap: 8px; align-items: center; }
/* dark objects (crowd2's ruling, light only): the film band, its controls and the play disc are MEANT dark, a player band on a light page;
   what stands under the film (the check's name, verdict, goal, steps, reason, the live list) is the page's own, light */
.cd-info { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; gap: 8px; }
.cd-check { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 16px; color: var(--ink); } .cd-check b { font-weight: 600; }
.cd-verdict { font: 600 12px var(--mono); letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); } .cd-verdict:empty { display: none; }
.cd-verdict.cd-ok { background: var(--green-bg); color: var(--green); } .cd-verdict.cd-bad { background: var(--red-bg); color: var(--red); } .cd-verdict.cd-off { background: var(--amber-bg); color: var(--amber); }   /* "not checked" and "stopped by the site" are amber, never grey and never red */
.cd-when { font: 12px var(--mono); color: var(--muted); } .cd-when:empty { display: none; }
.cd-info .cd-goal { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); } .cd-info .cd-goal:empty { display: none; }
.cd-none { margin: 0; font-size: 15px; color: var(--ink); } .cd-none[hidden] { display: none; }
.cd-why { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } .cd-info:has(.cd-bad) .cd-why { border-left: 3px solid var(--red-mark); padding-left: 10px; }   /* the reason is said in the text's colour: red under a picture it does not describe read as that picture's fault */ .cd-why:empty { display: none; }
.cd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .cd-steps[hidden] { display: none; }
.cd-steps li { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.cd-steps li button { display: inline-flex; gap: 7px; align-items: baseline; min-height: 0; padding: 6px 12px 6px 9px; border: 1px solid var(--line-3); border-radius: 999px; box-shadow: none; background: var(--surface); color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.cd-steps li button:hover { color: var(--ink); border-color: var(--accent); background: var(--surface); } .cd-steps li button:active { transform: none; }
.cd-steps li button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cd-steps li .cd-n { font: 11.5px var(--mono); color: var(--muted); }
.cd-steps li[aria-current] button { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .cd-steps li[aria-current] button .cd-n { color: #fff; }
/* the live pop-up's list: the site's checks in order, one a line; done with its mark and seconds, the one running marked, the rest to come */
.cd-done { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 2px 14px; }
@media (max-width: 720px) { .cd-done { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; } .cd-done li { padding: 5px 4px; gap: 6px; font-size: 13px; } }
.cd-done li { display: flex; gap: 10px; align-items: baseline; padding: 5px 8px; border-radius: 6px; }
.cd-done li > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; } .cd-done li .cd-sec { flex: none; font: 11.5px var(--mono); color: var(--muted); }
.cd-done li .cd-n { flex: none; min-width: 1.2em; text-align: center; }
.cd-done li.cd-ok .cd-n { color: var(--green); } .cd-done li.cd-bad .cd-n { color: var(--red-mark); } .cd-done li.cd-bad { color: var(--ink); } .cd-done li.cd-next { color: var(--muted); } .cd-done li.cd-more { color: var(--muted); font-size: 13px; padding: 5px 8px 5px 34px; }
.cd-done li[aria-current] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); } .cd-done li[aria-current] .cd-n, .cd-done li[aria-current] .cd-sec { color: var(--accent); }
/* a tall picture in a wide window: the check beside it, as high as the picture's column (a long list scrolls inside); the controls
   under the picture. The script gives the column's width (the picture's) as --film */
dialog.camdlg.cd-beside .cd-body { display: block; position: relative; overflow: hidden; } dialog.camdlg.cd-beside .cd-film { width: var(--film); }
dialog.camdlg.cd-beside .cd-info { position: absolute; inset: 0 0 0 var(--film); border-top: 0; border-left: 1px solid var(--line); align-content: start; overflow-y: auto; }
dialog.camdlg.cd-beside .cd-held { flex-direction: column; align-items: flex-start; gap: 8px; }
dialog.camdlg.cd-beside .cd-done { grid-template-columns: 1fr; } dialog.camdlg.cd-beside .rp-seek-row { padding: 0 10px; } dialog.camdlg.cd-beside .rp-bar { gap: 8px; }
dialog.camdlg.cd-beside .rp-bar .rp-play:has(.rp-play-word:not([hidden])) { padding: 0 12px 0 10px !important; }
@media (pointer: coarse) { .cd-steps li button { padding: 10px 14px 10px 11px; } }
@media (max-width: 720px) { .cd-info { padding: 10px 12px 14px; } .cd-check { font-size: 15px; } }

.kindrow { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .kindrow p { margin: 0 0 6px; } .kindform { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: 6px; } .kindform label.inl { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .kindform label.inl { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* the Tests page's library: one collapsible group per kind of site, the goal under each test's name */
details.lib { border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; margin: 0 0 10px; background: var(--bg-2); }
details.lib > summary { cursor: pointer; padding: 6px 0; } details.lib[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
details.lib .goal { max-width: 60ch; line-height: 1.35; margin-top: 2px; } details.lib td { vertical-align: top; }
/* the Checks page's head: the catalogue's count, its two parts, and the kinds with theirs (the owner, 2026-09-29: "here still write 18of19") */
.catalogue-count { margin: -6px 0 2px; font-size: 17px; color: var(--ink-2); } .catalogue-count b { font-size: 24px; letter-spacing: -.02em; color: var(--ink); margin-right: 2px; }
.catalogue-parts { margin: 0 0 14px; font-size: 14px; } .catalogue-parts a { color: inherit; }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 0 0 var(--group); }
.kinds a { min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-size: 14px; text-decoration: none; }
.kinds a:hover { border-color: var(--line-2); text-decoration: none; } .kinds a b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kinds a span { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .kinds a.off b { color: var(--muted); }
/* the Checks page on a phone: each check is a row of its own, the box at its left and its name, what it needs and its kind one under
   the other; the table was 640px wide in a 342px card and "Kind" stood off the screen (scroll-2 #14) */
@media (max-width: 720px) {
  form[action="/tests"] .tablewrap table { min-width: 0; } form[action="/tests"] .tablewrap::after { content: none; }
  form[action="/tests"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  form[action="/tests"] tbody tr { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 9px 0; border-bottom: 1px solid var(--line); }
  form[action="/tests"] tbody tr:last-child { border-bottom: 0; }
  form[action="/tests"] tbody td { display: block; grid-column: 2; border: 0; padding: 1px 0; }
  form[action="/tests"] tbody td:first-child { grid-column: 1; grid-row: 1 / span 5; padding-top: 1px; }
  form[action="/tests"] tbody td.none, form[action="/tests"] tbody td.actions:empty { display: none; }
  form[action="/tests"] tbody td .pill { margin-top: 3px; }
  /* the whole row is the label: the box is 16px and the name 20px tall, a finger needs 44 (a row is 60 or more) */
  form[action="/tests"] tbody tr { position: relative; } form[action="/tests"] tbody td label.inl::after { content: ""; position: absolute; inset: 0; }
  form[action="/tests"] tbody td.actions a { position: relative; z-index: 1; display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.kind-at { display: block; }
@media (max-width: 480px) { .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kinds a { padding: 7px 10px; font-size: 13.5px; } .kinds a b { white-space: normal; overflow: visible; } }

/* the Launch box: one address, one button — the product starts here, on the front page, the Overview and the Sites page */
form.launch { margin: 0; min-width: 0; }
.launch-row { display: flex; align-items: stretch; gap: 8px; position: relative; }
.launch-row input { margin: 0; flex: 1; min-width: 0; padding-left: 38px; font-size: 15.5px; }
.launch-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; place-items: center; pointer-events: none; }
.launch-row button { flex-shrink: 0; }
form.launch.big .launch-row { max-width: 680px; margin: 0 auto; }
form.launch.big .launch-row input { font-size: 18px; padding: 13px 14px 13px 46px; border-radius: 10px; }
form.launch.big .launch-icon { left: 15px; }
.launch-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.hero form.launch { margin: 4px auto 10px; } .hero .launch-hint { text-align: center; font-size: 14px; }
@media (max-width: 640px) { .hero form.launch { margin-bottom: 14px; } }
.hero.front form.launch { width: min(100%, 680px); }   /* the box is as wide as the lead above it: at the input's own width (494px) it was the narrowest thing under the headline (hero debate, change 1) */
.launch-card { padding: 22px; } .launch-card.first { text-align: center; padding: 34px 22px 30px; } .launch-card.first h2 { font-size: 22px; }
/* the add-sites form: a label, a textarea of addresses and its button on one row, the hint under (O-36, 2026-09-30) */
.addsites { margin: 0; } .addsites label { display: block; font-size: 13.5px; color: var(--ink-2); margin: 0 0 2px; }
.addsites-row { display: flex; gap: 8px; align-items: stretch; } .addsites textarea { margin: 0; flex: 1; min-height: 0; font-family: var(--sans); font-size: 15px; line-height: 1.4; resize: vertical; } .addsites-row button { flex: none; align-self: flex-end; }
.addsites .launch-hint { margin-bottom: 0; } .launch-card.first .addsites { text-align: left; max-width: 680px; margin: 0 auto; } .card > .addsites { margin-bottom: 16px; }
@media (max-width: 640px) { .addsites-row { flex-direction: column; } .addsites-row button { align-self: stretch; justify-content: center; min-height: 44px; } }   /* a thumb's height (the look tests, 2026-09-30) */
.card .row.head form.launch { min-width: min(100%, 360px); } .card .row.head .launch-row input { font-size: 14.5px; padding: 7px 10px 7px 34px; }
@media (max-width: 640px) { form.launch.big .launch-row { flex-direction: column; } form.launch.big .launch-row button { width: 100%; justify-content: center; } .card .row.head form.launch { min-width: 100%; } }

/* the site page: one tile per check, what the look said about it, whether it is on */
.chk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; margin: 10px 0 12px; }
.chk-tile { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.chk-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--bg-2); color: var(--muted); margin-top: 1px; }
.chk-tile.found .chk-mark, .chk-tile.own .chk-mark { background: var(--accent-soft); color: var(--accent-2); }
.chk-tile.unsure .chk-mark { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.chk-tile.absent .chk-mark { background: var(--bg-2); } .chk-tile.off .chk-mark, .chk-tile.absent .chk-mark { color: var(--muted); }   /* no dimming of words: at .78 and .7 they measured 1.92 to 4.39 (light-live, 4) */
.chk-tile.off { border-style: dashed; }
.chk-body { display: grid; gap: 3px; min-width: 0; } .chk-body label.inl { display: inline-flex; gap: 7px; align-items: center; } .chk-body label.inl input { margin: 0; }
.chk-body .small { color: var(--ink-2); line-height: 1.4; } .chk-body .pill { vertical-align: middle; }
.chk-tile > button { align-self: center; white-space: nowrap; }
label.check.inherit { margin: 10px 0 2px; font-size: 14px; }
.kindline { margin: 6px 0 4px; line-height: 1.7; } .kindform { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-left: 6px; align-items: center; }
.card.next-step { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
#checks h3 { margin-top: 18px; }

/* the client's report: an unbranded one invites the reader to keep it going */
.share header.top { padding-inline: max(20px, calc((100% - 1192px) / 2)); }   /* the client's report sits on the content grid like every public page */
.share header .brand, .share footer { font-family: var(--sans); }              /* words, not data: the sans (round-2 L8 ruling #16) */
.share header .brand .org { color: var(--muted); font-weight: 400; }
.share main { padding-bottom: 40px; } .share main > p.lead { max-width: 68ch; }
.share header.top .claim-top { margin-left: auto; }
.claim { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.claim .kicker { display: inline-block; margin: 0 0 8px; font: 600 12px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.claim h2 { font-size: 22px; letter-spacing: -.02em; } .claim p { max-width: 68ch; text-wrap: pretty; }
.claim-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 0 !important; }
@media (max-width: 640px) { .share header.top .claim-top { display: none; } }

/* pricing: the agency that got a report from us */
.agency-pitch { margin: var(--group) 0; }
.agency-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .agency-cols b { display: block; margin-bottom: 4px; } .agency-cols p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.agency-cols i { font-style: normal; font-weight: 600; color: var(--ink); }
.agency-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .agency-cols, .agency-cols.two { grid-template-columns: 1fr; } }
.tile b small { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; font-family: var(--sans); }   /* "· 06:00 your time" beside the hour, not in the hour's size */
.chk-tile.off .chk-mark { background: transparent; border: 1px dashed var(--line-3); }
.launch-field { position: relative; flex: 1; display: flex; min-width: 0; }   /* the icon sits in the field, not in the row: on a phone the row stacks */

/* v0.6: the front door — one oversized address field, the live report page (a slab of glass showing the agent's browser),
   the three-step strip that replaced the animated flow. Same palette, same two faces; the boldness is in the field and the
   slab, everything around them stays quiet. */
.hero.front { padding: 56px 0 28px; }
@media (max-width: 640px) { main:has(> .hero.front) { padding-top: 0; } .hero.front { padding-top: 74px; } }   /* a phone: the hero's ground starts under the header, not 18px below it; the headline stays where it was (the hero debate, change 12) */
.hero.front h1 { max-width: 860px; color: var(--accent); } .hero.front h1 .h-ink { color: var(--accent-2); }   /* the promise in the soft slate ink, its last word in the full ink (the owner, 2026-09-30) */
form.launch.big .launch-row { max-width: 680px; }
.launch-field { position: relative; display: flex; align-items: stretch; flex: 1; min-width: 0; }
.launch-field input { margin: 0; flex: 1; min-width: 0; padding-left: 40px; }
.launch-row button { display: inline-flex; align-items: center; gap: 6px; }
.launch-arrow { transition: transform .18s ease; } form.launch.big button:hover .launch-arrow { transform: translateX(2px); }
form.launch.big .launch-field { background: var(--launch-bg, var(--surface)); border: 1px solid var(--line-3); border-radius: 18px; padding: 6px 6px 6px 0;
  box-shadow: var(--launch-lift, 0 1px 2px rgba(17,24,39,.05), 0 24px 50px -28px rgba(17,24,39,.35)); transition: border-color .15s, box-shadow .15s; }   /* an edge that can be seen at rest (--line-3), a body and a lift at night through the theme's tokens (hero debate, changes 2 and 3) */
form.launch.big .launch-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring), var(--launch-focus-lift, 0 24px 50px -28px rgba(17,24,39,.35)); }
form.launch.big .launch-field:hover:not(:focus-within) { border-color: var(--ink-2); }
.launch-field:focus-within .launch-icon { color: var(--accent); }
form.launch.big[data-state=ok] .launch-field { border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2)); }
form.launch.big[data-state=bad] .launch-field { border-color: var(--red); }
form.launch.big .launch-field input { border: 0; box-shadow: none; background: transparent; font-size: 20px; padding: 14px 12px 14px 50px; border-radius: 14px; }
form.launch.big .launch-field input:focus { box-shadow: none; }
form.launch.big .launch-field input::placeholder { color: var(--muted); }
form.launch.big .launch-icon { left: 18px; color: var(--ink-2); }
form.launch.big button.big { border-radius: 13px; padding: 12px 20px; font-size: 17px; }
form.launch.busy .launch-field { background-image: linear-gradient(90deg, transparent, var(--accent-soft), transparent); background-size: 200% 100%; animation: launchsweep 1.2s linear infinite; }
@keyframes launchsweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
form.launch.busy button { opacity: .85; }
.launch-state { margin: 8px 0 0; min-height: 1.3em; font-size: 14px; color: var(--muted); }
form.launch[data-state=ok] .launch-state { color: var(--accent); } form.launch[data-state=bad] .launch-state { color: var(--red); }
form.launch[data-state=closed] .launch-state { color: var(--amber-2, var(--amber)); } form.launch.big[data-state=closed] .launch-field { border-color: var(--amber); }   /* closed mode, answered as you type: not a fault of the address, so amber, not red (first-touch #1) */
.hero .launch-state { text-align: center; margin: 12px 0 0; min-height: 22px; } .hero .launch-state:empty { display: none; }   /* under the switch; an empty line takes no room (it set the switch 36px off the box), and a line that speaks takes the ticks' place */
.launch-hint .tick { display: inline-flex; align-items: center; gap: 6px; margin: 0 9px; font-size: 14px; }
.launch-hint .tick::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line-3); }
.hero.front .launch-hint { margin-top: 16px; }   /* the pick's hint → the ticks: 16 for 12 */
@media (max-width: 640px) { .hero.front .launch-hint { margin-top: 18px; } }
@media (max-width: 640px) {
  form.launch.big .launch-field { flex-wrap: wrap; padding: 6px; border-radius: 16px; }
  form.launch.big .launch-field input { width: 100%; font-size: 17px; padding-left: 44px; }
  form.launch.big button.big { width: 100%; justify-content: center; }
  form.launch.big .launch-icon { left: 18px; top: 30px; }
  .launch-hint .tick { margin: 2px 7px; }
}

/* the next ten minutes */
.next10 { margin: 30px 0 0; }
.next-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; counter-reset: next; }
.next-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.next-steps h3 { margin: 4px 0 0; font-size: 15.5px; color: var(--ink); }
.next-steps h3::before { counter-increment: next; content: counter(next); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-2); font: 600 12px/1 var(--mono); vertical-align: 2px; }
.next-steps p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.next-vis { min-height: 150px; display: grid; align-items: center; justify-items: center; background: var(--bg-2); border-radius: 10px; padding: 12px; }
.next-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 250px; display: grid; gap: 5px; font-size: 13px; }
.next-list li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; padding: 6px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.next-list li > span:last-child { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.next-list li.off { color: var(--muted); } .next-list li.now > span:last-child { color: var(--muted); }   /* the accent is on the arc; the word is a label like its siblings (round-3 L4 #15) */
/* the settle rows and the report row wear the live page's marks: found is the accent ring, left out a bar, checking the arc, failed the red disc */
.st { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-3); display: inline-grid; place-items: center; font-size: 10px; flex: none; }
.next-list li.ok .st { border-color: var(--accent); background: var(--accent); color: var(--accent-2); }   /* "on this site": a filled accent dot, no ✓ — the ✓ is "passed" alone (critic-lead #10); the fill keeps 3:1 and more against its ground */
.next-list li.off .st::after { content: ""; width: 8px; height: 1.5px; background: currentColor; }
.next-list li.now .st { border-color: var(--accent); border-top-color: transparent; animation: none; } .story-vis.in .next-list li.now .st, .slide:not(.armed) .next-list li.now .st { animation: spin 1.2s linear 4; }   /* it turns when the slide is on screen (c2-motion FIX 7), four turns and it stands */   /* a picture of a run, not a run: four turns and it stands (hunt A-1 F16, WCAG 2.2.2) */
.st.fail { border-color: var(--red); background: var(--red); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .next-list li.now .st { animation: none; } }
.next-report { width: 100%; max-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 13px; display: grid; gap: 8px; }
.nr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; } .nr-head b { margin-right: auto; } .nr-pills { display: inline-flex; gap: 6px; } .mpill { white-space: nowrap; }
.nr-row { display: flex; gap: 8px; padding: 8px; border-radius: 8px; align-items: flex-start; } .nr-row .st { margin-top: 2px; } .nr-row.bad { background: var(--red-bg); }  .nr-row > div span { color: var(--ink-2); font-size: 12px; } .nr-row .st { font-size: 10px; line-height: 1; }   /* the text rule is scoped to the text, the disc keeps its own size (round-3 L4 #7) */

/* the slab: a tablet-shaped frame with no brand marks, the agent's browser on its screen */
.pad { margin: 0; background: none; border-radius: 0; padding: 0; box-shadow: none; position: relative; }   /* the bezel is the screen's own border below: no sheen, no tablet dress (dark objects, 7) */
.pad::before { content: ""; position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #0b0e0d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.pad:not(.phone)::before { display: none; }   /* no camera dot on the desktop slab: it said "tablet" (L4 ruling #7) */
/* the screen is never a black box: with no picture yet it shows a drawn page (a bar, a few blocks) in the page's own greys, the way a
   browser shows a page before its pictures arrive; a real frame covers it the moment one lands (the user, 2026-09-29) */
.pad-screen { position: relative; aspect-ratio: 1920 / 548; background: var(--bg-2); border: 12px solid #1b201e; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(17,24,39,.55); }
.pad-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(var(--surface), var(--surface)) 0 0 / 100% 10% no-repeat,
  linear-gradient(var(--line-2), var(--line-2)) 5% 3.5% / 18% 3% no-repeat,
  linear-gradient(var(--line), var(--line)) 5% 19% / 90% 28% no-repeat,
  linear-gradient(var(--line), var(--line)) 5% 55% / 42% 30% no-repeat,
  linear-gradient(var(--line), var(--line)) 53% 55% / 42% 30% no-repeat; }
.pad.phone .pad-screen::before { background:
  linear-gradient(var(--surface), var(--surface)) 0 0 / 100% 8% no-repeat,
  linear-gradient(var(--line-2), var(--line-2)) 8% 2.5% / 30% 2.5% no-repeat,
  linear-gradient(var(--line), var(--line)) 8% 14% / 84% 26% no-repeat,
  linear-gradient(var(--line), var(--line)) 8% 46% / 84% 20% no-repeat,
  linear-gradient(var(--line), var(--line)) 8% 72% / 84% 20% no-repeat; }
.pad-screen .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .35s ease; }
.pad-screen .frame.show { opacity: 1; }
.pics-hold { margin: 6px 0 0; font-size: 13.5px; } .pics-hold button.linkish { box-shadow: none; }   /* Pause / Play the pictures: one text button under the slabs, left, in the action colour (hunt A-1, WCAG 2.2.2; two-devices ruling 1.8) */
.held .pad-live::before, .held .pad-idle .pulse { animation: none; }   /* held pictures: the LIVE dot and the waiting pulse stand still too */
.pad-screen .frame:not([src]) { visibility: hidden; }   /* an image with no picture draws a broken-image outline otherwise */
.pad.over .frame.show { filter: grayscale(.6); opacity: .85; }   /* the run is over: the last screen stays, dimmed */
.pad-idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ink-2); font-size: 14px; text-align: center; padding: 20px; }
.pad-idle > span:last-child { background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 6px 10px; border-radius: 8px; max-width: 34ch; }
.pad-idle .pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: padpulse 2s ease-out infinite; }
@keyframes padpulse { to { box-shadow: 0 0 0 16px transparent; } }
/* the LIVE badge lives in the caption strip, never over the merchant's own pixels (L5 ruling #14); its dot is the one heartbeat while a browser is open */
.pad-live { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; color: var(--ink-2); font: 600 11px/1.4 var(--mono); letter-spacing: .1em; flex: none; }
.pad-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: live-ring 2s cubic-bezier(.2,.7,.2,1) infinite; }
.pad figcaption { display: flex; align-items: baseline; gap: 10px; padding: 12px 4px 0; color: var(--ink); font-size: 13.5px; min-height: 30px; } .pad figcaption b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .pad figcaption span:not(.pad-live) { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; flex: none; margin-left: auto; }

/* the live report page */
.livepage { max-width: 1160px; margin: 0 auto; }
.live-head { margin: 8px 0 22px; }
.live-kicker { margin: 0 0 6px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-note { color: var(--red); font-family: var(--sans); letter-spacing: 0; }
.live-kicker .live-clock { margin-left: auto; font-size: 18px; letter-spacing: 0; }
.rec.off { animation: none; background: var(--muted); box-shadow: none; }
.live-head h1 { margin: 0; font-size: clamp(24px, calc(3.4vw / var(--zoom, 1)), 34px); letter-spacing: -.025em; display: block; }
.live-clock { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.live-bar { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 14px 0 8px; border: 1px solid var(--line); }
.live-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--t-settle) ease; }
.live-counts { margin: 0; display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 6px 22px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-counts.over { display: block; } .live-counts.over > span { display: inline; } .live-counts.over > span:not([hidden]) ~ span:not([hidden])::before { content: "· "; margin: 0 4px 0 6px; }   /* between two counts that show, never before the first (the hidden "found" cell used to earn the first one a dot) */   /* over: one sentence that wraps by words, never an orphan cell (round-2 L10 ruling #18) */
.live-counts b { color: var(--ink); font-size: 15px; margin-right: 4px; } .live-counts .ok:not(.zero) b { color: var(--green); } .live-counts .bad:not(.zero) b { color: var(--red); }   /* a zero is not a verdict */
.live-counts .bump b { animation: bump .4s ease; } @keyframes bump { from { color: var(--accent); } }
.live-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.live-grid:has(> .live-list[hidden]) { grid-template-columns: minmax(0, 640px); }   /* blocked: the one action alone, no empty column */
.stage { min-width: 0; } .live-list { min-width: 0; }
@media (min-width: 901px) { .stage { position: sticky; top: 70px; align-self: start; } .to-claim { display: none; } }   /* the stage (proof, slab, the one action) sticks beside the long list (round-2 L1 ruling #7) */
@media (max-width: 900px) { .stage { display: contents; } .live-list { order: 4; } .stage-claim { order: 5; } }   /* on a phone the action follows the list; the proof carries an anchor to it */
.stage .proof { margin: 0 0 22px; padding: 0; border-top: 0; }
.to-claim { margin: 10px 0 0; font-size: 13.5px; } .stage-claim > .card.claim { margin-top: 22px; } .stage-claim .claim-line { margin-top: 18px; }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } }
.live-list h2 { margin: 4px 0 10px; }
.checks { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }   /* one card, hairlines between the rows (round-2 L10 ruling #9) */
.chkrow { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); font-size: 14.5px; }
.checks > li + li { border-top: 1px solid var(--line); }
.checks.folded:not(.show-absent) > .chkrow.absent, .checks.folded:not(.show-notrun) > .chkrow.notrun { display: none; }
.checks li.fold { padding: 8px 12px; font-size: 13.5px; color: var(--muted); } .checks li.fold button { display: inline; padding: 0; font-size: inherit; color: inherit; }   /* a sentence, not a flex row: the button's gap ate the space before "show" */ .checks li.fold .n { font-weight: 600; color: var(--ink-2); }
.chkrow.in { animation: rowin .35s ease both; } @keyframes rowin { from { opacity: 0; transform: translateY(4px); } }
.chkrow .st { -webkit-mask: none; mask: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-3); display: grid; place-items: center; font-size: 10px; }
.chkrow.checking .st { border-color: var(--accent); border-top-color: transparent; animation: spin 1.2s linear infinite; }   /* checking now is activity, in the accent; amber is kept for attention (round-2 L10 ruling #7) */
@keyframes spin { to { transform: rotate(360deg); } }
/* found is not passed: a check the site offers wears the accent-soft ring, only a pass wears the green (round 1, L2 #4 / L8 ruling #12) */
.chkrow.found .st { border-color: var(--accent); background: var(--accent); color: var(--accent-2); }   /* "on this site": a filled accent dot, no ✓ — the ✓ is "passed" alone (design-critic 23:08) */
.chkrow.pass .st { border-color: var(--green); background: var(--green); color: var(--bg); } .chkrow.pass .st::after { content: "✓"; font-weight: 700; }
.chkrow.fail .st { border-color: var(--red); background: var(--red); color: var(--bg); }
.chkrow.blocked .st { border-color: var(--amber-mark); background: var(--amber-mark); color: var(--amber); } .chkrow.blocked .sub { color: var(--amber); }
.chkrow.unsure .st { border-color: var(--amber-mark); color: var(--amber); } .chkrow.unsure .st::after { content: "?"; font-weight: 700; }
.chkrow.absent, .chkrow.skip, .chkrow.notrun { color: var(--muted); } .chkrow.notrun .st { border-style: dashed; }
.chkrow.absent .st { border-color: var(--line-3); position: relative; } .chkrow.absent .st::after { content: ""; width: 8px; height: 1.5px; background: currentColor; }   /* we looked and it is not there: a bar; we never looked: a dashed ring (round-2 L1 #5) */
.chkrow.absent b, .chkrow.notrun b { font-weight: 400; }
.chkrow .sub { display: block; color: var(--muted); font-size: 12.5px; } .chkrow.fail .sub { color: var(--red); } .chkrow.checking .sub { color: var(--accent-2); }
.chkrow .sec { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.claim { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.claim h2 { font-size: 20px; margin: 0 0 4px; } .claim p { margin: 0; max-width: 60ch; }
.claim-line { margin: 22px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-2); }   /* the quiet ask while nothing has landed yet */
.live-links { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .chkrow.in, .pad-idle .pulse, .live-counts .bump b, form.launch.busy .launch-field, .chkrow.checking .st, .pad-live::before, .rec::after, .pad.phone.in { animation: none !important; } .pad-screen .frame { transition: none; } }

/* the phone lane beside the slab (only when the run has a phone-shaped browser), and the kicker at phone width */
.frames { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: end; }
.frames.two { grid-template-columns: minmax(0, 1fr) 128px; }
.pad.tall { width: min(100%, 300px); margin-inline: auto; border-radius: 30px; } .pad.tall .pad-screen { aspect-ratio: 1920 / 548; border-radius: 18px; }   /* the only browser of the run is a phone (Launch box: Phone): a phone-shaped slab, not a phone screen cut to 4:3 */
.pad.phone { padding: 0; border-radius: 0; width: 128px; }
.pad.phone::before { width: 22px; height: 4px; border-radius: 2px; margin-left: -11px; top: 5px; }
.pad.phone .pad-screen { aspect-ratio: 1920 / 548; border-width: 6px; border-radius: 15px; box-shadow: 0 12px 24px -12px rgba(17,24,39,.25); }
.pad.phone.in { animation: rowin .35s ease both; }
.pad.phone figcaption { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 2px 0; font-size: 12px; } .pad.phone figcaption b { max-width: 100%; flex: none; } .pad.phone figcaption span:not(.pad-live) { margin-left: 0; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pad.phone figcaption b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .frames.two { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
  .pad.phone { width: 96px; } .pad.phone .pad-screen { border-radius: 10px; }
  .pad.phone figcaption { display: none; }
  .live-head h1 { font-size: 24px; } .live-kicker .live-clock { font-size: 16px; }
  .live-counts:not(.over) { grid-template-columns: 1fr 1fr; gap: 4px 12px; } .live-counts:not(.over) [data-c=notrun] { grid-column: 1 / -1; }   /* four counters as a 2×2 grid, never one orphan on its own line */
}

/* the report that sells: what the browser did last, rows that land with weight, the proof before the ask */
.ticker { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.ticker li { display: flex; gap: 6px; min-width: 0; opacity: .55; } .ticker li b { color: var(--ink-2); font-weight: 600; flex: none; }
.ticker li .step { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ticker li .step::before { content: "· "; }
.ticker li.now { opacity: 1; color: var(--ink-2); } .ticker li.now::before { content: "\25B8"; content: "\25B8" / ""; color: var(--accent); flex: none; }
.ticker li.in { animation: rowin var(--t-quick) ease both; }
.chkrow.landed { animation: landed .45s ease-out both; }   /* settles, never bounces (L2 ruling #21) */
@keyframes landed { 0% { transform: translateX(6px); box-shadow: 0 0 0 0 var(--green-bg); } 40% { box-shadow: 0 0 0 4px var(--green-bg); } 100% { transform: none; box-shadow: none; } }
.chkrow.fail.landed { animation-name: landedbad; } @keyframes landedbad { 0% { transform: translateX(6px); box-shadow: 0 0 0 0 var(--red-bg); } 40% { box-shadow: 0 0 0 4px var(--red-bg); } 100% { transform: none; box-shadow: none; } }
.chkrow.blocked.landed { animation-name: landedamb; } @keyframes landedamb { 0% { transform: translateX(6px); box-shadow: 0 0 0 0 var(--amber-bg); } 40% { box-shadow: 0 0 0 4px var(--amber-bg); } 100% { transform: none; box-shadow: none; } }
.proof { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.proof h2 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 4px; } .proof > p { margin: 0 0 14px; max-width: 64ch; }
.fails { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
@media (max-width: 720px) { .fails { grid-template-columns: 1fr; } }   /* one card to a row on a phone, as :462 meant (this rule came later and won): at 320 the page scrolled sideways 14px, at 700 the text beside the shot was 122px (A1-Z #1, A1-DZ) */
.fail-card { display: grid; grid-template-columns: 200px 1fr; background: var(--surface); border: 1px solid var(--line-2); border-top: 2px solid var(--red-mark); border-radius: 12px; overflow: hidden; }
.fail-card.in { animation: rowin .4s ease both; }
.fail-card.blocked { border-top-color: var(--amber-mark); } .fail-card.text-only { grid-template-columns: 1fr; }   /* a card with no picture is its words, full width, no empty grey box (design-critic 08:20) */ .fail-card.blocked b { color: var(--amber); }
.fail-card .shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .fail-card .shot:focus-visible::after { content: ""; position: absolute; inset: 2px; box-shadow: inset 0 0 0 2px var(--bg); pointer-events: none; }   /* the card clips its overflow, so the ring goes inside; the ring is the link's own outline, drawn over its picture, so whoever reads the focus finds it (THE OPEN DOOR: the showcase's done page, a.shot); the band in the page's ground under it keeps the ring apart from any screenshot; forced colours keep the outline */
.fail-card .shot { position: relative; display: block; background: var(--bg-2); border-right: 1px solid var(--line); min-height: 140px; max-height: 220px; overflow: hidden; cursor: zoom-in; } .fail-card .shot img { display: block; width: 100%; height: 100%; min-height: 140px; max-height: 220px; object-fit: cover; object-position: top; }
.fail-card .shot.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }
.fail-card > div { padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; } .fail-card b { color: var(--red); } .fail-card .muted { font-size: 12.5px; font-family: var(--mono); } .fail-card p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.fail-card .staged { justify-self: start; font-size: 12px; line-height: 18px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; }   /* the showcase's red is staged and says so, small and muted (TOP #1) */
#proof-sc { margin: -4px 0 12px; }
@media (max-width: 640px) { .fail-card { grid-template-columns: 1fr; } .fail-card .shot { border-right: 0; border-bottom: 1px solid var(--line); max-height: 180px; } .fail-card .shot img { object-position: top center; } .proof h2 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .chkrow.landed, .ticker li.in, .fail-card.in { animation: none !important; } }

/* the story slides, from 900px wide (the scroll ruling, review/scroll/RULING.md, 2026-09-29): the first three sections, each as
   tall as what it holds. The wheel, the trackpad and touch scroll freely and are never listened to; Page Down, Page Up and
   Space glide to the next slide's top when it is within one screen (the script at the end of landing.html); the hero's arrow
   lands on the second slide's top. Readers who asked for less motion get the same layout and the same stops, jumped to, not
   glided. Below 900px the page is plain. Everything after the plans is ordinary page. */
@media (min-width: 900px) {
  /* a slide is as tall as what it holds (the owner, 2026-09-29: "main page looks stretched up-down"): forced to the window's
     height the third slide was 70 to 78% empty and the blocks stood 354 to 786px apart. The header is 54px and sticky, so a
     slide's top padding is 54 + 40 of air; the bottom padding is the rhythm to the next slide. The hero still fills the first
     screen, up to 720px. No snapping: a wheel notch shorter than half a slide snapped BACK to the slide it had left (the owner,
     2026-09-29). A bot that scrolls by innerHeight no longer lands on whole slides: it aims at #s-watch, #s-report, #s-plans. */
  html:has(main > .slide) { scroll-padding-top: 0; }   /* the landing only: its slides carry the header's height in their own padding. Written for html it reached every page, and a field reached with Shift+Tab hid under the header */
  main:has(> .slide) > section:not(.slide) { scroll-margin-top: calc(var(--hdr, 54px) + 16px); }   /* the landing's sections that are not slides land under the header like any other page's */
  main:has(> .slide) { padding-top: 0; }
  .plans-wrap { padding-top: 0; }
  .slide, .slide.story { display: grid; align-content: center; position: relative; box-sizing: border-box; padding-top: 94px; padding-bottom: 72px; scroll-margin-top: 0; }   /* .slide.story: the story's own padding (40px, further down the file) must not win, or a slide's kicker lands under the header */
  .slide:focus { outline: none; }
  .hero.front.slide { scroll-margin-top: 54px; }   /* the second slide takes the keyboard's place after the arrow; it is a place, not a control */
  .hero.front.slide { height: min(calc(calc(100dvh / var(--zoom, 1)) - 54px - var(--runbar)), 720px); padding-top: clamp(40px, calc(13vh / var(--zoom, 1)), 150px); padding-bottom: 56px; align-content: start; }   /* the promise starts near the top third, not mid-screen under a blank band (2026-09-29) */
  .slide-next { position: absolute; left: 50%; top: calc(calc(100dvh / var(--zoom, 1)) - 112px - var(--runbar)); bottom: auto; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line-2); background: var(--surface); text-decoration: none; font-size: 16px; }
  .slide-next:hover { color: var(--ink); border-color: var(--muted); text-decoration: none; }
}
/* a short laptop window: the hero is never cut, it grows and the page scrolls on (round-3 L4 #5) */
@media (min-width: 900px) and (max-width: 1023px) and (max-height: 680px), (min-width: 1024px) and (max-height: 748px) { .hero.front.slide { height: auto; min-height: calc(calc(100dvh / var(--zoom, 1)) - 54px); } }
:root { --runbar: 0px; }   /* the running note floats in the corner: it never takes the page's height (senior 07:35 UTC 13 Oct) */
/* THE RUNNING NOTE (the owner via senior 07:35 UTC 13 Oct; was the full-width bar of running-bar/RULING.md): ONE small note in the
   page's bottom right corner — one line and its action, a Close word; nothing under it moves */
.runbar { position: fixed; z-index: 60; right: 20px; bottom: 20px; max-width: min(620px, calc(100vw - 40px)); display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 6px 24px rgba(15, 23, 42, .14); margin: 0; }
.runbar[hidden] { display: none; }
.runbar a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 4px 11px 16px; font-size: 14px; line-height: 20px; color: var(--ink-2); text-decoration: none; border-radius: 12px 0 0 12px; }
.runbar a:focus-visible, .runbar .rb-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.runbar bdi { color: var(--ink); font-weight: 600; }
.runbar .rb-wide { min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
.runbar .rb-wide bdi { display: inline-block; max-width: 12em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }   /* a long host is cut, never the state's words */
.runbar .rb-go { flex: none; color: var(--accent); font-weight: 600; white-space: nowrap; }
.runbar a:hover .rb-go, .runbar a:focus-visible .rb-go { text-decoration: underline; }
.runbar .rb-close { flex: none; align-self: stretch; margin: 0; padding: 0 14px; min-height: 44px; border: 0; border-left: 1px solid var(--line-2); border-radius: 0 12px 12px 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.runbar .rb-close:hover { color: var(--ink); background: var(--surface-2); }
@media (max-width: 600px) { .runbar { left: 12px; right: 12px; bottom: 12px; max-width: none; } .runbar a { padding-left: 12px; gap: 10px; } .runbar .rb-wide { flex: 1; overflow: hidden; } .runbar .rb-wide bdi { max-width: 9em; } .runbar .rb-lead { display: none; } }   /* a phone: the host and its state, "Your report on" is the note's own label */
/* scroll-3 A (the owner's screenshot, 1920 wide, 922 of page): on a tall window the first screen ends on the next block's whole heading;
   its picture starts at the fold. The 720 cap cut that picture 148px into the first screen; a taller hero alone was the stretch again. */
@media (min-width: 900px) and (max-width: 1023px) and (min-height: 860px), (min-width: 1024px) and (min-height: 946px) {
  .hero.front.slide { height: calc(calc(100dvh / var(--zoom, 1)) - 54px - var(--runbar)); align-content: center; padding-top: 0; padding-bottom: 120px; }   /* the block a little above the first screen's middle (the owner's screenshot at 1920 by 922, 2026-09-30: it stood squeezed at the top third); the 275px foot of scroll-3 A goes, the windows' peek takes its place */
  #s-watch { align-items: start; } #s-watch.slide { padding-bottom: 18px; }   /* watch → report 88px like the gaps after it (front loop-00 FIX 9); #s-report's top stays: the kicker under the sticky bar at the glide's stop */
  #s-watch .story-vis { margin-top: max(127px, calc(calc(100dvh / var(--zoom, 1)) - 868px)); }
  .hero.front.slide { padding-bottom: 240px; } .hero.front .peek { height: 310px; }   /* the Sunday prep (design-critic 02:01 UTC 2 Oct): 60px less ground above the headline (220 → 160 at 1920×922), the peek 60px taller from the fold up, so the three windows show their screens, not just their heads */
  #s-watch + #s-report { margin-top: 0; }   /* DC-H3 (design-critic 02:24 UTC 2 Oct): the check list → the next kicker was 18 + 88 + 94 = 200px of ground at 1920×922; the slide's own 94 (the kicker under the sticky bar at the glide's stop) is the gap, so the next head enters the first screen of the slide */
}
/* scroll-3 B: a picture below the fold rises in once as the scroll brings it; text never hides. The wheel stays the browser's own:
   a glide driven by the wheel threw a trackpad two screens (measured in the round), so none is built */
@media (prefers-reduced-motion: no-preference) {
  .armed .story-vis { opacity: .25; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
  .armed .story-vis.in { opacity: 1; transform: none; }
}
@media (max-width: 899px) { .slide-next { display: none; } }
#s-report { padding-bottom: 0; }   /* one gap before the safety card, the section's own: the slide's and the section's added up to 160px (scroll-2 ruling, change 9) */
@media (max-width: 899px) { .hero.front:focus { outline: none; } }
/* the same rules for a reader who chose dark on a light system */
  :where(:root[data-theme="dark"]) .pad { background: linear-gradient(160deg, #2c3431, #1c222000 60%), #222927; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.10); }
  :where(:root[data-theme="dark"]) .pad-screen img, :where(:root[data-theme="dark"]) .fail-card .shot img, :where(:root[data-theme="dark"]) .fail .shot img, :where(:root[data-theme="dark"]) .failrow .thumb img { filter: brightness(.92); }   /* the same frame looks the same in the pad and in the proof (round-2 L9 ruling #6) */
  :where(:root[data-theme="dark"]) .pad.over .frame.show { filter: brightness(.92) grayscale(.6); }
/* no smooth scrolling: a bot (our own engine included) scrolls one viewport and shoots 600 ms later; an animated scroll would hand it a half-slide */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 0; } .story + .story { margin-top: var(--section); }   /* equal gaps between the sections (front loop-00 FIX 9) */
.story .kicker { display: inline-block; margin: 0 0 10px; font: 600 12px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.story h2 { font-size: clamp(26px, calc(3.2vw / var(--zoom, 1)), 38px); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; }
.story p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 46ch; margin: 0; }
.story .story-go { margin: 16px 0 0; font-size: 15.5px; } .story-go a { font-weight: 600; text-decoration: none; } .story-go a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-vis { display: grid; gap: 14px; min-width: 0; }
.frames.demo { grid-template-columns: minmax(0, 1fr) auto; } .frames.demo .pad.phone { max-width: 100%; }
.frames-note, .story .frames-note { display: block; margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; max-width: none; }   /* the caption is text about the picture, not part of the device: it sits under the slabs at every width (round-3 L4 #1, #8) */
.frames.demo .pad figcaption { display: none; }
/* the slide's desktop wears a browser bar, as the live page's desktop window does (O-69), never a tablet's bezel (LIST-2026-10-01 #34);
   both frames are the peek's own captures of the GrandNode demo store, so the page shows one shop (#35) */
.frames.demo .pad.desk .pad-screen { aspect-ratio: 1920 / 548; border: 1px solid var(--line-3); border-radius: 8px; padding-top: 22px; background: var(--surface); box-shadow: 0 30px 60px -34px rgba(17,24,39,.35); }
.frames.demo .pad.desk .pad-screen::before { display: none; }
.frames.demo .pad.desk .frame { top: 22px; height: calc(100% - 22px); }
.pad-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--line); }
.pad-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); flex: none; } .pad-bar .addr { margin-left: 8px; width: min(38%, 200px); height: 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.frames.demo .pad.phone .pad-screen { aspect-ratio: 1920 / 548; }
/* three windows, as the hero says three (DC-H1, design-critic 02:24 UTC 2 Oct): the desktop, Martin's tablet and the phone side by side, their feet on one line;
   at a phone the desktop takes the row and the tablet and the phone stand under it, centred */
.frames.three.demo { grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; }
.frames.demo .pad.tablet { width: 152px; } .frames.demo .pad.tablet .pad-screen { aspect-ratio: 1920 / 548; border-width: 7px; border-radius: 14px; box-shadow: 0 12px 24px -12px rgba(17,24,39,.25); }
.frames.three.demo .pad.phone { width: 104px; }
@media (max-width: 640px) {
  .frames.three.demo { grid-template-columns: 1fr auto auto 1fr; gap: 12px; } .frames.three.demo .pad.desk { grid-column: 1 / -1; }
  .frames.three.demo .pad.tablet { grid-column: 2; width: 120px; } .frames.three.demo .pad.phone { grid-column: 3; width: 80px; } .frames.three.demo .pad.tablet .pad-screen { border-width: 6px; border-radius: 10px; }
}
.next-list.wide { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13.5px; }
.next-report.big { max-width: 560px; margin: 0 auto; font-size: 16px; padding: 18px; gap: 12px; box-shadow: var(--shadow-pop); border-radius: 14px; } .next-report.big .nr-row { padding: 12px; font-size: 15.5px; } .next-report.big .nr-row > div span { font-size: 14px; } .next-report.big .nr-head b { font-size: 16.5px; }
.nr-sent { color: var(--muted); font-family: var(--mono); font-size: 12.5px; } .nr-sent span { white-space: nowrap; }   /* two pieces, each whole: a narrow card wraps at the dot */
   /* margin 0: the 14px teaser margin drifted every page-down after the plans by 14px */
@media (max-width: 899px) { .story { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; } .next-list.wide { grid-template-columns: 1fr; } }

/* the one-line box proposes existing checks as you type */
form.oneline.suggest { align-items: flex-start; position: relative; } .suggest-field { position: relative; flex: 1; min-width: 280px; } .suggest-field input { margin: 0; }   /* the list lines up with the field, not the whole row */
.suggest-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-pop); max-height: calc(60vh / var(--zoom, 1)); overflow: auto; }
.suggest-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14.5px; }
.suggest-list li b { font-weight: 600; } .suggest-list li b mark { background: none; color: inherit; font-weight: 700; } .suggest-list li .pill { font-size: 12px; font-weight: 400; padding: 1px 8px; background: var(--surface-2); border-color: var(--line); color: var(--muted); gap: 0; } .suggest-list li .pill::before { display: none; }
.suggest-list li .pill.writes::before { display: inline-block; } .suggest-list li .pill.writes { gap: 5px; }
.suggest-list li small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggest-list li em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: auto; } .suggest-list li em.on { color: var(--ink-2); }
.suggest-list li.blocked, .suggest-list li.ison { cursor: default; } .suggest-list li.blocked { opacity: .6; }
.suggest-list li:hover { background: var(--surface-2); }
.suggest-list li[aria-selected=true] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .suggest-list li[aria-selected=true] .pill { background: var(--surface); }   /* the row Enter takes is unmistakable (round 1, L7 #1) */
.row-flash { animation: rowflash 1s ease-out; } @keyframes rowflash { from { background: var(--accent-soft); } } @media (prefers-reduced-motion: reduce) { .row-flash { animation: none; } }
.suggest-list li.own { border: 1px solid var(--accent); border-radius: 8px; margin-top: 6px; padding: 9px 12px; min-height: 44px; box-sizing: border-box; align-content: center; background: var(--surface); } .suggest-list li.own b { color: var(--accent); } .suggest-list li.own:hover { background: var(--accent-soft); }   /* "New check" is the list's primary row: framed in the blue, a full 44 px, the thumb knows it is the button (critic P2-6) */
form.oneline.picked input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 640px) { .suggest-field { min-width: 0; width: 100%; position: static; }   /* on a phone the list hangs from the whole form, below the button: it never covers Draft it (design-critic 00:02) */
  .suggest-list li em { margin-left: 0; } form.oneline.suggest button { width: 100%; justify-content: center; } }

/* the site page: the checks that are off fold away; tonight's checks and what is not found on the site come first */
details.more-checks { margin: 4px 0 8px; } details.more-checks > summary { cursor: pointer; font-size: 14.5px; color: var(--ink-2); padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
details.more-checks > summary::-webkit-details-marker { display: none; } details.more-checks > summary::before { content: "\25B8"; color: var(--muted); font-size: 12px; } details.more-checks[open] > summary::before { content: "\25BE"; }
details.more-checks .chk-tiles { margin-top: 4px; }

.colhead .site { overflow-wrap: anywhere; }   /* a long host wraps at a dot, never inside a word */

@media (max-width: 720px) { .members .tablewrap table { min-width: 0; } .members .tablewrap::after { display: none; } }   /* two columns fit a phone */
/* the Reports list on a phone: a report's number, its time and how many passed on one line, its state and result under them; the
   result stood in the fourth column of a table 640px wide, off the screen at 390. Kind and Sites are on the report's own page. */
@media (max-width: 720px) {
  .tablewrap table.runlist { min-width: 0; } .tablewrap:has(> .runlist)::after { content: none; }
  .runlist thead { display: none; }   /* DC-H51 (design-critic 19:45): not clipped but gone, its sort buttons with it: a keyboard at 390 goes from the chips to the first report (its cells are not the grid's columns here; sorting is not offered on a phone) */
  .runlist tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); } .runlist tbody tr:last-child { border-bottom: 0; }
  .runlist .none { display: none; }   /* DC-H54 (design-critic 20:33): the count cell's "—" means "none" under its head; the head is gone here, the row's state word says why */
  .runlist tbody td { border: 0; padding: 0; } .runlist tbody td:nth-child(3) { display: none; }
  .runlist tbody td.rsite { grid-column: 1 / -1; grid-row: 3; max-width: none; font-size: 13.5px; color: var(--ink-2); }   /* the report's site under its state (design-critic 08:23 UTC 13 Oct) */
  .runlist tbody td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; } .runlist tbody td:nth-child(6) { grid-column: 3; grid-row: 1; color: var(--ink-2); }
  .runlist tbody td:first-child a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; }
}
/* the Reports list, livelier without a framework (the owner's O-67, senior 21:05 UTC): chips that narrow it in place, the whole row one link,
   the state and the result as pills, Passed as a small bar, headers that sort, the header row held under the site's bar */
nav.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }   /* at 390 the five wrap to two lines: a row that scrolls sideways hides the last chips (the look tests' box check) */
nav.chips a { flex: none; display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid var(--line-3); border-radius: 999px; font-size: 14px; color: var(--ink-2); background: var(--surface); text-decoration: none; }
nav.chips a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
nav.chips a[aria-current] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); font-weight: 600; }
@media (pointer: coarse), (max-width: 600px) { nav.chips a { min-height: 44px; box-sizing: border-box; } }   /* DC-H44/H50: a phone-wide window is a thumb's too, whatever its pointer says (44 px; padding, not type) */
#runs-list[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.runlist tbody tr { position: relative; }
.runlist a.num::after { content: ""; position: absolute; inset: 0; }                        /* the whole row answers a click: the number's link spans it */
.runlist tbody tr:hover a.num { color: var(--accent); }
.runlist tbody tr:has(a.num:focus-visible) > td { background: var(--surface-2); } .runlist a.num:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.runlist td.rstate .pill { vertical-align: middle; }
.runlist td .pill:not(.green):not(.red):not(.amber):not(.look):not(.writes):not(.on):not(.busy) { padding: 2px 9px 2px 7px; gap: 6px; border-color: var(--line-2); background: var(--surface); font-weight: 500; color: var(--ink-2); }
.runlist td .pill.green, .runlist td .pill.red, .runlist td .pill.amber { padding: 2px 9px 2px 7px; }
.runlist td .pill.green { background: var(--green-bg); color: var(--green-2); } .runlist td .pill.red { background: var(--red-bg); color: var(--red); } .runlist td .pill.amber { background: var(--amber-bg); color: var(--amber); }
.mbar { display: inline-flex; width: 96px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg-2); vertical-align: middle; margin-right: 8px; }
.runlist td.pass .frac { display: inline-block; min-width: 4.6em; }   /* the bars stand one under another whatever the fraction's width */
.mbar i { display: block; height: 100%; } .mbar .g { background: var(--green); } .mbar .a { background: var(--amber-mark); } .mbar .r { background: var(--red-mark); }
.run-now.own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; flex-basis: 100%; width: 100%; } .run-now.own button { min-height: 40px; } .run-now.own .row-label { margin: 0; } .run-now.own select { flex: 0 1 280px; min-width: 0; }   /* "Run now on [site ▾] (Run now)": a line of its own under the idle sentence; at 390 the picker, then the button under it (the owner's O-78) */
@media (max-width: 560px) { .run-now.own select { flex: 1 1 100%; } .run-now.own button { flex: 1 1 100%; min-height: 44px; } }
@media (pointer: coarse) { .run-now.own select, .run-now.own button { min-height: 44px; } }
.runlist .phone-only { display: none; } .tz-note { margin: 0 0 4px; } @media (min-width: 721px) { .tz-note { display: none !important; } }   /* the head says the zone from 721 px; a phone, whose head is hidden, reads it here (design-critic 03:30 #2) */
.runlist th button.sortb { min-height: 0; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; text-decoration: none; line-height: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
@media (pointer: coarse) { .runlist th button.sortb { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; margin: -12px -6px; } }   /* a thumb reaches a header's sort (44 px) without the header row growing */
.runlist th button.sortb:hover { color: var(--ink); } .runlist th button.sortb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.runlist th[aria-sort="descending"] button.sortb::after { content: " ↓"; } .runlist th[aria-sort="ascending"] button.sortb::after { content: " ↑"; } .runlist th[aria-sort] { color: var(--ink-2); }
@media (min-width: 721px) {
  .tablewrap:has(> .runlist) { overflow: visible; }                                          /* nothing scrolls around it, so its header can stick */
  .runlist thead th { position: sticky; top: var(--hdr, 54px); z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
}
@media (max-width: 720px) { .runlist .mbar { display: none; } .runlist .phone-only { display: inline; font-size: 12.5px; color: var(--muted); } }   /* the phone: the fraction and its word (#26), no bar */
/* for an admin the members' table has three columns with a select in one: on a phone the role and "remove" go under the address (hunt D-7, K5 4) */
@media (max-width: 720px) {
  .members table:not(.invites) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .members table:not(.invites) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .members table:not(.invites) tr:last-child { border-bottom: 0; }
  .members table:not(.invites) td { border: 0; padding: 0; } .members table:not(.invites) td:first-child { flex: 0 0 100%; overflow-wrap: anywhere; font-weight: 600; }
  .members table:not(.invites) td.actions { margin-left: auto; } .members table:not(.invites) td.actions:empty { display: none; }
  .acct .tablewrap table { min-width: 0; } .acct .tablewrap::after { content: none; }
  .acct thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .acct tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .acct tbody tr:last-child { border-bottom: 0; }
  .acct tbody td { border: 0; padding: 0; } .acct tbody td:first-child { flex: 0 0 100%; font-weight: 600; } .acct tbody td.actions { margin-left: auto; min-width: 0; }
}
.acct td:first-child { overflow-wrap: anywhere; }
.members td select { min-width: 120px; width: auto; flex: none; } .members td form.row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }   /* a role and its save stand on one line at every width */

.hero.front .lead { margin-bottom: 30px; } .hero.front h1 { margin-bottom: 24px; }   /* headline → lead: 24 for 14 (the owner's screenshot, 2026-09-30: the block was squeezed) */
@media (max-width: 640px) { .hero.front .lead { margin-bottom: 22px; } }

/* the landing has one primary (the Launch box): the header's way in is an outline button there and hidden on a phone (round 1, L4 #8 / #17) */
@media (max-width: 640px) { body:has(.hero.front) .anon-acts { display: none; } }

/* the headline is ONE line at desktop width (the owner's rule); phones wrap it */
@media (min-width: 900px) { .hero.front h1 { max-width: none; white-space: nowrap; font-size: clamp(42px, calc(4.9vw / var(--zoom, 1)) - 1.6px, 58px); } }   /* the landing's headline only: written for every hero it kept the inner pages' long h1s on one line too, and /bot and /security scrolled sideways */
/* 42 to 58px, not the debate's 46 to 60: in the widest face a reader's system may hand us (DejaVu Sans, 20px of line for each px of type) the headline must fit the hero at every width from 900 up; at 46 and 60 it ran past the edge at 900, 1024 and from 1366 */
@media (max-width: 359px) { .hero.front h1 { font-size: 30px; } }

/* the grids past the landing hero (the owner, 2026-09-29: "on other pages the grid looks bugged, and the background too";
   "the bottom grid should continue till the footer").
   Inner pages: the hero there is some 200px tall, and the grids and the glow were sized in percent of it, so the floor was
   squeezed into a strip with a hard edge above the content and the glow into a band. They get the top grid and the glow only,
   sized in pixels and drawn on main (its own stacking context), so both fade out behind the content instead of being cut. */
.hero.small-hero { background: none; overflow-x: visible; }
.hero.small-hero::before, .hero.small-hero::after { content: none; }
main:has(> .hero.small-hero) { isolation: isolate; position: relative; }
main:has(> .hero.small-hero)::before { content: ""; position: absolute; inset: 0 0 auto; height: 560px; z-index: -1; pointer-events: none;
  --faint: rgba(0,0,0,.045); --sides: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  background: linear-gradient(var(--faint) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--faint) 1px, transparent 1px) 0 0 / 24px 24px, var(--glow) no-repeat top center;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 35%, transparent 62%), var(--sides); mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 35%, transparent 62%), var(--sides); -webkit-mask-composite: source-in; }
/* The landing: the floor belongs to the hero again and scrolls away with it, at every width (the owner, 2026-09-29: "when scrolling,
   it stay fixed and covers content"). Stuck to the window's bottom it lay under every heading, paragraph and card that passed,
   lines crossing the words. The page keeps one more floor, at rest on the footer's line, under the last section's bottom space
   ("the bottom grid should continue till the footer" is answered by the page ending on it, not by lines under the text). */
main:has(> .hero.front) { isolation: isolate; overflow-x: clip; padding-bottom: 0; }
main:has(> .hero.front) > section:last-of-type { margin-bottom: 72px; }   /* the page's bottom space, carried by whatever section is last now that "Paste your address" is gone (b4b2ab6) */
main:has(> .hero.front)::after { content: none; display: block;   /* the last page's floor is gone (the owner, 2026-09-30: "too pronounced and cut where it starts") */ position: relative; z-index: -1; pointer-events: none;
  --floor-h: calc((calc(100dvh / var(--zoom, 1)) - 54px) * .58); height: var(--floor-h); margin: calc(var(--floor-h) * -1) -25% 0;
  --floor: rgba(0,0,0,.26);
  background-image: linear-gradient(var(--floor) 1px, transparent 1px), linear-gradient(90deg, var(--floor) 1px, transparent 1px); background-size: 56px 56px;
  transform: perspective(620px) rotateX(58deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 8%, transparent 88%), linear-gradient(to right, transparent 12%, #000 34%, #000 66%, transparent 88%); mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%), linear-gradient(to right, transparent 12%, #000 34%, #000 66%, transparent 88%); -webkit-mask-composite: source-in; }
@media (max-width: 640px) { main:has(> .hero.front) > section:last-of-type { margin-bottom: 60px; } }
@media (prefers-reduced-motion: reduce) { main:has(> .hero.front)::after { transform: none; --floor-h: calc((calc(100dvh / var(--zoom, 1)) - 54px) * .3); } }
@media print { main:has(> .hero)::before, main:has(> .hero)::after { display: none; } }
/* the same rules for a reader who chose dark on a light system */
 :where(:root[data-theme="dark"]) .hero::before, :where(:root[data-theme="dark"]) main:has(> .hero.small-hero)::before { --faint: rgba(0,0,0,.18); } :where(:root[data-theme="dark"]) .hero::after, :where(:root[data-theme="dark"]) main:has(> .hero.front)::after { --floor: rgba(0,0,0,.62); }    /* dark theme: the lines are BLACK, never light ink (the owner, twice, 2026-09-29: "grid looks again white"). Black at the light theme's 9% / 26% vanished on the night ground, so the same black is laid on thicker here; do not turn it into a light line */

/* the peek: the top edges of three customer windows under the hero's block, cut by the first screen's bottom edge (senior's item 2, 2026-09-30).
   The window is the live page's anatomy drawn again here, since the landing does not carry ee.live.css: a bar of 37px with a tab, a screen. */
.peek { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; gap: 24px; padding: 0 20px; pointer-events: none;
  mask-image: linear-gradient(#000 35%, transparent 96%); -webkit-mask-image: linear-gradient(#000 35%, transparent 96%); }   /* quiet: the screens at 45% (the bars and their labels at full strength, 4.5:1 for the look tests), fading into the ground from the windows' middle, a third of each window in the first screen (the owner's screenshot at 100%, 2026-09-30) */
.peek .win { pointer-events: auto; display: block; flex: none; text-decoration: none; color: inherit; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface); overflow: hidden; box-shadow: 0 18px 40px -30px rgba(17,24,39,.45); }
.peek .win.desktop { width: min(560px, calc(60vw / var(--zoom, 1))); } .peek .win.tablet { width: 300px; border-radius: 16px 16px 0 0; } .peek .win.phone { width: 200px; border-radius: 16px 16px 0 0; }
.peek .win-bar { display: flex; align-items: flex-end; height: 31px; padding: 5px 6px 0; background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.peek .win-tab { display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 10px; margin-bottom: -1px; background: var(--surface); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 9px 9px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--ink); min-width: 0; }
.peek .win.desktop .win-tab { flex: 0 1 62%; } .peek .win-tab .host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }   /* still: nothing plays here */
.peek .win-screen { display: block; background: var(--media-bg); opacity: .45; } .peek .win-screen img { display: block; width: 100%; height: auto; }
.peek .win:hover, .peek .win:focus-visible { border-color: var(--muted); } .peek .win:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero.front .slide-next { position: relative; top: auto; left: auto; bottom: auto; transform: none; margin: 26px auto 0; z-index: 2; }   /* the arrow stands under the ticks, in the block's flow, off the windows (the owner's screenshot at 100%) */
@media (max-width: 899px) { .peek { position: static; height: 150px; margin: 28px -20px 0; padding: 0; } .peek .win.desktop, .peek .win.tablet { display: none; } .peek .win.phone { width: 220px; } }   /* a phone: Priya's window alone, in the flow under the ticks */
@media (max-width: 1023px) and (max-height: 500px), (min-width: 1024px) and (max-height: 550px) { header.top { position: static; } }   /* 200% zoom or a phone on its side: the bar scrolls away instead of holding a fifth of the screen (hunt A-1 Z7) */
@media (max-width: 960px), (min-width: 1024px) and (max-width: 1056px) { .db-long { display: none; } }   /* the demo strip in one row on the Fold open (884): it wrapped to two */
@media (max-width: 899px) { .next-report.big { margin: 0; } }   /* the night-report card left in its left-aligned column under 900 (front loop-00 FIX 10) */
@media (min-width: 374px) and (max-width: 640px) { body:has(.hero.front) .anon-links { flex: 0 1 auto; margin-left: auto; } body:has(.hero.front) .anon-links a { padding: 5px 6px; } }   /* the front page's header in one row from 374 (front loop-00 FIX 3; at 344 and 320 it keeps two) */
@media (min-width: 641px) and (max-width: 899px) { .peek { gap: 16px; } .peek .win.desktop, .peek .win.tablet { display: block; } .peek .win.desktop { width: min(380px, 43%); } .peek .win.tablet { width: min(240px, 27%); } .peek .win.phone { width: min(160px, 18%); } }   /* three windows between a phone and a desktop, as the pick says (front loop-00 FIX 4) */
@media (min-width: 900px) and (max-width: 1264px) { .peek .win.desktop { width: min(560px, 49%); } .peek .win.tablet { width: min(300px, 26%); } .peek .win.phone { width: min(200px, 18%); } }   /* DC-C5-14 (crowd5's partner-morning pass, 5 Oct): from 900 to 1149 px the three windows kept their full 560 + 300 + 200 px and the strip cut them at both edges — "Alice · desktop" read "o" at 900, Priya's "ph"; their shares of the strip keep all three whole up to the full sizes at 1150 */
/* the Launch box's Desktop | Phone switch (the owner, 2026-09-29): two radios drawn as one pill; the radio itself stays in
   the page for the keyboard (arrows move, the ring is drawn on the pill) */
.launch-dev { display: flex; width: max-content; max-width: 100%; gap: 4px; margin: 10px 0 0; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg-2); min-width: 0; }
.hero .launch-dev { margin-inline: auto; margin-top: 19px; }   /* the box → the pick: 19 for 12 */
.launch-dev label { margin: 0; position: relative; cursor: pointer; }
.launch-dev input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.launch-dev span { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 400; color: var(--muted); }
.launch-dev label:hover span { color: var(--ink); }
.launch-dev input:checked + span { background: var(--pill, var(--surface)); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.launch-dev input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .launch-dev span { padding: 11px 18px; } .launch-dev label { min-height: 44px; } }   /* 44px of touch height (43 measured on the Fold open: the min-height closes it) */
/* the four words of the pick fit one pill at 320 in a card too (crowd3's three-customers ruling §8: the padding goes to 10 px, never two lines);
   and on a phone the box's button is a thumb's height (engineer2, from the look tests on /dashboard and /sites) */
@media (max-width: 400px) { .launch-dev span { padding-inline: 10px; font-size: 13px; } .launch-dev { gap: 2px; } @media (pointer: coarse) { .launch-dev span { padding-inline: 9px; } } }
@media (max-width: 470px) { .launch-dev .wide-only { display: none; } }   /* "Desktop + phone" is one line from 471; under it the pill reads "Both" and the hint says what both are */
@media (min-width: 471px) { .launch-dev .narrow-only { display: none; } }
@media (max-width: 720px) { .launch-dev span { padding-block: 12px; } .launch-dev span span { padding: 0; } }   /* a thumb's height for each option on a phone, coarse pointer or not (the radio fills its label) */
.launch-dev span span { padding: 0; }
@media (max-width: 720px) { form.launch .launch-row button { min-height: 44px; } }
@media (forced-colors: active) { .launch-dev input:checked + span { outline: 2px solid Highlight; } }

/* the showcase run of our own site says what it is, once and quietly, under the head of the page */
.showcase-note { margin: 10px 0 0; max-width: 78ch; padding-left: 10px; border-left: 2px solid var(--line-2); } .share .showcase-note, .showcase-note + .tiles { margin-bottom: 14px; }

/* flow-1 (the crowd's round on the live report, 2026-09-29): the wait said in facts, and the three steps under the frame */
.live-status { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 78ch; } .live-status .linkish { font-size: inherit; display: inline; min-height: 0; box-shadow: none; border-radius: 0; }
.ticker:empty { display: none; }   /* no empty band between the frame and what follows (it was 90px at phone width) */
/* the path under the frame: one card, three stops joined by a rail that fills as the run moves on (engineer1's mock,
   deploy/design/proposals/live-steps.html). Nothing moves for its own sake: the bar grows when the count does, that is all. */
.path { list-style: none; margin: 16px 0 0; padding: 16px 16px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.path li { position: relative; padding: 0 16px 0 0; min-width: 0; }
.path .node { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; background: var(--surface); color: var(--muted); border: 1.5px solid var(--line-2); }
.path li::after { content: ""; position: absolute; top: 12.25px; left: 26px; right: 0; height: 1.5px; background: var(--line-2); } .path li:last-child::after { display: none; } .path li.done::after { background: var(--accent); }
.path li.done .node { background: var(--accent-soft); border-color: transparent; color: var(--accent-2); }
.path li.now .node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.path b { display: block; margin: 10px 0 1px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); letter-spacing: -.005em; } .path li.now b { color: var(--ink); } .path li.next b { color: var(--muted); }
.path p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.path .fact { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; font: 12px/1.2 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 22px; } .path li.next .fact { color: var(--muted); }
.path .bar { flex: 1 1 40px; max-width: 96px; width: auto; height: 4px; margin: 0; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 1; } .path .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s ease; }
.path .bar[hidden] { display: none; }
.path .chip { display: inline-flex; align-items: center; padding: 2px 8px 2px 7px; border-radius: 999px; border: 1px solid var(--line-2); font: 11.5px/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; } .path .chip .devg { margin-right: 5px; } .path li.next .chip { color: var(--muted); }
.path .nw { white-space: nowrap; }
@media (max-width: 560px) { .path { grid-template-columns: 1fr; padding: 14px 14px 6px; } .path li { padding: 0 0 16px 40px; } .path .node { position: absolute; left: 0; top: 0; }
  .path li::after { top: 26px; bottom: 0; left: 12.25px; right: auto; width: 1.5px; height: auto; } .path b { margin-top: 2px; } }
@media (min-width: 561px) { .path .fact { min-height: 46px; align-content: flex-start; } }   /* room for the chip and the count on two lines, so the card keeps its height when the bar comes and goes */
@media (prefers-reduced-motion: reduce) { .path .bar i { transition: none; } }
.so-far { display: none; margin: 12px 0 0; font-size: 14px; color: var(--red); } .so-far b { font-weight: 600; } @media (max-width: 900px) { .so-far:not([hidden]) { display: block; } }   /* phone width only: on a desktop the red row is beside the frame already */
/* the four ticks under the landing's Launch box (the owner, 2026-09-29: "no registration" first): one row where they fit, two by two on a phone, never three and one */
/* a column never wider than its half: with new sites open the fourth tick is the devices' sentence ("a desktop, a tablet and a phone, at
   once"), which wraps inside its column instead of running off both edges of a phone (design-critic's THE OPEN DOOR, 390) */
@media (max-width: 480px) { .hero.front .launch-hint:has(.tick:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 4px 20px; text-align: left; } .hero.front .launch-hint:has(.tick:nth-child(4)) .tick { margin: 0; align-items: baseline; } .hero.front .launch-hint:has(.tick:nth-child(4)) .tick::before { flex: none; transform: translateY(-2px); } }

/* the Galaxy Fold (the owner, 2026-09-29: "on galaxy fold, this section shows bad arrangement"): the cover screen is 280 to 344px
   wide, the open one 653 to 768px. On the cover the desktop slab was a 146 to 210px pebble, a 14px bezel round a screen a third
   smaller than the phone beside it; open, the four checks ran one to a row across 600 to 700px. */
@media (max-width: 360px) { .frames.demo { gap: 8px; } .frames.demo .pad .pad-screen { border-width: 6px; border-radius: 9px; } .frames.demo .pad.phone { width: 84px; } .frames.demo .pad.phone .pad-screen { border-width: 4px; } }
@media (max-width: 300px) { .frames.demo .pad.phone { width: 72px; } }
@media (min-width: 600px) and (max-width: 899px) { .next-list.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the header below 374px: the five links stand in one row, closer together (scroll-2 #10); they took two rows and 31px more */
@media (max-width: 373px) { .anon-links { flex-wrap: nowrap; column-gap: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; } .anon-links a { padding: 5px 6px; } }
@media (max-width: 300px) { .anon-links { flex-wrap: wrap; row-gap: 0; } }   /* the Fold's cover at its narrowest: two rows rather than a link off the screen */
/* the public header on a phone: the five links are 349px wide. The row was given a fade and 40px of padding for a sideways scroll it
   only needs below 374px, and at 390 "Log in" sat half under the fade. From 374px the row is plain; below, the links take two rows. */
@media (min-width: 374px) and (max-width: 720px) { .anon-links { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; } }
/* three ticks (new sites closed): one row down to 430px; below it they would wrap two and one, so they stand one under the other */
@media (max-width: 429px) { .hero.front .launch-hint:has(.tick):not(:has(.tick:nth-child(4))) { display: grid; grid-template-columns: max-content; justify-content: center; gap: 4px; } .hero.front .launch-hint:has(.tick):not(:has(.tick:nth-child(4))) .tick { margin: 0; } }   /* DC-C5-13: only the ticks' line; the device pick's hint is a sentence and wraps (its desktop words, 040ca8d7, were cut at both ends at 390) */
/* a check that was not checked (our browser could not judge it in time): muted, a dotted ring, never red and never green */
/* a check one of the report's devices never finished: amber, as "did not finish" is everywhere; never folded away */
.chkrow.unfinished .st { border-color: var(--amber-mark); color: var(--amber); } .chkrow.unfinished .st::after { content: "!"; font-weight: 700; } .chkrow.unfinished .sub { color: var(--amber); } .live-counts .unfin b { color: var(--amber); }
.chkrow.unchecked { color: var(--muted); } .chkrow.unchecked .st { border-style: dotted; } .chkrow.unchecked b { font-weight: 400; } .live-counts [data-c=unchecked] b { color: var(--ink-2); }

/* the email box on the guest's report (crowd's trial-card ruling): one field and one button in a row, the refusal under the field, the line after it sent */
.card.keep .keep-form { display: grid; gap: 6px; margin: 0; } .card.keep .keep-form label { margin: 0; }
.keep-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .keep-row input { margin: 0; flex: 1 1 220px; min-width: 0; } .keep-row button { flex: none; }
.keep-why { margin: 2px 0 0; font-size: 13.5px; color: var(--red); } .keep-sent { margin: 0; font-size: 16px; color: var(--ink); }
.stage > .card.keep { margin-top: 16px; }
@media (max-width: 640px) { .keep-row button { width: 100%; justify-content: center; } }

/* Phone was picked and the look runs on a desktop: the sentence at the frame that says so */
.frame-note { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--ink-2); } .frame-note b { color: var(--ink); font-weight: 600; }
/* a line that speaks under the Launch box takes the ticks' place (hero debate, change 4); after the ticks' own phone rules, which are as specific */
.hero.front .launch-state:not(:empty) + .launch-hint { display: none; }
/* 2026-09-30 02:50: ee.report.css changed (designer3); this line moves the stylesheets' stamp until asset_stamp() reads every sheet */

/* the Sites filter (the owner's O-87): a filter inside the card, muted, a small magnifier — not the hero box, which stays the primary */
/* O-98 (design-critic 02:18 UTC 2 Oct): the list card's head row — the add box left, the filter right; at a phone they stack, the add box first */
.sitetop { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 12px; } .sitetop .sitefind { margin: 0; flex: 0 1 auto; flex-wrap: nowrap; } .sitetop .sitefind .sf-in { flex: 0 1 320px; width: 320px; } .sitetop .sitefind input { min-height: 44px; }
.siteadd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 420px; max-width: 560px; margin: 0; } .siteadd input { flex: 1 1 220px; min-width: 0; min-height: 44px; } .siteadd button { min-height: 44px; white-space: nowrap; justify-content: center; text-align: center; } .sitetop input { margin: 0; }
.siteadd .launch-hint { flex-basis: 100%; margin: 2px 0 0; } .sitetop .addsites-closed { margin: 0; flex: 1 1 420px; }
@media (max-width: 720px) { .sitetop { flex-direction: column; align-items: stretch; } .sitetop .addsites-closed { flex: none; }   /* stacked, a flex basis is a HEIGHT: the closed door's note was a 518 px box at 390 (design-critic 04:27) */ .sitetop .sitefind { flex-wrap: wrap; } .sitetop .sitefind .sf-in { width: auto; } .siteadd { flex: none; max-width: none; flex-direction: column; align-items: stretch; } .siteadd input { flex: none; } .siteadd button { width: 100%; } }
.sitefind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .sitefind label { font-size: 13.5px; color: var(--ink-2); }
.sitefind .sf-in { position: relative; flex: 0 1 320px; min-width: 0; } .sitefind .sf-in svg { position: absolute; left: 10px; top: 50%; margin-top: -8px; color: var(--muted); pointer-events: none; }
.sitefind input { width: 100%; padding-left: 32px; font-size: 14.5px; }
@media (pointer: coarse) { .sitefind input { min-height: 44px; } }
@media (max-width: 720px) { .sitefind .sf-in { flex: 1 1 100%; } }
table.sitelist tbody tr[hidden] { display: none !important; }
/* DC-H14 (design-critic 02:28 UTC 2 Oct): at a phone the ··· is a 44 px square and a state pill ("no report yet", "paused", "ready") keeps one
   line — it wrapped "no report / yet" on 46 rows beside a wider button; a failing count may still take two short lines (14:47's rule) */
@media (max-width: 600px) {
  table.sitelist td.actions { width: 44px; display: flex; justify-content: flex-end; } table.sitelist td.actions details.more > summary { width: 44px; height: 44px; min-width: 44px; padding: 0; box-sizing: border-box; display: grid; place-items: center; }
  table.sitelist tbody td.wide:has(> .pill.stateword), table.sitelist tbody td.wide:has(> .frac) { max-width: none; min-width: max-content; } table.sitelist tbody td.wide > .pill.stateword { white-space: nowrap; }   /* the short state words and "15 of 19 passed" keep their width: the phone row's cells carry min-width 0, so beside a long unbreakable name the auto track shrank to 16 px and the words spilled or clipped (rel-0421, design-critic 04:23); a failing count keeps its wrap */
}   /* a filtered-out row: the phone's grid rows would show it otherwise */
.sitefind input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }   /* no ✕ (the house rule): Esc clears the filter */
table.sitelist td.wide .frac { white-space: nowrap; }   /* "15 of 19 passed" stays on one line at 390; the name wraps instead (design-critic 14:47) */
/* every short "word →" link keeps its arrow on its word's line — the sentence around it may wrap, the link does not (design-critic 17:50,
   T9's leftover on the Overview and the Checks page; CSS only): the in-app destinations these links name, the Now card, the report and
   verdict links, the card heads' "All … →" */
main :is(p, .row.head, .now, .verdict, h2) a:is([href="/settings"], [href="/sites"], [href^="/tests#"], [href="/tests"], [href="/runs"], [href="/usage"], [href="/billing"], [href="/notifications"], [href="/demo"], .v-why, .v-run, .now-run, .small):not(.button),
main .now a:not(.button), main .more-fail a { white-space: nowrap; }
svg.dev-glyph { fill: none; }   /* the device glyphs are drawn once in base.html's sprite; their fill comes from here and a state may give one */
.locked-st { white-space: nowrap; font-weight: 400; }   /* "· not yet in our browsers" stays whole on the name's last line (S2-14) */
/* O-96: the line under the one-line box while the AI writes a draft; its dot is the live pad's (no spinner wheel) */
.ai-wait[hidden] { display: none; }
.ai-wait { margin: 6px 0 0; font-size: 14px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; }
.ai-wait.busy::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: calc(.5lh - 3.5px);   /* the first line's middle, one line or two (design-critic 00:02) */
   border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: live-ring 2s cubic-bezier(.2,.7,.2,1) infinite; }
.ai-wait.failed { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ai-wait.busy::before { animation: none; } }
/* the draft as the AI writes it (senior 07:02 UTC 2 Oct): its name, its goal, then each step as it comes */
.ai-grow { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; max-width: 640px; }
.ai-grow-name { margin: 0; font-weight: 600; }
.ai-grow-name:empty, .ai-grow-goal:empty, .ai-grow-steps:empty { display: none; }
.ai-grow-goal { margin: 2px 0 0; color: var(--muted); }
.ai-grow-steps { margin: 8px 0 0; padding-left: 20px; }
.ai-grow-steps li { margin: 2px 0; animation: ai-grow-in .2s ease-out; }
@keyframes ai-grow-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-grow-steps li { animation: none; } }

/* DC-H34 (design-critic 06:26 UTC 2 Oct): at a phone the watch slide's check list → the next kicker was 28 + 64 + 28 px of ground; one house gap
   of 32 px, as DC-H28's heroes (the slide ends 9 px above its list's last row, so its own bottom is 23) */
@media (max-width: 600px) { #s-watch + #s-report { margin-top: 0; } #s-watch { padding-bottom: 23px; } }
/* the site page's name at a phone: a long one-word host breaks where it must rather than push the page sideways (543 px at 320; crowd5's 320 look, 2 Oct) */
@media (max-width: 600px) { .site-head h1 { overflow-wrap: anywhere; min-width: 0; } }
/* crowd5's 344 pass (design-critic 01:21 UTC 3 Oct, DC-C5-9): stand-alone links and summaries a phone taps, 44 px under the thumb — the Overview's
   "Report #N →" and "N more sites", the site page's history "#N" (the row's one way into its report) and "More this site's checks need", the grid
   foot's "replay". After the rules they sized (.sitemore's 36 px stood after the 44 px block and won). */
@media (pointer: coarse), (max-width: 720px) {
  .sitemore, .row.head > a.small, #history td:first-child > a, td.cell.foot .links a, .inl-details > summary.small { display: inline-flex; align-items: center; min-height: 44px; }
  #history td:first-child > a { min-width: 44px; }
}

.seeded { font-weight: 400; white-space: nowrap; } b.muted { font-weight: 400; }   /* a seeded report's "demo night" beside its number, and its bell line's (S2-30, DC-H59) */
/* crowd5's 820 pass (3 Oct, DC-C5-10): a tablet is a thumb too — the 44 px the phone widths got, under a coarse pointer at any width: the demo bar's
   "Demo overview" and "leave" (20 px on every demo page), the Checks row's "view"/"edit" (30×20), the Sites row's ··· (32×30 at 820) */
@media (pointer: coarse) {
  .checks-list td.actions > a, table td.actions > a[href^="/tests/custom/"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  table.sitelist td.actions details.more > summary { min-width: 44px; min-height: 44px; box-sizing: border-box; display: grid; place-items: center; }
}
@media (pointer: coarse) and (min-width: 721px) { .demobar .db-acts a { display: inline-flex; align-items: center; min-height: 44px; } }   /* above the phone's own bar rule, which hides "Demo overview" and sizes the bar */
/* DC-H61 (design-critic 08:07 UTC 3 Oct): between a phone and a wide screen the host cell gives way, never the actions — a long one-word host
   ("wanderlustoutdoorequipment0.example") held the site cell at its 431 px min-content and pushed "Check now" and ··· out of the box at 721–900;
   the cell takes a share of the width instead and a one-word host wraps where it must, whole and readable ("…" would make "wanderlust…0" and "wanderlust…6" one name). 1200 px and up unchanged. */
@media (min-width: 721px) and (max-width: 1319px) {
  table.sitelist td.sitecell { max-width: 0; width: 44%; }
  table.sitelist .sitewords { min-width: 0; } table.sitelist .sitewords > a { display: inline-block; max-width: 100%; vertical-align: top; overflow-wrap: anywhere; }
}
/* DC-H71 (design-critic 14:32 UTC 3 Oct): a tablet is a thumb too — under a coarse pointer at any width the control height is 44 px (inputs, selects,
   textareas and the default buttons all read --ctl; 40 with a mouse, as before) */
@media (pointer: coarse) { :root { --ctl: 44px; --ctl-s: 44px; } button, .button, button.small, .button.small, button.ghost, .button.ghost, details.more .menu button.ghost, details.more .menu a.button.ghost { min-height: 44px; } }   /* every button too, the small ones (the Sites row's "Check now", the ··· menu's; design-critic 14:51) */
/* DC-H73 (design-critic 16:29 UTC 3 Oct): the front's round "next" arrow under a coarse pointer — a 44 × 44 tap, the drawn circle still 34; the
   5 px it grows on each side is taken back from its margins, so nothing around it moves */
@media (pointer: coarse) {
  .slide-next { width: 44px; height: 44px; border-color: transparent; background: none; isolation: isolate; }
  .slide-next::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); z-index: -1; }
  .slide-next:hover::before { border-color: var(--muted); }
  .hero.front .slide-next { margin: 21px auto -5px; }
}
/* NEEDS A LOOK, the third answer (design-critic's ruling 15:24 UTC 3 Oct, fable-critic/NEEDS-A-LOOK.md; crowd2 builds the words, crowd5 the
   mark): a bold "?" in the house amber, a shape no other mark has, never red, never green; keyed on the state class "look" */
table.grid td.cell.look { color: var(--amber-mark); background: color-mix(in srgb, var(--amber) 6%, transparent); }   /* a faint amber ground, as a failing cell has its faint red */
table.grid td.cell.look a, table.grid td.cell.look .q { color: var(--amber-mark); font-weight: 700; font-size: 16.5px; text-decoration: none; display: inline-block; min-width: 24px; }
table.grid td.cell.look a:hover { text-decoration: underline; }
.pill.look { background: var(--amber-bg); color: var(--amber); border-color: transparent; } .pill.look::before { background: var(--amber-mark); } td .pill.look { background: none; padding: 2px 0; font-weight: 600; color: var(--ink); }   /* the amber pill's twin (.pill.amber) */
.dot.look, .ev-dot.look, .st.look { background: var(--amber-mark); border-color: var(--amber-mark); }
.mk.look { color: var(--amber-mark); font-weight: 700; }   /* the "?" wherever it leads a line: the legend, a card (crowd2's span.mk.look) */
.alert > summary > .mk.look { display: inline-block; min-width: 10px; text-align: center; font-size: 16.5px; line-height: 1; align-self: center; }   /* in the red dot's slot, the cell mark's size */
/* the drafter's sign-in box, DC-H86 (design-critic 23:55 UTC 3 Oct): the "ticked by the draft …" line belongs to its box — 2–4 px under the box's
   label, 14 px before the next field — never read as the caption of "Proof: …" */
.auth-box { margin: 0 0 14px; } .auth-box > label.check { margin-bottom: 0; } .auth-box .auth-why { display: block; margin: 3px 0 0 24px; } @media (pointer: coarse) { .auth-box .auth-why { margin-left: 32px; } }   /* under the label's words, not the box (measured: 24 px in with a mouse, 32 under touch) */
/* the owner on his Fold (14:06 UTC 4 Oct, senior; run #385): before a lone window's first picture has painted (a phone, or a desktop: DC-H95), its screen is
   a low line ("Picture coming…"), not a 380-px empty box beside one line of caption; the screen grows to the phone's shape when the frame
   paints (img.ok, set by the card's script on load) */
@media (max-width: 1209px) {
  .now .wins > .win.small:only-child .win-screen:not(:has(img.ok)) { height: auto; min-height: 44px; aspect-ratio: auto; display: flex; align-items: center; border-radius: var(--r-s); }
  .now .wins > .win.small:only-child .win-screen:not(:has(img.ok)) .pad-idle { position: static; display: block; padding: 0 14px; font-size: 13px; white-space: nowrap; }
  .now .wins > .win.small.phone:only-child:has(.win-screen:not(:has(img.ok))) .win-cap { align-self: center; }
  .now .wins > .win.small.desk:only-child .win-screen:not(:has(img.ok)) { width: fit-content; }   /* DC-H95 (design-critic 14:56): the lone desktop window waits the same way; its box had no height, so its words never showed */
}

/* crowd5: the logo the owner chose, panel 01 (senior 03:18 / 03:20 UTC 5 Oct): in every page's header our mark in navy #0B2D57 with
   its pupil in blue #3B82F6, and beside it the wordmark "qa.pro" with its blue dot (static/brand/, drawn by tools/make_logo.py from
   the mark's own geometry; the wordmark is shapes, no font file). The line (SMARTER QA since the owner 15:44 UTC 5 Oct) is in the header too (the owner, 03:18:
   "with the same text"), except on a phone, where it would fall under 9 px */
.brand .mark { -webkit-mask: none; mask: none; background: url("/static/brand/logo-word.svg?v=21") left center / contain no-repeat; background-color: transparent; font-size: 32px; width: calc(1372 / 362 * 1em); height: 1em; margin-top: 0; }   /* row 34 (the owner: "logo looks too big and qa.pro too"; senior 04:58, design-critic 05:00): the mark and the word, 32 px high, about 121 x 32; the line "SMARTER QA. FASTER." leaves the header (under 3 px at this size) for the front page, the footer and the mail */
:root[data-theme="dark"] .brand .mark { background-image: url("/static/brand/logo-word-white.svg?v=21"); }
@media (min-width: 721px) { header.top { min-height: 56px; } header.top:not(:has(nav.anon)) nav { margin-left: 2px; } }   /* the header a tool bar again, 56 px; 16 px from the lockup to the first tab (the bar's 14-px gap + 2) */
@media (max-width: 720px) { .brand .mark { font-size: 28px; } }
.auth-head .mark { -webkit-mask: none; mask: none; background: url("/static/brand/logo-full.svg?v=21") center / contain no-repeat; background-color: transparent; font-size: 72px; width: calc(1862 / 548 * 1em); margin-bottom: 14px; }   /* the sign-in pages: his whole lockup with its line (senior 15:02 (4)) */
:root[data-theme="dark"] .auth-head .mark { background-image: url("/static/brand/logo-full-white.svg?v=21"); }   /* the sign-in head: the whole lockup with its line (senior 15:02 (4)) */

/* crowd5: the NOW card's windows are ONE strip under its lines, at every width and for one window or ten (the owner in Firefox at 1920,
   senior 03:03 UTC 5 Oct: a 75-px phone at the card's far right, "Northwin / d…", a thousand pixels of nothing between). Left-aligned,
   wrapping: a phone 150 px wide, a desktop 300, the device on the bar above, the site and check whole under it; the card as high as its
   content. Before a window's first picture paints it is a low "Picture coming…" line (DC-H94, DC-H95), and grows when the frame comes */
.now .now-body > .wins { grid-column: 1; grid-row: auto; margin: 12px 0 2px; }
.now .wins { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-start; justify-content: flex-start; overflow: visible; }
.now .wins > .win.small, .now .wins > .win.small:not(:first-child) { display: flex; flex-direction: column; flex: none; height: auto; max-width: 100%; }
.now .wins > .win.small .win-screen, .now .wins > .win.small.desk .win-screen, .now .wins > .win.small.phone .win-screen { width: 100%; height: auto; background: var(--bg); }
.now .wins > .win.small.desk .win-screen { aspect-ratio: 1920 / 548; } .now .wins > .win.small.phone .win-screen { aspect-ratio: 1920 / 548; }
.now .wins > .win.small .win-screen img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }   /* the whole frame (DC-H69) */
.now .wins > .win.small .win-tab { white-space: nowrap; }
.now .wins > .win.small .win-cap, .now .wins > .win.small.phone .win-cap { max-width: none; padding: 6px 2px 0; font-size: 13px; line-height: 1.35; -webkit-line-clamp: 3; overflow-wrap: break-word; }
/* a "Needs a look" row wears the amber of its mark when pressed or hovered, never the failure's red (senior 03:03, the owner's photo) */
a.failrow.look:hover, a.failrow.look:focus-visible { border-color: var(--amber-mark); }
/* crowd5: the report says "press me" (the owner, senior 02:54 UTC 5 Oct). The result tile's "N failing" and "N needs a look" are links to
   their first card (run.html's script lights it and its grid row for a moment); a grid mark that opens a card wears a ring at rest, every
   mark with a way in shows the pointer hand, and under a thumb the ring's tap is 44 px without a taller row */
.tile .tile-go { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.tile .tile-go:hover, .tile .tile-go:focus-visible { text-decoration-thickness: 2.5px; }
.tile .tile-go.look { color: var(--amber); }
details.alert.lit, table.grid tr.lit > * { animation: lit 2.4s ease-out; }
@keyframes lit { 0%, 45% { background-color: color-mix(in srgb, var(--accent) 13%, var(--surface)); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { details.alert.lit, table.grid tr.lit > * { animation: none; background-color: color-mix(in srgb, var(--accent) 10%, var(--surface)); } }
table.grid td.cell.pass, table.grid td.cell.fail, table.grid td.cell.blocked, table.grid td.cell.skip, table.grid td.cell.look { cursor: pointer; }
table.grid td.cell.fail a, table.grid td.cell.blocked a, table.grid td.cell.look a { position: relative; min-width: 28px; padding: 0 6px; line-height: 22px; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 999px; }
table.grid td.cell.fail a:hover, table.grid td.cell.blocked a:hover, table.grid td.cell.look a:hover { text-decoration: none; background: color-mix(in srgb, currentColor 12%, transparent); }
@media (pointer: coarse) { table.grid td.cell.fail a::after, table.grid td.cell.blocked a::after, table.grid td.cell.look a::after { content: ""; position: absolute; inset: -11px -8px; } }
.grid-card .grid-hint { margin: -4px 0 10px; }
/* crowd5: the Overview's own address box (the owner, senior 03:22 UTC 5 Oct), one line in the head between the title and "Check every
   site now"; on a phone it takes its own line under the title */
.ov-head { flex-wrap: wrap; row-gap: 10px; }
/* row 39: the Overview's box, its own row under the title — the page's first act. 48 px, as wide as the column, the globe at its left and
   the filled navy "Check it" inside its right end (one piece, design-critic O2); a 1-px line at rest, the accent ring only on focus; 16 px
   under the title, 24 px above what follows; on a phone the button under the field at full width */
.ov-launch { margin: 0 0 24px; } .ov-launch form.launch { margin: 0; } .ov-launch .launch-state:empty { display: none; } .ov-launch .launch-state { margin-top: 6px; }
.ov-launch .launch-field { position: relative; align-items: center; }
.ov-launch .launch-field input { height: 48px; box-sizing: border-box; padding-right: 132px; border: 1px solid var(--line-3); border-radius: 10px; background: var(--surface); font-size: 16px; box-shadow: none; }   /* the field's own edge, 3:1 on white and on the ground (the look tests) */
.ov-launch .launch-field input:focus, .ov-launch .launch-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }   /* focused: a 2-px navy edge, the ring only now */
.ov-launch .launch-row button { position: absolute; right: 4px; top: 4px; height: 40px; min-height: 40px; padding: 0 18px; border-radius: 7px; }
@media (pointer: coarse) { .ov-launch .launch-field input { height: 52px; } .ov-launch .launch-row button { height: 44px; min-height: 44px; } }   /* 44 px under a thumb */
@media (max-width: 720px) {
  .ov-launch .launch-field { flex-wrap: wrap; }
  .ov-launch .launch-field input { flex-basis: 100%; padding-right: 12px; }
  .ov-launch .launch-row button { position: static; flex-basis: 100%; justify-content: center; margin: 8px 0 0; height: 48px; }
  .ov-launch .launch-icon { top: 24px; }   /* the globe on the field's middle, not the wrapped row's */
}
@media (max-width: 720px) and (pointer: coarse) { .ov-launch .launch-icon { top: 26px; } }

/* crowd5: a needs-a-look card's picture at its own proportions and never above its own pixels (the owner, senior 03:26 UTC 5 Oct: a small
   picture stretched to the card, "Insulated Travel Mug" three centimetres high): as wide as it is, at most the card and 420 px tall — a
   phone's picture stays phone-sized — on its frame; a press opens it large (the lightbox) */
.al-text .al-shot-a { justify-self: start; max-width: 100%; display: block; cursor: zoom-in; }
.al-text .al-shot { display: block; width: auto; height: auto; max-width: 100%; max-height: 420px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }

/* crowd5: the colours, "a little more alive" (the owner, senior 04:07; design-critic's COLOURS-2026-10-05.md). A NAME stays navy even when
   it is a link (rule 2); the chosen tab gains a 2-px blue line (rule 3); headings are navy (rule 1) */
h1, h2, h3 { color: var(--accent); }
.siterow .sr-name, a.failrow .fr-name, .al-main b, .alert summary b, .checks-list label.inl, .card h2 a, .site-head h1 a { color: var(--accent); }
/* row 40 (the owner: "the line under the current menu page looks not so good"; senior 05:09): the chosen tab wears ONE mark — the word in
   navy and semibold on a soft navy pill; no underline, no outline; hover a lighter tint; focus the ring. The same under a thumb */
header nav a.on, nav.anon a[aria-current]:not(.button) { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: none; }
header nav a:not(.on):hover { background: color-mix(in srgb, var(--accent) 4%, transparent); color: var(--ink); }
@media (pointer: coarse), (max-width: 720px) {
  header nav a.on::before, nav.anon a[aria-current]:not(.button)::before { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: none !important; }
  header nav a:not(.button):not(.on):hover::before { background: color-mix(in srgb, var(--accent) 4%, transparent); }
}
/* crowd5: a window is a small browser (the owner's rows 21 and 25, design-critic 04:17): "need more and small" — a phone 90 px wide, a
   desktop 160, wrapping; the device's name above; the frame with its address bar (the real address typed once), a 2-px loading line until
   the first picture paints, the body white in the device's proportions (never a word, never a drawn page inside), the check under it */
.now .wins { gap: 14px 12px; }
.now .wins > .win.small { box-shadow: none; cursor: zoom-in; } .now .wins > .win.small.desk { width: 160px; } .now .wins > .win.small.phone { width: 90px; }
.now .win .win-dev { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now .win .win-dev .dev-glyph { flex: none; }
.now .win .win-frame { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.now .win .win-addr { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; background: var(--bg-2); color: var(--muted); font: 10px/1 var(--mono); border-bottom: 1px solid var(--line); }
.now .win .win-addr svg { flex: none; }
.now .win .addr { min-width: 0; overflow: hidden; white-space: nowrap; }
.now .win.phone .addr { flex: 1; display: flex; justify-content: flex-end; }   /* a phone's bar: the host centred, cut at its left when too long */
.now .win.phone .addr .addr-t { margin: 0 auto; }
.now .win .addr.typing::after { content: ""; display: inline-block; width: 1px; height: 10px; margin-left: 1px; vertical-align: -1px; background: currentColor; animation: caret .5s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.now .win .win-load { display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--live, #3B82F6), transparent) no-repeat; background-size: 40% 100%; animation: winload 1.1s linear infinite; }
.now .win:has(img.ok) .win-load { visibility: hidden; animation: none; }   /* stops when the first picture stands; its 2 px stay, nothing jumps */
@keyframes winload { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.now .wins > .win.small .win-screen { background: #fff; border-radius: 0; }
.now .wins > .win.small .win-screen img.frame { opacity: 0; transition: opacity .15s; } .now .wins > .win.small .win-screen img.frame.ok { opacity: 1; }
.now .wins > .win.small .win-cap { padding: 4px 0 0; font-size: 12px; line-height: 16px; -webkit-line-clamp: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (prefers-reduced-motion: reduce) { .now .win .win-load { animation: none; background: var(--live, #3B82F6); } .now .win .addr.typing::after { animation: none; } .now .wins > .win.small .win-screen img.frame { transition: none; } }
@media (max-width: 720px) { .now .wins { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; } .now .wins > .win.small { scroll-snap-align: start; } }   /* a phone: ONE row that slides, the next window peeking (design-critic N4b); the page itself never moves sideways */
/* crowd5: THE LIVE WALL (row 33, senior 04:54; design-critic 04:55 and 05:13; the device window, fable-critic/DEVICE-WINDOW.md 05:02):
   a site is a GROUP — its name, its line, its browsers in the house's device order — and the groups flow side by side, wrapping, so
   thirteen browsers stand on one screen. Every window is the ONE DEVICE WINDOW: the name line above (the name in navy, at its right the
   live dot and the picture's age), the device drawn light in one ink (#26334D, a 2-px outline on white: a desktop's bar with its dots
   and address; an iPad's even bezel; a phone's thin bezel and its island, a Galaxy's punch-hole, a Fold's hinge or crease; on phones
   and iPads the host in a slim bar at the top of the screen), the screen at ONE height (150 px, 120 under 1100 px of window) and its
   device's ratio, the check under it (whole, never "…") and its step as dots. Every frame is 16 px above its picture and 8 below, so
   pictures and captions share their lines; the bar takes the frame's width and never widens it — a phone's host is cut on "…" (2 + 14 above a desktop's, 2 + 3 + 11 above a phone's). Live: the dot breathes; ended: ✓ / ✕ / ? lands mid-screen for a second; stale: dimmed */
#live .cams.wall { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px 36px; --wl-h: 150px; --dev-ink: #26334D; }
@media (max-width: 1210px) { #live .cams.wall { --wl-h: 120px; } }
.wall .wl-site { min-width: 0; max-width: 100%; }
.wall .wl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; margin: 0 0 8px; font-size: 14px; line-height: 20px; }
.wall .wl-name { color: var(--accent); font-weight: 650; }
.wall .wl-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 12px; }
.wall .wl-br { display: none; flex-basis: 100%; height: 0; } .wall .wl-row.split .wl-br { display: block; }
.wall .wl-win { --pw: calc(var(--wl-h) * var(--ar, 1.7778)); margin: 0; width: max-content; min-width: max(calc(var(--pw) + 12px), 112px); display: flex; flex-direction: column; align-items: center; cursor: pointer; border-radius: 10px; outline: none; }
.wall .wl-dev { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 5px; font-size: 13px; line-height: 18px; white-space: nowrap; }
.wall .wl-dev b { font-weight: 600; color: var(--accent); }
.wall .wl-st { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wall .wl-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.wall .wl-win.on .wl-dot { background: var(--live); animation: wl-pulse 1.6s ease-in-out infinite; }
@keyframes wl-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 22%, transparent); } }
.wall .wl-frame { position: relative; border: 2px solid var(--dev-ink); background: #fff; }
.wall .wl-pic { position: relative; width: var(--pw); height: var(--wl-h); overflow: hidden; background: #fff; }
.wall .wl-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .2s; }
.wall .wl-win.nosig .wl-pic img { visibility: hidden; }
.wall .wl-load { position: absolute; left: 0; right: 0; top: 0; height: 2px; display: none; background: linear-gradient(90deg, transparent, var(--live), transparent) no-repeat; background-size: 40% 100%; animation: winload 1.1s linear infinite; }
.wall .wl-win.nosig .wl-load { display: block; }
@keyframes winload { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.wall .wl-win.stale .wl-pic img { opacity: .7; }
.wall .wl-mark { position: absolute; left: 50%; top: 50%; display: none; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; place-items: center; font: 700 15px/1 var(--sans, inherit); color: #fff; box-shadow: 0 0 0 3px #fff; }
.wall .wl-win[data-flash] .wl-mark { display: grid; } .wall .wl-win[data-flash="ok"] .wl-mark { background: var(--green-fill); }
.wall .wl-win[data-flash="bad"] .wl-mark { background: #DC2626; } .wall .wl-win[data-flash="look"] .wl-mark { background: #C76A00; }
.wall .wl-win:hover .wl-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); } .wall .wl-win:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 10px; }   /* the focused window's own 2-px edge, as .lp .pair.lwall's (senior2 08:42 UTC 12 Oct: on the card-less Browsers wall the frame's ring did not read as the window's edge) */
/* the bar: a desktop's three dots and its address pill; on an iPad and a phone the host alone, centred, in a slim bar at the screen's top */
.wall .wl-chrome { display: flex; align-items: center; justify-content: center; width: 0; min-width: 100%; box-sizing: border-box; height: 10px; padding: 0 4px; background: #fff; border-bottom: 1px solid color-mix(in srgb, var(--dev-ink) 18%, transparent); }
.wall .wl-chrome i { display: none; }
.wall .wl-addr { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font: 6.5px/8px var(--sans, inherit); }
.wall .desktop .wl-frame { border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.wall .desktop .wl-chrome { justify-content: flex-start; gap: 3px; height: 13px; padding: 0 5px; }
.wall .desktop .wl-chrome i { display: block; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--dev-ink) 45%, #fff); flex: none; }
.wall .desktop .wl-addr { margin-left: 5px; max-width: 64%; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--dev-ink) 18%, transparent); border-radius: 999px; font: 7.5px/9px var(--sans, inherit); }
.wall .tablet .wl-frame { padding: 3px 6px 6px; border-radius: 11px; } .wall .tablet .wl-chrome { border-radius: 3px 3px 0 0; } .wall .tablet .wl-pic { border-radius: 0 0 3px 3px; }
.wall .phone .wl-frame { padding: 3px 4px 4px; border-radius: 14px; margin-bottom: 2px; } .wall .phone .wl-chrome { border-radius: 9px 9px 0 0; } .wall .phone .wl-pic { border-radius: 0 0 9px 9px; }
.wall .tablet .wl-frame::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 2px; margin-left: -1px; border-radius: 50%; background: var(--dev-ink); }   /* the camera dot */
.wall .phone .wl-frame::after { content: ""; position: absolute; left: 50%; top: 0; width: 14px; height: 2px; margin-left: -7px; border-radius: 1px; background: var(--dev-ink); }   /* the island, in the bezel above the screen */
.wall .phone[data-dev="android"] .wl-frame::after { width: 2px; height: 2px; margin-left: -1px; border-radius: 50%; }   /* a Galaxy's punch-hole */
.wall .phone[data-dev="fold_closed"] .wl-frame::before { content: ""; position: absolute; left: 1px; top: 10px; bottom: 10px; width: 1px; background: color-mix(in srgb, var(--dev-ink) 50%, transparent); }   /* the hinge */
.wall .phone[data-dev="fold_open"] .wl-pic::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--dev-ink) 22%, transparent); }   /* the crease */
.wall .phone[data-dev^="fold"] .wl-frame::after { width: 2px; height: 2px; margin-left: -1px; border-radius: 50%; }
.wall .wl-win figcaption { align-self: stretch; width: 0; min-width: 100%; box-sizing: border-box; padding: 6px 2px 0; text-align: center; }   /* the caption wraps inside the slot; it never widens it */
.wall .wl-chk { display: block; font-size: 13px; line-height: 17px; color: var(--ink); font-weight: 600; overflow-wrap: break-word; }
.wall .wl-steps { display: flex; justify-content: center; gap: 3px; margin-top: 4px; } .wall .wl-steps:empty { display: none; }
.wall .wl-steps i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); } .wall .wl-steps i.now { background: var(--live); }
@media (max-width: 720px) {   /* a phone: each site's row slides sideways, the next window peeking; the site's name stays put */
  #live .cams.wall { display: block; } .wall .wl-site + .wl-site { margin-top: 18px; }
  .wall .wl-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
  .wall .wl-win { flex: none; scroll-snap-align: start; } .wall .wl-br { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .wall .wl-win.on .wl-dot, .wall .wl-load { animation: none; } .wall .wl-pic img { transition: none; } }
#live:has(.wl-site) .live-rows { display: none; }   /* the wall says each report and its Stop; the log lines stay only while no browser shows (row 33 (9)) */
/* crowd5: THE LIVE POP-UP (the owner's row 27, "looks ugly, no understand where is what"; senior 04:29 UTC 5 Oct): the house's own
   surface and type — no black bar, no typewriter. The head: the site's name large in navy, under it the device by its name and the
   report as a link, at the right "live · 2 s ago" with the moving blue dot. The body: the picture in its device frame at the left (the
   wall's frames, larger), the check in hand and this browser's checks at the right. The foot: "‹ previous browser · 3 of 13 · next
   browser ›". Esc and a click outside close. */
dialog.camdlg.cd-live { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 64px rgba(17,24,39,.28); max-width: calc(96vw / var(--zoom, 1)); }
dialog.camdlg.cd-live .cd-head { gap: 14px; align-items: center; padding: 14px 14px 12px 20px; font: inherit; border-bottom: 1px solid var(--line); background: var(--surface); }
dialog.camdlg.cd-live .cd-who { min-width: 0; display: grid; gap: 2px; }
dialog.camdlg.cd-live .cd-site { font-size: 20px; line-height: 26px; font-weight: 650; color: var(--accent); overflow-wrap: anywhere; white-space: normal; }
dialog.camdlg.cd-live .cd-where { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
dialog.camdlg.cd-live .cd-where a { color: var(--link); } dialog.camdlg.cd-live .cd-where a[hidden] { display: none; }
dialog.camdlg.cd-live .cd-state { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
dialog.camdlg.cd-live .led { width: 8px; height: 8px; background: var(--line-3); }
dialog.camdlg.cd-live.on .led { background: var(--live); animation: wl-pulse 1.6s ease-in-out infinite; }
dialog.camdlg.cd-live .ib { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 8px; width: 36px; height: 36px; padding: 0; font-size: 15px; }
dialog.camdlg.cd-live .ib:hover { color: var(--ink); border-color: var(--accent); }
dialog.camdlg.cd-live .cd-film { background: var(--bg-2); padding: 20px; align-items: center; justify-content: center; }
dialog.camdlg.cd-live .cd-film img { background: var(--surface); object-fit: cover; object-position: top center; max-width: none; }
dialog.camdlg.cd-live.cd-beside .cd-body { display: grid; grid-template-columns: var(--film) var(--side); position: static; overflow: hidden; }
dialog.camdlg.cd-live.cd-beside .cd-film { width: auto; } dialog.camdlg.cd-live.cd-beside .cd-info { position: static; inset: auto; overflow-y: auto; max-height: calc(calc(94vh / var(--zoom, 1)) - 130px); }
dialog.camdlg.cd-live .cd-info { padding: 18px 20px; gap: 10px; align-content: start; border-left: 1px solid var(--line); border-top: 0; }
dialog.camdlg.cd-live .cd-check { display: grid; gap: 2px; font-size: 18px; line-height: 24px; } dialog.camdlg.cd-live .cd-check b { color: var(--ink); }
dialog.camdlg.cd-live .cd-when { font: 13px/18px var(--sans, inherit); color: var(--muted); }
dialog.camdlg.cd-live .cd-goal { font-size: 14.5px; line-height: 21px; color: var(--ink-2); margin-bottom: 4px; }
dialog.camdlg.cd-live .cd-done { display: grid; grid-template-columns: 1fr; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
dialog.camdlg.cd-live .cd-done li { padding: 6px 8px; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); }
dialog.camdlg.cd-live .cd-done li .cd-n { width: 16px; min-width: 16px; height: 16px; display: inline-grid; place-items: center; font: 700 13px/1 var(--sans, inherit); }
dialog.camdlg.cd-live .cd-done li.cd-ok .cd-n { color: var(--green); } dialog.camdlg.cd-live .cd-done li.cd-bad .cd-n { color: var(--red); }
dialog.camdlg.cd-live .cd-done li.cd-look .cd-n { color: var(--amber); } dialog.camdlg.cd-live .cd-done li.cd-off .cd-n { color: var(--muted); }
dialog.camdlg.cd-live .cd-done li.cd-now { background: color-mix(in srgb, var(--live) 9%, transparent); box-shadow: inset 2px 0 0 var(--live); color: var(--ink); font-weight: 600; }
dialog.camdlg.cd-live .cd-done li.cd-now .cd-n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: wl-pulse 1.6s ease-in-out infinite; }
dialog.camdlg.cd-live .cd-done li.cd-now .cd-sec { color: var(--link); }
dialog.camdlg.cd-live .cd-done li.cd-next { color: var(--muted); } dialog.camdlg.cd-live .cd-done li.cd-next .cd-n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--line-3); }
dialog.camdlg.cd-live .cd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
dialog.camdlg.cd-live .cd-foot[hidden] { display: none; } dialog.camdlg.cd-live .cd-pos { font-size: 13px; color: var(--muted); }
@media (max-width: 720px) {
  dialog.camdlg.cd-live { width: calc(96vw / var(--zoom, 1)); } dialog.camdlg.cd-live .cd-head { padding: 12px 10px 10px 14px; } dialog.camdlg.cd-live .cd-site { font-size: 18px; line-height: 24px; }
  dialog.camdlg.cd-live .cd-film { padding: 14px; } dialog.camdlg.cd-live .cd-info { border-left: 0; border-top: 1px solid var(--line); padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { dialog.camdlg.cd-live.on .led, dialog.camdlg.cd-live .cd-done li.cd-now .cd-n::before { animation: none; } }
dialog.camdlg.cd-live .cd-done li .cd-sec { font: 12.5px/1 var(--sans, inherit); font-variant-numeric: tabular-nums; color: var(--muted); }
dialog.camdlg.cd-live .cd-go { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--link); font: 500 14px var(--sans, inherit); box-shadow: none; cursor: pointer; }
dialog.camdlg.cd-live .cd-go:hover { border-color: var(--link); background: color-mix(in srgb, var(--live) 6%, var(--surface)); }
/* crowd5: ROW 41, THE MARKS (the owner: "question sign mark looks dunno"; senior 05:15, design-critic 05:16 and 06:17 UTC 5 Oct): one
   family drawn once (static/marks/*.svg, a 24-unit square): NEEDS A LOOK is an amber disc with a white EYE — the logo's eye made simple,
   "we want your eye on this"; a PROVEN FAILURE the red disc, nothing inside; NOT CHECKED a hollow grey ring (the dotted ◌ goes); in a grid
   a pass stays the plain green ✓. Sizes: the eye and the red disc 20 px in a grid cell and the legend (never under 20 for the eye), 24 in
   a card's title, 40 where a check's mark lands on a device window. A pressable badge is the button itself: no ring at rest, a 2-px ring
   in its own colour 2 px outside it on hover and focus. The glyphs stay in the page for the screen reader's labels; the badge is drawn */
.fr-name .mk.look, .fail-text .mk.look, .alert > summary > .mk.look { width: 24px; height: 24px; vertical-align: middle; min-width: 0; font-size: 0; }
html table.grid td.cell .x, html .grid-card .legend .x, html .legend .x { width: 20px; height: 20px; vertical-align: -5px; background: var(--red-mark); }
/* NOT CHECKED: the hollow grey ring drawn over the "◌" the page keeps for its words (a cell's aria-label, the legend, the client page) */
td.cell span[aria-label^="not checked"], .legend .nc, .share .chk .nc { display: inline-block; width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; vertical-align: middle; font-size: 0; line-height: normal; color: transparent; }
table.grid td.cell.fail a, table.grid td.cell.blocked a, table.grid td.cell.look a { display: inline-grid; place-items: center; min-width: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; line-height: 0; vertical-align: middle; }
table.grid td.cell.fail a:hover, table.grid td.cell.blocked a:hover, table.grid td.cell.look a:hover { background: none; }
table.grid td.cell.fail a:hover, table.grid td.cell.blocked a:hover, table.grid td.cell.fail a:focus-visible, table.grid td.cell.blocked a:focus-visible { outline: 2px solid var(--red-mark); outline-offset: 0; }
table.grid td.cell.look a:hover, table.grid td.cell.look a:focus-visible { outline: 2px solid #C76A00; outline-offset: 0; }
td.cell .mk.look, .share .chk .mk.look { color: transparent; }

/* the mark that lands on a device window when a check ends: 40 px, the family's own drawings (the wall, row 33) */
.wall .wl-mark { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 0; box-shadow: none; background: center / contain no-repeat; }
.wall .wl-win[data-flash="ok"] .wl-mark { background: url("/static/marks/pass.svg?v=1") center / contain no-repeat; }
.wall .wl-win[data-flash="bad"] .wl-mark { background: url("/static/marks/fail.svg?v=1") center / contain no-repeat; }
/* the wall under load (design-critic 06:23 UTC 5 Oct): the picture's height follows the count (the script sets --wl-h: 150 / 120 / 90 px);
   at 90 px a window says "alive, on this check" — no step dots, a narrower slot; off the report's own page three lines of groups, then
   "and N more browsers · show all", which opens the rest in place for the visit */
.wall .wl-site.over { display: none; }
.wl-more { margin: 14px 0 0; font-size: 14px; } .wl-more[hidden] { display: none; } .wl-more button.linkish { color: var(--link); min-height: 32px; }
@media (pointer: coarse) { .wl-more button.linkish { min-height: 44px; } }
.wall.tiny .wl-steps { display: none; } .wall.tiny .wl-win { min-width: max(calc(var(--pw) + 12px), 84px); }
.wall.tiny .wl-win.desktop { min-width: max(calc(var(--pw) + 4px), 84px); } .wall.tiny .wl-chk { font-size: 12px; line-height: 15px; }
.wall.tiny .wl-dev { font-size: 12px; } .wall.tiny .wl-row { gap: 10px 10px; } #live .cams.wall.tiny { gap: 16px 28px; }
.live-embed { margin: 12px 0 4px; } .live-embed .cams.wall .empty { margin: 0; }
/* row 35: the wall's two filters, by site and by device, in its head; a window or a site they leave out is gone, not dimmed */
.wl-filters { display: inline-flex; gap: 8px; margin-left: 12px; } .wl-filters[hidden] { display: none; }
.wl-filters select { width: auto; max-width: 220px; min-height: 32px; padding: 4px 28px 4px 10px; font-size: 13.5px; }
@media (pointer: coarse) { .wl-filters select { min-height: 44px; } }
@media (max-width: 720px) { .wl-filters { display: flex; width: 100%; margin: 8px 0 0; } .wl-filters select { flex: 1; max-width: none; min-width: 0; } }
.wall .wl-win.off, .wall .wl-site.off { display: none; }
.wl-none { margin: 4px 0 12px; } .wl-none[hidden] { display: none; }
/* crowd5: THE RUN BAR (rows 7 + 8; design-critic 06:04 UTC 5 Oct): a tick box at the left of every site row (22 px drawn, its label the
   thumb's 44), one in the head for every site shown; the moment one is ticked a bar stands at the window's foot, the content's width,
   white on the cool ground with a soft shadow: "3 sites · Checks: each site's own ▾ · Devices: each site's own ▾ · [Run]  clear" — ONE
   sentence and ONE filled button. The sheets open upward from the bar (from the foot on a phone); a choice shows in words */
.pickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px 18px; padding: 12px max(20px, calc((100% - 1192px) / 2)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -12px 32px -20px rgba(17,24,39,.40); }
.pickbar[hidden] { display: none; }
.pb-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; font-size: 15px; }
.pb-n { color: var(--accent); font-weight: 650; } .pb-sep { color: var(--muted); }
.pb-pick { position: relative; }
.pb-pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: 8px; color: var(--ink-2); background: var(--surface); }
.pb-pick > summary::-webkit-details-marker { display: none; }
.pb-pick > summary:hover { border-color: var(--accent); } .pb-pick[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pb-said { color: var(--ink); font-weight: 600; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-caret { color: var(--muted); font-size: 12px; }
.pb-sheet { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 2; min-width: 270px; max-height: min(calc(60vh / var(--zoom, 1)), 440px); overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 18px 44px -16px rgba(17,24,39,.38); display: grid; }
.pb-sheet label { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: var(--ink); }
.pb-sheet label:hover { background: var(--surface-2); } .pb-sheet input { width: 18px; height: 18px; margin: 0; flex: none; }
.pb-sheet .pb-own { color: var(--ink-2); border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0; margin-bottom: 4px; }
.pb-acts { display: flex; align-items: center; gap: 14px; flex: none; } .pb-acts .primary { min-height: 42px; padding: 0 26px; }
body.pb-on { padding-bottom: 86px; }
.pb-tick { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 2px 0 0; cursor: pointer; flex: none; }   /* in the flow: the table's scrolling box clips what a negative margin pulls outside it, and a press there would miss */
.pb-tick input { width: 22px; height: 22px; margin: 0; cursor: pointer; }
th .pb-tick { vertical-align: middle; margin: -6px 2px -6px 0; }
@media (pointer: coarse) { .pb-pick > summary, .pb-sheet label, .pb-acts .primary { min-height: 44px; } }
@media (max-width: 720px) {   /* a phone: two lines, the button full width; a sheet rises from the foot */
  .pickbar { flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .pb-line { flex-basis: 100%; font-size: 14.5px; } .pb-sep:last-of-type { display: none; } .pb-acts { flex-basis: 100%; } .pb-acts .primary { flex: 1; }
  .pb-pick { position: static; } .pb-sheet { position: fixed; left: 0; right: 0; bottom: 0; min-width: 0; max-height: calc(70vh / var(--zoom, 1)); border-radius: 16px 16px 0 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); }
  .pb-said { max-width: 150px; } body.pb-on { padding-bottom: 150px; }
}
/* the run bar's ticks on a phone (design-critic 07:50 UTC 5 Oct): with the tick in the row a site's name was cut ("Nort… / Outd…") in the
   very list whose job is to name the sites. On a phone the row is two lines — the tick and the NAME whole on the first, the last report's
   words under the name, the "…" at the right of both; the letter tile goes below 560 px. A name is never cut on the Sites page. */
@media (max-width: 720px) {
  table.sitelist tbody tr:has(.pb-tick) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; }
  table.sitelist tbody tr:has(.pb-tick) td.sitecell { grid-column: 1; grid-row: 1; }
  table.sitelist tbody tr:has(.pb-tick) td.wide { grid-column: 1; grid-row: 2; max-width: none; text-align: left; margin-left: 46px; }   /* beside, never over, the tick: a press 21 px under its middle must still reach it */
  table.sitelist tbody tr:has(.pb-tick) td.actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  table.sitelist tbody tr:has(.pb-tick) .sitewords > a { white-space: normal; text-overflow: clip; overflow: visible; overflow-wrap: anywhere; }   /* a nameless site's address has no space to break at */
  .pb-acts .primary { justify-content: center; text-align: center; }
}
@media (max-width: 560px) { table.sitelist tbody tr:has(.pb-tick) .sitemark { display: none; } }
/* the sheet ends 12 px above the bar and scrolls inside; 36-px rows under a mouse, 44 under a thumb */
@media (min-width: 721px) { .pb-sheet { bottom: calc(100% + 26px); max-height: min(calc(60vh / var(--zoom, 1)), calc(calc(100vh / var(--zoom, 1)) - 160px)); } }   /* its button stands ~14 px inside the bar: 26 = 12 px of air above the bar */ .pb-sheet label { min-height: 36px; }
@media (pointer: coarse) { .pb-sheet label { min-height: 44px; } }
/* the Checks page's side of the run bar: "Run…" at a row's end, pressed it says "In the run ✓" in the live blue */
.pb-add[aria-pressed="true"] { color: var(--link); border-color: var(--link); background: color-mix(in srgb, var(--live) 8%, transparent); }
.run-hint { margin: 12px 0 0; }
/* "Run…" is a button, the row's act (design-critic 08:50): the small outline button the Sites page's "Check now" is, turning to the filled
   tint "In the run ✓" when pressed — one look for a row's act on both pages */
.checks-list td.actions .pb-add { min-height: 32px; padding: 0 12px; text-decoration: none; }
@media (pointer: coarse) { .checks-list td.actions .pb-add { min-height: 44px; } }
.pb-add[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-weight: 600; }
/* crowd5: the stranger's LOOK PAGE's ten are THE WALL (row 36; design-critic 07:13 and 08:06 UTC 5 Oct: "the old frames, three sizes in a
   mosaic 3,400 px tall … Desktop · Alice three times"): one group, ten true shapes at one height under their own names, the wall's drawing
   in one ink; the page's two pictures cross-fade inside the screen; the band of a verdict lies at the screen's foot; on a phone one row that
   slides. The large window above stays the one the page follows */
.lp .pair.lwall { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 12px; margin-top: 14px; --wl-h: 150px; --dev-ink: #26334D; }
@media (max-width: 1210px) { .lp .pair.lwall { --wl-h: 120px; } }
.lp .pair.lwall .wl-win { box-shadow: none; border: 0; background: none; padding: 0; outline-offset: 3px; }
.lp .pair.lwall .wl-dev .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.lp .pair.lwall .wl-dev .dot.live { background: var(--live); animation: wl-pulse 1.6s ease-in-out infinite; } .lp .pair.lwall .wl-dev .dot.done { background: var(--green-fill); }
.lp .pair.lwall .wl-pic img.frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .2s; }
.lp .pair.lwall .wl-pic img.frame.show { opacity: 1; }
.lp .pair.lwall .win.idle .frame.show, .lp .pair.lwall .win.over .frame.show, .lp .pair.lwall .win.next .frame.show { opacity: .55; }
.lp .pair.lwall .band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 4px; font-size: 11px; line-height: 14px; background: rgba(255,255,255,.94); color: var(--ink); }
.lp .pair.lwall .band[hidden] { display: none; }
.lp .pair.lwall .wl-cap { align-self: stretch; width: 0; min-width: 100%; box-sizing: border-box; margin: 0; padding: 6px 2px 0; text-align: center; }
.lp .pair.lwall .wl-chk { display: block; font-size: 13px; line-height: 17px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; } .lp .pair.lwall .wl-chk.next { color: var(--muted); font-weight: 400; }
.lp .pair.lwall .wl-state { display: block; font-size: 11.5px; line-height: 15px; color: var(--muted); }
.lp .pair.lwall .win.follow .wl-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); }
@media (max-width: 720px) { .lp.many .pair.lwall { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .lp .pair.lwall .wl-win { flex: none; scroll-snap-align: start; } }
/* the wall, design-critic 07:13: at every size the FRAME hugs its picture — a Fold closed about 35 px wide at 90 px, never a landscape box
   stretched to the width of its own name line; the name may be wider than its device, the device standing at the line's left under it */
.wall .wl-win { align-items: flex-start; } .wall .wl-frame { align-self: flex-start; } .wall .wl-win figcaption, .lp .pair.lwall .wl-cap { text-align: left; }
.wall.tiny .wl-win { min-width: 0; } .wall.tiny .wl-win.desktop { min-width: 0; }
.lp .pair.lwall .wl-win { overflow: visible; padding-top: 2px; border-radius: 0; min-height: 0; height: auto; }   /* the look page's own .win clipped the name line's top: "ıPad" */
.lp .pair.lwall { min-width: 0; max-width: 100%; }
@media (max-width: 720px) { .lp.many .lp-stage > .pair.lwall { width: 100%; max-width: calc(calc(100vw / var(--zoom, 1)) - 32px); } }
@media (max-width: 720px) { .lp .pair.lwall { contain: paint; padding: 4px 4px 8px; } }   /* Chromium counted the sliding row's windows into the page's width (1,584 px at 390): the row paints inside itself */
/* the look page's wall, design-critic 08:37: (1) on a phone the ten stand directly under the large window, the email box after them — the
   top row lets its parts take the stage's order; (2) the page says its state ONCE, in its line under the title: the bar under the wall
   goes on the ten-windows page (its step words live on in that line), and a window's step is the wall's dots */
.lp .pair.lwall .wl-steps { display: flex; justify-content: center; gap: 3px; margin-top: 3px; } .lp .pair.lwall .wl-steps:empty, .lp .pair.lwall .wl-state:empty { display: none; }
.lp .pair.lwall .wl-steps i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); } .lp .pair.lwall .wl-steps i.now { background: var(--live); }
#livepage.lp.many #steps-wrap { display: none; }
@media (max-width: 720px) {
  #livepage.lp.many .toprow { display: contents; }
  #livepage.lp.many .lp-stage > .toprow > #big { order: 1; } #livepage.lp.many .lp-stage > .pair.lwall { order: 2; margin-top: 12px; }
  #livepage.lp.many .lp-stage > .toprow > .card.keep { order: 3; margin-top: 16px; } #livepage.lp.many .lp-stage > #pics-hold-row { order: 4; }
  #livepage.lp.many .lp-stage > .toprow > .just, #livepage.lp.many .lp-stage > .toprow > .wlist { order: 5; }
}
#livepage #big { scroll-margin-top: 76px; }   /* brought into view after a press, clear of the header */
#livepage #just:has(li.empty) li:not(.empty) { display: none; }   /* until the first result, "Just checked" is its sentence alone — no empty rules (design-critic 09:08) */
/* DC-H111: the wall on the look page in every shape — the bar's dots at 3:1 on white, a focused window's own 2-px edge, the large window's
   "+9 more" button an edge a person sees on the tinted bar */
.wall .desktop .wl-chrome i, .lp .pair.lwall .desktop .wl-chrome i { background: color-mix(in srgb, var(--dev-ink, #26334D) 70%, #fff); }
.lp .pair.lwall .wl-win:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.lp.many .bbar .more { border: 1px solid var(--line-3); background: var(--surface); }
#livepage #claim-blocked a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }   /* a blocked look's one act, "Check a public address": it painted white on white */
#livepage.lp.many .bdet { height: auto; min-height: 40px; overflow: visible; }   /* the pane's line keeps its two lines' room and grows, never cuts: a feed by device speaks longer reasons ("No browser is free yet. Its screen appears …"; d33bb3c4's land) */
/* a finished window says its last check and its MARK (senior 11:26 UTC 5 Oct): the family's own drawings before the state word — the
   green badge passed, the red disc failed, the grey ring not checked (row 41) */
.lp .pair.lwall .wl-state[data-v]:not([data-v=""])::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; background: center / contain no-repeat; }
.lp .pair.lwall .wl-state[data-v="pass"]:not([data-v=""])::before { background-image: url("/static/marks/pass.svg?v=1"); }
.lp .pair.lwall .wl-state[data-v="fail"]:not([data-v=""])::before { background-image: url("/static/marks/fail.svg?v=1"); }
.lp .pair.lwall .wl-state[data-v="notchecked"]:not([data-v=""])::before { box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; background: none; }
/* crowd5: THE STRIP (row 18; design-critic 06:54 UTC 5 Oct): the last twelve reports of a site as stacked bars, each a link to its report —
   passed the green fill, a proven failure the red mark, a look the amber mark, not checked a quiet grey; hover and focus lift a bar 2 px */
.strip { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 0; }
.strip-svg { overflow: visible; display: block; }
.strip .b-ground { fill: #EEF1F6; } .strip .b-none { fill: #C5CCD8; } .strip .b-look { fill: #C76A00; } .strip .b-fail { fill: #DC2626; } .strip .b-pass { fill: #0E9F6E; }
.strip a.bar { cursor: pointer; outline: none; } .strip a.bar > * { transition: transform .12s; }
.strip a.bar:hover > *, .strip a.bar:focus-visible > * { transform: translateY(-2px); }
.strip a.bar:focus-visible .b-ground { stroke: var(--ring); stroke-width: 2px; }
.strip.big a.bar.newest .b-ground { stroke: var(--accent); stroke-width: 1.5px; }   /* the newest ringed */
.strip-dates { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.site-strip { margin: 4px 0 18px; }
table.sitelist td.trend { width: 120px; }
@media (pointer: coarse) { .strip a.bar { pointer-events: none; } }   /* under a thumb the strip is a picture (twelve 44-px bars do not fit a phone): the row and the reports' list are the doors; the bars are the mouse's and the keyboard's */

/* crowd5, row 1 (the owner 15:44 UTC 5 Oct: "that text on the logo — add it, but change it to smarter qa"; senior 15:45): the header
   carries HIS WHOLE LOCKUP at every width — the mark, the word and under it the line SMARTER QA (static/brand/logo-head.svg) — and
   (15:53) word and line together are the mark's height: 34 px tall, 32 on a phone and a Fold open; the line's capitals 8.0 / 7.5 px */
.brand .mark { background-image: url("/static/brand/logo-mark.svg?v=21"); font-size: 41px; width: calc(663.42 / 546 * 1em); }   /* THE FALCON ALONE (the owner via senior 12:56 UTC 13 Oct): no word, no line beside it; 20 % above the lockup's 34 */
:root[data-theme="dark"] .brand .mark { background-image: url("/static/brand/logo-mark-white.svg?v=21"); }
@media (max-width: 720px) { .brand .mark { font-size: 38px; } }
@media (min-width: 721px) and (max-width: 900px) { .brand .mark { font-size: 38px; } header.top:not(:has(nav.anon)) nav a { padding: 5px 7px; } } @media (min-width: 721px) and (max-width: 760px) { header.top:not(:has(nav.anon)) nav a { padding: 5px 5px; } }   /* a Fold open: the member's five tabs stay on one line beside the lockup */
/* crowd5, BROKEN LIVE (senior 15:16 UTC 5 Oct, the owner's Galaxy Fold OPEN; design-critic's DC-H116 band, 721–1023 px): the site's NAME
   stood one letter a line — DC-H61's "a one-word host wraps where it must" (overflow-wrap: anywhere) reached the NAME, and in a TABLE row
   whose right columns (the strip, the checks, Check now and ···) were fixed, the name's share fell to a letter. RULED: under 1024 px the
   Sites list is the phone's TWO-LINE row — the name (whole words, two lines at most) and the ··· on line one, the last report's words and
   the small strip on line two, Check now behind the ··· — and from 1024 the table. The add box first and the find field under it, both
   the list's full width. */
@media (min-width: 721px) and (max-width: 1319px) {
  .tablewrap table.sitelist { min-width: 0; width: 100%; } .tablewrap:has(> table.sitelist)::after { content: none; }
  table.sitelist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.sitelist tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.sitelist tbody tr:last-child { border-bottom: 0; } table.sitelist tbody tr:hover td { background: none; }
  table.sitelist tbody td { border: 0; padding: 0; min-width: 0; text-align: left; } table.sitelist tbody td:empty, table.sitelist td.n, table.sitelist td.trend { display: none; }
  table.sitelist tbody td.wide { text-align: right; white-space: normal; max-width: none; width: auto; overflow: visible; text-overflow: clip; line-height: 1.35; } table.sitelist tbody td.wide .pill { white-space: normal; text-align: left; }
  table.sitelist td.wide .dot, table.sitelist td.wide .rep, table.sitelist td.actions > form.inline { display: none; } table.sitelist td.actions .menu form.phone-only { display: block; }
  table.sitelist td.sitecell { max-width: none; width: auto; }
  table.sitelist td.actions { position: relative; } table.sitelist td.actions details.more { margin-left: 6px; position: static; } table.sitelist td.actions details.more .menu { left: auto; right: 0; }
  table.sitelist td.actions details.more > summary { min-width: 44px; min-height: 44px; box-sizing: border-box; display: grid; place-items: center; }
  table.sitelist tbody tr:has(.pb-tick) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; }
  table.sitelist tbody tr:has(.pb-tick) td.sitecell { grid-column: 1; grid-row: 1; }
  table.sitelist tbody tr:has(.pb-tick) td.wide { grid-column: 1; grid-row: 2; text-align: left; margin-left: 112px; }   /* under the name: the tick's 46 px and the letter tile's 56 */
  table.sitelist tbody tr:has(.pb-tick) td.actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sitetop { flex-direction: column; align-items: stretch; } .sitetop .sitefind { flex-wrap: wrap; } .sitetop .sitefind .sf-in { width: auto; flex: 1 1 100%; } .siteadd { max-width: none; flex: none; }
}
/* at EVERY width under 1024 (DC-H116): a name never breaks inside a word — only a word longer than the whole line (a nameless site's
   address) breaks, and that never narrows the column (break-word, not anywhere); two lines at most, then "…"; the host may break anywhere */
@media (max-width: 1319px) {
  table.sitelist .sitewords > a, table.sitelist tbody tr:has(.pb-tick) .sitewords > a { overflow-wrap: break-word; word-break: normal; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
  table.sitelist .sitehost { overflow-wrap: anywhere; }
  table.sitelist tbody tr:has(.pb-tick) .strip-sm { display: inline-block; }
  .sitetop .sitefind .sf-in { flex: 1 1 100%; width: auto; }
}
/* crowd5 (design-critic 15:22 (B), one mark family): a report whose only shortfall is NOT CHECKED wears the hollow grey ring — the
   Sites row's pill, the Overview's row the ring's grey — never a filled grey dot beside the amber ones */
.pill.nc::before { background: none; border: 1.5px solid #7C8698; width: 8px; height: 8px; box-sizing: border-box; }
.siterow.unfinished.nconly { border-left-color: #7C8698; } .siterow.unfinished.nconly .sr-words { color: var(--ink-2); }
/* the find field (design-critic 15:22 (B)): its words are its placeholder, no label on a line of its own */
.strip.sm { vertical-align: middle; margin-left: 8px; } .strip-sm { display: none; }
/* crowd5, the report's result tile (the owner 16:05 UTC 5 Oct, his photo of #393: "This frame doesn't look good" — a thick amber double border
   beside the plain "12 / 14 results passed"; senior's ruling, design-critic 16:08 picks the bar): the tile is the SAME QUIET CARD as its
   neighbour — its hairline, its ground, its shadow, no glow — and a 3-px bar down its left edge inside the card's corner says its state:
   amber for a look or a report that did not finish, red for failing, none when all passed. The number keeps its colour, no underline under
   it; the whole tile is the press (the first link stretched over it), a "›" at its right edge and a darker hairline under the pointer. */
.tiles .tile.result.warn, .tiles .tile.result.bad { border-color: var(--line); position: relative; }
.tiles .tile.result.warn { box-shadow: inset 3px 0 0 var(--amber-mark), var(--shadow); }
.tiles .tile.result.bad { box-shadow: inset 3px 0 0 var(--red-mark), var(--shadow); }
.tile .tile-go { text-decoration: none; } .tile .tile-go:hover, .tile .tile-go:focus-visible { text-decoration: none; }
.tiles .tile.result:has(.tile-go) { position: relative; padding-right: 30px; }
.tiles .tile.result b > .tile-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the tile's own link (b's child) is stretched over the tile */
.tiles .tile.result:has(.tile-go)::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--muted); pointer-events: none; }
.tiles .tile.result:has(.tile-go:hover) { border-color: var(--line-2); }
.tiles .tile.result b > small .tile-go.look { position: relative; z-index: 1; }   /* the second link ("· 1 needs a look" beside "2 failing") keeps its own press above the stretched one */
/* crowd5 (the owner 16:35: "LOGIN PAGE HAS NO LOGO"): on a phone the sign-in head hid its mark ("the header's mark is enough", s1 loop-00 #6)
   — the owner opens /login on his phone and saw no logo. The lockup stands on every auth page at every width, 52 px under 641 */
@media (max-width: 640px) { .auth-head .mark { display: block; font-size: 52px; margin: 0 auto 10px; } }
/* crowd5 (the owner 16:22: "Don't know if the search box looks 9/10"; senior's ruling A): the Overview's first act is the front page's box,
   the same component at its size, 720 px at most, left under the title; "Check every site now" the quiet secondary beside it */
.ov-box { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 24px; }
.ov-box .ov-box-in { flex: 1 1 520px; max-width: 720px; min-width: 0; } .ov-box form.launch { margin: 0; max-width: none; } .ov-box .launch-state:empty { display: none; }
.ov-box .ov-all { margin: 0; flex: none; }
.ov-box form.launch.big .launch-row { margin: 0; max-width: none; }   /* the front page centres its box in a slide; here it stands at the column's left edge, the full 720 */
.ov-box form.launch.big .launch-field { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring), var(--launch-focus-lift, 0 24px 50px -28px rgba(17,24,39,.35)); }   /* the front page's box as the owner knows it: its navy edge and blue ring (the front's is focused on arrival) */
/* crowd5 (the owner 17:16 UTC 5 Oct, the Overview on his Fold: "that dot … looks uncentred", "the eye looks uncentred too"; design-critic
   17:17 — the device's own face (Roboto) sits its letters lower in the line box, so a mark centred on the BOX rides high: hang marks on the
   TEXT's own metrics). (1) THE DOT before the headline: an inline box at the start of its first line, vertical-align: middle (the baseline
   plus half the x-height, in any font), 10 px, 10 px after it; a wrapped line starts under the first word (a 20-px hanging indent) */
.verdict .v-line { display: block; padding-left: 20px; text-indent: -20px; }
.verdict .v-line .vd { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; align-self: auto; text-indent: 0; position: relative; top: -1px; }
@media (max-width: 720px) { .verdict .v-line .vd { margin-top: 0; } }
/* (2) THE MARK before a card's title has its own column: 24 px, a 10-px gap, then the text — the title, the meta line and the sentence share
   ONE left edge; the title's line is 24 px, so the 24-px disc is centred on it whatever the font. Title 16 / 600, meta 13 muted, sentence 14.5 */
.failrow .fr-body:has(> .fr-mark) { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-content: start; }
.failrow .fr-body > .fr-mark { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.failrow .fr-body > .fr-mark .mk.look { width: 24px; height: 24px; }
.failrow .fr-body:has(> .fr-mark) > :not(.fr-mark) { grid-column: 2; }
.failrow .fr-body:has(> .fr-mark) > .fr-name { grid-row: 1; font-size: 16px; line-height: 24px; font-weight: 600; display: block; }
.failrow .fr-body:has(> .fr-mark) > .fr-meta { font-size: 13px; } .failrow .fr-body:has(> .fr-mark) > .fr-why { font-size: 14.5px; }
/* BROKEN LIVE (the owner 18:10 UTC 5 Oct, the Overview on his Fold: "see why" printed ON TOP of the headline's last word, since the dot's fix):
   the headline's hanging indent (text-indent: -20px) is inherited, and under a thumb "see why" is an inline-flex box of 44 px — its words
   slid 20 px back over the headline's. The indent is the line's alone: every box inside it starts at its own 0 */
.verdict .v-line * { text-indent: 0; }
/* crowd5 (the owner 18:21 UTC 5 Oct): the front lead's "qa.pro" is THE LOGO's OWN WORD — his letters, navy, the blue dot (static/brand/word.svg,
   built by tools/logo/build.py) — inline at the text's height: its x-height meets the line's capitals (0.72 em), its baseline on the line's */
.hero .lead .brand-word.lw { display: inline-block; height: 1.03em; width: calc(1116 / 253 * 1.03em); vertical-align: -0.224em; margin-right: .04em;
  background: url("/static/brand/word.svg?v=21") left top / contain no-repeat; color: transparent; letter-spacing: 0; }
/* crowd5, NO EYE (the owner 18:06 UTC 5 Oct: "This eye doesn't look well. Maybe no eye."; design-critic 18:07, the family final, NEEDS-A-LOOK.md):
   needs a look wears NO ICON. Beside words (a legend, a list, a line) an AMBER DOT of 8 px, as the green and the red; alone in the report's grid
   an amber filled dot of 10 px (red and amber differ by size as well as colour: the failing disc is 14); a card or a tile says its state by
   its 3-px bar, no disc before the title. The eye stays only in the logo. */
.mk.look, .fr-name .mk.look, .fail-text .mk.look, .alert > summary > .mk.look, .failrow .fr-body > .fr-mark .mk.look { display: inline-block; width: 8px; height: 8px; min-width: 0; margin: 0 4px 0 0; padding: 0; border-radius: 50%; background: var(--amber-mark); background-image: none; color: transparent; font-size: 0; line-height: 0; vertical-align: middle; position: relative; top: -1px; }
td.cell .mk.look, table.grid td.cell.look .q.mk, table.grid td.cell .mk.look { width: 10px; height: 10px; margin: 0; top: 0; }
.lp.many .mk.look { background: var(--amber-mark); border-radius: 50%; } .lp.many .mk.look:empty::after { content: none; }
/* the cards: the BAR is the state — the Overview's Needs-a-look (amber) and Failing-now (red) cards, the report's and the site page's look cards */
a.failrow.look { box-shadow: inset 3px 0 0 var(--amber-mark); } a.failrow:not(.look) { box-shadow: inset 3px 0 0 var(--red-mark); }
details.alert.look { box-shadow: inset 3px 0 0 var(--amber-mark); }
.site-page a.fail-card.look { box-shadow: inset 3px 0 0 var(--amber-mark); }
/* crowd5, THE STRIP'S OWN COLUMN (the owner 17:16 UTC 5 Oct, Sites on his Fold: "Trends look badly ordered, and a little small"; senior's
   ruling, design-critic's measures): the strip has ONE PLACE, the same x in every row, bigger, twelve slots always (an empty slot a pale
   hairline, the newest at the right). From 1024 the table's TREND column, 132 px; 641–1023 its own column before the ···, centred on the
   two-line row; 640 and under the same place, six slots of 6 × 24 (twelve do not fit beside a name at 344), a picture — the row is the door */
.strip .b-slot { fill: #D8DEE8; }
table.sitelist th.trend, table.sitelist td.trend { width: 132px; }
.strip-sm { display: none; }
@media (max-width: 1319px) {
  table.sitelist tbody tr:has(.pb-tick) { grid-template-columns: minmax(0, 1fr) auto auto; }
  table.sitelist tbody tr:has(.pb-tick) td.trend { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: auto; text-align: right; }
  table.sitelist tbody tr:has(.pb-tick) td.actions { grid-column: 3; }
  table.sitelist tbody tr:has(.pb-tick) .sitecell, table.sitelist tbody tr:has(.pb-tick) td.wide { grid-column: 1; }
}
@media (max-width: 640px) {
  table.sitelist tbody tr:has(.pb-tick) td.trend > .strip:not(.sm) { display: none; } table.sitelist tbody tr:has(.pb-tick) td.trend .strip-sm { display: inline-block; }
  table.sitelist td.trend .strip.sm a.bar { pointer-events: none; }
}
/* the row's text in one order: the name with "verified" a small quiet tag after it (12 px, muted, no line of its own), the address, the status */
table.sitelist .sitewords .pill.verified { background: none; border: 0; padding: 0 0 0 6px; font-size: 12px; font-weight: 400; color: var(--muted); vertical-align: baseline; }
table.sitelist .sitewords .pill.verified::before { content: none; }
@media (min-width: 641px) { table.sitelist tbody tr:has(.pb-tick) td.trend .strip-sm { display: none; } }   /* the six-slot strip is the phone's alone */
/* design-critic 17:37 (8, one thing: "never cut", the owner's rule twice today) and senior 18:12 (the owner: "Looks not good arranged" — four
   stacked lines made a 250-px row): (a) from 1024 LAST REPORT wraps to a second line inside its column, never "…"; (b) a name is never cut;
   (c) "no report yet" wears the hollow ring, the family's mark for it; (d) under 1024 the row is TWO LINES — line 1 the name, "verified" a
   quiet tag beside it and the address after it in muted text; line 2 the status mark and words; the strip in its column centred on both */
@media (min-width: 1320px) {
  table.sitelist td.wide { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
  table.sitelist td.wide .pill, table.sitelist td.wide .muted { white-space: normal; }
}
.pill.stateword::before { background: none; border: 1.5px solid #7C8698; width: 8px; height: 8px; box-sizing: border-box; }
@media (max-width: 1319px) {
  table.sitelist tbody tr:has(.pb-tick) .sitewords { display: block; line-height: 1.35; }
  table.sitelist tbody tr:has(.pb-tick) .sitewords > a { display: inline; -webkit-line-clamp: none; line-clamp: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; }
  table.sitelist tbody tr:has(.pb-tick) .sitewords .sitehost { display: inline; margin-left: 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  table.sitelist tbody tr:has(.pb-tick) td.sitecell, table.sitelist tbody tr:has(.pb-tick) .siteflex { align-items: center; }
  table.sitelist tbody tr:has(.pb-tick) td.wide { margin-top: 4px; }
}
@media (max-width: 640px) { table.sitelist tbody tr:has(.pb-tick) .sitewords .sitehost { display: none; } }   /* on a phone the row is the name and the state, as it was; the address is the site page's (a one-word host only breaks there) */
/* crowd5, the sign-in CARD (the owner 17:11 UTC 5 Oct, /login on his Fold: "Here the LOGO ONLY suits better, without qa.pro and SMARTER QA.
   Also adjust texts like Welcome back"; senior's ruling): the card wears HIS MARK ALONE, centred, 60 px tall (56 on a phone) — the header
   above it already says qa.pro · SMARTER QA — and its texts come down to a card's scale: the title 22 px / 600 (20 on a phone; design-critic 19:07), the sub
   line 15.5 px muted, one rhythm from the mark to the first field: 16 / 8 / 24. /login, /signup, /forgot, /reset, the invite and alerts pages */
.auth-head { margin-bottom: 24px; }
.auth-head .mark { background-image: url("/static/brand/logo-mark.svg?v=21"); font-size: 60px; width: calc(663.42 / 546 * 1em); margin: 0 auto 16px; }
:root[data-theme="dark"] .auth-head .mark { background-image: url("/static/brand/logo-mark-white.svg?v=21"); }
.auth-head h1 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; margin: 0 0 8px; }
.auth-head p, .auth-head p.auth-sub, .auth-head p.muted { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 640px) { .auth-head .mark { font-size: 56px; margin: 0 auto 16px; } .auth-head h1 { font-size: 20px; } }
/* "Forgot your password?" sat ON the password field's top edge under a mouse at a phone's width (design-critic 16:46): the narrow screens'
   44-px box for links grew it down over the field; under a mouse it keeps its line's height, on the label's line */
@media not (pointer: coarse) { .auth a.auth-forgot { min-height: 0; line-height: 20px; top: 0; } }
/* crowd5 (the owner 18:32 UTC 5 Oct, Sites on his Fold: "This verified looks plain"; senior's ruling): "Verified" is a small BADGE beside the
   site's name — a 14-px tick in a circle in the brand's blue and the word in 12.5 px semibold on a pale blue pill, on the name's line; a site
   not yet proved wears the quiet opposite, "Not verified" as a muted outline pill that opens the proof steps. One mark, no new colour. */
table.sitelist .sitewords .vbadge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px 1px 5px; border-radius: 999px; font-size: 12.5px; line-height: 18px; font-weight: 600; vertical-align: 1px; white-space: nowrap;
  color: var(--accent); background: color-mix(in srgb, #487DEB 13%, var(--surface)); text-decoration: none; }
table.sitelist .sitewords .vbadge svg { flex: none; color: #487DEB; }   /* the logo's own blue (his dot, his pupil) for the tick; the word in the ink of the logo's navy */
table.sitelist .sitewords .vbadge.no { padding: 0 8px; color: var(--muted); background: none; border: 1px solid var(--line-2); font-weight: 500; }
table.sitelist .sitewords a.vbadge.no:hover, table.sitelist .sitewords a.vbadge.no:focus-visible { color: var(--ink-2); border-color: var(--ink-2); text-decoration: none; }
@media (pointer: coarse) { table.sitelist .sitewords a.vbadge.no { position: relative; } table.sitelist .sitewords a.vbadge.no::after { content: ""; position: absolute; inset: -12px -4px; } }
/* the badge is a link inside .sitewords, so the NAME's rules reached it (its clip with "…", its line clamp, its thumb padding): it keeps its own */
table.sitelist tbody tr .sitewords > a.vbadge { display: inline-flex; overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; -webkit-line-clamp: none; line-clamp: none; padding: 0 8px; margin: 0 0 0 8px; }
/* design-critic 20:4x on the badge, the owner's "three left edges": the name, the badge and the address are one flex block — the badge's
   distance a GAP, never a margin, so nothing carries an indent onto a line of its own; in the card form (under 1200) the address always has
   its own line at the name's left edge; from 700 px the badge never leaves the name's line: the name gives way with "…", the badge keeps its
   width; under 700 the name may take two lines and a badge that wraps starts at the name's left edge */
table.sitelist .sitewords { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; min-width: 0; }
table.sitelist tbody tr .sitewords > a.vbadge { margin: 0; flex: none; }
table.sitelist tbody tr .sitewords .sitehost { flex-basis: 100%; margin-left: 0; display: block; }
@media (min-width: 700px) {
  table.sitelist .sitewords { flex-wrap: wrap; }
  table.sitelist tbody tr .sitewords > a:first-child { flex: 0 1 auto; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: none; line-clamp: none; }
}
@media (max-width: 699px) { table.sitelist tbody tr .sitewords > a:first-child { flex: 0 1 auto; min-width: 0; } }
/* …as a GRID, so the badge never wraps away from the name and the address always starts at the name's left edge (the two-line row's own
   rules are more specific, so these name it too) */
table.sitelist .sitewords, table.sitelist tbody tr:has(.pb-tick) .sitewords { display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; align-items: center; column-gap: 8px; row-gap: 2px; }
table.sitelist .sitewords > a:first-child, table.sitelist tbody tr:has(.pb-tick) .sitewords > a:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
table.sitelist .sitewords > .vbadge, table.sitelist tbody tr:has(.pb-tick) .sitewords > .vbadge { grid-column: 2; grid-row: 1; justify-self: start; }
table.sitelist .sitewords .sitehost, table.sitelist tbody tr:has(.pb-tick) .sitewords .sitehost { grid-column: 1 / -1; grid-row: 2; display: block; margin-left: 0; }
@media (min-width: 700px) { table.sitelist .sitewords > a:first-child, table.sitelist tbody tr:has(.pb-tick) .sitewords > a:first-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: none; line-clamp: none; } }
table.sitelist .sitewords, table.sitelist tbody tr:has(.pb-tick) .sitewords { grid-template-columns: minmax(min(10em, 100%), max-content) auto; }   /* in the table a cell sized by its content would fold the name to nothing */
/* design-critic 20:5x: the 10em column is the TABLE's alone (from 1200); in the card form the badge stands directly after the name, 10 px,
   whatever the name's length; under 700 (a phone, the Fold closed) as before the grid: no address line, the name two lines at most, the badge
   beside it when it fits, else under it at the name's left edge — all of it inside the cell, never in the strip's column */
@media (max-width: 1319px) { table.sitelist .sitewords, table.sitelist tbody tr:has(.pb-tick) .sitewords { grid-template-columns: minmax(0, max-content) auto; column-gap: 10px; } }
@media (max-width: 699px) {
  table.sitelist .sitewords, table.sitelist tbody tr:has(.pb-tick) .sitewords { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; max-width: 100%; overflow: hidden; }
  table.sitelist .sitewords > a:first-child, table.sitelist tbody tr:has(.pb-tick) .sitewords > a:first-child { flex: 0 1 auto; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; }
  table.sitelist .sitewords .sitehost, table.sitelist tbody tr:has(.pb-tick) .sitewords .sitehost { display: none; }
  table.sitelist td.sitecell { min-width: 0; overflow: hidden; }
}
table.sitelist .sitewords .vbadge { margin-left: 0; }   /* the gap is the distance; a margin would indent a wrapped badge */
/* design-critic 20:49: a name of THREE lines printed its third under the badge — under a thumb the name link carried 12 px of padding above and
   below (its 44-px target), and its clipped box reached into that padding. Under 700 the box ends at the second line; the 44 px stay as an
   invisible press around it */
@media (max-width: 699px) {
  table.sitelist .sitewords > a:first-child, table.sitelist tbody tr:has(.pb-tick) .sitewords > a:first-child { padding: 0; margin: 0; position: relative; line-height: 1.3; max-height: 2.6em; }
  @media (pointer: coarse) { table.sitelist .sitewords > a:first-child::after { content: ""; position: absolute; inset: -12px 0; } }
}
/* BROKEN LIVE (design-critic 21:13, the owner's Sites at 1440 / 1920): with his short addresses the SITE column was narrow and the badge left the
   cell over LAST REPORT in 49 of 51 rows. RULED (21:17): the NAME is the row's first word and the last thing to give way — in the table the SITE
   column is as wide as its widest row needs for the name (up to 16 em, then "…") + 10 px + the badge; LAST REPORT, which wraps, gives the room */
@media (min-width: 1320px) {
  table.sitelist .sitewords, table.sitelist tbody tr:has(.pb-tick) .sitewords { grid-template-columns: max-content auto; }
  table.sitelist .sitewords > a:first-child, table.sitelist tbody tr:has(.pb-tick) .sitewords > a:first-child { max-width: 16em; }
  table.sitelist td.sitecell { width: auto; max-width: none; } table.sitelist td.sitecell .siteflex, table.sitelist td.sitecell .sitewords { min-width: max-content; }
}
/* THE POP-UP'S WINDOW AND ITS ✕ (senior 23:24, the owner: "no browser shown, the X is not centred"). The pop-up ALWAYS draws the
   device's window as the wall does: the frame, the bar with the address typed (on every shape, not only a desktop's), and in it the newest
   picture; while none has come, the empty screen at the device's size with "opening the site…" and the wall's moving line. The close
   button a 44-px square that never shrinks, its ✕ a drawn cross in its exact middle (a font's ✕ stood left and low). */
dialog.camdlg.cd-live .cd-close { flex: none; width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; padding: 0; line-height: 0; }
dialog.camdlg.cd-live .cd-close svg { display: block; }
dialog.camdlg.cd-live .cd-wait { position: relative; display: grid; place-items: center; max-width: none; background: var(--surface); overflow: hidden; line-height: normal; }
dialog.camdlg.cd-live .cd-wait[hidden] { display: none; }
dialog.camdlg.cd-live .cd-wait p { margin: 0; padding: 0 12px; font-size: 15px; line-height: 21px; color: var(--muted); text-align: center; }
dialog.camdlg.cd-live .cd-load { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--live), transparent) no-repeat; background-size: 40% 100%; animation: winload 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { dialog.camdlg.cd-live .cd-load { animation: none; background-size: 100% 100%; } }
/* on a narrow phone the pop-up's arrows read "‹ previous" and "next ›", one line each (design-critic 23:47: at 344 they broke in two) */
@media (max-width: 420px) { dialog.camdlg.cd-live .cd-go .cd-w { display: none; } dialog.camdlg.cd-live .cd-go { white-space: nowrap; } }
.tiles.stats .tile .nw { white-space: nowrap; }   /* a tile's small line breaks between its parts, never inside one (the shared report's rule) */
/* THE KIT'S TILE on the signed-in report (design-critic 00:21 (2)), as on the shared report: each at most 280 px, from the left, in one row
   from 700 px; under it two to a row. Never a 591-px hollow box round one number */
@media (min-width: 700px) { .tiles.stats.kit { display: flex; flex-wrap: nowrap; } .tiles.stats.kit > .tile { flex: 0 1 280px; min-width: 0; } }   /* AT MOST 280, and they give way to stay in one row (design-critic 00:35 (2)) */
/* the report's STATE when it did not end whole: one sentence under the H1, from the words module (design-critic 00:21), never a tile */
.run-state { margin: 10px 0 16px; max-width: 70ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
/* THE KIT'S MARKS in the report's grid and its legend (design-critic 02:09; the mark family 18:07): not run is the 14-px hollow grey ring,
   never "◌"; a cell with nothing dealt is EMPTY, never "–"; passed is ✓ alone (a check already on screen says so in its title) */
table.grid td.cell .ring, .legend .ring { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%;
  font-size: 0; line-height: 0; color: transparent; vertical-align: middle; }
table.grid td.cell .blank { visibility: hidden; }
/* the kit's tiles on a narrow phone: one to a row, so a tile with one word never stands half empty beside one with a small line
   (design-critic 04:34: "4 not run" beside "3 passed of 7 checks" at 344) */
@media (max-width: 420px) { .tiles.stats.kit { grid-template-columns: minmax(0, 1fr); } .tiles.stats.kit .tile:last-child:nth-child(odd) { grid-column: auto; }
  .tiles.stats.kit .tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; } .tiles.stats.kit .tile > span { flex: 1 1 auto; } }
/* the wall's WAITING window (DEVICE-WINDOW.md §4; design-critic 04:53): the name muted, the dot grey and still, the screen white, a still 2-px
   line under the bar — never drawn as a finished one */
.wall .wl-win.wl-wait .wl-dev b { color: var(--muted); } .wall .wl-win.wl-wait .wl-dot { background: var(--line-3); animation: none; }
.wall .wl-win.wl-wait .wl-load { display: block; animation: none; background: var(--line-3); } .wall .wl-win.wl-wait .wl-pic img { visibility: hidden; }
/* STALE dims the screen to 70 % (DEVICE-WINDOW.md §4): on the picture's box, so a frame's own fade never undoes it (design-critic 05:35) */
.wall .wl-win.stale .wl-pic { opacity: .7; }
/* ENDED: after its second in the screen's middle, the mark sits at the caption's left — the kit's 8-px dot or ✓ */
.wall .wl-win[data-end] .wl-chk::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.wall .wl-win[data-end="ok"] .wl-chk::before { content: "✓"; width: auto; height: auto; color: var(--green); font-weight: 700; border-radius: 0; vertical-align: 0; }
.wall .wl-win[data-end="bad"] .wl-chk::before { background: var(--red-mark, #DC2626); } .wall .wl-win[data-end="look"] .wl-chk::before { background: var(--amber-mark, #C76A00); }
.wall .wl-win[data-flash="look"] .wl-mark { background: var(--amber-mark, #C76A00); border-radius: 50%; }
/* the pop-up below 900 px: the steps panel stands UNDER the picture, so the screen takes the window's width (design-critic 06:18: at 768 the
   panel beside it held the screen to 287 px, 32 % of the window) */
@media (max-width: 899px) {
  dialog.camdlg.cd-live { width: calc(96vw / var(--zoom, 1)); } dialog.camdlg.cd-live .cd-film { padding: 14px; }
  dialog.camdlg.cd-live .cd-info { border-left: 0; border-top: 1px solid var(--line); padding: 14px; }
}
/* THE POP-UP'S WINDOW is the wall's own (the kit, part 2; design-critic 04:53): .wall .wl-* at the large view's scale. The script sizes the
   screen (--wl-h, --ar); here only the bar, the bezels and the address grow to that size — never a second drawing */
.wall.dwin-large .wl-win { cursor: default; min-width: 0; width: auto; } .wall.dwin-large .wl-win:hover .wl-frame { box-shadow: none; }
.wall.dwin-large .wl-frame { border-width: 2px; }
.wall.dwin-large .wl-chrome { height: 22px; padding: 0 10px; } .wall.dwin-large .wl-addr { font: 11px/13px var(--sans, inherit); }
.wall.dwin-large .desktop .wl-frame { border-radius: 10px; } .wall.dwin-large .desktop .wl-chrome { gap: 5px; height: 24px; padding: 0 10px; }
.wall.dwin-large .desktop .wl-chrome i { width: 7px; height: 7px; } .wall.dwin-large .desktop .wl-addr { margin-left: 8px; padding: 2px 10px; font: 11px/14px var(--sans, inherit); }
.wall.dwin-large .tablet .wl-frame { padding: 14px 10px 12px; border-radius: 22px; } .wall.dwin-large .tablet .wl-chrome { border-radius: 6px 6px 0 0; } .wall.dwin-large .tablet .wl-pic { border-radius: 0 0 6px 6px; }
.wall.dwin-large .phone .wl-frame { padding: 16px 8px 10px; border-radius: 30px; } .wall.dwin-large .phone .wl-chrome { border-radius: 20px 20px 0 0; } .wall.dwin-large .phone .wl-pic { border-radius: 0 0 20px 20px; }
.wall.dwin-large .tablet .wl-frame::after { top: 5px; width: 5px; height: 5px; margin-left: -2.5px; }
.wall.dwin-large .phone .wl-frame::after { top: 5px; width: 44px; height: 6px; margin-left: -22px; border-radius: 3px; }
dialog.camdlg.cd-live .wall.dwin-large .cd-wait { position: absolute; inset: 0; width: auto; height: auto; }
.wall.dwin { --dev-ink: #26334D; }   /* a window outside the wall carries its ink: the frame, the bezels and the island in the one navy (DEVICE-WINDOW.md §2) */
/* the pop-up's list of checks in the kit's marks (part 6): ✓ green, failed the 8-px red dot, needs a look the amber dot, not run the grey ring */
dialog.camdlg.cd-live .cd-done li.cd-bad .cd-n::before, dialog.camdlg.cd-live .cd-done li.cd-look .cd-n::before, dialog.camdlg.cd-live .cd-done li.cd-off .cd-n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
dialog.camdlg.cd-live .cd-done li.cd-bad .cd-n::before { background: var(--red-mark, #DC2626); } dialog.camdlg.cd-live .cd-done li.cd-look .cd-n::before { background: var(--amber-mark, #C76A00); }
dialog.camdlg.cd-live .cd-done li.cd-off .cd-n::before { border: 1.5px solid #7C8698; }
/* A CARD'S LAST SCREEN is the device window (the kit, part 2 in part 4; design-critic 07:04): the card's link carries the window and loses the
   old thumbnail's own frame; the card's first column takes the window's width; an empty screen says its few words in its middle */
.al-pic.dw { border: 0; background: none; border-radius: 0; max-height: none; overflow: visible; padding: 0; min-height: 0; display: block; }
.al-pic.dw .wl-win { cursor: inherit; } .al-pic.dw:focus-visible .wl-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); }
.al-body:has(> .al-pic.dw) { grid-template-columns: auto minmax(0, 1fr); }
details.alert.lead > .al-body > .al-pic.dw { max-height: none; } details.alert.lead > .al-body > .al-pic.dw img { height: 100%; max-height: none; object-fit: cover; }
.wall .dw-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8px; font-size: 12.5px; line-height: 1.3; color: var(--muted); text-align: center; }
@media (max-width: 720px) { .al-body:has(> .al-pic.dw) { grid-template-columns: minmax(0, 1fr); } }
/* the report's LEAD card shows its last screen larger (its column was 320 px): the window grows there, by --dw-h, and the column follows it */
details.alert.lead > .al-body > .al-pic.dw .wl-win.desktop { --dw-h: 180px; } details.alert.lead > .al-body > .al-pic.dw .wl-win:not(.desktop) { --dw-h: 300px; }
@media (min-width: 721px) { details.alert.lead > .al-body:has(> .al-pic.dw) { grid-template-columns: auto minmax(0, 1fr); } }
.al-body.lk-card .lk-screen.dw { width: auto; } .al-body.lk-card .lk-screen.dw .al-shot-a { display: inline-block; }   /* the needs-a-look card's last screen: the device window ("list" size) */
/* the site page's failure and needs-a-look cards: their picture is the device window ("small"), never the old 160 x 100 thumbnail's box */
.site-page .fail-pic.dw { width: auto; height: auto; border: 0; border-radius: 0; background: none; overflow: visible; flex: none; }
.site-page .fail-pic.dw .wl-win { cursor: inherit; }
/* a card's window is pressed as itself (design-critic 07:34: no dark "ZOOM" strip, no ▶ over the picture): the pointer hand and the 2-px
   blue ring on hover or focus are the cue */
a.al-pic.dw { cursor: pointer; } a.al-pic.dw[data-zoom] { cursor: zoom-in; } div.al-pic.dw { cursor: auto; }
.al-pic.dw:hover .wl-frame, .lk-screen.dw .al-shot-a:hover .wl-frame, .lk-screen.dw .al-shot-a:focus-visible .wl-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); }
/* ONE BAR PER WINDOW SIZE (design-critic 07:40: the address at ≈7 px in a card against ≈11 px elsewhere): the wall and the small windows keep
   the wall's bar (a 150-px screen); a card's and a list's window carry the medium bar; the pop-up the large (11 px) */
.wall:is(.dwin-card, .dwin-list) .wl-chrome { height: 18px; padding: 0 8px; } .wall:is(.dwin-card, .dwin-list) .wl-addr { font: 10px/12px var(--sans, inherit); }
.wall:is(.dwin-card, .dwin-list) .desktop .wl-chrome { gap: 4px; height: 18px; padding: 0 8px; } .wall:is(.dwin-card, .dwin-list) .desktop .wl-chrome i { width: 5px; height: 5px; }
.wall:is(.dwin-card, .dwin-list) .desktop .wl-addr { margin-left: 6px; padding: 1px 8px; font: 10px/12px var(--sans, inherit); }
/* THE PEEK draws the device window (the kit, part 2; design-critic 07:49) and keeps its own rules: the link keeps the ruled widths per
   breakpoint, the window fills that width at the device's ratio; the screen still at 45 % (the name and the bar at full strength), nothing
   plays; the strip's mask still cuts it by the first screen; no maker's name ("Desktop", "Tablet", "Phone") */
.peek .win.dw { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.peek .win.dw .dwin, .peek .win.dw .wl-win { display: block; width: 100%; min-width: 0; }
.peek .win.dw .wl-frame { width: 100%; box-sizing: border-box; } .peek .win.dw .wl-pic { width: 100%; height: auto; aspect-ratio: var(--ar); opacity: .45; }
.peek .win.dw .wl-dev b { font-size: 12.5px; } .peek .win.dw:hover .wl-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); }
.wall .wl-addr:empty { visibility: hidden; }   /* no address (the front page's peek, a browser before it types): no empty pill */

.wall.dwin .wl-win { cursor: inherit; }   /* a window that stands alone is pressed only through its link: no pointer of its own (look run: "has a pointer's cursor and does nothing") */
/* the front page's story slide draws the device window too (the kit, part 2): the slide keeps its widths per breakpoint; the window fills
   them at the device's ratio, the device's plain name above it */
.frames .pad.dw::before { display: none; } .frames .pad.dw .dwin, .frames .pad.dw .wl-win { display: block; width: 100%; min-width: 0; }
.frames .pad.dw .wl-frame { width: 100%; box-sizing: border-box; } .frames .pad.dw .wl-pic { width: 100%; height: auto; aspect-ratio: var(--ar); }
.frames.demo:has(.pad.dw) { align-items: start; }   /* the windows by their tops, so the three names stand on one line */
/* the wall's bar one step up (design-critic 07:49, from ten: its address at 7.5 px read under what a phone shows): a desktop's bar 15 px and
   its address 9 px, a tablet's and a phone's bar 13 px and the address 8.5 px — the wall and the small windows alike */
.wall .wl-chrome { height: 13px; } .wall .wl-addr { font: 8.5px/10px var(--sans, inherit); }
.wall .desktop .wl-chrome { height: 15px; } .wall .desktop .wl-addr { font: 9px/11px var(--sans, inherit); }
/* the Overview's "Failing now" and "Needs a look" cards: their picture is the device window (the kit, part 2 in part 4), sized to the card's
   120-px column — a desktop's screen 120 x 66, a tablet's and a phone's 78 tall — never the old thumbnail's grey box */
.failrow .thumb.dw { width: 120px; height: auto; border: 0; border-radius: 0; background: none; overflow: visible; padding: 0; display: flex; justify-content: center; }
.failrow .thumb.dw .wl-win.desktop { --dw-h: 66px; } .failrow .thumb.dw .wl-win:not(.desktop) { --dw-h: 78px; } .failrow .thumb.dw .wl-win { min-width: 0; cursor: inherit; }
/* a window whose browser has left while its report still runs keeps its frame, empty (DC-H129: the panel keeps one height) */
.wall .wl-win.wl-gone .wl-pic img, .wall .wl-win.wl-gone .wl-mark, .wall .wl-win.wl-gone .wl-load { visibility: hidden; }
.wall .wl-win.wl-gone .wl-dev b, .wall .wl-win.wl-gone figcaption { color: var(--muted); } .wall .wl-win.wl-gone .wl-dot { background: var(--line-3); animation: none; }
.wall .wl-win .wl-steps:empty { display: block; height: 5px; }   /* the step dots' row keeps its place while a browser waits or has ended: the wall keeps one height (DC-H129) */
/* the sitting mark stands just left of the check's name, out of the text's flow: it never rewraps a caption (DC-H129: one height) */
.wall .wl-win[data-end] .wl-chk { position: relative; }
.wall .wl-win[data-end] .wl-chk::before { position: absolute; left: -14px; top: .45em; margin: 0; }
.wall .wl-win[data-end="ok"] .wl-chk::before { top: 0; left: -12px; }
/* LOOP-10 row 41 (design-critic 06:05, Fold open 717): the footer's links wrapped "DPA · Demo" alone onto a second line — between
   600 and 900 px they stand on one line, 13.5 px with a 10-px gap (the eleven need ~650 px at 717, the row has 669) */
@media (min-width: 600px) and (max-width: 900px) { footer nav.foot { font-size: 13.5px; column-gap: 10px; } }
/* LOOP-10 row 35 on the reverted base (design-critic 06:05: 6.5, 3 says the point / 7 trust — GrandNode stills faded, another brand on
   our first screen): THE PEEK IS ONE REAL JOURNEY on our Northgate demo — the rules senior read at 05:08, rebuilt under this row */
.peek { flex-wrap: wrap; align-content: flex-start; -webkit-mask-image: none; mask-image: none; }
.peek .win-screen, .peek .win.dw .wl-pic { opacity: 1; }
.peek .peek-note { flex: 0 0 100%; margin: 0 0 8px; text-align: center; font-size: 12.5px; color: var(--muted); pointer-events: none; }
.peek.journey .win.desktop { width: min(420px, calc(40vw / var(--zoom, 1))); }
.peek-steps { flex: none; align-self: flex-start; text-align: left; list-style: none; counter-reset: st; margin: 22px 0 0; padding: 0; display: grid; gap: 6px; width: 210px; font-size: 13px; line-height: 1.35; color: var(--ink-2); pointer-events: auto; }
.peek-steps li { counter-increment: st; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.peek-steps li::before { content: counter(st); font-size: 11px; color: var(--muted); text-align: right; }
.peek-steps li.done { color: var(--ink); font-weight: 600; } .peek-steps li.done::before { content: "✓"; color: var(--green); font-weight: 700; }
@media (max-width: 899px) { .peek.journey .peek-steps { margin-top: 18px; width: 150px; font-size: 12.5px; } .peek.journey .win.phone { width: 170px; } }
@media (max-width: 899px) { .peek.journey { height: auto; max-height: 230px; gap: 14px; } .peek.journey .peek-note { padding: 0 20px; } }   /* the caption inside the screen's edges: the peek runs 20 px past them there */
.slide-next.said { width: auto; height: auto; min-height: 44px; padding: 0 16px; border-radius: 22px; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-2); }
.hero.front .slide-next.said { display: flex; width: max-content; }
.slide-next.said::before { border-radius: 22px; }
@media (max-width: 899px) { .hero.front .slide-next.said { display: flex; } }   /* the ↓ with its word shows on a phone too (senior 04:50 (1)) */
.peek.journey .wl-pic img { object-position: top left; }   /* the cart's item line whole from its left edge */
/* the peek, round 2 (senior 04:19): the phone window stands WHOLE — its capture scaled to the window, never cropped at its right
   edge; on a phone the steps stand above and the phone's window centred under them, nothing past the screen's edge */
.peek.journey .win.phone .wl-pic img { object-fit: contain; object-position: top center; }
@media (max-width: 640px) {
  .peek.journey { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; max-height: 470px; gap: 10px; }   /* from the top: centred, a column taller than its box lost the caption and step 1 above it (senior 04:50 (1)) */
  .peek.journey .peek-steps { width: auto; max-width: 300px; margin: 0 auto; }
  .peek.journey .win.phone { width: 170px; }
}
/* LOOP-10 row 36 on the reverted base (design-critic 06:05): the watch slide without its borrowed frames — one centred column, the
   words and then the four check pills, at full strength from the start */
#s-watch.story:not(:has(.frames)) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
#s-watch.story:not(:has(.frames)) .story-text { max-width: 640px; padding-top: 0; align-self: auto; }
#s-watch.story:not(:has(.frames)) .story-vis { width: 100%; max-width: 640px; text-align: left; }
#s-watch.story:not(:has(.frames)) { align-content: center; grid-template-rows: auto auto; gap: 24px; }
#s-watch.story:not(:has(.frames)) .story-vis { align-self: start; min-height: 0; height: auto; margin-top: 0; } #s-watch.story:not(:has(.frames)) .story-go { justify-content: center; text-align: center; }
#s-watch.story:not(:has(.frames)) .story-text > p { margin-inline: auto; }   /* a capped paragraph centres under its centred heading */
#s-watch.story:not(:has(.frames)) .story-vis, .armed#s-watch.story:not(:has(.frames)) .story-vis { opacity: 1; transform: none; transition: none; }   /* the four pills at full strength from the start (senior 05:03): the rise-in was the frames', not theirs */
/* LOOP-10 row 37 on the reverted base: a story slide without its picture is one centred column of words, no empty half */
.story:not(:has(.story-vis)) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.story:not(:has(.story-vis)) .story-text { max-width: 640px; } .story:not(:has(.story-vis)) .story-text > p { margin-inline: auto; }
/* THE JOURNEY, drawing 2 (design-critic 06:57): one whole screen per device side by side, the steps one quiet line under them */
#s-watch.story:not(:has(.frames)) .story-vis:has(.journey2) { max-width: 900px; }
.journey2 { margin: 0 auto 22px; } .j2-wins { display: flex; justify-content: center; align-items: flex-end; gap: 22px; }
.jw { margin: 0; flex: none; } .jw.desktop { width: min(620px, 70%); } .jw.phone { width: min(170px, 20%); }
.jw .dwin, .jw .wl-win { display: block; width: 100%; min-width: 0; } .jw .wl-frame { width: 100%; box-sizing: border-box; }
.jw .wl-pic { width: 100%; height: auto; aspect-ratio: var(--ar); } .jw .wl-pic img { object-fit: contain; object-position: top center; }
#s-watch .journey2 p.j2-steps { margin: 12px auto 0; max-width: 72ch; width: auto; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.j2-steps .j2-ok { color: var(--green); font-weight: 700; }
@media (max-width: 560px) { .j2-wins { flex-direction: column; align-items: center; gap: 14px; } .jw.desktop { width: 100%; } .jw.phone { width: 170px; } }
/* LOOP-10 rows 71, 74, 75, 77, 67 — /docs, /docs/ci and /security at a reading width */
/* row 71: three cards at 1920 held ~42 characters a line; Checks and Devices stand two abreast, API + CI joins the Reference below */
@media (min-width: 561px) { .who3.docs-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .who3.docs-sec > #api { grid-column: 1 / -1; } }
.who3.docs-sec > #api .docs-list { max-width: 72ch; }
/* row 74: the Reference reads in a 72ch column, not across a 1022-px cell; a bracket stays with its word and its field */
.docs-ref .ref-txt { max-width: 72ch; } @media (min-width: 721px) { .docs-ref th { width: 1%; } }   /* the name column at its own width, the rest to the words */
/* row 75: the copy button and, at any width where the box still scrolls (390, 344, 768), a muted word that it does, in one row above the workflow (a box that must scroll says so) */
.docmd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; } .docmd-bar .copy { margin: 0; }
.docmd-bar:has(+ pre.can-scroll)::after { content: "scroll sideways →"; font: 400 12px/1.4 var(--sans); color: var(--muted); white-space: nowrap; }
/* row 77: the CI page's prose at ~66 characters a line, not 85 */
.docmd > p { max-width: 62ch; }
/* row 67: each box of the flow at its own height, centred on the row with its arrows; the side boxes no longer stand ~100 px
   empty under their words */
@media (min-width: 901px) { .sec-flow { align-items: center; } }
@media (max-width: 560px) { .j2-wins { align-items: flex-start; } }   /* stacked, the phone stands on the same left edge as the desktop, its label under "Desktop" (design-critic 07:18 hair) */
/* LOOP-10 rows 8 and 14 on the reverted base (design-critic, Fold open 8.5, 9 font sizes): the kit's tile small line is words, not
   data — the body sans, sentence case, 12.5 px muted ("on Desktop and iPhone 15", "of 384 checks"), never typewriter capitals; the
   Overview's Last report, the report and the shared report draw the same kit */
.tiles.kit .tile > span, .tiles.kit .tile > span > span { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--muted); }
/* crowd5, LOOP-10 row 48 (the Reports list): amber is needs a look alone. "N not run" is the muted ink with the hollow ring, no tint;
   the bar is green passed, amber needs a look, red failed, and what was not run is the empty track, a hairline — so 4 of 384 needing
   a look reads as a thin amber sliver, never an amber bar */
#runs-list .runlist td .pill.nc { color: var(--muted); } .runlist td .pill.nc::before { border-color: var(--muted); }   /* the list's id: past the neutral pill's ink-2 (0,9,2) */
.mbar { background: linear-gradient(var(--line-3), var(--line-3)) center / 100% 1px no-repeat; } .mbar .nr { background: none; }
  html #livepage ol.log .k.p { forced-color-adjust: none; background: CanvasText; color: Canvas; }   /* the first look's log: a pass's ✓ disc (LOOP-10 row 58) */
/* LOOP-10 rows 53, 55, 56, 58 — the first look's own marks (/look/<token>; these outrank ee.live.css, which loads after this file):
   row 53 — a finished look's dot is the report's verdict by the house rule: green all passed, red a failure, amber only what needs a look
   (stopped by the site), muted grey otherwise; "took 53 min" is words, so the sans, not the typewriter */
#livepage .rec.st-none { background: var(--muted); }
#livepage:is([data-phase="done"], [data-phase="failed"]) .live-clock { font-family: var(--sans); font-size: 15px; color: var(--muted); }
/* row 55 — the Last screen card's picture is not drawn again in the wall; a wall with nothing left in it takes no room */
#livepage .pair.lwall > .wl-win[hidden] { display: none; }
#livepage .pair.lwall:not(:has(> .wl-win:not([hidden]))) { display: none; }
/* row 56 — the finder's two groups, no navy dot: a check of the report wears its own mark (the house's ✓ / ○ / discs); one still
   to come a dashed ring; the ones not in the first report stand under their own line in the muted ink, no mark */
#livepage .fgroup li .mk.wt { border: 1.5px dashed var(--line-3); }
#livepage .fgroup.out li { color: var(--muted); }
#livepage .fk.fk-out { margin-top: 10px; font-weight: 500; color: var(--muted); }
/* row 58 — the log's marks say what the page's other marks say: ✓ passed (the green disc), ○ not run (a muted ring); a step of the
   report is a small solid dot, never the ring */
#livepage ol.log li { grid-template-columns: 14px 1fr; }
#livepage ol.log .k { justify-self: center; }
#livepage ol.log .k.p { width: 14px; height: 14px; border: 0; background: var(--green); color: var(--bg); display: inline-grid; place-items: center; font-size: 10px; line-height: 1; }
#livepage ol.log .k.p::after { content: "\2713"; font-weight: 700; }
#livepage ol.log .k:not(.p):not(.f):not(.b):not(.fd):not(.s) { width: 14px; height: 14px; border: 1.5px solid var(--muted); }
#livepage ol.log .k.s { width: 6px; height: 6px; border: 0; background: var(--line-3); }
/* LOOP-10 row 9 on the reverted base (Fold open 9.0, 8 colour): a Your-sites row that needs a look wears the needs-a-look cards' amber
   edge and words, never the grey of a row with no state */
.siterow.look { border-left-color: var(--amber-mark); } .siterow.look .sr-words { color: var(--amber); }
/* LOOP-10 row 39 on the reverted base (Fold open 9.0, 8 colour): a card's go-line is a link — link blue, as every other arrowed link
   on the front; the card's title stays navy */
.case-go { color: var(--link); }
/* LOOP-10 row 40's look (design-critic 05:34, Fold open 717): the plans ladder wrapped 4 + 1, Agency alone at full width, drawn
   unlike its four — between 600 and 1100 px the five rungs stand in three equal columns (3 + 2), the button on its own line */
@media (min-width: 600px) and (max-width: 1210px) {
  .ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ladder .button { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}
@media (max-width: 599px) { .ladder { display: grid; grid-template-columns: minmax(0, 1fr); } }   /* a phone: one column of five rungs, never 2 + 2 + one wide */
/* LOOP-10 row 11 on the reverted base (Fold open 9.5, 10 cutting-edge): ONE rule for an arrowed link on the Overview — the card heads,
   "N more sites · All sites →", "see Now ↓", "Watch it on the Checks page →", the bottom line: link blue, no underline at rest, the
   underline on hover and on keyboard focus */
.row.head > a.small, a.sitemore, p.numbers a, p.now-links a, p.lr-run a, p.v-sub a.v-run, a.v-why { color: var(--link); text-decoration: none; }
.row.head > a.small:hover, .row.head > a.small:focus-visible, a.sitemore:hover, a.sitemore:focus-visible, p.numbers a:hover, p.numbers a:focus-visible, p.now-links a:hover, p.now-links a:focus-visible, p.lr-run a:hover, p.lr-run a:focus-visible, p.v-sub a.v-run:hover, p.v-sub a.v-run:focus-visible, a.v-why:hover, a.v-why:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.stream .s b.nc { color: var(--ink-2); }   /* row 10: a sentence part stored amber that is not a needs-a-look ("has checks not run") reads in ink, never amber */
/* LOOP-10 row 10 on the reverted base (Fold open 8.5, 8 colour): not run is never amber (amber is needs a look only) — the Last
   report's not-run count and bar share, What happened's "N not run" behind the house's hollow ring, a Your-sites row of passed + not run */
.lastrep .lr-n.nc b, .stream .ev-strip .nc { color: var(--muted); } .lastrep .lr-bar .nc { background: var(--line-2); }
.stream .ev-strip .nc::before { content: ""; display: inline-block; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.siterow.unfinished { border-left-color: #7C8698; } .siterow.unfinished .sr-words { color: var(--ink-2); }
/* LOOP-10 row 27 on the reverted base (Fold open 8.5; the look half): a table's head is a label, not data — the sans, 13 px, sentence
   case, muted (as the templates write it: "Report", "When", "Passed"), never the typewriter face in small capitals; every table takes it */
th { font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0; }
table.stack tbody td[data-l]::before, .share .tablewrap td[data-l]::before { font-family: var(--sans); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }   /* a stacked cell's name is a label like the table's own head: the sans, sentence case, never typewriter capitals (LOOP-10 row 27's look half at a narrow width, crowd6 11:00; the critic's hair) */
/* THE OWNER'S PHOTO 12:49 (senior 09:51): two tiles under the hero's bullets — a desktop and a phone window of the journey's last
   step, whole, each one link to the watch slide; their height is what the first screen has left, so both stand whole above the fold */
.hero-tiles { display: flex; justify-content: center; align-items: flex-end; gap: 18px; margin: 22px auto 0; --th: 200px; }
.htile { display: block; flex: none; color: inherit; text-decoration: none; border-radius: 10px; }
.htile.desktop { width: calc(var(--th) * 2.05); } .htile.phone { width: calc(var(--th) * .46); }
.htile .dwin, .htile .wl-win { display: block; width: 100%; min-width: 0; } .htile .wl-frame { width: 100%; box-sizing: border-box; }
.htile .wl-pic { width: 100%; height: auto; aspect-ratio: var(--ar); } .htile .wl-pic img { object-fit: contain; object-position: top center; }
.htile:hover .wl-frame { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); }   /* a tile in focus keeps the house ring on the link itself (the look tests: a 2px edge at 3 to 1) */
@media (max-width: 560px) { .hero-tiles { gap: 12px; } .htile.desktop { max-width: calc(100% - var(--th) * .46 - 12px); } }
@media (min-width: 900px) and (max-width: 1023px) and (min-height: 860px), (min-width: 1024px) and (min-height: 946px) { .hero.front.slide:has(.hero-tiles) { padding-bottom: 56px; } }   /* the peek's 240px foot went with the peek: the two tiles are the hero's own last line, so the block centres again and the headline keeps its ground (the owner's photo, senior 09:51) */
table.grid thead th.rowhead { font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0; } .compare thead th { font-size: 13px; text-transform: none; letter-spacing: 0; }   /* row 27's one rule reaches the two heads that out-ranked it: the report grid's "Check" and the compare table's heads (crowd6's row-17 frame at 904, still typewriter capitals) */
.run-notes-label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: capitalize; }   /* the report's "Notes" label is a label like a table head, not typewriter capitals (row 27's one rule, the same frame) */
.htile { position: relative; } .htile.phone::after { content: ""; position: absolute; inset: -8px -9px; }   /* the phone tile is narrow (69px at the owner's Fold): its tap reaches half the gap either side (9px of 18) and 8px above and below, never onto the desktop tile; its look and its ring unchanged (design-critic's debt on the tiles, 11:08) */
@media (max-width: 560px) { .htile.phone::after { inset: -8px -6px; } }   /* the gap is 12px on a phone */
.lp .pair.lwall .wl-dev .dot.done { display: none; }   /* a finished window wears no dot: green is passed's colour, and beside "iPhone 15 · Page not found" it read as a pass (row 55, design-critic 12:42: live = accent, waiting = muted, finished = none) */
.legal-rows dt { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; padding-top: 2px; }   /* the legal pages' and /bot's row labels are labels like a table's head: the sans, sentence case, never typewriter capitals (LOOP-10 row 120, design-critic 12:34 and 13:06: /privacy, /terms, /dpa, /bot) */
.nr-list .nr-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; } .nr-list > :last-child { margin-bottom: 0; }
.nr-list .nr-rows li { position: relative; padding-left: 24px; line-height: 1.5; }
.nr-list .nr-rows li::before { content: ""; position: absolute; left: 0; top: calc(.75em - 7px); width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; }   /* row 17 (design-critic 6 icons): each not-run line wears the grid's ○ ring, never the browser's disc; the card ends at its last line */
table.grid tfoot .nc-foot { color: var(--muted); } table.grid tfoot .nc-foot .ring { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; vertical-align: -2px; margin-right: 2px; }
table.grid th.colhead.nc .site::before { content: ""; display: inline-block; width: 6px; height: 6px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }   /* row 18 (design-critic 13:35): a device that never ran is not run, never amber: its Result reads in the muted ink with the grid's ring, its head's dot is the ring too; amber stays for a column that needs a look */
@media (max-width: 720px) { table.sitelist td.wide:has(> .counts) { padding-left: 13px; text-indent: -13px; } table.sitelist td.wide:has(> .counts) > * { text-indent: 0; } }   /* the phone card's count wraps under the words, not under the dot: the amber pill's dot hangs in the 13px its words start at (LOOP-10 row 21, 7 alignment) */
.tablewrap.can-scroll:has(> table.grid)::after { content: "scroll sideways for the rest →"; display: block; font-size: 12px; color: var(--muted); padding: 4px 0; }   /* a report's grid that overflows its card says so at every width, not only on a phone: the owner's 49-column night report was cut at 904 with nothing saying it scrolls (design-critic 15:36, row 18's frame) */
table.sitelist td.wide .dot.live { display: inline-block; width: 6px; height: 6px; margin: 0 7px 0 0; vertical-align: 2px; background: var(--live); animation: wl-pulse 1.6s ease-in-out infinite; }   /* a site whose report runs: the live dot before "Checking now" at every width, the pills' dot size, so its words start where every row's words start (LOOP-10 row 23, design-critic 15:27: the Reports list's chip) */
@media (prefers-reduced-motion: reduce) { table.sitelist td.wide .dot.live { animation: none; } }
nav.sitetally { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; }   /* LOOP-10 row 20 (crowd6's filters): the /sites head's parts are chips, the Reports list's own; the text " · " between them stays for a reader with no styles, at no size here */
nav.sitetally a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border: 1px solid var(--line-3); border-radius: 999px; font-size: 14px; color: var(--ink-2); background: var(--surface); text-decoration: none; white-space: nowrap; }
nav.sitetally a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } nav.sitetally a[aria-current] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); font-weight: 600; }
nav.sitetally a[href$="=failed"]::before, nav.sitetally a[href$="=look"]::before, nav.sitetally a[href$="=passed"]::before, nav.sitetally a[href$="=notrun"]::before { content: ""; flex: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; }
nav.sitetally a[href$="=failed"]::before { background: var(--red-mark); } nav.sitetally a[href$="=look"]::before { background: var(--amber-mark); } nav.sitetally a[href$="=passed"]::before { background: var(--green-fill); } nav.sitetally a[href$="=notrun"]::before { border: 1.5px solid #7C8698; }   /* each part wears its state's mark, as the rows below do */
@media (max-width: 720px), (pointer: coarse) { nav.sitetally a { min-height: 44px; } }   /* a phone-wide window and a finger alike: 44px (the look tests) */
.fail-card .muted { font-family: var(--sans); font-size: 13px; letter-spacing: 0; }   /* a card's foot ("on desktop · report #163, 3 d ago") reads in the sans like every other line of the card, never the typewriter (row 27's one rule) */
.alert.look .x { color: var(--amber-mark); }   /* a needs-a-look row's disc in its own state, the amber of its bar, never failed's red (LOOP-10 row 26, design-critic 17:28; crowd6 traced it to .alert .x's red default) */
details.bell.here > summary, a.bell-page[aria-current] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }   /* on /notifications the bell is the lit tab, as a nav tab is on its page (LOOP-10 row 85, 1 user experience); /usage lights Settings (row 65) */
.errorpage .code { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }   /* the code in the H1's face, never the typewriter (LOOP-10 row 116) */
.errorpage p { align-items: center; } .errorpage .err-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--link); }   /* the second way: a quiet link beside the primary, a thumb's height */
.nc-ring { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; vertical-align: -1px; }   /* the grid's not-run ring, wherever a not-run count is said */
.nc-head { color: var(--ink-2); }   /* a report's "N not run · nothing failed" head: the count in ink with its ring, never amber (LOOP-10 row 16) */
.alert.warn .x { color: #7C8698; } .alert.warn .x svg { display: none; } .alert.warn .x::before { content: ""; display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid #7C8698; border-radius: 50%; vertical-align: -2px; }   /* a device that was not run: its card wears the ring, not needs-a-look's amber clock (LOOP-10 row 16) */
.about-viz.about-ev { margin: 0; align-content: start; } .about-ev .dwin, .about-ev .wl-win { width: 100%; } .about-ev .wl-frame { width: 100%; } .about-ev .wl-pic { width: 100%; height: auto; aspect-ratio: var(--ar); } .about-ev .wl-pic img { object-fit: contain; object-position: top center; }
.about-ev figcaption { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }   /* the evidence under "Evidence, not opinion" is a real last screen with its verdict, never a drawn sketch (LOOP-10 row 95) */
.verdict .v-words > a.v-why { display: inline; min-height: 0; font-size: inherit; font-weight: inherit; white-space: normal; color: inherit; text-decoration: none; } .verdict .v-words > a.v-why:hover { text-decoration: underline; text-underline-offset: 3px; } .verdict .v-words > a.v-why .v-arrow { color: var(--link); }   /* the headline is the link to its report, in its own size and ink, the arrow in the link's blue (LOOP-10 row 5, design-critic 18:04) */
@media (max-width: 720px), (pointer: coarse) { .verdict .v-words > a.v-why { padding-block: 10px; } }   /* a thumb's 44px: inline padding grows the tap, not the line */
.about-flow { font-family: var(--sans); font-size: 14px; }   /* /about's "Your data" card: the flow's pills and its words in the sans, never the typewriter (LOOP-10 row 95, 9 font sizes) */
@media (min-width: 665px) and (max-width: 1196px) { .plans { grid-template-columns: repeat(6, minmax(0, 1fr)); } .plans > .plan { grid-column: span 2; } .plans > .plan:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; } }   /* five plans where five do not fit a row: 3 + 2, the second row centred, never one card alone with empty slots beside it (LOOP-10 row 42, design-critic 19:20 at the owner's 904) */
@media (min-width: 452px) and (max-width: 664px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plans > .plan { grid-column: span 2; } .plans > .plan:nth-child(5):last-child { grid-column: 2 / span 2; } }   /* two a row: the fifth centred under them */
details.alert.look > summary:has(.lk-thumb) { align-items: center; } details.alert.look > summary .lk-thumb { flex: none; width: 108px; margin-right: 6px; } details.alert.look[open] > summary .lk-thumb { display: none; }
details.alert.look > summary .lk-thumb .dwin, details.alert.look > summary .lk-thumb .dwin .wl-win, details.alert.look > summary .lk-thumb .dwin .wl-win .wl-frame { width: 100%; max-width: 100%; min-width: 0; } details.alert.look > summary .lk-thumb .wl-pic { width: 100%; height: auto; aspect-ratio: var(--ar); max-height: 76px; } details.alert.look > summary .lk-thumb .wl-pic img { object-fit: cover; object-position: top center; }   /* the closed card's last screen, small, at its left (LOOP-10 row 15); open, it steps aside for the body's large one */
@media (max-width: 560px) { details.alert.look > summary .lk-thumb { width: 72px; } }
details.alert.look[open] > summary .al-go { display: none; }   /* open, the card's own "Watch the replay" button says it; the line's link steps aside (LOOP-10 row 15) */
@media (max-width: 720px), (pointer: coarse) { details.alert.look > summary .al-go { display: inline-block; padding-block: 12px; margin-block: -12px; } details.alert.look[open] > summary .al-go { display: none; } }   /* a thumb's 44px on the closed card's link, the line unmoved */
@media (max-width: 400px) { .lp.many .pair.lwall { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; row-gap: 14px; justify-content: flex-start; } .lp.many .pair.lwall .wl-win { max-width: 100%; } }   /* a phone: the look's wall wraps into rows, every window and its caption whole, never a second window cut at the card's edge (LOOP-10 row 54, Galaxy A 360, design-critic 00:15) */
#verdict .v-words > a.v-why { white-space: normal; }   /* the amber headline wraps like a sentence, its arrow glued to the last word by its no-break space; never one nowrap line past the card's edge (LOOP-10 row 5 on Fold closed 344, design-critic 00:38) — the id outranks the arrowed links' nowrap (main :is(…) a[href^="/runs"]) */
/* LOOP-10 row 37: the morning slide's one picture, the night-report mail as the app sends it (its own words, sizes and colours) in a
   quiet mail frame, 600px at most, centred, the same on every device */
#s-report .story-vis { display: flex; justify-content: center; }
.mail-shot { margin: 0 auto; width: 100%; max-width: 600px; background: #f6f7f4; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden; color: #111111; font-family: Inter, "Segoe UI", system-ui, sans-serif; text-align: left; }
.mail-shot .ms-from { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12.5px; color: #566173; } .mail-shot .ms-from span:last-child { color: #111111; font-weight: 600; }
.mail-shot .ms-body { padding: 18px; }
.mail-shot .ms-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #566173; }
.mail-shot .ms-h { font-size: 20px; font-weight: 700; margin: 6px 0 4px; color: #B91C1C; } .mail-shot .ms-when { font-size: 12.5px; color: #566173; margin: 0 0 14px; }
.mail-shot .ms-card { border: 1px solid #f1d0cc; border-left: 4px solid #B91C1C; border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; background: #fff; font-size: 14px; }
.mail-shot .ms-state { color: #2b3431; font-size: 13px; margin: 2px 0 6px; } .mail-shot .ms-red { color: #B91C1C; font-weight: 600; }
.mail-shot .ms-card ul { margin: 0; padding-left: 18px; color: #333333; font-size: 13px; }
.mail-shot .ms-ok { color: #0B7D55; font-size: 13px; margin: 10px 0; } .mail-shot .ms-ok span { font-weight: 700; }
.mail-shot .ms-btn { display: inline-block; background: #0B2D57; color: #fff; padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.about-cards { align-items: start; }   /* /about's two cards each end under their own words, never stretched to the taller one's height (LOOP-10 row 95, 7 alignment, design-critic 11:35 UTC 8 Oct) */
table.sitelist th.trend { vertical-align: top; }   /* the "Trend" head on the line of its neighbours' heads, never ~6px lower (LOOP-10 row 21, 7 alignment, design-critic 11:49 UTC 8 Oct); the cells' sparklines stay middle */
table.sitelist thead th:has(> .pb-all) { white-space: nowrap; } table.sitelist thead th .pb-tick.pb-all { margin-block: -14px; }   /* the select-all box takes no more of its line than the word beside it, so "Site" stands on the line of the other heads (LOOP-10 row 21, design-critic 11:52 UTC 8 Oct); the box keeps its 44px target */
.tablewrap.can-scroll:not(.share .tablewrap)::after { content: "scroll sideways for the rest →"; display: block; font-size: 12px; color: var(--muted); padding: 4px 0; }   /* any table that scrolls sideways says so at every width, not only at 720 and under: /pricing's compare table at the iPad's 820 scrolled with nothing but the fade (LOOP-10 row 44, 2 usability, design-critic 12:38 UTC 8 Oct); a table that fits says nothing (base.js's can-scroll) */
@media (max-width: 899px) { .about-flow { gap: 5px; font-size: 13px; } .about-flow .node { padding: 3px 7px; } }   /* /about's card 2: each chain on one line in the iPad's 384-px card, "your team" never dropped under it (LOOP-10 row 95, 7 alignment, design-critic 12:38 UTC 8 Oct) */
table.grid td.cell .blank[title="not found on this site"] { visibility: visible; color: #7C8698; font-weight: 600; }   /* a check this site does not have reads "–" in the ring's muted grey, so it is never mistaken for "nothing came back" (LOOP-10 row 130, 3 says the point, design-critic 05:31 UTC 9 Oct); the legend's word is crowd6's */
table.grid tr.fold th[colspan] { text-align: left; } table.grid tr.fold th[colspan] .linkish { white-space: nowrap; }   /* the spanning toggle on one line (rows 130 + 136) */
@media (min-width: 721px) { details.alert.lead > .al-body.single { grid-template-columns: minmax(0, 1fr); } }   /* a lead failed card with no picture: no 320-px picture column held empty, the reason and "Why we think so" take the width (LOOP-10 row 135, demo #369, design-critic 05:31 UTC 9 Oct) */
.film-stamp { margin: 8px 0 0; }   /* a seeded night's stamp on its own line under the picture's frame, before ‹ ▶ › (LOOP-10 row 138, 7 alignment, design-critic 07:47 UTC 9 Oct) */
.ov-box { margin-bottom: 16px; } .ov-box .launch-state { min-height: 21px; } .ov-box .launch-state:empty { display: block; visibility: hidden; }   /* the Overview's box keeps its answer line's room at rest, so typing an address moves nothing under it (LOOP-S scenario 1 row 2, design-critic 19:00 UTC 11 Oct) */
@media (min-width: 721px) { .ov-box { align-items: flex-start; } .ov-box .ov-all { margin-top: 15px; } } @media (min-width: 721px) and (pointer: coarse) { .ov-box .ov-all { margin-top: 13px; } }   /* beside the box, "Check every site now" stays centred on the field, not on the field and its line */
@media (max-width: 720px) { .ov-box .launch-state { min-height: 42px; } }   /* on a phone the box's answer can wrap to two lines: two are kept, so typing still moves nothing (LOOP-S scenario 1 row 2 at 344, design-critic 19:45 UTC 11 Oct) */
.now .now-l1 b > a { white-space: normal; overflow-wrap: anywhere; }   /* the Now card's long bold link ("Your first report on <site> is on its way →") wraps on a phone, its arrow glued by &nbsp;, never cut at the screen's edge (LOOP-S scenario 1 row 4 at 344, design-critic 19:46 UTC 11 Oct) */
:root { --zoom: 1; } @media (min-width: 1024px) { :root { --zoom: 1.1; } } html { zoom: var(--zoom); }   /* THE OWNER (00:52 UTC 12 Oct): the 110 % on desktop widths only, from 1024 px up; phones, the iPad and the Fold at 100 — the vw/vh below divide by --zoom, so they follow it either way; the break points below 931 px are the plain ones (reached at 100 %), those from 1024 up are ×1.1 (reached at 110 %) */   /* THE OWNER (22:3x UTC 11 Oct): "make all site look like 110% in browser" — qa.pro renders as the browser shows it at 110 %: every px measure scales by the root zoom, and every vh/vw above is divided by --zoom so a screen-high slide or panel stays one screen high, as browser zoom keeps it */
@media (max-width: 360px) { header.top:not(:has(nav.anon)) nav { gap: 0; } header.top:not(:has(nav.anon)) nav a { padding-left: 5px; padding-right: 5px; font-size: 13.5px; } } @media (max-width: 320px) { header.top:not(:has(nav.anon)) nav a { padding-left: 4px; padding-right: 4px; } }   /* at the 110 % root zoom the five links still stand in one row on the phones (393 reads as 357 px, as browser zoom would show it; 4-px sides at 344) — the tap height unchanged */
.wall .wl-pic.dw-loading { background: linear-gradient(100deg, var(--bg-2) 30%, var(--surface-2) 50%, var(--bg-2) 70%); background-size: 300% 100%; animation: dw-shimmer 1.6s ease-in-out infinite; } .wall .wl-pic.dw-loading img { opacity: 0; } @keyframes dw-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .wall .wl-pic.dw-loading { animation: none; } }   /* a device window whose picture is on its way: the screen's grey with a slow shimmer, the picture unseen until whole, then its .2 s fade (LOOP-S scenario 1 row 23, design-critic 03:31 UTC 12 Oct) */
#live .cams .wl-frame { position: relative; } #live .cams .wl-frame > .wl-dev { position: absolute; left: 8px; bottom: 8px; z-index: 2; margin: 0; padding: 1px 8px; max-width: calc(100% - 16px); justify-content: flex-start; gap: 6px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(17,24,39,.08); font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; } #live .cams .wl-frame > .wl-dev b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } #live .cams .wl-win.phone .wl-frame > .wl-dev .wl-st { display: none; } #live .cams .wl-win.phone .wl-frame > .wl-dev { left: 50%; bottom: 6px; transform: translateX(-50%); max-width: calc(100% - 4px); padding: 0 5px; font-size: 10px; line-height: 15px; } #live .cams .wl-steps { display: none; }   /* THE BROWSERS TAB tile (the owner, senior 05:47 UTC 12 Oct): the device a small label on the frame, with its live dot and age */
#live .cams .wl-win > figcaption { width: 0; min-width: 100%; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; text-align: left; font-size: 13px; line-height: 18px; } #live .cams .wl-win > figcaption .wl-chk { display: inline; font-weight: 600; } #live .cams .wl-win > figcaption:has(.wl-stepw:not(:empty)) .wl-chk { display: none; } #live .cams .wl-win > figcaption .wl-stepw { color: var(--ink); }   /* ONE line under the tile: the step in words ("opening the cart"), the check's name only while no step is told; a narrow tile's step takes two lines at most, then …, and never widens the tile */
.story-vis .front-wall { display: none; } .story-vis .front-wall:has(.cams .wl-win) { display: block; } .story-vis:has(.front-wall .cams .wl-win) .journey2 { display: none; } .front-wall #live .cams { opacity: .92; } .front-wall #live .wl-site .wl-head { display: none; } .front-wall #live .cams .wl-win { cursor: zoom-in; }   /* the front page's muted small wall, the demo (THE BROWSERS TAB, the owner via senior 06:07 UTC 12 Oct): drawn only once a tile is there, then in the journey's place; the site's name stays in each address bar */
.front-wall #live .cams { justify-content: safe center; } .front-wall #live .wl-site .wl-row { justify-content: safe center; }   /* the slide is centred: its wall too */
.story-vis > .front-wall, .front-wall #live { min-width: 0; max-width: 100%; } .front-wall #live .cams { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } .front-wall #live .cams .wl-win { scroll-snap-align: start; }   /* on a phone the demo wall scrolls sideways inside its own strip: it never widens the slide's column, so the check rows under it keep the 16-px gutter (design-critic 06:14 UTC 12 Oct) */
/* THE BROWSERS TAB's page (the owner, senior 06:34 UTC 12 Oct): the wall is the page — no card around it and no second head under the h1, its line under the h1, the windows larger (_live.html's size()); with nothing on it, its one empty line says so, not twice. A phone's screen is 55–100 px wide: its name centred on the frame's foot, a size smaller, a short name when the full one does not fit (design-critic 06:37) */
#live[data-wall="1"] { padding: 0; border: 0; background: none; box-shadow: none; } #live[data-wall="1"] > .row.head { margin: -8px 0 18px; } #live[data-wall="1"] > .row.head h2 { display: none; } #live[data-wall="1"] #live-note { font-size: 14px; } #live[data-wall="1"]:has(.cams > .empty) #live-note { display: none; } #live[data-wall="1"] .cams > .empty { font-size: 14px; margin: 0; } #live[data-wall="1"] .cams.wall { gap: 28px 44px; } @media (max-width: 720px) { #live[data-wall="1"] .cams.wall .wl-site + .wl-site { margin-top: 24px; } }
/* the signed-in nav on a phone (design-critic 07:08 UTC 12 Oct: with "Browsers" the sixth word, "Settings" wrapped alone to a second line at 393 and 344): ONE line — the words at 14 px with 5-px sides fit at 393 and over; under that the line scrolls sideways in itself (base.js keeps the page's own word in view), its cut edge faded while more is to the right */
@media (max-width: 480px) { header.top:not(:has(nav.anon)) nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; gap: 0; } header.top:not(:has(nav.anon)) nav::-webkit-scrollbar { display: none; } header.top:not(:has(nav.anon)) nav a { flex: none; scroll-snap-align: start; } header.top:not(:has(nav.anon)) nav.nav-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); } header.top:not(:has(nav.anon)) nav.nav-less.nav-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); } header.top:not(:has(nav.anon)) nav.nav-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
@media (max-width: 480px) { header.top:not(:has(nav.anon)) nav a { padding-inline: 5px; } }
@media (min-width: 361px) and (max-width: 480px) { header.top:not(:has(nav.anon)) nav a { font-size: 14px; padding-inline: 4.5px; } }
/* the owner's row (09:34 UTC 12 Oct 2026): the check a browser is on right now, in the running report's grid — the house blue, a soft beat */
.grid td.cell.now span, .legend .now-mark { color: var(--accent, #1d4f73); }
@media (prefers-reduced-motion: no-preference) { .grid td.cell.now span { animation: cellbeat 1.2s ease-in-out infinite; } @keyframes cellbeat { 50% { opacity: .35; } } }
/* qa.pro's own admin (/admin, the owner's word 12:39 UTC 12 Oct): the house's tiles and table; the plan a dropdown in its cell; while a team is opened as them, a bar on every page says whose eyes these are and leads back */
.adm-nums .tile-note { max-width: 28ch; }
.as-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--amber-bg); border-bottom: 1px solid var(--amber); color: var(--ink); font-size: 14px; padding-inline: max(20px, calc((100% - 1192px) / 2)); } .as-bar form { margin: 0; }
.tiles.adm-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 899px) { .tiles.adm-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .adm-nums .adm-none { font-size: 17px; font-weight: 500; color: var(--muted); }   /* the admin's four tiles (the owner via senior 18:28 UTC 12 Oct): one row on a desktop, two by two below 900 px; the AI API before its first reading says so, never a zero */
/* THE ADMIN'S TABLE, the owner's spec (senior 02:18 UTC 13 Oct, his Fold open: a card per team, one team a screen — "a table"): ONE LINE a team from 720 px up (the eight columns cannot fit narrower without a sideways scroll) — name · e-mail · when · a small inline plan select · sites · reports · last report · "Open as them" a plain link at its end; compact cards under 720 px only, two values a line, the labels muted small above them, the select and the link on one line */
.adm-table { width: 100%; font-size: 14px; } .adm-table th, .adm-table td { padding: 7px 8px; vertical-align: middle; line-height: 1.35; } .adm-table th { font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.adm-table td.num, .adm-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--sans); } .adm-table td[data-l="When"], .adm-table td[data-l="Last report"] { white-space: nowrap; } .adm-table .adm-cut { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; } .adm-table td[data-l="Team"] .adm-cut { max-width: 13em; } @media (max-width: 1100px) { .adm-table .adm-cut { max-width: 11em; } .adm-table td[data-l="Team"] .adm-cut { max-width: 9em; } } 
.adm-table form { margin: 0; } .adm-plan { display: flex; align-items: center; gap: 6px; } .adm-plan select { width: auto; min-width: 0; min-height: 0; height: 30px; padding: 2px 24px 2px 8px; font-size: 13.5px; } .adm-plan .muted { white-space: nowrap; }
.adm-table button.adm-open { white-space: nowrap; font-size: 14px; min-height: 0; padding: 6px 0; background: none; box-shadow: none; border: 0; } .tablewrap table.adm-table { min-width: 0; }
@media (min-width: 720px) and (max-width: 900px) { .adm-table { font-size: 13px; } .adm-table th, .adm-table td { padding: 6px 5px; } .adm-table th { white-space: normal; font-size: 12px; } .adm-plan .adm-state { display: none; } .adm-plan select { font-size: 13px; padding-right: 20px; } .adm-table button.adm-open { font-size: 13px; } .adm-table .adm-cut { max-width: 8em; } .adm-table td[data-l="Team"] .adm-cut { max-width: 6.5em; } }   /* the Fold open (~750 px) and the iPad: the same one line, tighter; the plan's state in its select's title */
@media (min-width: 720px) {   /* the line can never be wider than its card, whatever the teams' names and addresses (design-critic 02:48 UTC 13 Oct: live at 904 "Open as the…" ran past the edge): a fixed layout, every column its share, the text in a cell ending in "…" */
  .tablewrap table.adm-table { table-layout: fixed; width: 100%; } .tablewrap:has(> table.adm-table)::after { content: none; }
  .adm-table th:nth-child(1) { width: 18%; } .adm-table th:nth-child(2) { width: 22%; } .adm-table th:nth-child(3) { width: 10%; } .adm-table th:nth-child(4) { width: 11%; } .adm-table th:nth-child(5) { width: 6%; } .adm-table th:nth-child(6) { width: 8%; } .adm-table th:nth-child(7) { width: 10%; } .adm-table th:nth-child(8) { width: 15%; }
  .adm-table td { overflow: hidden; text-overflow: ellipsis; } .adm-table .adm-cut, .adm-table td[data-l="Team"] .adm-cut { max-width: 100%; } .adm-table td[data-l="When"], .adm-table td[data-l="Last report"] { white-space: nowrap; }
  .adm-plan { min-width: 0; } .adm-plan select { max-width: 100%; min-width: 0; flex: 0 1 auto; } .adm-plan .adm-state { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .adm-table td:last-child { text-align: right; }
  .adm-table th { overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 720px) and (max-width: 1000px), (min-width: 1024px) and (max-width: 1100px) { .adm-table th:nth-child(2) { width: 19%; } .adm-table th:nth-child(8) { width: 18%; } .adm-plan .adm-state { display: none; } .adm-table th, .adm-table td { padding: 6px 5px; } .adm-table { font-size: 13px; } .adm-table button.adm-open { font-size: 13px; } }
@media (max-width: 719px) {
  .adm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .adm-table, .adm-table tbody { display: block; } .tablewrap:has(> table.adm-table)::after { content: none; }
  .adm-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "mail when" "sites reports" "last last" "plan open"; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .adm-table tbody tr:last-child { border-bottom: 0; }
  .adm-table tbody td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; } .adm-table tbody td .adm-cut { max-width: none; white-space: normal; overflow-wrap: anywhere; } .adm-table td.num { text-align: left; }
  .adm-table td:nth-child(1) { grid-area: name; } .adm-table td:nth-child(2) { grid-area: mail; } .adm-table td:nth-child(3) { grid-area: when; } .adm-table td:nth-child(4) { grid-area: plan; } .adm-table td:nth-child(5) { grid-area: sites; } .adm-table td:nth-child(6) { grid-area: reports; } .adm-table td:nth-child(7) { grid-area: last; } .adm-table td:nth-child(8) { grid-area: open; align-self: center; text-align: right; }
  .adm-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); } .adm-table td:nth-child(1)::before, .adm-table td:nth-child(4)::before { content: none; } .adm-table td[data-l="When"] { white-space: normal; }
}
/* the front's two device pictures fade out at their bottom edge (the owner's word via senior 04:48 UTC 13 Oct: "make their bottom blur, so it is understood they bring somewhere"): the frame and its picture melt into the page over their last 15 %, the link's own focus ring untouched */
.htile .wl-frame { -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent); }
/* the admin's ACTIONS, SEARCH and DISABLE (the owner via senior 03:58 UTC 13 Oct): one select a row in the site's select look (the Checks page's), a search box above the table, a turned-off team muted with "disabled", the disable asked in the page */
.adm-table select.adm-act { width: 100%; max-width: 11em; margin: 0; min-height: 0; height: 32px; padding: 4px 30px 4px 10px; font-size: 13.5px; } .adm-table td.adm-act-cell { text-align: right; overflow: visible; }
.adm-search { margin: 0 0 12px; max-width: 360px; } .adm-search input { margin-top: 0; } .adm-nomatch { margin: 4px 0 12px; }
.adm-table tr.adm-off td { color: var(--muted); } .adm-table tr.adm-off td b { color: var(--muted); font-weight: 600; } .adm-table .adm-dis { color: var(--muted); white-space: nowrap; }
dialog.adm-confirm { max-width: min(420px, calc(100vw / var(--zoom, 1) - 32px)); padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); } dialog.adm-confirm::backdrop { background: rgba(17,24,39,.35); } .adm-confirm p { margin: 0 0 16px; } .adm-confirm-go { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 719px) { .adm-table select.adm-act { max-width: none; } .adm-table td.adm-act-cell { text-align: left; } .adm-search { max-width: none; } }
/* THE RUNNING REPORT'S BAND (the owner via senior 05:10 / 05:11 UTC 13 Oct): "A browser is on it · Watch the browsers" is THE thing on a running report — one band at the top of the results, a soft breathing dot in the passed green (never a spinner; still for who asked for less motion; grey and still while the report waits for its browser), the sentence in the page's weight, the button the house's primary blue and a thumb's height; the Overview's Now carries the same dot while a report runs */
.run-band { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); border-radius: var(--r-l); background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
.run-band .run-band-t { margin: 0; flex: 1 1 16em; font-size: 16px; line-height: 1.45; color: var(--ink); } .run-band .run-watch { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; font-weight: 600; }
.run-pulse, #now.state-running h2 .rec, #now.state-first h2 .rec { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) { .run-pulse, #now.state-running h2 .rec, #now.state-first h2 .rec { animation: run-breathe 1.8s ease-in-out infinite; } }
@keyframes run-breathe { 0%, 100% { opacity: .55; box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); } 50% { opacity: 1; box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); } }
.run-band.waiting { border-color: var(--line); background: var(--surface); } .run-band.waiting .run-pulse { background: var(--line-3); animation: none; box-shadow: none; }
@media (max-width: 560px) { .run-band .run-watch { width: 100%; justify-content: center; } }
#now[data-queued="1"] h2 .rec { background: var(--line-3); animation: none; box-shadow: none; }   /* the Overview's Now: still and grey while its report waits for a browser */
h1 .pill.busy::before { background: var(--green); } @media (prefers-reduced-motion: no-preference) { h1 .pill.busy::before { animation: run-breathe 1.8s ease-in-out infinite; } }   /* the report's own "Checking now" pill breathes the same green */

/* THE ADMIN'S TILES IN COLOUR (the owner via senior 05:38 UTC 13 Oct: "these stats need some colors, like +5"): a plus in the PASS green, a 0 stays muted; the money's line stays muted */
.tiles.adm-nums .tile-note.adm-up { color: var(--green); font-weight: 600; }
.adm-tabs { margin: 0 0 12px; } .adm-which { margin: -4px 0 10px; }

/* THE REPORT'S SITE, by its host (design-critic 08:23 UTC 13 Oct, the owner's host-names order): the Reports list's Site column and the
   report page's head name it — "sylius.qasaur.com", "3 sites" */
.runlist td.rsite { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h1 .h1-site { font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
/* THE PRICING LADDER (the owner via senior 11:12 UTC 13 Oct): six cards, one row on a laptop, three and three from 720 px (the Fold open,
   the iPad), one column on a phone; one height a row, the buttons on one line at their feet; Team the usual choice */
.pl-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0 14px; align-items: stretch; }
@media (max-width: 1099px) { .pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 719px) { .pl-cards { grid-template-columns: minmax(0, 1fr); } }
.pl-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pl-card h3 { margin: 0 0 8px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.pl-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 2px; font-variant-numeric: tabular-nums lining-nums; }
.pl-price b { font: 600 34px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.pl-price span { font-size: 13.5px; color: var(--muted); }
.pl-per { margin: 4px 0 0; font-size: 13.5px; color: var(--ink); font-weight: 600; min-height: 1.4em; } .pl-per span { color: var(--muted); font-weight: 400; }
.pl-price .pl-from { font-size: 13.5px; color: var(--muted); align-self: baseline; }
.pl-first { margin: 12px 0 0; padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--green) 9%, var(--surface)); color: var(--ink); font-size: 13px; line-height: 1.35; }
.pl-has { list-style: none; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; align-content: start; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.pl-has li { padding-left: 16px; position: relative; } .pl-has li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.pl-has li b { color: var(--ink); font-weight: 600; }
.pl-has.pl-more { border-top: 0; margin-top: 0; padding-top: 7px; }
.pl-go { margin-top: auto; padding-top: 16px; } .pl-go .button { width: 100%; justify-content: center; box-sizing: border-box; }
.pl-card.pl-usual { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring), var(--shadow); }
.pl-flag { position: absolute; top: -11px; left: 14px; margin: 0; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.pl-ent { background: var(--surface-2); }
@media (max-width: 719px) { .pl-card { padding: 18px 18px 16px; } .pl-cards { gap: 18px; } }
/* FOR THE AGENCIES on Pricing (the owner via senior 12:23 UTC 13 Oct): the words left, a client's report card right as the client sees it;
   one column under 760 px, the card under the words */
.agency-pitch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px 40px; align-items: center; }
@media (max-width: 760px) { .agency-pitch { grid-template-columns: minmax(0, 1fr); } }
.ag-words h2 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 10px; }
.ag-words p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; max-width: 46ch; } .ag-words .ag-go { margin-top: 12px; }
.ag-mock { margin: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 14px; }
.agm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.agm-head b { display: block; color: var(--ink); font-size: 15px; } .agm-head small { display: block; color: var(--muted); font-size: 12.5px; }
.agm-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #6B3FA0; color: #fff; font-weight: 700; font-size: 16px; }
.agm-verdict { margin: 12px 0 8px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; } .agm-verdict .muted { font-weight: 400; }
.agm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agm-rows li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--surface-2); } .agm-rows li .muted { margin-left: auto; font-size: 13px; }
.agm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; } .agm-dot.fail { background: var(--red, #B91C1C); } .agm-dot.pass { background: var(--green); }
.agm-foot { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }

/* THE PAGE GROUND, TWO STEPS DARKER (the owner via senior 13:05 UTC 13 Oct): --bg #F5F7FB → #E5EBF3 and --bg-2 #EDF1F7 → #DDE5EF, the brand
   sheet's own step (−8 −6 −4) twice, the logo's navy hue kept; the header's ground follows the page; the cards stay white and lift on it */
/* the darker ground's two marks (the look tests on 9ff20839): the Sites tally's passed dot in --green (4.3 : 1 on #E5EBF3, 3 promised; the
   fill's 2.8 fell short) */
nav.sitetally a[href$="=passed"]::before { background: var(--green); }

/* ON THE DARKER GROUND (the owner via senior 13:44 UTC 13 Oct): THE HERO'S GRID GOES — the faint squares behind the headline, invisible on
   white, a dirty texture on the grey; the front page's and the small heroes' alike; the small heroes keep their soft glow */
.hero::before { content: none; }
main:has(> .hero.small-hero)::before { background: var(--glow) no-repeat top center; }

/* ONE CONTENT WIDTH FOR THE WHOLE SITE (the owner via senior 13:45 UTC 13 Oct: "the main page is narrower than the others"): the front
   page's hero takes the app pages' column — the URL box reaches the content's edges, as a Sites card does; the headline and the lead
   stay centred at their reading measure; the two device pictures keep the fold's height rule (they stand whole in the first screen). The header is the same on every page again (the mark on the content's
   left edge): the 13:17 rule that pulled it in to the 680 px box is gone with the box's cap (it also moved the Overview's header) */
.hero.front form.launch.big { width: 100%; } .hero.front form.launch.big .launch-row { max-width: none; }

/* THE GROUND GREYER (the owner via senior 13:56 UTC 13 Oct: "too much blue, go a little greyish"): the same darkness, half the blue — each
   channel half way to its grey: --bg #E5EBF3 → #E8EBEF, --bg-2 #DDE5EF → #E1E5EA, the header #F5F7FB → #F6F7F9 (luminance kept within
   a hair: .826 → .828); the navy mark is the page's one strong blue */

/* THE HERO WITHOUT THE GRID (the owner via senior 14:00 UTC 13 Oct, land A): TIGHTER — the slide keeps its height (the next heading at the
   fold), its words start at its top and stand closer: the headline, the sentence, the URL box, the pick and the line under it, the two
   mockups (they grow into the room: the fit script's cap 280); and ONE SOFT GLOW behind the URL box: a wide, faint radial light in the
   ground's own tone at the hero's centre — no shape, no pattern, felt as light */
.hero.front.slide { align-content: start; padding-top: clamp(28px, calc(6vh / var(--zoom, 1)), 64px); }
.hero.front .lead { margin-bottom: 22px; }
.hero.front form.launch { margin-top: 0; }
.hero.front .launch-dev { margin-top: 14px; }
.hero.front .launch-hint { margin-bottom: 0; }
.hero.front .hero-tiles { margin-top: 18px; }
.hero.front { background: radial-gradient(ellipse min(90%, 1100px) 190px at 50% var(--glow-y, 250px), rgba(255, 255, 255, .48), rgba(255, 255, 255, 0) 70%) no-repeat; }
/* (senior 14:06: the live glow sat under the header, "I thought my screen was the problem") the light centres on the URL box, wider and
   fainter, 190 px tall at most: it never reaches the header's bar */
@media (max-width: 899px) { .hero.front { --glow-y: 230px; } } @media (max-width: 640px) { .hero.front { --glow-y: 290px; } }
/* THE URL BOX'S RING WHOLE (senior 14:06: "its sides look cut"): the hero clipped sideways for its grid and floor, both gone; with the box
   on the column's edges its focus ring and shadow ran into that clip. The hero no longer clips; the ring and the shadow sit in the
   page's own gutter */
.hero.front { overflow-x: visible; }

/* THE SIGN-IN HEAD WEARS THE FULL LOCKUP (the owner via senior 14:02 UTC 13 Oct): above the form the falcon + "qa.pro" + "SMARTER QA",
   centred — /login, /signup, the forgot-password and reset pages; the header elsewhere stays the mark alone */
.auth-head .mark { background-image: url("/static/brand/logo-full.svg?v=21"); font-size: 56px; width: calc(1862 / 548 * 1em); max-width: 100%; margin: 0 auto 18px; }
:root[data-theme="dark"] .auth-head .mark { background-image: url("/static/brand/logo-full-white.svg?v=21"); }
@media (max-width: 640px) { .auth-head .mark { font-size: 46px; margin: 0 auto 14px; } }
/* THE SIGNED-IN NAV ONE MARK-WIDTH OFF THE MARK (the owner via senior 14:07 UTC 13 Oct: "too near"): the air before Overview is the
   falcon's own width at its size (41 px tall → 51 px; 38 → 47 under 900), less the header's 14 px gap */
@media (min-width: 721px) { header.top:not(:has(nav.anon)) nav { margin-left: calc(var(--mark-ratio) * 41px - 14px); } }
@media (min-width: 721px) and (max-width: 900px) { header.top:not(:has(nav.anon)) nav { margin-left: calc(var(--mark-ratio) * 38px - 14px); } }
/* THE BELL AND THE ACCOUNT, A PAIR (the owner via senior 14:07 UTC 13 Oct): the nav items' own 4 px between them (the header's gap was 14),
   the account's right edge on the content's right edge as before */
@media (min-width: 721px) { header.top > details.bell + details.orgpick, header.top > a.bell-page + details.orgpick { margin-left: -10px; } }
/* THE NAV IN THE NAVY INK, ONE WEIGHT HEAVIER (the owner via senior 14:09 UTC 13 Oct), both headers: the items at rest navy and 500 (were
   the second ink at 400); the current page keeps its 600 and its tint; the Start free button its own */
header nav a:not(.button), nav.anon a:not(.button) { color: var(--accent); font-weight: 500; }
header nav a.on, nav.anon a[aria-current]:not(.button) { font-weight: 600; }
/* THE WHITES (the owner via senior 14:12 UTC 13 Oct, the login card: "the white is too white"): every card and the header one notch off
   pure white, a near-white in the ground's own cool tint (--surface #FFFFFF → #FBFCFD); the INPUTS and the URL box stay pure white
   (--field), the brightest thing on the page; the buttons as they were (white) */
:root:not([data-theme="dark"]) { --surface: #F7F9FB; --field: #FFFFFF; }   /* two notches off white (senior 14:53: one more), the step (-4 -3 -2) twice */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not(:disabled)), textarea:not(:disabled), select:not(:disabled) { background-color: var(--field, #fff); }
.launch-row input, .launch-field input { background-color: var(--field, #fff); }
button:where(:not(.primary):not(.ghost):not(.linkish):not(.danger-fill)), .button:where(:not(.primary)) { background-color: var(--field, #fff); }
/* "TEN" MADE EVIDENT (the owner via senior 14:14 UTC 13 Oct: "Ten devices at once — Ten should be somehow evidentiated"): the word in the
   navy ink and heavier than its line; the line stays one line */
.launch-dev-hint .dev-ten { color: var(--accent); font-weight: 700; }
/* THE QUIET WORDMARK in the hero's sentence (the owner via senior 14:14 UTC 13 Oct: "I liked the old version, but that was too bold"): the
   wordmark's own letters and blue dot again, at the sentence's size, ONE WEIGHT LIGHTER than the lockup (word-light.svg: the strokes
   thinned evenly), the navy ink — it sits in the line */
.hero .lead .brand-word.lw { background-image: url("/static/brand/word-light.svg?v=21"); }
/* THE MOCKUPS' REAL FRAMES (senior 14:00 UTC 13 Oct, LAND B): the frames stacked in the window's own picture, each laid like the first
   (the top of the page, the window's crop), a soft cross-fade; the window's bottom fade covers them all */
.hero-tiles.live .wl-pic { position: relative; }
.hero-tiles.live .wl-pic img.hf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .9s ease; }
.hero-tiles.live .wl-pic img.hf.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-tiles.live .wl-pic img.hf { transition: none; } }
/* THE BELL AND THE ACCOUNT STAY MARKED WHILE THEIR POPUP IS OPEN (the owner via senior 14:26 UTC 13 Oct): the active nav item's own pill —
   the navy's tint behind the icon, the icon in the navy — for as long as the panel shows */
details.bell[open] > summary, details.orgpick[open] > summary, details.orgpick[open] .acct { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
details.orgpick[open] > summary .acct { background: transparent; }
/* THE SIGN-IN LOCKUP IS THE OWNER'S OWN IMAGE (senior 14:38 UTC 13 Oct: "the logo text looks ugly"): lockup-final-falcon.png itself, cropped
   to its drawing and kept at 2x (brand/lockup-card.png, 480 x 143), half the card's width, centred — no rebuilt letters for the wordmark;
   /login, /signup, /forgot, /reset */
.auth-head .mark { background-image: url("/static/brand/logo-full.svg?v=21"); background-size: contain; background-position: center; width: 50%; height: auto; aspect-ratio: 1920 / 548; font-size: 16px; margin: 0 auto 18px; }
@media (max-width: 640px) { .auth-head .mark { width: 62%; font-size: 16px; } }
/* THE NAV ONE WEIGHT BACK (the owner via senior 14:39 UTC 13 Oct: "the menu items look a little too evident now"): live they were 500
   (medium) in the navy; a little less: 450, between regular and medium where the system face is variable (macOS, Windows 11, Android),
   regular where it is not; the navy kept, the current page's pill as is (600) */
header nav a:not(.button):not(.on), nav.anon a:not(.button):not([aria-current]) { font-weight: 450; }
/* ONE SOURCE FOR THE WORDMARK (senior 14:43 UTC 13 Oct, after the 14:38 image): the sign-in card wears the traced lockup again — his letters
   set apart (the q and the a, the r and the o no longer touch), the pane in the page's grey — the same lettering as the hero */
/* THE NOTIFICATIONS POPUP (the owner via senior 14:47 / 14:48 UTC 13 Oct): a hairline under every row (the card's line), even padding, the
   last row without; a hover tint; an unread row bold with its dot (as it was), a read row quiet; the bell's badge carries the COUNT only
   while something is unread */
ol.notes { padding: 0; }
ol.notes li + li { border-top: 1px solid var(--line); }
ol.notes li a { padding: 10px 14px; min-height: 40px; }
ol.notes li a:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); text-decoration: none; }
ol.notes li:not(.new) .s { color: var(--ink-2); font-weight: 400; }
.bell.fresh .dot:not(:empty) { display: grid; place-items: center; width: auto; min-width: 16px; height: 16px; padding: 0 4px; top: 5px; right: 4px; border-radius: 999px; font: 600 10.5px/1 var(--sans); color: #fff; box-sizing: border-box; }
@media (pointer: coarse) { ol.notes li a { min-height: 44px; } }
/* THE ACCOUNT MENU (the owner via senior 14:50 UTC 13 Oct): three groups and Log out, hairlines between them; a row = a small line icon and its
   words, the notifications' row height; the current team checked; "New team…" opens its field only when pressed; Log out quieter, air above */
.orgpick .menu { padding: 6px; }
.orgpick .menu .mgroup + .mgroup { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.orgpick .menu .mgroup.mout { margin-top: 12px; }
.orgpick .menu .mrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; box-sizing: border-box; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.orgpick .menu .mrow:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); text-decoration: none; }
.orgpick .menu .mrow .mi { flex: none; color: var(--muted); } .orgpick .menu .mrow:hover .mi { color: var(--ink-2); }
.orgpick .menu .mrow.on { font-weight: 600; color: var(--accent); } .orgpick .menu .mrow.on .mi { color: var(--accent); }
.orgpick .menu .menu-who { display: block; border-bottom: 0; margin: 0; padding: 6px 10px 2px; font-size: 13px; color: var(--muted); }
.orgpick .menu .mout .mrow { color: var(--ink-2); font-size: 14px; }
.orgpick .menu .switch { margin: 0; }
.orgpick .menu details.newteam-d > summary { list-style: none; color: var(--ink-2); } .orgpick .menu details.newteam-d > summary::-webkit-details-marker { display: none; }
.orgpick .menu details.newteam-d[open] > summary { color: var(--ink); }
.orgpick .menu .newteam { border-top: 0; margin: 2px 0 4px; padding: 0 4px 0 36px; }
@media (pointer: coarse) { .orgpick .menu .mrow { min-height: 44px; } }
/* the menu's rows over the older rules (a[href="/account"] and the logout button stood block): one flex row each, no button box */
.orgpick .menu .mgroup .mrow { display: flex; align-items: center; gap: 10px; box-shadow: none; border: 0; min-height: 40px; padding: 6px 10px; }
.orgpick .menu .mgroup .mrow.on { background: none; }
@media (pointer: coarse) { .orgpick .menu .mgroup .mrow { min-height: 44px; } }
/* THE ACTION BLUE (the owner via senior 15:21 UTC 13 Oct: "with the darker ground our blue looks too dark"): the site's action colour is the
   new mark's FRAME BLUE #014481 (read from mark-final-falcon.png's frame; white on it 9.8 : 1, on the ground 8.2 : 1) — the primary
   buttons, the links, the active nav pill's ink, the focus ring, the running pulse and the band's button, the hero's wordmark; the NAVY
   (#0B2D57) for headings and body ink alone; green stays "passed" */
:root:not([data-theme="dark"]) { --accent: #014481; --accent-2: #01335F; --link: #014481; --ring: #014481; --head: #0B2D57; }
h1, h2, h3 { color: var(--head, #0B2D57); }
.hero.front h1 { color: var(--head, #0B2D57); } .hero.front h1 .h-ink { color: #082041; }
.siterow .sr-name, a.failrow .fr-name, .al-main b, .alert summary b, .checks-list label.inl, .card h2 a, .site-head h1 a { color: var(--head, #0B2D57); }
.run-pulse, #now.state-running h2 .rec, #now.state-first h2 .rec, h1 .pill.busy::before { background: var(--accent); }
@keyframes run-breathe { 0%, 100% { opacity: .55; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { opacity: 1; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } }
/* THE URL BOX WITHOUT ITS DROP SHADOW (the owner via senior 15:50 UTC 13 Oct: "reads as dirt on the grey"): the soft shadow under the box goes,
   at rest and on focus — the box keeps its edge and, focused, its ring */
:root:not([data-theme="dark"]) { --launch-lift: none; --launch-focus-lift: 0 0 0 0 transparent; }
/* THE CARDS' SHADOW ON THE GREY (the owner via senior 15:50, the critic's read 15:56 UTC 13 Oct): the 1 px line stays (a lift), the soft
   6 px / 16 px blur under it goes — on the grey ground it read as a smudge; the cards are white enough to stand */
:root:not([data-theme="dark"]) { --shadow: 0 1px 2px rgba(17,24,39,.06); }
/* THE NAV ONE STEP LARGER (the owner via senior 16:12 UTC 13 Oct): both headers, 14.5 → 15.5 px, the weight as is, the bar's height
   unchanged; THE MARK FILLS THE BAR (16:13): its height the bar's less the nav's own air above and below (56 − 2 × 6 = 44 px), from
   721 px up; the air before Overview stays one mark-width */
header nav a { font-size: 15.5px; }
@media (min-width: 721px) { .brand .mark { font-size: 44px; } header.top:not(:has(nav.anon)) nav { margin-left: calc(var(--mark-ratio) * 44px - 14px); } }
/* THE FRONT'S HEADLINE (the owner via senior 16:48 UTC 13 Oct): the text stays; "stuck." (its full stop too) in the logo's blue = the action
   blue rgb(1, 68, 129), the mark's frame; the sentence one notch lighter — 600 → 500 (it read too black) — in the nav's colour, the same
   blue (the "Ten" word's); "stuck." keeps the 600, so it still leads */
.hero.front h1 { color: var(--accent); font-weight: 700; }
.hero.front h1 .h-ink { color: var(--accent); font-weight: 800; }   /* "stuck." BOLD (senior 17:05: it keeps the 800, the rest 700) */
/* SIGN IN WITH (the owner via senior 12:21 / 12:35 UTC 13 Oct): four full-width buttons above the e-mail form, the provider's mark at the left,
   "Continue with <name>" centred; white like a field; a quiet "or with your e-mail" rule under them */
.signin-with { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 0; }   /* THE ICON TILES (the owner via senior 17:48 UTC 13 Oct): one row of four, spread across the card */
.signin-with .sw-tile { display: grid; place-items: center; width: auto; max-width: 56px; height: auto; aspect-ratio: 1; flex: 0 1 56px; min-width: 44px; border: 1px solid var(--line-3); border-radius: var(--r-s); background: var(--field, #fff); transition: border-color .12s, background-color .12s; }
.signin-with .sw-tile svg { display: block; width: 28px; height: 28px; }
.signin-with .sw-tile:hover { border-color: var(--ink-2); background: var(--field, #fff); text-decoration: none; } .signin-with .sw-tile:active { background: var(--bg-2); }
.signin-with .sw-tile:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.sw-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--muted); font-size: 13px; }
.sw-or::before, .sw-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.sw-coming { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* PRICING INK (the owner's screen, senior 17:31 UTC 13 Oct 2026): on the darker ground the near-black read black — the headline, the
   card names, the prices and the "$N a site" bold wear the front headline's navy; the lead, the bullets and the note the front sub-line's
   slate; the faint glow behind the headline read as a smudge, so the pricing page has none */
main:has(.pl-cards) .hero.small-hero h1, .pl-card h3, .pl-price b, .pl-per { color: var(--accent); }
main:has(.pl-cards) .hero.small-hero .lead, .pl-has, .pl-has li b, .plans-note { color: var(--ink-2); }
main:has(> .hero.small-hero):has(.pl-cards)::before { content: none; }
.plans-note { margin: 18px auto 0; max-width: 46em; text-align: center; font-size: 14px; line-height: 1.5; }
.plans-note + .plans-foot { margin-top: 6px; text-align: center; }
/* ONE BLUE (the owner's word, senior 17:57 UTC 13 Oct 2026) — THE BRAND SHEET'S ENTRY, superseding the #014481 above: the site's action
   blue is the logo's frame blue rgb(0, 88, 156) #00589C, read from the 17:56 mark-final-falcon.png (white on it 7.3 : 1, on the
   232/235/239 ground 6.1 : 1): the primary buttons, the links, the nav and its pressed pill, the focus ring, "stuck.", the "$N a site"
   bold, the bell/account pills. The headline navy #014481 is TEXT and stays: the front's sentence, the pricing headline, card names
   and prices wear --navy */
:root:not([data-theme="dark"]) { --accent: #00589C; --accent-2: #00467D; --link: #00589C; --ring: #00589C; --navy: #014481; --head: #014481; }
/* ONE TEXT NAVY (design-critic 18:14 UTC 13 Oct 2026, criterion 8): every heading, name and price wears the headlines' #014481 — the
   older #0B2D57 (--head: the login H1, the pricing card names, the section heads, the coming page) made the pricing screen three blues */
.hero.front h1 { color: var(--navy, #014481); } .hero.front h1 .h-ink { color: var(--accent); }
main:has(.pl-cards) .hero.small-hero h1, .pl-card h3, .pl-price b { color: var(--navy, #014481); } .pl-per { color: var(--accent); }
.hero.small-hero h1 { color: var(--head, #014481); }   /* the inner pages' headlines (docs, about, …) were the near-black ink: one text navy (design-critic 18:14) */
/* THE PALETTE (the owner's word via senior 18:26 UTC 13 Oct 2026, his target mock owner-target-mock-13Oct-1828.png; supersedes the
   17:57 blue and the 13:56 / 14:53 ground and whites): the ground #F5F7FA; the header, the URL box and the cards white; the headline deep
   navy #123B60 (11.5 : 1 on white), "stuck." and every action #0066B3 (white on it 5.9 : 1; on the ground 5.5); body text #374151, the
   secondary text #5B6472 (6.0 : 1 on white, 5.6 on the ground); the control borders HELD at --line-3 (#D5DBE3 is 1.3 : 1 on the ground,
   1.4 on white, and a field's edge promises 3 : 1 — senior's word); shadows restrained — the cards barely, the
   URL box the mock's soft 0 2px 8px at 6 %. The body's running text wears #374151; --ink stays the strong ink the labels, the bold
   words and the controls' edges are drawn from (their 3 : 1 holds) */
:root:not([data-theme="dark"]) { --bg: #F5F7FA; --bg-2: #EEF1F5; --surface: #FFFFFF; --field: #FFFFFF;
  --accent: #0066B3; --accent-2: #00528F; --link: #0066B3; --ring: #0066B3; --navy: #123B60; --head: #123B60;
  --ink-2: #374151; --muted: #5B6472;
  --shadow: 0 1px 2px rgba(17,24,39,.04); --launch-lift: 0 2px 8px rgba(0,0,0,.06); }
body { color: var(--ink-2); }
@media (min-width: 721px) and (max-width: 1319px) { .sitetop .addsites-closed { flex: none; } }   /* the tablet's stacked row too: its 420 px flex basis was a HEIGHT there — /sites at 904 with new sites closed (live) drew a 420 px empty box above the search (crowd5 19:2x UTC 13 Oct 2026) */
/* TASTE 2 · 3 · 5 (the owner via senior 18:43 / 18:50 / 18:52 UTC 13 Oct 2026): the headline one colour, the wordmark's navy #002448,
   "stuck." included, one weight (800); the Check it button's radius 9 px; the bullets in the body ink; the hero's picture at the mock's
   size (307 px at 904, the fit's start ≈ 16.6 % of the width) */
.hero.front h1 { color: #002448; font-weight: 800; } .hero.front h1 .h-ink { color: inherit; font-weight: inherit; }
form.launch.big button { border-radius: 9px; }
.hero.front .tick { color: var(--ink-2); }
/* TASTE 4 — THE NOTIFICATIONS POPUP = the owner's mock (senior 18:51 UTC 13 Oct 2026): white, rounded, a soft shadow and an arrow tip
   under the bell, ≈540 px; "Notifications" bold navy and "Mark all read"; the segmented filter All | Unread | Needs attention; a row:
   the unread dot, a round status badge, the host bold navy with the time right, the kind, chips of the answers, "View report #N →" */
details.bell > .panel { width: min(540px, calc(100vw / var(--zoom, 1)) - 24px); top: calc(100% + 10px); border-radius: 14px; border-color: var(--line); box-shadow: 0 12px 32px -8px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); }
details.bell > .panel::before { content: ""; position: absolute; top: -7px; right: 16px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
details.bell .notes-hd { align-items: center; padding: 16px 18px 10px; border-bottom: 0; } details.bell .notes-hd h2 { font-size: 19px; font-weight: 700; color: var(--head); }
.notes-read { background: none; border: 0; box-shadow: none; padding: 4px 0; min-height: 0; color: var(--link); font-size: 14px; cursor: pointer; } .notes-read:hover { text-decoration: underline; background: none; }
.notes-seg { display: grid; grid-template-columns: 1fr 1fr 1.3fr; margin: 0 18px 12px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; }
.notes-seg button { justify-content: center; text-align: center; min-height: 34px; border: 0; box-shadow: none; background: none; border-radius: 7px; font-size: 14px; color: var(--ink-2); padding: 4px 8px; }
.notes-seg button + button { border-left: 1px solid var(--line); border-radius: 0 7px 7px 0; } .notes-seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-left-color: transparent; border-radius: 7px; }
.notes-seg button:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
details.bell ol.notes, .notes-card ol.notes { border-top: 1px solid var(--line); }
ol.notes li a { grid-template-columns: 8px 34px minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 18px; align-items: start; }
ol.notes li.new a { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); } ol.notes li a:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
ol.notes li .nd { width: 8px; height: 8px; margin-top: 12px; border-radius: 50%; background: transparent; } ol.notes li.new .nd { background: var(--accent); }
ol.notes .nb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.nb-ok { color: #15703A; background: #E7F6EC; } .nb-wait { color: #A34A07; background: #FDF0DD; } .nb-bad { color: #B42318; background: #FDECEA; } .nb-look { color: #A34A07; background: #FDF0DD; } .nb-info { color: var(--muted); background: var(--surface-2); }
ol.notes li a .s { display: grid; gap: 4px; color: var(--ink-2); font-weight: 400; } ol.notes li a .s .site { color: var(--head); font-weight: 700; font-size: 15px; }
ol.notes li:not(.new) .s { color: var(--ink-2); } ol.notes .nk { color: var(--ink-2); }
ol.notes .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } ol.notes .chip { padding: 2px 9px; border-radius: 6px; font-size: 13px; line-height: 20px; }
.chip.c-ok { color: #15703A; background: #E7F6EC; } .chip.c-wait { color: #A34A07; background: #FDF0DD; } .chip.c-bad { color: #B42318; background: #FDECEA; } .chip.c-none { color: #4B5563; background: #F0F2F5; }
ol.notes .nv { color: var(--link); font-size: 14px; margin-top: 2px; }
ol.notes li a time { color: var(--muted); font-size: 13px; white-space: nowrap; }
details.bell .notes-ft { text-align: center; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
/* TASTE 8 — /login = the owner's mock (senior 19:05 UTC 13 Oct 2026): the header carries the full lockup at the mark's height; the card's
   line is a large navy heading with a sub-line; the providers a 2 × 2 grid of named buttons; the foot a plain line with the link */
.brand .mark { background-image: url("/static/brand/logo-full.svg?v=21"); width: calc(1920 / 548 * 1em); }
.auth-title { margin: 4px 0 6px; font-size: 29px; line-height: 1.2; font-weight: 700; color: var(--head); text-align: center; }
.auth-sub { margin: 0 0 22px; color: var(--muted); font-size: 16px; text-align: center; max-width: none; }
.signin-with { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signin-with .sw-tile { width: auto; max-width: none; aspect-ratio: auto; min-height: 50px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px; color: var(--ink); font-size: 16px; font-weight: 500; }
.signin-with .sw-tile svg { width: 24px; height: 24px; flex: none; }
.auth .pw-show { color: var(--link); text-decoration: none; font-weight: 500; }
.auth-foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); max-width: none; } .auth-foot a { color: var(--link); font-weight: 500; }
/* TASTE 7 — THE ACCOUNT MENU = the owner's mock (senior 19:05 UTC 13 Oct 2026): the bell's shape (an arrow tip, 14 px corners, a soft
   shadow); an avatar with the initial, the e-mail bold and "Account"; "Account settings ›"; TEAMS in small caps, the current team tinted
   with its check at the right; "Create a team"; Billing with the plan as a chip; Audit log; Admin; Log out */
details.orgpick > .menu { min-width: 300px; border-radius: 14px; border-color: var(--line); padding: 8px; box-shadow: 0 12px 32px -8px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); top: calc(100% + 10px); }
details.orgpick > .menu::before { content: ""; position: absolute; top: -7px; right: 16px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.orgpick .menu .menu-who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; font-size: 14px; color: var(--ink); }
.orgpick .menu .mav { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 700; font-size: 17px; }
.orgpick .menu .mwho { display: grid; min-width: 0; } .orgpick .menu .mwho b { color: var(--head); font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .orgpick .menu .mwho small { color: var(--muted); font-size: 13px; }
.orgpick .menu .mgroup .mrow { font-size: 15px; color: var(--ink); } .orgpick .menu .mgroup .mrow > span:first-of-type, .orgpick .menu .mgroup .mrow > bdi { flex: 1; text-align: left; }
.orgpick .menu .mchev { color: var(--muted); flex: none; }
.orgpick .menu .mlabel { margin: 8px 10px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; max-width: none; }
.orgpick .menu .mgroup .mrow.on { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-radius: 8px; color: var(--accent); font-weight: 600; }
.orgpick .menu .mcheck { color: var(--accent); flex: none; margin-left: auto; }
.orgpick .menu .mchip { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.orgpick .menu .mgroup + .mgroup { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.orgpick .menu .mrow .mi { width: 20px; height: 20px; }
/* TASTE 6 — REPORTS = the owner's mock (senior 19:05 UTC 13 Oct 2026): the title with its sub-line and "Check all sites" filled; one card
   holding the filter pills, a search with the reader's time zone at its right, the table (Report · Started on two lines · Trigger · Sites ·
   Run status as a coloured pill · Check results as dot lines · an arrow), the foot "Showing N recent reports" + Previous / Next */
.pg-head { align-items: flex-start; } .pg-head h1 { margin: 0; } .pg-sub { margin: 4px 0 0; color: var(--muted); font-size: 16px; max-width: none; }
#reports nav.chips { gap: 10px; } #reports nav.chips a { padding: 7px 16px; border-radius: 999px; font-size: 15px; }
.runs-find { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 12px; flex-wrap: wrap; }
.rf-search { position: relative; flex: 1 1 320px; max-width: 520px; margin: 0; } .rf-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.rf-search input { width: 100%; padding-left: 40px; min-height: 44px; } .rf-zone { font-size: 14px; }
table.runlist thead th { background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 14px; padding: 12px 14px; }
table.runlist td { padding: 14px; vertical-align: middle; } table.runlist a.num { font-size: 16px; font-weight: 500; color: var(--link); }
table.runlist time small { display: block; color: var(--muted); font-size: 13px; }
table.runlist .pill { border-radius: 999px; padding: 3px 12px 3px 10px; font-size: 14px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 7px; }
table.runlist .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#reports table.runlist td.rstate .pill.st-cancelled { color: #A34A07; background: #FDF0DD; border-color: #F6D9AE; } #reports table.runlist td.rstate .pill.st-done { color: #4B5563; background: #F0F2F5; border-color: #E2E6EB; }
#reports table.runlist td.rstate .pill.st-running, #reports table.runlist td.rstate .pill.st-queued { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } #reports table.runlist td.rstate .pill.st-broke { color: #B42318; background: #FDECEA; border-color: #F6CFCB; }
.rres .rlines { display: grid; gap: 4px; } .rres .rl, .rres .pill { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-size: 15px; color: var(--ink-2); font-weight: 400; }
.rres .rl::before, .rres .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #878E9A; flex: none; }
.rres .green::before { background: #16803C; } .rres .red::before { background: #D92D20; } .rres .amber::before, .rres .nc::before { background: #C26A05; }
td.rgo { text-align: right; } td.rgo a { font-size: 20px; text-decoration: none; color: var(--link); }
.runs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .rf-pages { display: flex; gap: 10px; }
.rf-pages .button[aria-disabled="true"] { color: var(--muted); opacity: .7; cursor: default; }
table.runlist time { white-space: nowrap; }
/* TASTE 9 — THE OVERVIEW = the owner's mock (senior 19:05 UTC 13 Oct 2026): "Check all sites" outlined beside the box; the verdict as two
   facts (a green check circle + "0 failed checks" | an amber dot + "N sites need attention →"); the paused card's head with its pill and
   the Resume button filled at the right; the Last report card with its state pill, "View report #N →", the tiles big navy numbers */
.verdict.split .v-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 22px; }
.verdict.split .v-ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #16803C; color: #fff; }
.verdict.split .v-words { color: var(--head); font-weight: 700; } .verdict.split .v-sep { width: 1px; height: 26px; background: var(--line-2); margin: 0 6px; }
.verdict.split .vd.amber { width: 14px; height: 14px; border-radius: 50%; background: #C2620A; } .verdict.split .v-att { color: var(--link); font-weight: 600; text-decoration: none; }
.verdict.split .v-sub { margin: 8px 0 0 2px; font-size: 15px; }
.st-pill { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin-left: 10px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.st-pill.paused, .st-pill.st-cancelled { color: #A34A07; background: #FDF0DD; } .st-pill.st-done { color: #4B5563; background: #F0F2F5; } .st-pill.st-failed { color: #B42318; background: #FDECEA; }
.st-pill i { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.card.now.state-paused .row.head { align-items: center; } .card.now.state-paused .now-acts .primary { min-height: 48px; padding: 10px 22px; font-size: 16px; }
.card.now.state-paused .now-l1 { font-size: 17px; color: var(--ink-2); }
.card.lastrep .lr-go { color: var(--link); font-weight: 500; text-decoration: none; }
.card.lastrep .lr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .card.lastrep .lr-tiles .tile { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--surface); }
.card.lastrep .lr-tiles .tile b { font-size: 34px; color: var(--head); font-weight: 800; }
/* TASTE 10 — SITES = the owner's mock (senior 19:09 UTC 13 Oct 2026): the sub-line and "▶ Check all sites" filled; count pills, each a
   filter (All filled blue with its count in a lighter chip; Checks not run outlined orange with a clock; Passed outlined green with a
   check); "Add a new site" its own card (a globe badge, the line, the field, "Add site"); the list's search; "Recent checks" with its legend;
   each row's state as dot lines, the Verified chip blue */
.sitepills { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px; }
.sitepills .sp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); font-size: 16px; text-decoration: none; color: var(--ink-2); background: var(--surface); }
.sitepills .sp b { font-weight: 600; } .sitepills .sp-all { color: #fff; background: var(--accent); border-color: var(--accent); } .sitepills .sp-all b { background: rgba(255,255,255,.22); border-radius: 6px; padding: 0 7px; }
.sitepills .sp-notrun { color: #A34A07; border-color: #F2C27E; background: #FFFBF5; } .sitepills .sp-passed { color: #15703A; border-color: #9BD3AE; background: #F6FCF8; } .sitepills .sp-failed { color: #B42318; border-color: #F0A9A2; background: #FFF8F7; } .sitepills .sp-look { color: #A34A07; border-color: #F2C27E; }
.sitepills .sp[aria-current="true"]:not(.sp-all) { box-shadow: inset 0 0 0 1px currentColor; }
.card.addcard { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 18px; padding: 20px 24px; }
.addcard .ac-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.addcard h2 { margin: 0 0 4px; font-size: 19px; color: var(--head); } .addcard .ac-words p { margin: 0; color: var(--muted); }
.addcard .siteadd { max-width: none; flex-wrap: nowrap; } .addcard .addsites-closed { margin: 0; }
@media (max-width: 720px) { .card.addcard { grid-template-columns: auto 1fr; } .addcard .siteadd, .addcard .addsites-closed { grid-column: 1 / -1; } }
table.sitelist thead th { background: var(--surface-2); color: var(--muted); font-weight: 500; } table.sitelist th.trend .lg { float: right; font-size: 13px; color: var(--muted); }
table.sitelist th.trend .lg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 12px; vertical-align: 0; } table.sitelist th.trend .lg i.g { background: #16803C; } table.sitelist th.trend .lg i.n { background: #858C98; }
table.sitelist .sitewords a b { color: var(--link); font-size: 16px; } table.sitelist .vbadge { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-radius: 999px; padding: 2px 10px 2px 6px; }
table.sitelist td.wide .pill { background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink-2); }
table.sitelist td.wide .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #878E9A; } table.sitelist td.wide .pill.red::before { background: #D92D20; } table.sitelist td.wide .pill.green::before { background: #16803C; } table.sitelist td.wide .pill.amber::before, table.sitelist td.wide .pill.nc::before { background: #C26A05; }
/* TASTE 11 — /about = the owner's mock (senior 19:15 UTC 13 Oct 2026) */
.hero.small-hero[data-page="about"] h1 { max-width: 15em; margin-inline: auto; } .hero.small-hero[data-page="about"] .lead { max-width: 34em; margin-inline: auto; } .hero.small-hero[data-page="about"] .lead-2 { margin-top: 10px; }
.about-data { display: grid; justify-items: center; padding: 18px 16px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-radius: 12px; }
.about-data .adg-top { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; }
.about-data .adg-top .mark { width: calc(663.42 / 546 * 32px); height: 32px; } .about-data .adg-top b { color: var(--accent); font-size: 18px; }
.about-data .adg-lines { width: 70%; height: 30px; color: var(--accent); }
.about-data .adg-row { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.about-data .adg-win { flex: 1 1 0; max-width: 150px; display: grid; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 8px; font-style: normal; }
.about-data .adg-win i { display: block; height: 8px; border-radius: 3px; background: #E5E9F0; } .about-data .adg-win i.adg-dots { height: 6px; width: 24px; background: radial-gradient(circle, #9AA4B2 2px, transparent 2.5px) 0 0 / 8px 6px repeat-x; }
.about-data .adg-win i.adg-pic { height: 34px; width: 50%; } .about-data .adg-win i.short { width: 60%; } .about-data .adg-win > span { text-align: center; font-weight: 600; color: var(--head); font-size: 14px; }
.about-data .adg-arrow { color: var(--accent); font-size: 20px; }
.about-data .adg-r { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.about-data .adg-r b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 10px; } .adg-r b.ok { background: #16803C; } .adg-r b.bad { background: #D92D20; } .adg-r b.look { background: #C26A05; }
.about-believe .how-n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-weight: 700; font-size: 15px; }
.about-believe .how-steps h3 { color: var(--head); font-size: 18px; }
.ab-chips { display: grid; gap: 10px; } .ab-chips .abc { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-family: var(--sans); }
.ab-chips .abc.ok { color: #15703A; background: #E7F6EC; } .ab-chips .abc.no { color: #6B7280; background: #F0F2F5; font-weight: 500; } .ab-chips .abc.no svg { color: #D92D20; }
.ab-loop { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; border-top: 1px solid var(--line); padding-top: 14px; } .ab-loop > span { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ab-loop i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); } .ab-loop > b { color: var(--muted); font-weight: 400; margin-top: 10px; }
.ab-answers { display: grid; gap: 8px; } .ab-answers .aba { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 8px; font-weight: 600; }
.ab-answers .aba::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ab-answers .aba.ok { color: #15703A; background: #E7F6EC; } .ab-answers .aba.bad { color: #B42318; background: #FDECEA; } .ab-answers .aba.look { color: #A34A07; background: #FEF3D8; }
.about-timeline .dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-weight: 700; font-size: 14px; }
.about-story h2, .about-mark h2, .about-built h2 { color: var(--head); }
.card.about-mark { display: flex; align-items: center; gap: 36px; } .card.about-mark .mark.big { width: calc(663.42 / 546 * 110px); height: 110px; flex: none; padding-right: 36px; border-right: 1px solid var(--line); box-sizing: content-box; background-origin: content-box; background-clip: content-box; }
.card.about-built { text-align: center; } .card.about-built h2 { font-size: 26px; margin: 0 0 10px; } .card.about-built p { margin: 6px auto; max-width: none; color: var(--ink-2); } .card.about-built p:not(.small) a { font-weight: 700; }
.about-timeline::before { top: 20px; left: 20px; right: 20px; } .about-timeline li { padding-top: 56px; } .about-timeline .dot { box-shadow: none; border: 0; }
@media (max-width: 720px) { .about-timeline::before { top: 20px; bottom: 20px; left: 20px; right: auto; } .about-timeline li { padding-top: 8px; padding-left: 56px; min-height: 40px; } }
.about-timeline b { color: var(--head); font-size: 16px; }
@media (max-width: 720px) { .card.about-mark { flex-direction: column; gap: 18px; text-align: center; } .card.about-mark .mark.big { border-right: 0; padding-right: 0; } }
/* TASTE 12 — THE WHOLE FRONT = the owner's mock (senior 19:31 UTC 13 Oct 2026), pass 1: the header's mark with the word "qa.pro" beside it
   (not the SMARTER QA lockup), the eyebrow, the headline on two lines with "get stuck." in the accent, the small device toggle back with its
   icons, the small bullets, the picture large — the phone over the desktop's right edge, a floating "Add to cart" card, its caption */
.brand .mark { background-image: url("/static/brand/logo-mark.svg?v=21"); width: calc(663.42 / 546 * 1em); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand .brand-word { font: 800 25px/1 var(--sans); letter-spacing: -.02em; color: var(--head); }
@media (max-width: 380px) { .brand .brand-word { font-size: 21px; } }
.hero.front .hero-eyebrow { display: block; margin: 0 0 12px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #5B7083; font-weight: 600; }
.hero.front h1 { white-space: normal; line-height: 1.04; letter-spacing: -.025em; } .hero.front h1 .h-ink { color: var(--accent); }
@media (min-width: 900px) { .hero.front h1 { font-size: clamp(48px, calc(5.4vw / var(--zoom, 1)), 72px); white-space: normal; } }
@media (max-width: 560px) { .hero.front h1 .h-br { display: none; } }
.hero.front .launch-dev { margin: 12px auto 0; padding: 3px; gap: 2px; font-size: 13.5px; } .hero.front .launch-dev label span { padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.hero.front .launch-dev label span::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--dev-ico) center / contain no-repeat; mask: var(--dev-ico) center / contain no-repeat; }
.hero.front .launch-dev label:nth-of-type(1) span, .hero.front .launch-dev label:nth-of-type(2) span { --dev-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='1' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M5 14h6M8 11v3' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.hero.front .launch-dev label:nth-of-type(3) span { --dev-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='1.5' width='10' height='13' rx='1.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.hero.front .launch-dev label:nth-of-type(4) span { --dev-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4.5' y='1.5' width='7' height='13' rx='1.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.hero.front .tick { font-size: 13.5px; color: var(--muted); } .hero.front .tick::first-letter { text-transform: uppercase; }
.hero.front .hero-tiles { position: relative; margin-top: 26px; gap: 0; align-items: flex-end; }
.hero.front .htile.phone { margin-left: calc(var(--th) * -.2); margin-bottom: calc(var(--th) * -.1); z-index: 3; width: calc(var(--th) * .5); filter: drop-shadow(0 10px 22px rgba(16,24,40,.18)); }
.hero.front .htile.desktop .wl-frame { box-shadow: 0 18px 40px -18px rgba(16,24,40,.25); }
.hero.front .htile .wl-frame { -webkit-mask-image: none; mask-image: none; }
.hero.front .hero-card { position: absolute; left: calc(50% - var(--th) * 1.02 - 18px); bottom: calc(var(--th) * .08); z-index: 4; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; background: var(--surface); border-radius: 12px; box-shadow: 0 10px 28px -8px rgba(16,24,40,.22); text-align: left; max-width: none; }
.hero.front .hero-card .hc-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #16803C; color: #fff; flex: none; }
.hero.front .hero-card span { display: grid; } .hero.front .hero-card span b { color: var(--head); font-size: 15px; } .hero.front .hero-card small { color: var(--muted); font-size: 12.5px; }
.hero.front .hero-cap { margin: 22px auto 0; font-size: 12.5px; color: var(--muted); max-width: none; }
@media (max-width: 560px) { .hero.front .hero-card { left: 4px; bottom: 6px; padding: 8px 12px; } .hero.front .htile.phone { margin-left: calc(var(--th) * -.3); } }
.hero.front .tick { display: inline-block; }
@media (max-width: 440px) { .hero.front .launch-dev { font-size: 12.5px; max-width: 100%; } .hero.front .launch-dev label span { padding: 5px 7px; gap: 4px; } .hero.front .launch-dev label span::before { width: 13px; height: 13px; } }
/* TASTE 12, pass 2 — the sections under the hero as the owner's mock */
#s-watch .journey2 { display: none; }
#s-watch h2, #s-report h2 { color: var(--head); font-size: clamp(30px, calc(3.6vw / var(--zoom, 1)), 44px); line-height: 1.08; letter-spacing: -.02em; }
#s-watch .story-go a { color: var(--link); font-weight: 600; font-size: 17px; text-decoration: none; }
.live-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 28px -14px rgba(16,24,40,.18); padding: 6px 0 4px; }
.live-card .lc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); } .live-card .lc-head b { color: var(--head); font-size: 17px; }
.live-card .lc-pill { background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.live-card .next-list { margin: 0; padding: 0; } .live-card .next-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 15px; color: var(--ink-2); }
.live-card .next-list li:last-child { border-bottom: 0; } .live-card .next-list li .st { display: none; } .live-card .next-list li > span:last-child { color: var(--muted); font-size: 14px; } .live-card .next-list li.ok > span:last-child { color: var(--link); }
.live-card .next-list li.now > span:last-child::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px dotted var(--link); border-radius: 50%; }
.lci { width: 20px; height: 20px; background: var(--ink-2); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.lci-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M13 13l4.5 4.5' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E"); }
.lci-cart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 3h2.5l2 9.5h9L17.5 6H5.2' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='16' r='1.4'/%3E%3Ccircle cx='14' cy='16' r='1.4'/%3E%3C/svg%3E"); }
.lci-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 16.5S3 12.3 3 7.6A3.6 3.6 0 0 1 10 6a3.6 3.6 0 0 1 7 1.6c0 4.7-7 8.9-7 8.9z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.lci-card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2.5 8.5h15' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
#s-report { background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.proof-rows { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; gap: 12px; } .proof-rows li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--ink-2); }
.pri { width: 40px; height: 40px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); position: relative; }
.pri::after { content: ""; position: absolute; inset: 10px; background: var(--accent); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pri-cam { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6.5h3l1.5-2h5L14 6.5h3v9H3z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='11' r='2.8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pri-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h7l3.5 3.5v11.5H5z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7.5 9.5h5M7.5 12.5h5' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pri-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5a5 5 0 0 0-5 5v3.2L3.5 13.5v1h13v-1L15 10.7V7.5a5 5 0 0 0-5-5zM8.3 16.5a1.8 1.8 0 0 0 3.4 0' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rep-shot { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 10px 28px -14px rgba(16,24,40,.18); display: grid; gap: 10px; font-size: 14px; }
.rs-head { display: flex; align-items: center; gap: 8px; } .rs-head .rs-mark { width: calc(663.42 / 546 * 22px); height: 22px; background: url("/static/brand/logo-mark.svg?v=21") center / contain no-repeat; } .rs-head b { color: var(--head); } .rs-head small { margin-left: auto; color: var(--muted); }
.rs-host { color: var(--ink-2); } .rs-band { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: #FDECEA; color: #B42318; font-weight: 600; }
.rs-band b, .rs-call b, .moment.ex .mx { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #D92D20; color: #fff; font-size: 12px; flex: none; }
.rs-rows { list-style: none; margin: 0; padding: 0; } .rs-rows li { display: grid; grid-template-columns: 1fr 1fr; padding: 7px 2px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.rs-rows .rs-f::before, .rs-rows .rs-p::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; } .rs-rows .rs-f::before { background: #D92D20; } .rs-rows .rs-p::before { background: #16803C; }
.rs-win { position: relative; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px 44px; background: #fff; font-size: 12px; } .rs-win .rs-dots { display: block; width: 26px; height: 6px; background: radial-gradient(circle, #D92D20 2.4px, transparent 3px) 0 0 / 9px 6px repeat-x; margin-bottom: 8px; }
.rs-top b { letter-spacing: .14em; font-size: 10.5px; color: #111827; } .rs-search { margin: 8px 0; padding: 6px 10px; border: 1px solid #D0D5DD; border-radius: 6px; color: #374151; } .rs-empty { text-align: center; color: #6B7280; }
.rs-call { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #FDECEA; border: 1px solid #F6CFCB; border-radius: 8px; color: #7A271A; font-size: 13px; box-shadow: 0 6px 16px -8px rgba(16,24,40,.3); }
.rs-go { color: var(--link); font-weight: 600; }
.cases .case { position: relative; } .case-ico { display: block; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.case-ico::after { content: ""; display: block; width: 22px; height: 22px; margin: 9px; background: var(--accent); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ci-cart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 3h2.5l2 9.5h9L17.5 6H5.2' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='16' r='1.5'/%3E%3Ccircle cx='14' cy='16' r='1.5'/%3E%3C/svg%3E"); }
.ci-team { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='7' cy='7' r='2.6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Ccircle cx='13.5' cy='7.6' r='2.1' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2.5 16.5c.5-2.6 2.3-4 4.5-4s4 1.4 4.5 4M12 12.6c2.2-.2 4.2 1 4.8 3.7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cases .case h3 { font-size: clamp(22px, calc(2.4vw / var(--zoom, 1)), 28px); line-height: 1.15; color: var(--head); }
.moment.ex { display: flex; align-items: flex-start; gap: 12px; background: #FDECEA; border: 1px solid #F6CFCB; border-left: 0; border-radius: 10px; padding: 12px 14px; } .moment.ex span { display: grid; gap: 2px; color: #7A271A; } .moment.ex span b { color: #111827; }
.mini-ov { display: grid; grid-template-columns: 1fr 10px auto; align-items: center; gap: 8px 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); font-size: 13.5px; }
.mini-ov > b { grid-column: 1 / -1; color: var(--head); } .mini-ov > span { color: var(--link); } .mini-ov i { width: 9px; height: 9px; border-radius: 50%; } .mini-ov i.g { background: #16803C; } .mini-ov i.a { background: #C26A05; } .mini-ov i.r { background: #D92D20; } .mini-ov em { font-style: normal; color: var(--ink-2); }
#s-plans { background: color-mix(in srgb, var(--accent) 4%, var(--bg)); text-align: center; } #s-plans h2 { color: var(--head); font-size: clamp(28px, calc(3.2vw / var(--zoom, 1)), 40px); }
#s-plans .ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
#s-plans .rung { display: grid; justify-items: center; gap: 4px; padding: 18px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
#s-plans .rung b { color: var(--head); font-size: 16px; } #s-plans .rung span { color: var(--head); font-size: 30px; font-weight: 800; letter-spacing: -.02em; } #s-plans .rung span i { font-style: normal; font-size: 15px; font-weight: 500; color: var(--ink-2); }
#s-plans .rung small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; } #s-plans .rung.on { border: 2px solid var(--accent); }
@media (max-width: 720px) { #s-plans .ladder { grid-template-columns: 1fr 1fr; } }
#s-plans .plans-note.warn { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 8px 16px; border-radius: 10px; background: #FEF3D8; border: 1px solid #F6DFA0; color: #7A4B0C; font-size: 14px; }
#s-plans .plans-note.warn b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #E9A23B; color: #fff; font-size: 11px; }
#s-plans .plans-go { margin: 16px 0 0; }
.front-close { text-align: center; padding: 56px 0 24px; } .front-close h2 { color: var(--head); font-size: clamp(28px, calc(3.2vw / var(--zoom, 1)), 40px); margin: 0 0 6px; } .front-close > p { margin: 0 auto 18px; }
.front-close form.launch { max-width: 560px; margin: 0 auto; }
#s-plans .ladder { background: none; border: 0; padding: 0; box-shadow: none; } #s-plans .rung { display: flex; flex-direction: column; align-items: center; text-align: center; }
#s-plans .rung span { white-space: nowrap; } #s-plans, #s-report { background: none; }
.live-card .next-list, .live-card .next-list.wide { display: block; columns: auto; } .live-card .next-list li, .live-card .next-list li span, .moment.ex, .moment.ex * { font-family: var(--sans); }
@media (min-width: 900px) { #s-watch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; text-align: left; } #s-watch .story-text { text-align: left; margin: 0; max-width: none; } #s-watch .story-text p { margin-left: 0; } }
#s-plans .rung span, #s-plans .rung span i { font-family: var(--sans); }
@media (min-width: 880px) { section#s-watch.slide.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } section#s-watch .story-text { text-align: left; } section#s-watch .story-go { text-align: left; } }
.front-close form.launch.big { max-width: 640px; }
/* TASTE 13 — THE WHOLE PRICING PAGE = the owner's mock (senior 19:32 UTC 13 Oct 2026) */
main:has(.pl-cards) .hero.small-hero h1 { font-size: clamp(34px, calc(4.6vw / var(--zoom, 1)), 56px); font-weight: 800; letter-spacing: -.02em; }
.pl-closed { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 18px auto 0; padding: 12px 20px; border-radius: 12px; background: #FEF3D8; border: 1px solid #F6DFA0; text-align: left; color: #5B3B07; }
.pl-closed > b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; background: #E9A23B; color: #fff; font-size: 16px; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); padding-top: 6px; box-sizing: border-box; }
.pl-closed strong { display: block; color: #111827; }
.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 720px) { .pl-cards { grid-template-columns: 1fr; } }
.pl-card { display: flex; flex-direction: column; padding: 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.pl-card h3 { text-transform: uppercase; letter-spacing: .02em; font-weight: 800; font-size: 18px; color: var(--head); margin: 0 0 6px; }
.pl-price { align-items: baseline; gap: 8px; } .pl-price b { font-size: 40px; font-weight: 800; color: var(--head); } .pl-price > span:not(.pl-from) { font-size: 17px; color: var(--ink-2); font-weight: 500; } .pl-price .pl-from { font-size: 17px; color: var(--ink-2); }
.pl-card .pl-per { color: var(--ink-2); font-weight: 500; font-size: 16px; min-height: 0; margin: 0; }
.pl-who { margin: 12px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; padding-bottom: 14px; border-bottom: 1px solid var(--line); max-width: none; }
.pl-card .pl-has { border-top: 0; padding-top: 6px; gap: 10px; font-size: 15px; color: var(--ink-2); } .pl-card .pl-has li { padding-left: 32px; } .pl-card .pl-has li b { font-weight: 400; color: inherit; }
.pl-card .pl-has li::before { left: 0; top: 0; width: 20px; height: 20px; border-radius: 0; background: var(--head); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pl-has li.i-site { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='3.5' width='15' height='13' rx='1.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2.5 7.5h15' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pl-has li.i-member { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7' r='3.3' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3.5 17.5a6.5 6.5 0 0 1 13 0' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pl-has li.i-device { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='10.5' rx='1.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M6.5 17h7M10 13.5V17' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pl-has li.i-hist { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10 6v4.2l2.8 1.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pl-card .pl-has li.i-yes::before { background: var(--accent); --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zm-1.4 11.6 5.6-6-1.2-1.1-4.4 4.7-2.3-2.3-1.1 1.1z'/%3E%3C/svg%3E"); }
.pl-card .pl-go { margin-top: auto; padding-top: 20px; } .pl-card .pl-go .button { width: 100%; min-height: 46px; justify-content: center; }
.pl-shut { background: #EEF0F3; color: #8A929E; border-color: transparent; cursor: default; box-shadow: none; } .pl-shut:hover { background: #EEF0F3; }
.pl-card.pl-usual { border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 3%, var(--surface)); position: relative; }
.pl-card.pl-usual .pl-flag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; }
.pl-info { display: flex; gap: 16px; align-items: flex-start; margin: 22px 0 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pl-info .pi-i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font-size: 14px; } .pl-info p { margin: 0 0 6px; max-width: none; color: var(--ink-2); } .pl-info p b { color: var(--head); }
.pl-compare { margin-top: 48px; text-align: center; } .pl-compare h2 { color: var(--head); font-size: clamp(28px, calc(3.2vw / var(--zoom, 1)), 40px); margin: 0; } .pl-compare > p.muted { margin: 4px auto 18px; }
.pl-compare .tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .pl-compare table { width: 100%; } .pl-compare th, .pl-compare td { text-align: center; padding: 10px 12px; } .pl-compare tbody th { text-align: left; font-weight: 400; color: var(--ink-2); } .pl-compare thead th:first-child { text-align: left; }
.pl-compare .feat { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .pl-compare thead th.feat { color: var(--accent); } .pl-reset { margin-top: 10px; }
.agency-pitch { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; } @media (max-width: 720px) { .agency-pitch { grid-template-columns: 1fr; } }
.agency-pitch .ag-words h2 { color: var(--head); font-size: clamp(26px, calc(2.8vw / var(--zoom, 1)), 34px); } .agency-pitch .ag-words p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.ag-mock { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 28px -14px rgba(16,24,40,.2); }
.ag-mock .agm-dots { display: block; width: 34px; height: 8px; margin-bottom: 12px; background: radial-gradient(circle at 4px 4px, #EF4444 3.5px, transparent 4px), radial-gradient(circle at 16px 4px, #C26A05 3.5px, transparent 4px), radial-gradient(circle at 28px 4px, #22C55E 3.5px, transparent 4px); }
.ag-mock .agm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ag-mock .agm-head > span:nth-child(2) { display: grid; margin-right: auto; } .ag-mock .agm-head b { letter-spacing: .08em; color: #111827; } .ag-mock .agm-head small { color: var(--muted); }
.ag-mock .agm-logo { width: 18px; height: 22px; background: #5B7F3A; border-radius: 0 60% 0 60%; }
.ag-mock .agm-pill { font-size: 12.5px; padding: 2px 9px; border-radius: 6px; } .agm-pill.fail { color: #B42318; background: #FDECEA; border: 1px solid #F6CFCB; } .agm-pill.pass { color: #15703A; background: #E7F6EC; border: 1px solid #B7E2C4; }
.ag-mock .agm-rows { list-style: none; margin: 12px 0; padding: 0; } .ag-mock .agm-rows li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: #111827; }
.agm-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 12px; } .agm-ic.fail { background: #D92D20; } .agm-ic.pass { background: #16803C; } .agm-chev { margin-left: auto; color: var(--accent); font-size: 18px; }
.ag-mock .agm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: #111827; max-width: none; }
.ag-mock .agm-by { display: inline-flex; align-items: center; gap: 6px; } .ag-mock .agm-by .mark { width: calc(663.42 / 546 * 22px); height: 22px; }
.pl-card.pl-ent .pl-price { flex-wrap: nowrap; white-space: nowrap; } .pl-card.pl-ent .pl-price b { font-size: 36px; } .pl-shut { color: #6B7280; }
/* TASTE 14 — /docs = the owner's mock (senior 19:37 UTC 13 Oct 2026): a left rail and the body's sections */
.docs-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.docs-rail { position: sticky; top: 76px; display: grid; gap: 12px; padding: 18px 16px 18px 0; border-right: 1px solid var(--line); }
.dr-title { margin: 0; font-weight: 700; color: var(--head); }
.dr-search { position: relative; display: block; margin: 0; } .dr-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.dr-search input { width: 100%; min-height: 38px; padding: 6px 44px 6px 32px; font-size: 14px; } .dr-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); background: var(--surface); }
.docs-rail nav { display: grid; gap: 2px; } .docs-rail .docs-more { border-top: 1px solid var(--line); padding-top: 12px; }
.docs-rail nav a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.docs-rail nav a .di { color: var(--muted); } .docs-rail nav a:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.docs-rail .docs-nav a[aria-current] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .docs-rail .docs-nav a[aria-current] .di { color: var(--accent); }
.docs-body { min-width: 0; } .docs-crumb { margin: 18px 0 8px; font-size: 13.5px; color: var(--muted); } .docs-crumb a { color: var(--ink-2); text-decoration: none; }
.docs-body h1 { margin: 0 0 12px; color: var(--head); font-size: clamp(32px, calc(4.2vw / var(--zoom, 1)), 52px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; }
.docs-body > .lead { font-size: 19px; color: var(--ink-2); max-width: 36em; margin: 0 0 16px; text-align: left; }
.docs-warn { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px; background: #FEF3D8; border: 1px solid #F6DFA0; color: #5B3B07; max-width: none; }
.docs-warn > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #E9A23B; color: #fff; font-size: 12px; flex: none; } .docs-warn strong { color: #111827; } .docs-warn .dw-go { margin-left: auto; color: var(--link); font-weight: 600; white-space: nowrap; text-decoration: none; }
.docs-sec { padding: 28px 0; border-top: 1px solid var(--line); margin-top: 24px; } .docs-sec h2 { margin: 0; color: var(--head); font-size: clamp(26px, calc(2.8vw / var(--zoom, 1)), 34px); font-weight: 800; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docs-sub { margin: 4px 0 18px; color: var(--ink-2); font-size: 16px; max-width: none; }
.docs-steps { list-style: none; margin: 0; padding: 0; counter-reset: ds; display: grid; gap: 22px; }
.docs-steps li { counter-increment: ds; position: relative; padding-left: 52px; } .docs-steps li::before { content: counter(ds); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.docs-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 36px; bottom: -18px; width: 1px; background: var(--line-2); }
.docs-steps h3 { margin: 2px 0 4px; color: var(--head); font-size: 17.5px; } .docs-steps p { margin: 0; color: var(--ink-2); max-width: 40em; }
.dv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .dv-tiles span { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); } .dv-tiles .di { color: var(--accent); }
.docs-note { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink-2); max-width: none; }
.docs-note > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; flex: none; } .docs-note strong { color: var(--head); }
.docs-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; } @media (max-width: 720px) { .docs-two { grid-template-columns: 1fr; } }
.docs-strong { font-weight: 700; color: var(--head); font-size: 17px; margin: 14px 0 6px; } .docs-two p { color: var(--ink-2); }
.docs-card { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); margin-top: 14px; } .docs-card .di { color: var(--accent); width: 26px; height: 26px; flex: none; } .docs-card b { color: var(--head); } .docs-card p { margin: 6px 0 0; font-size: 14.5px; }
.dev-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 12px; } .dev-cols > div { padding: 0 20px; border-left: 1px solid var(--line); } .dev-cols > div:first-child { padding-left: 0; border-left: 0; }
.dev-cols h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--head); font-size: 17px; } .dev-cols h3 .di { color: var(--accent); width: 22px; height: 22px; }
.dev-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dev-cols li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 15px; } .dev-cols li .di { color: var(--muted); }
@media (max-width: 720px) { .dev-cols { grid-template-columns: 1fr; gap: 18px; } .dev-cols > div { padding: 0; border: 0; } }
.docs-chip { font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); padding: 4px 12px; border-radius: 8px; letter-spacing: 0; }
.code-dark { border-radius: 10px; overflow: hidden; background: #0F2744; color: #E6EDF6; } .cd-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: #0B1F37; font-size: 13px; }
.cd-copy { background: none; border: 0; box-shadow: none; color: #E6EDF6; min-height: 0; padding: 2px 6px; font-size: 13px; } .code-dark pre { margin: 0; padding: 14px 16px; background: none; color: inherit; font-size: 13.5px; overflow-x: auto; white-space: pre; }
.docs-mini, .docs-ep, .docs-err, .docs-res { width: 100%; border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0; background: var(--surface); font-size: 14px; margin-top: 12px; overflow: hidden; }
.docs-mini th, .docs-mini td, .docs-ep th, .docs-ep td, .docs-err th, .docs-err td, .docs-res th, .docs-res td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; } .docs-mini tr:last-child > *, .docs-ep tr:last-child > *, .docs-err tr:last-child > *, .docs-res tr:last-child > * { border-bottom: 0; }
.docs-mini th { width: 30%; color: var(--head); font-weight: 600; background: var(--surface-2); } .docs-ep thead th, .docs-err thead th { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.docs-ep .m { display: inline-block; min-width: 44px; text-align: center; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; } .docs-ep .m.get { color: #1F5D8F; background: #E6F0F8; } .docs-ep .m.post { color: #15703A; background: #E7F6EC; }
.docs-gh { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); } .docs-gh .di { width: 26px; height: 26px; flex: none; color: #111827; }
.docs-gh span { display: grid; } .docs-gh b { color: var(--head); } .docs-gh small { color: var(--muted); } .docs-gh em { margin-left: auto; font-style: normal; color: var(--link); font-weight: 600; white-space: nowrap; }
.docs-h3 { margin: 22px 0 8px; color: var(--head); font-size: 18px; } .docs-h2b { margin: 30px 0 10px; color: var(--head); font-size: 24px; font-weight: 800; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; } .rs-chips code { padding: 4px 12px; border-radius: 8px; font-size: 13px; } .rs-chips .q { background: #EEF1F5; } .rs-chips .r { background: #E6F0F8; color: #1F5D8F; } .rs-chips .d { background: #E7F6EC; color: #15703A; } .rs-chips .f { background: #FDECEA; color: #B42318; } .rs-chips .c { background: #EEF1F5; color: #4B5563; }
.docs-res th { font-weight: 400; color: var(--ink-2); } .docs-res th i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; } .docs-res i.g { background: #16803C; } .docs-res i.r { background: #D92D20; } .docs-res i.a { background: #C26A05; } .docs-res i.n { background: #878E9A; }
.ref-two > div:last-child { border-left: 1px solid var(--line); padding-left: 24px; } @media (max-width: 720px) { .ref-two > div:last-child { border-left: 0; padding-left: 0; } }
.docs-facts { list-style: none; margin: 0; padding: 0; } .docs-facts li { display: grid; grid-template-columns: 26px 150px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); } .docs-facts li .di { color: var(--head); width: 22px; height: 22px; } .docs-facts b { color: var(--head); }
@media (max-width: 720px) { .docs-facts li { grid-template-columns: 26px 1fr; } .docs-facts li span { grid-column: 2; } }
@media (max-width: 900px) { .docs-shell { grid-template-columns: 1fr; gap: 0; } .docs-rail { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0; } .docs-rail .dr-title, .docs-rail .docs-more { display: none; }
  .docs-rail .docs-nav { display: flex; overflow-x: auto; gap: 6px; } .docs-rail .docs-nav a { white-space: nowrap; padding: 6px 10px; } }
.docs-rail nav.docs-nav, .docs-rail nav.docs-nav a { border: 0; margin: 0; width: auto; justify-content: flex-start; background: none; box-shadow: none; position: static; } .docs-rail nav.docs-nav { display: grid; padding: 0; } .docs-rail nav.docs-nav a[aria-current] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); } @media (max-width: 900px) { .docs-rail nav.docs-nav { display: flex; } }
@media (max-width: 560px) { .docs-warn { flex-wrap: wrap; } .docs-warn .dw-go { margin-left: 32px; } }
/* the critic 19:36 (F10): the hero's desktop window 3:2 as the mock (2:1 cut the pot at its lid), the frame from its top; the phone ≈ 30 % of the desktop's width */
.hero.front .htile.desktop .wl-pic { --ar: 3 / 2; aspect-ratio: 3 / 2; } .hero.front .htile.desktop .wl-pic img { object-fit: cover; object-position: top center; }
.hero.front .htile.desktop { width: calc(var(--th) * 1.7); } .hero.front .htile.phone { width: calc(var(--th) * .52); }
.hero.front .htile.desktop .wl-pic img { object-position: 38% top; }   /* until the build step captures 3:2 (2048 x 1365): a 2:1 frame in the 3:2 window loses its sides */
.hero.front .tick { display: inline-flex; } .hero.front .tick::first-letter { text-transform: none; }   /* the dots back (the critic 19:54 #6): the words are capitalised in the template, as the 19:31 mock writes them */
.hero.front .htile.desktop .wl-pic { --ar: 2048 / 999; aspect-ratio: 2048 / 999; } .hero.front .htile.desktop .wl-pic img { object-position: top center; } .hero.front .htile.desktop { width: calc(var(--th) * 2.05); }   /* the window follows the 2:1 capture (the critic 19:54: a 3:2 crop of it reads worse); it goes 3:2 with the capture */
.hero.small-hero[data-page="docs"] { text-align: left; padding: 0 0 8px; background: none; } .hero.small-hero[data-page="docs"] h1 { margin-inline: 0; } .hero.small-hero[data-page="docs"] .lead { margin-left: 0; text-align: left; }
/* the land's look tests on the shipped taste (13 Oct 2026): the tiles one a row on a narrow phone; the docs' GitHub card and endpoints
   table fit 320; the copy button has an edge and a ring on the dark block; the pills and the docs search a thumb's height; "Previous" /
   "Next" with nowhere to go are plain words, not buttons */
@media (max-width: 480px) { .card.lastrep .lr-tiles { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .docs-gh { flex-wrap: wrap; } .docs-gh em { margin-left: 40px; white-space: normal; } .docs-ep th, .docs-ep td { padding: 8px; } .docs-ep code { overflow-wrap: anywhere; word-break: break-all; } .docs-ep th:nth-child(3), .docs-ep td:nth-child(3) { width: 30%; } }
.docs-ep { table-layout: auto; } @media (max-width: 560px) { .docs-ep { table-layout: fixed; } .docs-ep th:first-child, .docs-ep td:first-child { width: 64px; } }
.cd-copy { border: 1px solid rgba(255,255,255,.55); border-radius: 6px; } .cd-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sitepills .sp { min-height: 44px; } .dr-search input { min-height: 44px; }
.rf-off { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; color: var(--muted); }
.tablewrap table.docs-ep { min-width: 0; width: 100%; }
/* THE HEADER SHOWS THE MARK ALONE (the owner via senior 21:17 UTC 13 Oct 2026, a standing rule over every mock): no "qa.pro" word beside it */
.brand .brand-word { display: none; }
/* TASTE 15 — THE OVERVIEW = the owner's 01-dashboard mock (senior 20:19 UTC 13 Oct 2026; supersedes turn 9) */
details.orgpick > summary .acct { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px; width: auto; height: auto; }
.acct-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--head); font-weight: 600; font-size: 15px; }
.acct-name { font-size: 15px; color: var(--head); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-chev { color: var(--ink-2); }
@media (max-width: 720px) { .acct-name, .acct-chev { display: none; } }
.ov-head h1 { font-size: clamp(34px, calc(4vw / var(--zoom, 1)), 48px); font-weight: 800; color: var(--head); margin: 0; } .ov-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 17px; max-width: none; }
.ov-box .ov-all .button { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface); }
.card.now.state-paused { background: #FEF6E4; border: 1px solid #F3D9A4; border-radius: 12px; }
.card.now.state-paused h2 { display: flex; align-items: center; gap: 14px; color: var(--head); font-size: 20px; }
.band-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E9A23B; color: #fff; font-size: 18px; font-weight: 800; flex: none; }
.card.now.state-paused .now-l1 { margin-left: 48px; color: var(--ink-2); }
.verdict.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; position: relative; display: block; }
.vc-head { display: flex; align-items: center; gap: 16px; } .vc-title { margin: 0; font-size: clamp(22px, calc(2.4vw / var(--zoom, 1)), 28px); font-weight: 800; color: var(--head); }
.vc-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-weight: 800; font-size: 24px; flex: none; }
.vc-ico.vc-amber { background: #FDE7B6; color: #A34A07; } .vc-ico.vc-green { background: #E7F6EC; color: #15703A; } .vc-ico.vc-red { background: #FDECEA; color: #B42318; }
.verdict.vcard .v-line { margin: 4px 0 0 68px; font-size: 16px; color: var(--ink-2); display: block; } .verdict.vcard .v-line .v-ok, .verdict.vcard .v-line .vd, .verdict.vcard .v-line .v-sep { display: none; }
.verdict.vcard .v-words { color: var(--ink-2); font-weight: 400; font-size: 16px; } .verdict.vcard .v-att { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); font-weight: 400; }
.verdict.vcard .v-sub { position: absolute; top: 22px; right: 24px; margin: 0; font-size: 13px; color: var(--muted); max-width: 40%; text-align: right; }
@media (max-width: 720px) { .verdict.vcard .v-sub { position: static; max-width: none; text-align: left; margin: 8px 0 0; } .verdict.vcard .v-line { margin-left: 0; } }
.vc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } @media (max-width: 560px) { .vc-tiles { grid-template-columns: 1fr; } }
.vct { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.vct .vct-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); font-size: 18px; }
.vct.bad .vct-ico { background: #FDECEA; color: #B42318; } .vct.warn .vct-ico { background: #FEF3D8; color: #A34A07; }
.vct b { font-size: 28px; font-weight: 800; color: var(--head); line-height: 1.1; } .vct span:last-child { color: var(--ink-2); font-size: 14.5px; }
.ov-sitetable { width: 100%; border-collapse: collapse; font-size: 15px; } .ov-sitetable thead th { background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 13.5px; text-align: left; padding: 10px 12px; }
.ov-sitetable thead th:not(:first-child), .ov-sitetable td:not(:first-child) { text-align: center; } .ov-sitetable td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ov-sitetable .sn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .ov-sitetable .sn-ini { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; flex: none; }
.ov-sitetable .sn-name { color: var(--link); } .ov-sitetable .sr-words { display: block; margin-left: 46px; color: var(--muted); font-size: 13px; line-height: 1.35; } .ov-sitetable .st-failing .sr-words { color: #B42318; } .ov-sitetable .st-look .sr-words, .ov-sitetable .st-unfinished .sr-words { color: #A34A07; }
.ov-sitetable .sn-ico { width: 34px; height: 34px; flex: none; }
.ov-sitetable .c-pass { color: #15703A; font-weight: 600; } .ov-sitetable .c-nr { color: #A34A07; font-weight: 600; } .ov-sitetable .c-say { color: var(--muted); font-size: 14px; } .ov-sitetable .c-rep a { color: var(--link); }
.ov-sites + .siterows .sitemore { display: inline-block; margin-top: 12px; }
.card.lastrep .lr-big { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; } .card.lastrep .lr-big .lr-go { font-size: 34px; font-weight: 800; color: var(--accent); text-decoration: none; }
.ov-acttable { width: 100%; border-collapse: collapse; font-size: 14.5px; } .ov-acttable thead th { background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 13px; text-align: left; padding: 8px 10px; }
.ov-acttable td { padding: 9px 10px; border-bottom: 1px solid var(--line); } .ov-acttable a { color: var(--link); } .act-res .g { color: #15703A; } .act-res .a { color: #A34A07; } .act-res .r { color: #B42318; } .act-res .n { color: var(--ink-2); }
details.card.add-many > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; } details.card.add-many > summary::-webkit-details-marker { display: none; }
details.card.add-many > summary::before { content: "›"; font-size: 20px; color: var(--ink-2); transition: transform .15s; } details.card.add-many[open] > summary::before { transform: rotate(90deg); }
details.card.add-many > summary h2 { margin: 0; font-size: 17px; color: var(--head); }
@media (max-width: 1023px) { .acct-name, .acct-chev { display: none; } }
/* TASTE 16 — CHECKS = the owner's 02-checks mock (senior 20:19 UTC 13 Oct 2026) */
#add h2, #checks h2 { color: var(--head); font-size: 22px; } #add .ck-help { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; max-width: none; } #add .ck-help a { color: var(--link); font-weight: 600; text-decoration: none; }
#add #oneline-go { min-height: 48px; padding: 0 22px; }
.ck-find { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 10px; } .ck-search { position: relative; flex: 1 1 260px; max-width: 320px; margin: 0; }
.ck-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); } .ck-search input { width: 100%; min-height: 44px; padding-left: 40px; }
.ck-seg { display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; }
.ck-seg button { min-height: 38px; border: 0; box-shadow: none; background: none; padding: 4px 16px; color: var(--ink-2); border-radius: 7px; } .ck-seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
#checks .counts { margin: 4px 0 12px; }
.ck-defaults { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); } .ck-defaults .muted { flex: 1; } .ck-defaults .ckd-ico { color: var(--ink-2); }
.ck-defaults #ticks-save { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
#checks table thead th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 14px; }
#checks .tick input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #C4C9D1; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
#checks .tick input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
#checks .tick input[type=checkbox]:checked { background: var(--accent); } #checks .tick input[type=checkbox]:checked::after { transform: translateX(18px); } #checks .tick input[type=checkbox]:disabled { opacity: .55; cursor: default; }
#checks .tick input[type=checkbox]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#checks .pill { border-radius: 999px; padding: 2px 10px; font-size: 12.5px; background: #EEF1F5; color: #4B5563; border: 0; } #checks .pill.writes { background: #EEF1F5; color: #4B5563; }
#checks .pill.yours { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); } #checks .pill.paused { background: #FDF0DD; color: #A34A07; }
#checks td.how > span { display: inline-flex; align-items: center; gap: 6px; } #checks td.how .ok::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #15703A; color: #fff; font-size: 10px; }
#checks td.how .bad::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #B42318; color: #fff; font-size: 10px; } #checks td.how > .muted:first-child::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #878E9A; }
.ck-notes { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .ck-notes p { margin: 0; color: var(--ink-2); font-size: 14px; display: flex; gap: 8px; max-width: none; }
/* TASTE 17–20 — SETTINGS = the owner's four settings mocks (senior 20:19 UTC 13 Oct 2026): the rail, one section a page */
.settings-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.set-rail { position: sticky; top: 76px; padding: 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.set-rail .sr-title { margin: 0 8px; font-size: 22px; font-weight: 800; color: var(--head); } .set-rail .sr-sub { margin: 4px 8px 12px; color: var(--ink-2); font-size: 14px; max-width: none; }
.set-nav { display: grid; gap: 2px; } .set-nav a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.set-nav a:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } .set-nav a[aria-current] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.settings-shell .settings-col { max-width: none; min-width: 0; } .set-head h1 { font-size: clamp(32px, calc(3.6vw / var(--zoom, 1)), 44px); font-weight: 800; color: var(--head); margin: 0; }
.settings-col .card h2 { color: var(--head); font-size: 21px; margin-bottom: 2px; } .card-sub { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); max-width: none; }
.card-go { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.settings-col .night-hold.note { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 14px 18px; border-radius: 12px; background: #FEF6E4; border: 1px solid #F3D9A4; color: var(--ink-2); }
.set-info { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink-2); max-width: none; }
.set-info > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; flex: none; }
.set-facts, .set-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-facts > div, .set-roles > div { display: grid; gap: 4px; } .set-facts b, .set-roles b { color: var(--head); } .set-facts span, .set-roles span { color: var(--ink-2); font-size: 14.5px; }
.set-roles > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.set-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; } .set-list li { display: grid; gap: 2px; } .set-list b { color: var(--head); } .set-list span { color: var(--ink-2); font-size: 14px; } .set-list a { color: var(--link); font-weight: 600; text-decoration: none; }
.set-help { display: flex; align-items: center; gap: 16px; } .set-help h2 { margin: 0; font-size: 18px; } .set-help p { margin: 2px 0 0; } .set-help .button { margin-left: auto; white-space: nowrap; }
.sh-q { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: 22px; flex: none; }
@media (max-width: 900px) { .settings-shell { grid-template-columns: 1fr; gap: 12px; } .set-rail { position: static; padding: 8px; } .set-rail .sr-title, .set-rail .sr-sub { display: none; } .set-nav { display: flex; overflow-x: auto; gap: 4px; } .set-nav a { white-space: nowrap; padding: 8px 12px; } .set-help { flex-wrap: wrap; } .set-help .button { margin-left: 60px; } }
@media (max-width: 900px) { .settings-shell { grid-template-columns: minmax(0, 1fr); } .set-rail, .set-nav { min-width: 0; } }
#api pre.api-calls { background: #0F2744; color: #E6EDF6; border: 0; border-radius: 10px; padding: 14px 16px; } #api pre.api-calls code { background: none; color: inherit; }
/* TASTE 21–26 — THE PUBLIC PAGES = the owner's final mocks (senior 20:19 UTC 13 Oct 2026): one kit for security, contact, the legal
   pages and the bot page — a left-aligned hero, icon cards, an info note, a two-column table, a link card, a closing card */
.hero.small-hero[data-page] { text-align: left; padding: 28px 0 18px; } .hero.small-hero[data-page] h1 { margin-inline: 0; font-size: clamp(36px, calc(4.6vw / var(--zoom, 1)), 58px); font-weight: 800; color: var(--head); letter-spacing: -.02em; }
.hero.small-hero[data-page] .lead { margin-left: 0; text-align: left; max-width: 34em; font-size: 19px; } .hero.small-hero[data-page] .kicker { color: var(--accent); letter-spacing: .12em; }
.pub-cards { display: grid; gap: 16px; margin: 8px 0 16px; } .pub-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pub-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pub-cards.three, .pub-cards.two { grid-template-columns: 1fr; } }
.pub-cards .pc { padding: 22px; margin: 0; } .pub-cards .pc h2 { margin: 12px 0 8px; font-size: 19px; color: var(--head); } .pub-cards .pc p { margin: 0; color: var(--ink-2); max-width: none; }
.pc-ico { color: var(--accent); display: inline-flex; }
.pub-note { margin: 0 0 8px; } .pub-note strong { color: var(--head); display: block; }
.pub-sec { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .pub-sec h2 { margin: 0 0 4px; color: var(--head); font-size: clamp(28px, calc(3.2vw / var(--zoom, 1)), 38px); font-weight: 800; }
.data-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 12px; margin: 18px 0 10px; text-align: center; }
.data-flow > div { display: grid; justify-items: center; gap: 6px; } .data-flow b { color: var(--head); font-size: 18px; } .data-flow span:last-child { color: var(--ink-2); } .data-flow > i { font-style: normal; color: var(--ink-2); font-size: 22px; margin-top: 26px; }
.df-ico { color: var(--accent); display: inline-flex; } .df-ico.mark { width: calc(663.42 / 546 * 38px); height: 38px; background: url("/static/brand/logo-mark.svg?v=21") center / contain no-repeat; }
@media (max-width: 720px) { .data-flow { grid-template-columns: 1fr; } .data-flow > i { transform: rotate(90deg); margin: 0 auto; } }
.pub-foot { text-align: center; padding-top: 12px; border-top: 1px solid var(--line); max-width: none; }
.pub-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.pub-table th, .pub-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); } .pub-table tr:last-child > * { border-bottom: 0; }
.pub-table th { width: 26%; color: var(--head); font-weight: 600; border-right: 1px solid var(--line); } .pub-table td { color: var(--ink-2); }
@media (max-width: 560px) { .pub-table th, .pub-table td { display: block; width: auto; border-right: 0; } .pub-table th { padding-bottom: 2px; border-bottom: 0; } }
.pub-link { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; padding: 18px 22px; text-decoration: none; } .pub-link .pl-ico { color: var(--accent); } .pub-link b { color: var(--accent); display: block; } .pub-link small { color: var(--ink-2); font-size: 14.5px; }
.pub-link em { margin-left: auto; font-style: normal; color: var(--accent); font-weight: 600; white-space: nowrap; } @media (max-width: 720px) { .pub-link { flex-wrap: wrap; } .pub-link em { margin-left: 44px; } }
.pub-report { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding: 26px 28px; } .pub-report h2 { margin: 0 0 6px; color: var(--head); font-size: 24px; } .pub-report p { margin: 0; color: var(--ink-2); max-width: 36em; }
.pub-report .pr-ico { color: var(--accent); flex: none; } .pub-report .pr-go { margin-left: auto; display: grid; justify-items: center; gap: 8px; } .pub-report .pr-mail { color: var(--link); font-size: 14px; }
@media (max-width: 720px) { .pub-report { flex-wrap: wrap; } .pub-report .pr-go { margin-left: 0; } }
.pc-ico.boxed { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.pub-cards .pc { display: flex; flex-direction: column; } .pub-cards .pc .pc-mail { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.pc-mail { display: flex; align-items: center; gap: 8px; } .pc-mail .mailto { font-size: 18px; font-weight: 700; color: var(--accent); text-decoration: none; }
.pc-copy { background: none; border: 0; box-shadow: none; min-height: 36px; min-width: 36px; padding: 0; color: var(--ink-2); } .pc-copy.done { color: #15703A; } .pc-go { margin-left: auto; color: var(--accent); font-size: 20px; text-decoration: none; }
.pc-more { margin-top: 10px; color: var(--link); font-size: 14px; font-weight: 600; text-decoration: none; }
.pub-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 0; } .pub-two > .pt-item + .pt-item { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 720px) { .pub-two { grid-template-columns: 1fr; } .pub-two > .pt-item + .pt-item { border-left: 0; padding-left: 0; } }
.pt-item { display: flex; gap: 16px; align-items: flex-start; } .pt-item h3 { margin: 4px 0 6px; color: var(--head); font-size: 22px; } .pt-item p { margin: 0; color: var(--ink-2); }
.pt-links { display: grid; gap: 8px; margin-top: 12px !important; } .pt-links a { color: var(--link); font-weight: 600; text-decoration: none; }
/* TASTE 23–25 — the legal pages: an "On this page" rail at the left, the rows as tables; the words as published */
.legal-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
.legal-toc { position: sticky; top: 76px; display: grid; gap: 2px; padding: 18px 0 0; border-left: 1px solid var(--line); } .legal-toc p { margin: 0 0 6px 14px; font-weight: 600; color: var(--head); font-size: 14px; }
.legal-toc a { padding: 6px 14px; color: var(--ink-2); text-decoration: none; font-size: 14px; border-left: 2px solid transparent; margin-left: -1px; } .legal-toc a:hover, .legal-toc a.on { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (max-width: 900px) { .legal-shell { grid-template-columns: minmax(0, 1fr); gap: 0; } .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 12px; border-left: 0; padding: 0 0 8px; } .legal-toc p { width: 100%; margin-left: 0; } .legal-toc a { padding: 4px 0; border: 0; } }
.legal-main .legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.legal-main .legal-card h2, .legal-main .legal-where h2, .legal-main .legal-rights h2, .legal-main .terms h2 { color: var(--head); font-size: 24px; font-weight: 800; }
.legal-main .legal-rows { display: block; margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.legal-main .legal-rows div { display: grid; grid-template-columns: minmax(130px, 26%) minmax(0, 1fr); gap: 0; padding: 0; border-top: 1px solid var(--line); } .legal-main .legal-rows div:first-child { border-top: 0; }
.legal-main .legal-rows dt, .legal-main .legal-rows dd { margin: 0; padding: 10px 14px; } .legal-main .legal-rows dt { font-weight: 600; color: var(--head); border-right: 1px solid var(--line); font-size: 14.5px; } .legal-main .legal-rows dd { color: var(--ink-2); max-width: none; font-size: 15.5px; }
@media (max-width: 560px) { .legal-main .legal-rows div { grid-template-columns: minmax(0, 1fr); } .legal-main .legal-rows dt { border-right: 0; padding-bottom: 0; } }
.legal-main .legal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .legal-main .legal-actions .button { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* TASTE 26 — /bot */
.hero.small-hero[data-page="bot"] { text-align: center; } .hero.small-hero[data-page="bot"] h1, .hero.small-hero[data-page="bot"] .lead { margin-inline: auto; text-align: center; }
.bot-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; margin-top: 16px; max-width: none; } .bot-jump a { padding: 2px 18px; color: var(--link); text-decoration: none; border-left: 1px solid var(--line-2); } .bot-jump a:first-child { border-left: 0; }
.bot-jump.left { justify-content: flex-start; } .bot-jump.left a:first-child { padding-left: 0; }
.pub-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .pub-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .pub-cards.four { grid-template-columns: 1fr; } }
.pub-cards .pc h3 { margin: 12px 0 6px; color: var(--head); font-size: 17px; } .pc-ico.round { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.pub-cards .pc.row-pc { flex-direction: row; gap: 18px; align-items: flex-start; } .row-pc h3 { margin-top: 4px !important; } .row-pc p { margin: 0 0 8px !important; }
.bot-devs { padding: 20px; } .bot-devs ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; text-align: center; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .bot-devs ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 480px) { .bot-devs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bot-devs li { display: grid; justify-items: center; gap: 6px; } .bd-ico { display: block; border: 1.8px solid var(--head); border-radius: 3px; }
.bd-m { width: 30px; height: 20px; } .bd-l { width: 30px; height: 18px; border-bottom-width: 4px; } .bd-t { width: 18px; height: 24px; border-radius: 3px; } .bd-tl { width: 26px; height: 19px; } .bd-p { width: 13px; height: 24px; border-radius: 3px; }
.bot-devs p { text-align: center; max-width: none; margin: 0 auto; }
.bot-never { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; } @media (max-width: 720px) { .bot-never { grid-template-columns: 1fr; } }
.never-list { list-style: none; margin: 0; padding: 0; } .never-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.never-list li::before { content: "–"; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #D92D20; color: #fff; font-weight: 800; font-size: 13px; line-height: 1; }
.never-kept { padding-left: 28px; border-left: 1px solid var(--line); } .never-kept h3 { margin: 12px 0 6px; color: var(--head); } .never-kept p { color: var(--ink-2); margin: 0; }
@media (max-width: 720px) { .never-kept { padding-left: 0; border-left: 0; } }
.pub-cards .pc.row-pc .pc-ico { flex: none; }
/* TASTE 27–28 — ADMIN = the owner's 13-teams / 14-public-first-looks mocks */
.adm-head h1 { font-size: clamp(36px, calc(4.4vw / var(--zoom, 1)), 54px); font-weight: 800; color: var(--head); margin: 0; } .adm-who { display: grid; text-align: right; margin: 6px 0 0; color: var(--ink-2); max-width: none; } .adm-who small { color: var(--muted); }
.adm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 720px) { .adm-tiles { grid-template-columns: 1fr; } }
.adm-t { display: flex; gap: 16px; align-items: flex-start; padding: 22px; margin: 0; } .adm-t > div { display: grid; } .adm-t b { font-size: 32px; font-weight: 800; color: var(--head); line-height: 1.1; } .adm-t span:not(.adm-ico) { color: var(--ink-2); font-size: 17px; }
.adm-t em { font-style: normal; font-size: 14px; color: var(--muted); margin-top: 6px; } .adm-t em.up { color: #15703A; }
.adm-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size: 22px; filter: grayscale(1) brightness(.5) sepia(1) hue-rotate(180deg) saturate(4); flex: none; }
.adm-ai-strip { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 0; padding: 20px 24px; margin: 16px 0; }
.adm-ai-strip > div { display: grid; justify-items: center; border-left: 1px solid var(--line); padding: 0 12px; } .adm-ai-strip > div b { font-size: 26px; font-weight: 800; color: var(--head); } .adm-ai-strip > div span { color: var(--ink-2); font-size: 14.5px; text-align: center; }
.aas-t { color: var(--head); font-size: 19px; padding-right: 22px; } @media (max-width: 720px) { .adm-ai-strip { grid-template-columns: 1fr 1fr; gap: 14px; } .aas-t { grid-column: 1 / -1; } .adm-ai-strip > div { border-left: 0; } }
.adm-tabs.chips { gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .adm-tabs.chips a { border: 0; border-radius: 0; background: none; padding: 10px 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--ink-2); font-size: 16px; }
.adm-tabs.chips a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: none; } .adm-tabs a i { font-style: normal; display: inline-block; min-width: 24px; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: var(--surface-2); font-size: 13px; text-align: center; }
.adm-search input { width: 100%; min-height: 48px; padding-left: 44px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='18' height='18'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%235B6472' stroke-width='1.6'/%3E%3Cpath d='M13 13l4 4' stroke='%235B6472' stroke-width='1.6'/%3E%3C/svg%3E") 14px center no-repeat; }
.adm-table td[data-l="Team"] { display: flex; align-items: center; gap: 12px; } .adm-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-weight: 700; flex: none; }
.adm-chip { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12.5px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); } .adm-chip.grey { background: #EEF1F5; color: #4B5563; }
select.adm-act { width: 44px; min-height: 36px; padding: 0; text-align: center; text-align-last: center; font-size: 18px; letter-spacing: 1px; background-image: none; border-radius: 8px; color: var(--head); }
.adm-foot { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .adm-foot a { color: var(--link); font-weight: 600; text-decoration: none; }
.adm-which { margin: 12px 0; } .adm-which a { margin-right: 16px; font-weight: 600; }
.adm-ico { filter: none; font-size: 0; color: var(--accent); } .aas-t { display: inline-flex; align-items: center; gap: 12px; } .aas-t svg { color: var(--head); }
.adm-table td.adm-act-cell { width: 56px; text-align: right; } select.adm-act { width: 44px; max-width: 44px; padding: 0 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.adm-cut { display: grid; min-width: 0; } .adm-mail { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-table td[data-l="Team"] { min-width: 220px; }
.adm-table td[data-l="Team"] { display: table-cell; } .adm-table td[data-l="Team"] > .adm-av { float: left; margin-right: 12px; } .adm-table td[data-l="Team"] .adm-chip { margin-left: 46px; }
.adm-table select.adm-act { width: 46px; max-width: 46px; height: 34px; padding: 0; text-align: center; text-align-last: center; font-size: 18px; letter-spacing: 1px; background-image: none; }
.adm-table td.adm-act-cell { width: 60px; }
@media (max-width: 719px) {
  .adm-table tbody tr { grid-template-areas: "name name" "when plan" "sites reports" "last open"; }
  .adm-table td:nth-child(1) { grid-area: name; } .adm-table td:nth-child(2) { grid-area: when; } .adm-table td:nth-child(3) { grid-area: plan; } .adm-table td:nth-child(4) { grid-area: sites; } .adm-table td:nth-child(5) { grid-area: reports; } .adm-table td:nth-child(6) { grid-area: last; } .adm-table td:nth-child(7) { grid-area: open; align-self: center; text-align: right; } .adm-table td:nth-child(8) { grid-area: auto; }
  .adm-table td:nth-child(3)::before { content: attr(data-l); } .adm-table select.adm-act { max-width: 46px; }
  .adm-table.looks tbody tr { grid-template-areas: "name name" "when acct" "sites reports" ". open"; } .adm-table.looks td:nth-child(5) { grid-area: acct; } .adm-table.looks td:nth-child(6) { grid-area: open; align-self: center; text-align: right; }
}
.adm-table td[data-l="Team"] .adm-cut { display: grid; overflow: hidden; } .adm-table td[data-l="Team"] .adm-chip { margin: 4px 0 0 46px; display: inline-block; }
@media (max-width: 719px) {
  .adm-table.looks tbody tr { grid-template-areas: "name name" "when acct" "sites reports" "open open"; }
  .adm-table.looks td:nth-child(1) { grid-area: name; } .adm-table.looks td:nth-child(2) { grid-area: when; } .adm-table.looks td:nth-child(3) { grid-area: sites; } .adm-table.looks td:nth-child(4) { grid-area: reports; } .adm-table.looks td:nth-child(5) { grid-area: acct; } .adm-table.looks td:nth-child(6) { grid-area: open; text-align: right; }
  .adm-table.looks td::before { content: attr(data-l); } .adm-table.looks td:nth-child(1)::before { content: none; }
}
/* the critic 21:18 (F10): with the product frame first, the window goes 3:2 as the mock — cover from the top, centred */
.hero.front .htile.desktop .wl-pic { --ar: 2048 / 999; aspect-ratio: 2048 / 999; } .hero.front .htile.desktop .wl-pic img { object-position: top center; } .hero.front .htile.desktop { width: calc(var(--th) * 2.05); }   /* the critic 21:19: the 2:1 window stays whole until the capture is 3:2 — then the 3:2 window lands with it */
/* THE HEADER SHOWS THE MARK ALONE (the owner via senior 21:17 UTC 13 Oct 2026, a standing rule over every mock): no "qa.pro" word beside it */
.brand .brand-word { display: none; }
/* TASTE 33 — THE FOOTER = the owner's mock (senior 21:07 UTC 13 Oct 2026) */
footer { border-top: 3px solid var(--head); background: color-mix(in srgb, var(--accent) 3%, var(--bg)); }
.foot-pub { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 40px; padding: 40px 0 26px; text-align: left; }
.foot-lock { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .foot-lock .mark { width: calc(663.42 / 546 * 40px); height: 40px; } .foot-lock b { font-size: 30px; font-weight: 800; color: var(--head); letter-spacing: -.02em; }
.foot-brand p { margin: 10px 0 0; max-width: none; } .fb-line { font-weight: 700; color: var(--head); font-size: 17px; } .fb-sub { color: var(--ink-2); } .fb-mail { display: inline-block; margin-top: 12px; color: var(--link); text-decoration: none; }
footer nav.foot.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 15.5px; }
.foot-cols details > summary { list-style: none; font-weight: 700; color: var(--head); margin-bottom: 12px; cursor: default; pointer-events: none; } .foot-cols details > summary::-webkit-details-marker { display: none; }
.foot-cols details > div { display: grid; gap: 12px; } footer .foot-cols a { color: var(--ink-2); text-decoration: none; padding: 0; } footer .foot-cols a:hover { color: var(--accent); }
footer .foot-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 28px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; } .foot-top { color: var(--link); text-decoration: none; }
@media (max-width: 720px) { .foot-pub { grid-template-columns: 1fr; gap: 16px; padding: 28px 0 12px; } .foot-lock b { font-size: 24px; } .foot-lock .mark { height: 32px; width: calc(663.42 / 546 * 32px); } .fb-sub, .fb-mail { display: none; }
  footer nav.foot.foot-cols { grid-template-columns: 1fr; gap: 0; } .foot-cols details { border-top: 1px solid var(--line); padding: 14px 0; } .foot-cols details > summary { pointer-events: auto; cursor: pointer; margin: 0; display: flex; justify-content: space-between; min-height: 32px; align-items: center; }
  .foot-cols details > summary::after { content: "⌄"; color: var(--accent); font-size: 20px; } .foot-cols details[open] > summary::after { content: "⌃"; } .foot-cols details > div { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } }
.foot-app { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 16px 0; } .foot-app .foot-lock .mark { height: 28px; width: calc(663.42 / 546 * 28px); } .foot-app .foot-lock b { font-size: 20px; }
.foot-state { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14.5px; } .foot-state i { width: 11px; height: 11px; border-radius: 50%; background: #E9A23B; } .foot-state i.on { background: #16803C; }
.foot-app nav.foot { margin-left: auto; display: flex; gap: 22px; font-size: 14.5px; } .foot-app nav.foot a { color: var(--ink-2); text-decoration: none; } .foot-ver { color: var(--muted); font-size: 12px; font-family: var(--mono); }
footer, footer .foot-row, footer .foot-row *, footer .foot-brand *, footer .foot-app * { font-family: var(--sans); } footer .foot-row { flex-direction: row !important; justify-content: space-between !important; text-align: left; } footer .foot-lock b { font-family: var(--sans); }
footer .foot-brand .fb-sub, footer .foot-brand .fb-mail { font-size: 15.5px; }
/* TASTE 29 — THE HEADER STATES = the owner's mock (senior 20:47 UTC 13 Oct 2026), the mark alone (21:17): public "Log in" outlined;
   under 900 px the signed-in nav folds into a menu button, open = a vertical list with icons, the team chip and the bell at its foot */
header.top nav.anon a.nav-login { border: 1.5px solid var(--accent); border-radius: 10px; padding: 7px 18px; color: var(--accent); font-weight: 600; text-decoration: none; }
header.top nav.anon a.nav-login:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.nav-burger { display: none; } .nav-i { display: none; } .nav-burger .b-close { display: none; }
@media (max-width: 899px) {
  header.top:has(> .nav-burger) { position: relative; flex-wrap: nowrap; } .nav-burger { display: grid; place-items: center; order: 9; margin-left: 8px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-3); border-radius: 10px; background: var(--surface); box-shadow: none; color: var(--head); }
  header.top > nav#main-nav { display: none; } header.top.nav-open .nav-burger .b-open { display: none; } header.top.nav-open .nav-burger .b-close { display: block; }
  header.top.nav-open > nav#main-nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; gap: 2px; padding: 10px 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(16,24,40,.3); overflow: visible; mask-image: none; -webkit-mask-image: none; white-space: normal; }
  header.top.nav-open > nav#main-nav a { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 10px; font-size: 17px; color: var(--head); min-height: 48px; }
  header.top.nav-open > nav#main-nav a.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); } header.top.nav-open .nav-i { display: block; flex: none; }
}
@media (max-width: 899px) { header.top.nav-open > nav#main-nav { justify-items: stretch; text-align: left; } header.top.nav-open > nav#main-nav a { justify-content: flex-start; width: 100%; margin: 0; box-sizing: border-box; } }
/* TASTE 34 — THE REPORT PAGE = the owner's 01-report mock (senior 21:31 UTC 13 Oct 2026), on our structure */
.crumb { margin: 6px 0 6px; font-size: 14px; color: var(--muted); max-width: none; } .crumb a { color: var(--link); text-decoration: none; }
.rep-head h1 { font-size: clamp(30px, calc(3.6vw / var(--zoom, 1)), 42px); font-weight: 800; color: var(--head); }
.rep-head h1 .pill { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 8px; vertical-align: middle; background: #EEF1F5; color: #4B5563; border: 0; }
.rep-head h1 .pill.incomplete { background: #FEF3D8; color: #8A4B07; } .rep-head h1 .pill.incomplete::before { content: "⚠ "; }
.rep-head .actions button, .rep-head .actions details.more > summary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tiles.stats.kit .tile[data-tile] { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.tiles.stats.kit .tile[data-tile] > b { grid-column: 2; } .tiles.stats.kit .tile[data-tile] > span, .tiles.stats.kit .tile[data-tile] > small { grid-column: 2; }
.tiles.stats.kit .tile[data-tile]::before { content: ""; grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 50%; }
.tiles.stats.kit .tile[data-tile="passed"]::before { background: #15703A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.7 2.7L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tiles.stats.kit .tile[data-tile="failed"]::before { background: #D92D20 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tiles.stats.kit .tile[data-tile="not_checked"]::before, .tiles.stats.kit .tile[data-tile="devices_not_run"]::before { border: 5px solid #A9B0BB; box-sizing: border-box; }
.tiles.stats.kit .tile[data-tile="look"]::before { background: #C26A05 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tiles.stats.kit .tile[data-tile="sites"]::before, .tiles.stats.kit .tile[data-tile="when"]::before { content: none; }
section.attention { border: 1px solid #F3C4BE; background: #FFF6F5; border-radius: 14px; padding: 16px 18px; } section.attention.looks { border-color: #F1D8AE; background: #FFFAF1; }
section.attention > .row.head h2 { color: #B42318; } section.attention.looks > .row.head h2 { color: #8A4B07; }
.row.head.rep-head h1 span.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 8px; background: #EEF1F5; color: #4B5563; border: 0; vertical-align: middle; }
.row.head.rep-head h1 span.pill::before { display: none; } .row.head.rep-head h1 span.pill.incomplete { background: #FEF3D8; color: #8A4B07; } .row.head.rep-head h1 span.pill.incomplete::before { content: "⚠"; display: inline; background: none; width: auto; height: auto; }
.tiles.stats.kit .tile[data-tile] small, .tiles.stats.kit .tile[data-tile] span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.row.head.rep-head h1 span.pill.pill.pill.pill.pill.pill.pill { background: #EEF1F5; color: #4B5563; padding: 4px 12px; border-radius: 8px; font-weight: 600; }
.row.head.rep-head h1 span.pill.incomplete.pill.pill.pill.pill.pill.pill { background: #FEF3D8; color: #8A4B07; }
/* TASTE 36–37 — BILLING and the AUDIT LOG in the settings rail (the owner's 03-billing / 04-audit-log mocks) */
.bill-eyebrow { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.bill-plan .planname { font-size: 28px; font-weight: 800; color: var(--head); margin-right: 8px; }
.bill-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 18px; } @media (max-width: 560px) { .bill-facts { grid-template-columns: 1fr; gap: 12px; } }
.bill-facts > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 0 16px; border-left: 1px solid var(--line); } .bill-facts > div:first-child { border-left: 0; padding-left: 0; }
.bf-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); font-size: 22px; filter: grayscale(1) brightness(.5) sepia(1) hue-rotate(180deg) saturate(4); }
.bill-facts b { font-size: 22px; font-weight: 800; color: var(--head); } .bill-facts span:last-child { color: var(--ink-2); }
.bill-incl h2, .bill-usage h2, .bill-change h2 { color: var(--head); font-size: 20px; margin: 0 0 6px; }
.bill-usage { display: flex; align-items: center; gap: 16px; } .bill-usage .button { margin-left: auto; white-space: nowrap; }
.bill-mail a { color: var(--link); font-weight: 600; text-decoration: none; } .bill-go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .bill-go a:not(.button) { color: var(--link); font-weight: 600; text-decoration: none; }
.bill-go .button { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.aud-go { color: var(--link); font-weight: 600; text-decoration: none; align-self: flex-end; }
.aud-card table.audit thead th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; } .aud-card table.audit td { padding: 12px 10px; vertical-align: middle; }
.aud-av { display: inline-block; width: 26px; height: 26px; border-radius: 50%; margin-right: 10px; vertical-align: middle; background: color-mix(in srgb, var(--accent) 12%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7.5' r='3' fill='none' stroke='%230066B3' stroke-width='1.5'/%3E%3Cpath d='M4.5 16.5a5.5 5.5 0 0 1 11 0' fill='none' stroke='%230066B3' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.aud-older { text-align: right; margin: 12px 0 0; max-width: none; } .aud-older a { color: var(--link); font-weight: 600; text-decoration: none; }
.bf-ico { filter: none; font-size: 0; }
.bill-plan .pill.pill.pill.pill.pill.pill.pill { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); padding: 3px 12px; border-radius: 999px; font-weight: 600; }
.aud-card table.audit td.when { white-space: nowrap; font-family: var(--sans); } .aud-card table.audit td.when span { display: block; }
.aud-card table.audit td.aud-clip { max-width: 22ch; } .aud-card table.audit td.aud-clip bdi { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.aud-card table.audit td.by { white-space: nowrap; }
/* TASTE 35 — THE FAILURE REPLAY = the owner's 02-report-failure-replay mock, on our film page */
.film-page .film-head { border-top: 0; } .film-page .film-head h1 { font-size: clamp(30px, calc(3.8vw / var(--zoom, 1)), 46px); font-weight: 800; color: var(--head); margin: 4px 0 8px; }
.film-page .film-state { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; font-weight: 600; }
.film-page.red .film-state, .film-page.failed .film-state { background: #FDECEA; color: #B42318; }
.film-page .film-sentence { font-size: 18px; color: var(--ink-2); }
.film-tabs a[aria-current] { background: var(--accent); }
.film-foot { display: flex; gap: 12px; margin: 24px 0 0; } .film-foot .button { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); padding: 10px 20px; }
.film-page.is-red .film-state { background: #FDECEA; color: #B42318; } .film-page.is-green .film-state { background: #E7F6EC; color: #15703A; } .film-page.is-amber .film-state { background: #FEF3D8; color: #8A4B07; }
nav.film-tabs.film-tabs a[aria-current] { background: var(--accent); }
/* the look tests on the second taste ship (crowd5 22:3x UTC 13 Oct 2026): the phone widths, the edges at rest and the thumbs */
@media (max-width: 720px) { header.top nav.anon a.nav-login { padding: 5px 12px; }
  .tablewrap table.pub-table, .tablewrap table.ov-acttable, .tablewrap table.ov-sitetable { min-width: 0; }
  .pub-table th, .pub-table td { display: block; width: auto; padding-left: 0; padding-right: 0; } .pub-table th { padding-bottom: 0; border-bottom: 0; } .pub-table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; } .pub-table td { border-bottom: 0; padding-top: 2px; }
  .ov-sitetable, .ov-acttable { font-size: 14px; } .ov-sitetable thead th, .ov-sitetable td, .ov-acttable th, .ov-acttable td { padding: 8px 6px; } .ov-sitetable thead th { font-size: 12.5px; }
  .ov-sitetable .sn { gap: 8px; } .ov-sitetable .sn-ini, .ov-sitetable .sn-ico { width: 28px; height: 28px; font-size: 11px; } .ov-sitetable .sr-words { margin-left: 0; } .ov-sitetable .sn-name { overflow-wrap: anywhere; } }
@media (max-width: 900px) { .set-nav { flex-wrap: wrap; overflow: visible; } .set-nav a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  .legal-toc a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; } }
@media (max-width: 360px) { .al-why { -webkit-line-clamp: 3; line-clamp: 3; } }
.aud-card table.audit td.aud-clip bdi { display: inline; -webkit-line-clamp: unset; overflow: visible; }   /* a detail wraps whole: the look tests never let words end in "…" */
.foot-state i { background: #B45309; }   /* the amber mark at 3 to 1 on the footer's ground */
.pc-copy { min-width: 44px; min-height: 44px; border: 1px solid var(--line-3); border-radius: 8px; background: var(--surface); display: inline-grid; place-items: center; }
form.ov-all button.button.button, section.legal-rights a.button.button, .film-foot .button, .rep-head .actions button, .rep-head .actions details.more > summary, form.inline > button:not(.primary):not(.ghost):not(.danger):not(.small) { border: 1.5px solid var(--accent); border-color: var(--accent); color: var(--accent); }
.ck-seg { border-color: var(--line-3); } .ck-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
#ticks-save:not(.primary) { border: 1.5px solid var(--accent); color: var(--accent); background: var(--surface); }
footer details.fg > summary, details.card.add-many > summary { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
@media (max-width: 899px) { .orgpick summary { min-height: 44px; } }