/* Vibecoderschecklist — preflight card. Tokens from the brief, §5. */

/* Self-hosted from Google Fonts (SIL OFL 1.1, licences in /fonts/). */
@font-face { font-family:"Atkinson Hyperlegible Next"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Atkinson Hyperlegible Next"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"B612"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/b612-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"B612"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/b612-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"B612 Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/b612-mono-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --surface:#E9EEEC; --card:#F8FAF9; --ink:#14202B; --ink-2:#4A5964; --leader:#A3AFAB; --rule:#D3DBD8;
  --field-border:#5E6E78; --brand:#1F3A5F; --on-brand:#FFFFFF;
  --clear:#1A6E43; --clear-bg:#D7EEDF; --caution:#8A5300; --caution-bg:#FCE7B8;
  --warning:#B3261E; --warning-bg:#F8D8D4; --advisory:#0A5F80; --advisory-bg:#D3ECF5; --heavy:#14202B;
  --shadow:0 1px 2px rgb(20 32 43/.06), 0 10px 28px rgb(20 32 43/.08);
  /* Only things that float over the page (ADR 0025): the sign-in dialog, the account panel and the phone Menu. */
  --raised:#FFFFFF; --shadow-float:0 1px 2px rgb(20 32 43/.08), 0 12px 32px rgb(20 32 43/.16); --backdrop:rgb(14 21 28/.42);
  --sans:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --deck:"B612", system-ui, sans-serif;
  --mono:"B612 Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --measure:30em;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --surface:#0E151C; --card:#15202A; --ink:#E3EAE7; --ink-2:#9DAAB3; --leader:#3D4C57; --rule:#243340;
    --field-border:#71818C; --brand:#9CC0F0; --on-brand:#0E151C;
    --clear:#5BD08F; --clear-bg:#12301F; --caution:#F4B740; --caution-bg:#33260A;
    --warning:#FF7A6E; --warning-bg:#3A1512; --advisory:#6CCFF2; --advisory-bg:#0C2A36; --heavy:#9DAAB3;
    --shadow:0 1px 2px rgb(0 0 0/.35), 0 12px 32px rgb(0 0 0/.4);
    --raised:#1A2631; --shadow-float:0 1px 2px rgb(0 0 0/.5), 0 16px 40px rgb(0 0 0/.55); --backdrop:rgb(3 7 10/.66);
    color-scheme:dark;
  }
}
:root[data-theme="night"] {
  --surface:#0E151C; --card:#15202A; --ink:#E3EAE7; --ink-2:#9DAAB3; --leader:#3D4C57; --rule:#243340;
  --field-border:#71818C; --brand:#9CC0F0; --on-brand:#0E151C;
  --clear:#5BD08F; --clear-bg:#12301F; --caution:#F4B740; --caution-bg:#33260A;
  --warning:#FF7A6E; --warning-bg:#3A1512; --advisory:#6CCFF2; --advisory-bg:#0C2A36; --heavy:#9DAAB3;
  --shadow:0 1px 2px rgb(0 0 0/.35), 0 12px 32px rgb(0 0 0/.4);
  --raised:#1A2631; --shadow-float:0 1px 2px rgb(0 0 0/.5), 0 16px 40px rgb(0 0 0/.55); --backdrop:rgb(3 7 10/.66);
  color-scheme:dark;
}

/* Base */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; background:var(--surface); color:var(--ink); font:400 18px/1.6 var(--sans); caret-color:var(--brand); -webkit-font-smoothing:antialiased; }
::selection { background:color-mix(in srgb, var(--brand) 25%, transparent); }
a { color:var(--brand); text-underline-offset:.15em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
h1, h2, h3, h4 { margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
ul, ol { margin:0; padding:0; }
code, .mono { font-family:var(--mono); font-size:15px; line-height:1.55; }
button { font-family:inherit; }
.wrap { max-width:1232px; margin:0 auto; padding:0 32px; }
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ico { width:16px; height:16px; flex:none; }

/* Skip link */
.skip { position:absolute; left:12px; top:-120px; z-index:100; padding:12px 16px; background:var(--card); color:var(--brand); font-weight:700; border-radius:6px; }
.skip:focus { top:12px; }

/* Header */
.site-head { position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--rule); }
.head-in { position:relative; display:flex; align-items:center; gap:16px; min-height:68px; }
.logo { display:inline-flex; align-items:center; gap:.38em; font:800 22px/1 var(--sans); letter-spacing:-.01em; color:var(--ink); text-decoration:none; min-height:44px; }
.logo svg { width:.74em; height:.74em; }
.logo:hover { text-decoration:none; }
/* The section you're reading, docked next to the logo (app.js initDock). The heading stays in the page; the label
   crossfades (opacity and a 4 px slide, run from app.js so nothing else animates it). */
.dock { display:inline-flex; align-items:center; gap:.6em; min-width:0; height:44px; margin-left:-4px; font:700 17px/1 var(--sans); color:var(--ink-2); }
.dock-slash { color:var(--leader); opacity:0; }
.dock-label { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; opacity:0; }
.dock.is-on .dock-slash, .dock.is-on .dock-label { opacity:1; }
.nav { margin-left:auto; }
.nav ul { display:flex; gap:4px; list-style:none; }
.nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; white-space:nowrap; color:var(--ink); font-weight:700; font-size:16px; text-decoration:none; border-radius:6px; }
.nav a:hover { text-decoration:underline; }
.icon-btn { display:inline-grid; flex:none; place-items:center; width:44px; height:44px; padding:0; background:transparent; color:var(--ink); border:1px solid var(--field-border); border-radius:6px; cursor:pointer; }
.icon-btn svg { width:20px; height:20px; }
.theme-btn .ti { display:none; }
html[data-theme-pref="system"] .ti-system, html[data-theme-pref="day"] .ti-day, html[data-theme-pref="night"] .ti-night { display:block; }
.menu-btn { display:none; flex:none; min-height:44px; padding:0 14px; background:transparent; color:var(--ink); border:1px solid var(--field-border); border-radius:6px; font:700 16px var(--sans); cursor:pointer; }
/* The Menu takes the nav where one row can't hold it: at 1000 px and under signed out (logo, nav, Sign in and the theme
   button need about 970 px), and at 1100 px and under signed in (My reports and the account button need about 1040 px).
   theme.js sets html.is-signed-in from the hint cookie before the first paint, so the bar is drawn right at once.
   :where() keeps both blocks at the same specificity, so the phone bar's order rules below still apply.
   The Menu floats under the bar (design 3b): the nav links, then, signed in, the account group (auth.js). */
@media (max-width: 1100px) {
  .js:where(.is-signed-in) .menu-btn { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .js:where(.is-signed-in) .nav { display:none; position:absolute; left:8px; right:8px; top:calc(100% + 6px); margin:0; padding:8px; background:var(--raised); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow-float); }
  .js:where(.is-signed-in) .nav.is-open { display:block; }
  .js:where(.is-signed-in) .nav ul { flex-direction:column; gap:0; }
  .js:where(.is-signed-in) .nav a { width:100%; min-height:48px; padding:0 12px; font-size:17px; }
  .js:where(.is-signed-in) .nav a:hover { background:var(--surface); text-decoration:none; }
}
@media (max-width: 1000px) {
  .nav ul { flex-wrap:wrap; }
  .js .menu-btn { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .js .nav { display:none; position:absolute; left:8px; right:8px; top:calc(100% + 6px); margin:0; padding:8px; background:var(--raised); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow-float); }
  .js .nav.is-open { display:block; }
  .js .nav ul { flex-direction:column; gap:0; }
  .js .nav a { width:100%; min-height:48px; padding:0 12px; font-size:17px; }
  .js .nav a:hover { background:var(--surface); text-decoration:none; }
}
/* The logo's box steps down on small phones (its 19-letter word, ADR 0018, is folded there: see the auth slot below). */
@media (max-width: 420px) { .logo { font-size:19px; } }
@media (max-width: 360px) { .logo { font-size:17px; } }

/* Buttons and fields */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border:1px solid transparent; border-radius:6px; font:700 17px/1.2 var(--sans); text-decoration:none; cursor:pointer; text-align:center; }
.btn-primary { background:var(--brand); color:var(--on-brand); }
.btn-primary:hover { background:color-mix(in srgb, var(--brand) 86%, var(--ink)); }
.btn-secondary { background:var(--card); color:var(--ink); border-color:var(--field-border); }
.btn-secondary:hover { background:var(--surface); }
.btn[disabled], .btn[aria-disabled="true"] { cursor:progress; }
.btn-sm { min-height:44px; padding:0 14px; font-size:16px; }
.btn-lg { min-height:56px; padding:0 26px; font-size:18px; }
.text-btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; background:none; border:0; color:var(--brand); font:700 16px var(--sans); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px; cursor:pointer; }
.text-btn:hover { text-decoration-thickness:2px; }
.field-label { display:block; margin-bottom:8px; font-weight:700; font-size:17px; }
.field-row { display:flex; gap:10px; }
.field { flex:1; min-width:0; height:52px; padding:0 14px; background:var(--card); color:var(--ink); border:1px solid var(--field-border); border-radius:6px; font:400 16px var(--mono); }
.field::placeholder { color:var(--ink-2); opacity:1; }
.field[aria-invalid="true"] { border-color:var(--warning); box-shadow:inset 0 0 0 1px var(--warning); }
.field[readonly] { background:var(--surface); }
.field-error { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:12px; color:var(--warning); font-weight:700; font-size:17px; line-height:1.4; }
.field-error .ico { align-self:flex-start; margin-top:3px; }
.field-error span { flex:1 1 220px; }
.noscript { margin-top:10px; font-size:16px; }
.js noscript { display:none; }
.check-btn { flex:none; min-height:52px; }
.check-btn .spin { display:none; width:16px; height:16px; }
.is-busy .check-btn .spin { display:block; }
@media (max-width: 640px) {
  .field-row { flex-direction:column; }
  .field, .check-btn { height:48px; min-height:48px; width:100%; }
}

/* Card */
.card { background:var(--card); border-radius:8px; box-shadow:var(--shadow); padding:28px 32px; }
@media (max-width: 640px) { .card { padding:20px 16px; } }
.card-title { font:700 21px/1.3 var(--sans); margin-bottom:10px; }
.card-title .mono { font-size:16px; font-weight:400; }

/* Hero */
.hero { border-bottom:2px solid var(--heavy); }
.hero:focus { outline:none; }
.h1 { font:800 60px/1.05 var(--sans); letter-spacing:-.02em; text-wrap:balance; max-width:13ch; }
.lede { margin-top:24px; max-width:56ch; }
.hero-a .lede { max-width:50ch; font-size:21px; line-height:1.5; color:var(--ink-2); }
.hero-a-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:72px; align-items:end; padding-top:96px; }
.hero-a-text { padding-bottom:112px; }
.hero-a .check-form { margin-top:40px; max-width:600px; }
.hero-a .field, .hero-a .check-btn { height:56px; min-height:56px; }
.hero-a .field { font-size:17px; }
.trust-list { display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:18px; list-style:none; color:var(--ink-2); font-size:16px; line-height:1.45; }
.trust-list li { display:flex; align-items:flex-start; gap:8px; }
.trust-list .ico { margin-top:2px; }

/* The laminated sample card */
.hero-card { position:relative; z-index:1; margin-bottom:-104px; padding:30px 32px 18px; transform:rotate(-1deg); transform-origin:50% 30%; }
.punch { position:absolute; top:24px; right:26px; width:18px; height:18px; border-radius:50%; background:var(--surface); border:1px solid var(--leader); }
.hc-head { padding:0 44px 16px 0; border-bottom:2px solid var(--heavy); }
.hc-title { font:700 21px/1.3 var(--sans); }
.hc-title .mono { font-size:16px; font-weight:400; }
.hc-group { padding:14px 0 6px; }
.hc-group + .hc-group { border-top:1px solid var(--rule); }
.hc-gh { margin-bottom:2px; color:var(--ink-2); font:700 16px/1.3 var(--sans); }
.hero-card .claim { font-size:16px; }
.hc-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; margin-top:8px; padding-top:6px; border-top:2px solid var(--heavy); color:var(--ink-2); font-size:15px; }
.hc-foot .see { display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:16px; }
.hero-card [data-i="1"] { --i:1; } .hero-card [data-i="2"] { --i:2; } .hero-card [data-i="4"] { --i:4; }
.hero-card [data-i="5"] { --i:5; } .hero-card [data-i="6"] { --i:6; } .hero-card [data-i="8"] { --i:8; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-card .leader { animation:draw 240ms var(--ease) both; animation-delay:calc(450ms + var(--i, 0) * 30ms); }
  .js .hero-card .resp { animation:chip 120ms linear both; animation-delay:calc(690ms + var(--i, 0) * 30ms); }
}
/* Signed in, the sample card becomes your latest saved report (design 3c): straight, with no punch hole, and its lines
   and chips are there at once rather than drawn in. */
.hero-card.is-latest { transform:none; padding:26px 30px 24px; }
.is-latest .hc-head { padding-right:0; }
.js .hero-card.is-latest .leader, .js .hero-card.is-latest .resp { animation:none; }
.is-latest .lmeta { margin-top:4px; color:var(--ink-2); font-size:16px; }
.is-latest .lines { margin-top:10px; }
.is-latest .lmore { margin-top:8px; color:var(--ink-2); font-size:16px; }
.lfoot { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--rule); }
.lfoot .text-btn { margin-left:auto; }
.signedline { display:flex; align-items:flex-start; gap:10px; margin-top:18px; color:var(--ink); font-size:16px; line-height:1.45; }
.signedline .tick { flex:none; width:14px; height:8px; margin-top:8px; border-left:2px solid var(--clear); border-bottom:2px solid var(--clear); transform:rotate(-45deg); }
@media (max-width: 640px) { .hero-card.is-latest { padding:22px 20px; } .lfoot .text-btn { margin-left:0; } }
/* A signed-in visitor (the hint cookie, set by theme.js before the first paint) is shown their latest report in place of
   the sample, so the sample card isn't painted until homeLatest() has decided: it adds is-settled on every outcome. If
   app.js never runs, the card shows itself after 1.5 s. No height is held for it; the space is taken by the card either way. */
.js.is-signed-in .hero-card:not(.is-settled) { visibility:hidden; animation:hc-reveal 0s linear 1.5s forwards; }
@keyframes hc-reveal { to { visibility:visible; } }
/* The Sign in nudges (the hero line and Keep your reports) are for visitors who aren't signed in. auth.js removes
   is-signed-in again if /api/me says the hint was stale, and they come back. */
html.is-signed-in [data-auth-out] { display:none; }
.has-results .hero-a-grid { grid-template-columns:minmax(0,1fr); }
.has-results .hero-card { display:none; }
#checker.has-results ~ #sample { display:none; }
.has-results .hero-a-text { padding-bottom:40px; }
.results-a { padding-bottom:72px; }
@media (max-width: 1000px) {
  .hero-a-grid { grid-template-columns:minmax(0,1fr); gap:48px; padding-top:64px; }
  .hero-a-text { padding-bottom:0; }
  .hero-card { max-width:600px; margin-bottom:-64px; transform:none; }
}
@media (max-width: 640px) {
  .h1 { font-size:40px; }
  .hero-a .lede { font-size:18px; line-height:1.6; }
  .hero-a-grid { padding-top:40px; gap:40px; }
  .hero-a .field, .hero-a .check-btn { height:48px; min-height:48px; }
  .trust-list { flex-direction:column; }
  .hero-card { padding:22px 16px 10px; }
  .punch { top:18px; right:16px; }
  .hc-g3, .hero-card [data-i="5"] { display:none; }
}

/* Checklist lines */
.lines { list-style:none; container-type:inline-size; }
.line-row { display:flex; align-items:flex-start; gap:12px; width:100%; padding:8px 0; }
.line-btn { width:calc(100% + 16px); min-height:44px; margin:0 -8px; padding:8px; background:none; border:0; border-radius:4px; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.line-btn:hover { background:var(--surface); }
.line-btn[aria-expanded="true"] .claim { text-decoration:underline; text-decoration-color:var(--leader); text-underline-offset:.2em; }
.claim { flex:0 1 auto; min-width:0; padding-top:2px; font:400 17px/1.45 var(--deck); overflow-wrap:break-word; }
.leader { flex:1 1 24px; min-width:24px; height:21px; background-image:radial-gradient(circle at 1.5px 1.5px, var(--leader) 1.25px, transparent 1.6px); background-size:6px 3px; background-repeat:repeat-x; background-position:0 100%; transform-origin:left center; }
.resp { flex:none; display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:4px; font:700 15px/1.3 var(--deck); white-space:nowrap; font-variant-numeric:tabular-nums; }
.resp-fail { color:var(--warning); background:var(--warning-bg); }
.resp-warn { color:var(--caution); background:var(--caution-bg); }
.resp-check, .resp-optional { color:var(--advisory); background:var(--advisory-bg); }
.resp-pass { color:var(--clear); background:var(--clear-bg); }
.resp-wait, .resp-empty { color:var(--ink-2); font-weight:400; background:none; padding-inline:0; }
@container (max-width: 330px) { .leader { display:none; } .claim { flex:1 1 auto; } }
@media (max-width: 640px) { .claim { font-size:16px; } }
.line-panel { padding:4px 0 18px; }
.detail { max-width:var(--measure); font-size:17px; }
.also { margin-bottom:6px; color:var(--ink-2); font-size:15px; }
/* A fix prompt (task R2): a bordered block like a chat app's code block, not a terminal. The header bar holds what the
   prompt is for and Copy at the right; the body is the prompt in the readable sans. Copy is a .cpw, so it keeps its
   width while it says Copied. On a phone the label wraps beside the button; it never pushes the button out. */
.prompt { margin-top:14px; background:var(--card); border:1px solid var(--rule); border-radius:8px; }
.prompt-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 8px 8px 16px; background:var(--surface); border-bottom:1px solid var(--rule); border-radius:7px 7px 0 0; }
.prompt-pro .prompt-head { padding-block:12px; border-bottom:0; border-radius:7px; }
.prompt-label { flex:1 1 16ch; color:var(--ink-2); font-size:15px; font-weight:700; line-height:1.35; }
.prompt-head .btn-copy { flex:none; margin-left:auto; }
/* The header bar is --surface, which is also .btn-secondary's hover fill, so Copy would lose its fill on hover; it goes to --card with a darker border instead. */
.prompt-head .btn-copy:hover { background:var(--card); border-color:var(--ink-2); }
.prompt-text { max-width:70ch; font:400 17px/1.6 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; }
.prompt > .prompt-text { padding:16px; }
.prompt-err { margin:0; padding:0 16px 16px; }
@media (max-width: 480px) { .prompt-head { padding:12px; } .prompt-head .btn-copy { width:100%; } }
.note p { padding:10px 0; max-width:var(--measure); font-size:17px; }
.note .text-btn { display:inline; min-height:0; padding:0; font-size:17px; }
.note-link { font-weight:700; }
.group-note { padding:6px 0; color:var(--ink-2); font-size:16px; }

/* Skeleton */
.skel { padding:14px 0; }
.skel-bar { display:block; height:3px; width:88%; background-image:radial-gradient(circle at 1.5px 1.5px, var(--leader) 1.25px, transparent 1.6px); background-size:6px 3px; background-repeat:repeat-x; }
.skel:nth-child(2) .skel-bar { width:72%; }
.skel:nth-child(3) .skel-bar { width:80%; }

/* Report */
.report { transition:none; }
/* The head (design 3g): address, when it was checked, then Copy share link and Check again at the far end. */
.addr { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; color:var(--ink-2); font-size:16px; }
.addr .mono { color:var(--ink); font-size:17px; }
.addr-acts { display:flex; flex-wrap:wrap; gap:0 8px; margin-left:auto; }
.strip { list-style:none; margin-top:12px; padding:10px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); container-type:inline-size; }
.strip li { display:flex; align-items:flex-start; gap:12px; padding:5px 0; }
.strip-resp { flex:0 1 auto; display:inline-flex; align-items:flex-start; gap:6px; max-width:58%; padding-top:3px; font:700 15px/1.35 var(--deck); text-align:right; }
.strip-resp .ico { margin-top:1px; }
.strip-resp.is-checking { color:var(--ink-2); font-weight:400; }
.strip-resp.is-done { color:var(--clear); }
.strip-resp.is-failed { color:var(--warning); }
.strip-resp.is-unavailable { color:var(--advisory); }
.spin-sm { width:14px; height:14px; margin-top:2px; }
@container (max-width: 420px) {
  .strip li { flex-wrap:wrap; gap:2px 12px; padding:6px 0; }
  .strip .leader { display:none; }
  .strip-resp { flex:1 1 100%; max-width:none; text-align:left; }
}
.verdict-box { margin-top:24px; }
.verdict { font:800 36px/1.12 var(--sans); letter-spacing:-.015em; }
.verdict-sub { margin-top:8px; max-width:var(--measure); }
.verdict-wait { padding:8px 0; color:var(--ink-2); font-size:17px; }
.verdict:empty, .verdict-sub:empty { display:none; }
.platform-note { margin-top:14px; max-width:var(--measure); color:var(--ink-2); font-size:16px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
.save-line { display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; margin-top:8px; color:var(--ink-2); font-size:16px; }
.tip, .share-note, .same-note { margin-top:12px; max-width:var(--measure); color:var(--ink-2); font-size:16px; }
.copy-fallback { margin-top:12px; padding:16px; background:var(--surface); border-radius:6px; }
.sample-note { margin-bottom:20px; padding:14px 16px; max-width:var(--measure); background:var(--surface); border-radius:6px; font-size:17px; }
.report.is-dim .verdict-box, .report.is-dim .dofirst, .report.is-dim .first, .report.is-dim .groups, .report.is-dim .platform-note { opacity:.6; }
.first { margin-top:32px; padding-top:20px; border-top:1px solid var(--warning); }
.first.is-advisory { border-top-color:var(--advisory); }
.first h3, .group h3, .first h2, .group h2 { font:700 21px/1.3 var(--sans); }
.first-list { list-style:none; margin-top:6px; container-type:inline-size; }
.first-item { padding:12px 0 20px; }
.first-item + .first-item { border-top:1px solid var(--rule); }
.howto { margin-top:10px; font-size:17px; }
/* Do this first (design 3g): the one problem to start with. The filled button is the card's only one; the label swap
   to Copied happens in one grid cell, so the button is as wide as its wider label and never shifts the row. */
.dofirst { margin-top:28px; padding-top:20px; border-top:1px solid var(--warning); }
.dofirst.is-advisory { border-top-color:var(--advisory); }
.dofirst h2, .dofirst h3 { font:700 21px/1.3 var(--sans); }
.dofirst .lines { margin-top:8px; }
.df-text { margin-top:8px; max-width:60ch; font-size:17px; line-height:1.55; }
.df-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:18px; }
.df-then { color:var(--ink-2); font-size:16px; }
.df-err { margin-top:12px; }
.cpw { display:inline-grid; align-items:center; justify-items:center; justify-content:center; }
.cpw .cp-s { grid-area:1 / 1; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.cpw .cp-done, .cpw.is-copied .cp-idle { visibility:hidden; }
.cpw.is-copied .cp-done { visibility:visible; }
/* A finding (design 3g): label and value pairs, one column on a phone. */
.finding { display:grid; grid-template-columns:156px minmax(0, 1fr); gap:14px 28px; margin:12px 0 0; }
.flabel { padding-top:2px; color:var(--ink-2); font:700 16px/1.5 var(--sans); }
.fval { margin:0; max-width:62ch; font-size:17px; line-height:1.55; }
.fval .detail { max-width:none; }
.fval .prompt { margin-top:0; }
.fval-act { margin-top:12px; }
.groups { margin-top:32px; }
.group { padding:24px 0 16px; border-top:1px solid var(--rule); }
.group-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px; margin-bottom:6px; }
.count { color:var(--ink-2); font-size:16px; font-variant-numeric:tabular-nums; }
.clear-toggle { margin-top:2px; margin-left:-4px; }
.js .group:not(.show-clear) .line[data-kind="pass"] { display:none; }
@media (max-width: 640px) {
  .verdict { font-size:28px; }
  .actions { flex-direction:column; align-items:stretch; }
  .addr-acts { flex-basis:100%; margin-left:-4px; gap:0 14px; }
  .df-row { flex-direction:column; align-items:stretch; gap:8px; }
  .df-row .btn { width:100%; }
  .finding { grid-template-columns:minmax(0, 1fr); gap:4px; }
  .fval { margin-bottom:12px; }
  .fval-act .btn { width:100%; }
}

/* Motion: the line lands */
@media (prefers-reduced-motion: no-preference) {
  .line.is-landing .leader { animation:draw 240ms var(--ease) both; animation-delay:var(--d, 0ms); }
  .line.is-landing .resp { animation:chip 120ms linear both; animation-delay:calc(var(--d, 0ms) + 240ms); }
  .skel-bar { animation:pulse 1.6s ease-in-out infinite; }
  .is-busy .check-btn .spin, .spin-sm { animation:spin 1.2s linear infinite; }
}
@keyframes draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes chip { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 50% { opacity:.35; } }
@keyframes spin { to { transform:rotate(360deg); } }

/* Sections: printed-document grid, heavy rule on top of each */
.wrap.sec { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:28px 64px; max-width:none; margin:96px max(32px, calc((100% - 1168px) / 2)) 0; padding:36px 0 0; border-top:2px solid var(--heavy); }
.sec-head { align-self:start; }
.sec-body { min-width:0; }
.sec-wide { grid-column:1 / -1; }
.section-h { font:800 36px/1.12 var(--sans); letter-spacing:-.015em; }
.section-intro { margin-top:12px; max-width:var(--measure); color:var(--ink-2); }
.sec-body.section-intro { margin-top:4px; }
.hero:not(.has-results) + .how .sec { margin-top:200px; }
.steps { list-style:none; }
.steps li { display:grid; grid-template-columns:44px minmax(0,5fr) minmax(0,7fr); gap:6px 24px; padding:22px 0 26px; border-bottom:1px solid var(--rule); }
.steps li:first-child { padding-top:4px; }
.steps li:last-child { border-bottom:0; }
.step-n { display:inline-grid; place-items:center; width:30px; height:30px; border:2px solid var(--ink); border-radius:4px; font:700 15px/1 var(--deck); font-variant-numeric:tabular-nums; }
.steps h3 { padding-top:1px; font:700 21px/1.3 var(--sans); }
.printed { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 48px; }
.pgroup { padding:28px 0 8px; border-top:1px solid var(--rule); }
.pgroup:nth-child(-n+2) { padding-top:4px; border-top:0; }
.pgroup h3 { font:700 21px/1.3 var(--sans); }
.why { margin-top:4px; color:var(--ink-2); font-size:16px; }
.pgroup .lines { margin-top:10px; }
.pgroup .line-row { padding:6px 0; }
.box { flex:none; width:18px; height:18px; margin-top:3px; border:1.5px solid var(--field-border); border-radius:2px; }
.annot { color:var(--ink-2); }
.pnote { margin-top:8px; color:var(--ink-2); font-size:16px; }
.cant { margin-top:40px; padding-top:24px; max-width:var(--measure); border-top:1px solid var(--rule); }
.cant h3 { font:700 21px/1.3 var(--sans); }
.cant p { margin-top:8px; }
.faq details { border-bottom:1px solid var(--rule); }
.faq details:first-child summary { padding-top:2px; }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:18px 0; font:700 19px/1.4 var(--sans); list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; width:9px; height:9px; margin-right:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); }
.faq details[open] summary { color:var(--brand); }
.faq details[open] summary::after { transform:translateY(2px) rotate(-135deg); }
.faq details p { max-width:var(--measure); padding:0 0 24px; }
/* Folded long sections (#checks, #sample) and the re-check line: deliberate differences from the
   Claude Design reference, recorded in docs/THEME.md. They reuse the FAQ summary and waitlist form. */
.fold > summary { display:flex; align-items:center; gap:12px; min-height:44px; padding:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); color:var(--brand); font:700 19px/1.4 var(--sans); list-style:none; cursor:pointer; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::after { content:""; flex:none; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); }
.fold[open] > summary { margin-bottom:24px; }
.fold[open] > summary::after { transform:translateY(2px) rotate(-135deg); }
.fold + .cant { margin-top:0; border-top:0; }
.watch-form { max-width:580px; margin-top:36px; padding-top:28px; border-top:1px solid var(--rule); }
.report .wl-ok { margin-top:36px; padding-top:28px; border-top:1px solid var(--rule); }
.ts-slot { margin-top:12px; }
.ts-slot:empty { display:none; }
.ts-note { margin-top:10px; color:var(--ink-2); font-size:16px; }
/* Lighthouse lines: part of Pro, coming soon (docs/adr/0015). Shown muted, with the existing Coming soon tag. */
.line.pro .claim { color:var(--ink-2); }
.line.pro .tag, .pgroup .tag { flex:none; padding-top:3px; white-space:nowrap; }
.soon-list { list-style:none; display:grid; gap:24px; max-width:720px; }
.soon-list h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; font:700 21px/1.3 var(--sans); }
.soon-list p { margin-top:6px; }
.tag { font:700 15px var(--deck); color:var(--advisory); }
.wl-form { max-width:580px; margin-top:36px; padding-top:28px; border-top:1px solid var(--rule); }
.wl-help { margin-top:10px; color:var(--ink-2); font-size:16px; }
.wl-ok { display:flex; gap:10px; align-items:flex-start; max-width:580px; margin-top:36px; font-weight:700; }
.wl-ok .ico { margin-top:5px; color:var(--clear); }
.bot .sec-body p { max-width:var(--measure); }
.bot .sec-body p + p { margin-top:14px; }
.ua { overflow-wrap:anywhere; }
@media (max-width: 1100px) { .printed { grid-template-columns:minmax(0,1fr); } .pgroup:nth-child(2) { padding-top:28px; border-top:1px solid var(--rule); } }
@media (max-width: 1000px) {
  .wrap.sec { grid-template-columns:minmax(0,1fr); gap:20px; }
  .hero:not(.has-results) + .how .sec { margin-top:152px; }
}
@media (max-width: 640px) {
  /* On a phone the wordmark gives its place to the docked label: it leaves the row at once and fades where it stood
     (1.12em is the box and the gap before it), so nothing moves frame by frame. It stays the logo link's name. */
  .site-head.has-dock .logo-word { position:absolute; margin-left:1.12em; opacity:0; pointer-events:none; }
  @media (prefers-reduced-motion: no-preference) { .logo-word { transition:opacity .2s ease-out; } }
  .dock { font-size:16px; }
  .wrap.sec { margin:72px 20px 0; padding-top:28px; }
  .hero:not(.has-results) + .how .sec { margin-top:120px; }
  .section-h { font-size:28px; }
  .wrap { padding-inline:20px; }
  .steps li { grid-template-columns:44px minmax(0,1fr); }
  .steps li p { grid-column:2; }
}

/* Footer */
.site-foot { margin-top:120px; border-top:2px solid var(--heavy); padding:40px 0 72px; }
.foot-in { display:grid; gap:20px; }
.foot-line { color:var(--ink-2); font-size:16px; }
.foot-links ul { display:flex; flex-wrap:wrap; gap:0 20px; list-style:none; }
.foot-links a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; }
.indep { max-width:40em; color:var(--ink-2); font-size:15px; }

/* Not-found page */
.nf { padding-top:96px; padding-bottom:96px; }
.nf-card { max-width:640px; }
.nf-line { display:flex; align-items:flex-start; gap:12px; padding-bottom:16px; border-bottom:2px solid var(--heavy); }
.nf-h { margin-top:24px; font:800 36px/1.12 var(--sans); letter-spacing:-.015em; }
.nf-p { margin-top:10px; color:var(--ink-2); }
.nf-actions { margin-top:28px; }
@media (max-width: 640px) { .nf { padding-top:48px; } .nf-h { font-size:28px; } }

/* Privacy and terms: plain prose in the section layout */
.legal .sec-body > * + * { margin-top:14px; }
.legal .sec-body { max-width:44em; }
.legal .sec-body > h2 { margin-top:40px; font:700 23px/1.3 var(--sans); }
.legal .sec-body > h3 { margin-top:28px; font:700 19px/1.35 var(--sans); }
.legal ul { padding-left:1.2em; }
.legal li + li { margin-top:6px; }
.legal .updated { color:var(--ink-2); font-size:16px; }

/* Guides: /guides/ and /guides/<slug>. Design: Claude Design "Viberschecklist guide pages", 1b with 2a–2c.
   The guide sits on the laminated card; keys, steps and outcomes are report lines with response chips. */
a.dock { text-decoration:none; }
a.dock:hover .dock-label { text-decoration:underline; text-underline-offset:.15em; }
.guide-wrap { display:grid; grid-template-columns:minmax(0, 820px); justify-content:center; gap:28px; padding:56px 32px 72px; }
.guide-card { display:grid; gap:22px; padding:40px 48px; }
.guide-kicker { font:700 15px/1.3 var(--deck); color:var(--ink-2); }
.guide-h1 { font:800 40px/1.1 var(--sans); letter-spacing:-.02em; }
.guide-answer { font-size:20px; line-height:1.55; }
.guide-card h2 { padding-top:22px; border-top:2px solid var(--heavy); font:800 22px/1.2 var(--sans); }
.guide-card p, .guide-card li { max-width:40em; }
.guide-note { color:var(--ink-2); font-size:16px; }
.guide-card code, .guide-check code { white-space:nowrap; } /* keys and paths never break mid-token */
.guide-lines .line-row { border-bottom:1px solid var(--rule); }
.guide-key { display:block; margin-top:2px; color:var(--ink-2); font:400 15px/1.45 var(--sans); }
.guide-steps { display:grid; gap:14px; list-style:none; counter-reset:step; }
/* The number sits in the margin, so text and code in a step flow as one paragraph. */
.guide-steps li { position:relative; padding-left:44px; counter-increment:step; }
.guide-steps li::before { content:counter(step); position:absolute; left:0; top:1px; display:grid; place-items:center; width:26px; height:26px; border:2px solid var(--ink); border-radius:4px; font:700 14px/1 var(--deck); }
.guide-bullets { display:grid; gap:8px; padding-left:1.2em; }
.guide-links { display:grid; gap:6px; list-style:none; }
.guide-card .prompt { margin-top:0; }
.guide-check { display:grid; gap:14px; padding:28px 48px; background:var(--card); border:2px solid var(--heavy); border-radius:8px; }
.guide-check .guide-kicker { margin:0; }
.hub-list { list-style:none; }
.hub-item { display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--rule); }
.hub-text { display:grid; gap:3px; min-width:0; }
.hub-title { font:700 19px/1.35 var(--sans); }
.hub-in { color:var(--ink-2); font:400 14px/1.4 var(--deck); }
.hub-item .leader { margin-top:2px; }
.hub-read { padding-top:3px; color:var(--brand); font:700 15px/1.3 var(--deck); white-space:nowrap; }
.hub-soon .hub-title { color:var(--ink-2); font-weight:400; }
.resp-soon { color:var(--ink-2); background:var(--surface); }
@media (max-width: 640px) {
  .guide-wrap { gap:16px; padding:16px 12px 40px; }
  .guide-card { gap:18px; padding:24px 20px; }
  .guide-h1 { font-size:28px; line-height:1.12; }
  .guide-answer { font-size:18px; }
  .guide-card h2 { padding-top:18px; font-size:20px; }
  .guide-check { padding:20px; }
  .hub-title { font-size:17px; }
  .hub-in { font-size:13px; }
  .hub-item .leader { display:none; }
  .hub-read { margin-left:auto; }
}

/* Sign-in and account (login for extras). Design: Claude Design "Sign-in and account", picks 1b (panel as checklist
   lines with chips), 1i (the Keep this report block) and 2a-2e (every state), copied from design/handoff/claude-design/sign-in/.
   Built from the tokens above and the existing .card, .lines, .resp-*, .btn, .field and .field-label. */
.kicker { font:700 13px/1 var(--deck); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.btn-full { width:100%; }
.btn-danger { background:var(--card); color:var(--warning); border-color:var(--warning); }
.btn-danger-fill { background:var(--warning); color:var(--on-brand); }
.text-danger { color:var(--warning); }

/* The sign-in panel: one card, used on /signin and inline under a report. Lines say what signing in adds. */
.signin-panel { max-width:620px; }
.signin-panel .lines { margin-top:12px; }
.signin-panel .line-row { padding:7px 0; }
.signin-panel .claim { font-size:16px; }
.panel-google { margin-top:24px; }
.panel-or { display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--ink-2); font:400 15px var(--deck); }
.panel-or::before, .panel-or::after { content:""; flex:1; height:1px; background:var(--rule); }
.panel-help { margin-top:10px; color:var(--ink-2); font-size:16px; line-height:1.5; }
.panel-email .field-row { margin-top:0; }
@media (max-width: 640px) { .signin-panel { max-width:none; } .panel-google { margin-top:20px; } }

/* Google's own artwork, unedited (ADR 0022). Both themes are in the markup; the theme shows one.
   216x48 on a wide screen, the width of the card (270 px at most, 60 px tall) on a phone: at least 44 px tall either way. */
.google-btn { display:inline-flex; min-height:44px; border-radius:4px; }
.google-btn img { display:block; width:216px; height:48px; }
.google-btn .g-dark { display:none; }
.g-mark { display:block; width:32px; height:32px; }
@media (max-width: 640px) {
  .google-btn { display:flex; }
  .google-btn img { width:100%; max-width:270px; height:auto; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) .google-btn .g-light { display:none; }
  :root:not([data-theme="day"]) .google-btn .g-dark { display:block; }
}
:root[data-theme="night"] .google-btn .g-light { display:none; }
:root[data-theme="night"] .google-btn .g-dark { display:block; }

/* Checkbox and switch: native inputs inside their labels, so the whole row is the target (44 px, section 5.1).
   Checked and focus states are drawn here; the visible On/Off text is aria-hidden in the markup. */
.opt-row, .switch-row { display:flex; align-items:flex-start; gap:12px; min-height:44px; padding:8px 0; font-size:17px; line-height:1.45; cursor:pointer; }
.opt-row { margin-top:8px; }
.switch-row { gap:14px; margin-top:12px; font-size:17px; }
.opt-box, .switch-input { flex:none; margin:0; appearance:none; -webkit-appearance:none; background:var(--card); border:2px solid var(--field-border); cursor:pointer; }
.opt-box { position:relative; width:22px; height:22px; margin-top:1px; border-radius:4px; }
.opt-box:checked { background:var(--brand); border-color:var(--brand); }
.opt-box:checked::after { content:""; position:absolute; left:5px; top:1px; width:6px; height:11px; border-right:2px solid var(--on-brand); border-bottom:2px solid var(--on-brand); transform:rotate(45deg); }
.switch-input { position:relative; width:46px; height:28px; border-radius:14px; }
.switch-input::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--field-border); }
.switch-input:checked { background:var(--brand); border-color:var(--brand); }
.switch-input:checked::after { left:21px; background:var(--on-brand); }
.opt-box:focus-visible, .switch-input:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: no-preference) { .switch-input::after { transition:left .12s var(--ease); } }
.switch-state { color:var(--ink-2); font:700 15px var(--deck); }
@media (max-width: 640px) { .opt-row, .switch-row { font-size:16px; } }

/* Notices: a calm line for "busy" and "paused" (2a), not an error. */
.notice { display:flex; gap:12px; padding:14px 16px; border-radius:6px; font-size:17px; line-height:1.45; }
.notice-caution { background:var(--caution-bg); color:var(--ink); }
.notice-caution b { color:var(--caution); }
.notice-lamp { flex:none; width:12px; height:12px; margin-top:6px; border-radius:50%; background:var(--caution); }
@media (max-width: 640px) { .notice { font-size:16px; } }

/* "Keep this report" (1i): its own ruled block between the report's actions and the re-check line. */
.keep { margin-top:32px; padding-top:24px; border-top:1px solid var(--rule); }
.keep h3 { font:700 21px/1.3 var(--sans); }
.keep .actions { margin-top:12px; }
.keep-note { margin-top:8px; color:var(--ink-2); font-size:16px; }
.keep + .watch-form { margin-top:32px; }
@media (max-width: 640px) { .keep .actions .btn { width:100%; } }
/* Its states (1i, 1h's 50-reports line): one line each under the buttons; the inline link is a 44 px target. */
.keep-free { color:var(--ink-2); font-size:16px; }
.keep-states { display:grid; gap:2px; margin-top:12px; }
.keep-states:empty { display:none; }
.keep-state { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; min-height:44px; font-size:17px; line-height:1.45; }
.keep-state a { display:inline-flex; align-items:center; min-height:44px; }
.keep-ok { display:inline-flex; align-items:center; gap:10px; color:var(--clear); font-weight:700; }
.keep-ok .tick { flex:none; width:14px; height:8px; margin-top:-4px; border-left:2px solid var(--clear); border-bottom:2px solid var(--clear); transform:rotate(-45deg); }
.keep-warn { color:var(--caution); font-weight:700; }
.keep-fail { color:var(--warning); font-weight:700; }
@media (max-width: 640px) { .keep-state { font-size:16px; } .keep-state .btn { width:100%; } }

/* Account pages: a saved report's inline delete confirmation (My reports rows and the saved report page share it). */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.row-confirm { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; background:var(--warning-bg); border-radius:6px; font-size:17px; }
@media (max-width: 640px) { .row-confirm .btn { width:100%; } }

/* The auth slot on every page (design 3b in design/handoff/claude-design/sign-in/Sign-in and account v3.dc.html):
   "Sign in", or "My reports" and the account button, which opens the account panel. auth.js paints it.
   Signed in, the slot's width comes from real content, never from a pixel guess: every page's markup holds a hidden copy
   of the signed-in controls (.auth-skel: My reports and the account button; the header carries no count), and the painted controls (.auth-pair) share its grid cell. The cell is as wide as the wider of the two, and
   the copy is always the wider, whatever the system does to text widths (Linux draws this bar wider than macOS), so
   nothing in the bar moves when the page learns who you are. The copy is aria-hidden and visibility:hidden; signed out it
   takes no space. theme.js sets html.is-signed-in from the hint cookie before the first paint, so a signed-in visitor
   never sees "Sign in" flash first. Signed out, the slot keeps a minimum width (/signin has no Sign in button). */
.head-in { --slot-w:84px; }
.auth-slot { position:relative; display:grid; align-items:center; justify-items:end; flex:none; min-width:var(--slot-w); }
.auth-slot > * { grid-area:1 / 1; }
html.is-signed-in .auth-slot { min-width:0; }
.nav + .auth-slot { margin-left:0; }
html.is-signed-in .auth-slot > a[data-signin] { visibility:hidden; }
.auth-skel, .auth-pair { display:flex; align-items:center; gap:8px; }
.auth-skel { display:none; visibility:hidden; }
html.is-signed-in .auth-skel { display:flex; }
.auth-slot .btn { flex:none; white-space:nowrap; }
.auth-link:focus-visible { outline-offset:2px; }
.acct-btn { display:inline-flex; flex:none; align-items:center; gap:9px; height:44px; padding:0 12px 0 9px; background:var(--card); color:var(--ink); border:1px solid var(--field-border); border-radius:6px; cursor:pointer; }
.acct-btn:hover { background:var(--surface); }
/* Open is the chevron turning and a 2 px brand border, never colour alone. */
.acct-btn[aria-expanded="true"] { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.acct-mg { display:inline-grid; place-items:center; width:24px; height:24px; border:2px solid currentColor; border-radius:2px; font:800 13px/1 var(--sans); }
.acct-chev { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.acct-btn[aria-expanded="true"] .acct-chev { transform:translateY(2px) rotate(-135deg); }
.acct-panel { position:absolute; top:calc(100% + 18px); right:0; z-index:25; width:300px; padding:8px; background:var(--raised); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow-float); }
.acct-panel:focus { outline:none; }
@media (prefers-reduced-motion: no-preference) { .acct-panel:not([hidden]) { animation:acct-in .12s var(--ease); } }
@keyframes acct-in { from { opacity:0; transform:translateY(-4px); } }
.acct-id { padding:8px 12px 12px; color:var(--ink-2); font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.acct-id b { display:block; margin-top:2px; color:var(--ink); }
.acct-sep { height:1px; margin:4px 0; background:var(--rule); }
.acct-links { list-style:none; }
.acct-row { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 12px; background:transparent; color:var(--ink); border:0; border-radius:6px; font:700 16px/1.2 var(--sans); text-align:left; text-decoration:none; cursor:pointer; }
.acct-row:hover { background:var(--surface); }
.acct-row[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.2em; }
.acct-err-line { padding:8px 12px 4px; color:var(--warning); font-size:16px; line-height:1.4; }
.nav-acct { margin-top:4px; padding-top:4px; border-top:1px solid var(--rule); }
.js .nav .nav-acct .acct-id { padding:14px 12px 6px; font-size:15px; }
.js .nav .nav-acct .acct-id b { font-size:16px; }
.js .nav .nav-acct .acct-row { min-height:48px; font-size:17px; }
.nav-acct .acct-out { margin-top:8px; padding:0 4px 6px; }
.nav-acct .acct-out .btn { width:100%; }
@media (min-width: 1101px) { .nav-acct { display:none !important; } }
/* With the Menu (the breakpoints above): logo, Sign in or My reports, Menu, theme. Signed in, the account items join
   the Menu: no second popover. */
@media (max-width: 1100px) {
  .js:where(.is-signed-in) .auth-slot { margin-left:auto; order:1; }
  .js:where(.is-signed-in) .menu-btn { margin-left:0; order:2; }
  .js:where(.is-signed-in) .theme-btn { order:3; }
  .acct-btn, .acct-panel { display:none !important; }
}
@media (max-width: 1000px) {
  .head-in { --slot-w:0px; }
  .js .auth-slot { margin-left:auto; order:1; }
  .js .menu-btn { margin-left:0; order:2; }
  .js .theme-btn { order:3; }
}
/* The bar is one row at every width from 320 px up, with room to spare for systems that draw text wider (Linux),
   which tests/page.spec.mjs proves with 1 px of extra letter-spacing on every header letter. */
/* Where the one-row bar with the nav is tight (signed out from 1001 px, signed in from 1101 px, with a desktop
   scrollbar), the nav links and the bar's gaps close up a little. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .head-in { gap:12px; }
  .nav ul { gap:0; }
  .nav a { padding:0 8px; }
}
/* The wordmark folds to its box where the row can't hold it: at 600 px and under signed out, at 720 px and under signed
   in (My reports needs the room). The name stays for screen readers. */
@media (max-width: 600px) {
  .head-in .logo-word { position:absolute; width:1px; height:1px; max-width:none; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:1; }
  .head-in .logo { min-width:44px; justify-content:center; }
  .head-in .logo + .dock { margin-left:0; }
}
@media (max-width: 720px) {
  html.is-signed-in .head-in .logo-word { position:absolute; width:1px; height:1px; max-width:none; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:1; }
  html.is-signed-in .head-in .logo { min-width:44px; justify-content:center; }
  html.is-signed-in .head-in .logo + .dock { margin-left:0; }
}
@media (max-width: 440px) {
  /* Phones up to 440 px (412 and 430 are common): smaller buttons and gaps, so the docked label keeps some room. */
  .head-in { gap:8px; }
  .auth-slot .btn { padding:0 10px; font-size:15px; gap:6px; }
  .js .menu-btn { padding:0 10px; font-size:15px; }
}
@media (max-width: 360px) {
  /* At 320 px signed in, the box, My reports, Menu and the theme button fit with a little less air. Menu and the
     theme button stay 44 px targets. */
  .wrap.head-in { padding-inline:12px; gap:4px; }
  .auth-slot .btn { padding:0 6px; gap:4px; }
  .js .menu-btn { padding:0 6px; }
}

/* Hero: the optional line, as a dashed note (1e). */
.optchip { display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:8px 12px; border:1px dashed var(--field-border); border-radius:6px; color:var(--ink-2); font-size:16px; line-height:1.45; }
.optchip .hollow { flex:none; width:13px; height:13px; border:2px solid var(--ink-2); border-radius:2px; }
.optchip a { display:inline-flex; align-items:center; min-height:44px; margin-block:-12px; font-weight:700; }

/* Home: "Keep your reports" as a printed checklist group (1g). */
.keep-h { font:700 21px/1.3 var(--sans); }
.keep-lines { max-width:720px; margin-top:8px; }
.keep-lines .line-row { padding:7px 0; }
.keep-lines .tag { flex:none; padding-top:3px; white-space:nowrap; }
.keep-cta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:20px; }
@media (max-width: 640px) { .keep-cta .btn { width:100%; } }

/* Sign-in in a dialog (3a, ADR 0024): the one overlay. A native <dialog> (public/signin-dialog.js) holding the panel:
   440 px and centred on wide screens, a sheet on the bottom edge reaching to 56 px below the top at 600 px and under.
   The raised surface, the float shadow and a 1 px rule (ADR 0025), so it also draws in forced colours. The page behind
   doesn't scroll, and the gutter stays, so nothing moves sideways. Enter: 180 ms of opacity and an 8 px rise; exit:
   120 ms of opacity; nothing with reduced motion. Where @starting-style isn't supported it simply appears. */
html { scrollbar-gutter:stable; }
html:has(dialog[open]) { overflow:hidden; }
.signin-dialog { box-sizing:border-box; width:440px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:auto; overscroll-behavior:contain; background:var(--raised); color:var(--ink); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow-float); }
.signin-dialog::backdrop { background:var(--backdrop); }
.sd-in { position:relative; padding:24px 28px 28px; }
.sd-x { position:absolute; top:16px; right:16px; width:44px; height:44px; padding:0; background:none; border:0; border-radius:6px; color:var(--ink); cursor:pointer; }
.sd-x::before, .sd-x::after { content:""; position:absolute; left:13px; top:21px; width:18px; height:2px; border-radius:1px; background:currentColor; transform:rotate(45deg); }
.sd-x::after { transform:rotate(-45deg); }
.sd-x:hover { background:var(--surface); }
@media (forced-colors: active) { .sd-x::before, .sd-x::after { background:CanvasText; } }
.signin-dialog .panel-h { padding-right:48px; font:800 24px/1.2 var(--sans); letter-spacing:-.01em; overflow-wrap:anywhere; }
.signin-dialog .panel-intro { margin-top:6px; font-size:16px; }
.signin-dialog .is-sent .panel-intro { margin-top:12px; color:var(--ink); font-size:17px; }
.signin-dialog .is-sent .panel-intro b { overflow-wrap:anywhere; }
.signin-dialog .signin-panel .lines { margin-top:12px; }
.signin-dialog .panel-google { margin-top:20px; }
.signin-dialog .panel-or { margin:18px 0; }
.signin-dialog .panel-email .field-row { flex-direction:column; align-items:flex-start; gap:12px; }
.signin-dialog .panel-email .field { width:100%; flex:none; }
.signin-dialog .panel-actions { margin-top:16px; }
.panel-close-row { margin-top:20px; }
@media (max-width: 600px) {
  .signin-dialog { position:fixed; inset:56px 0 0 0; width:auto; max-width:none; height:auto; max-height:none; margin:0; border-bottom:0; border-radius:8px 8px 0 0; }
  .sd-in { padding:18px 20px calc(28px + env(safe-area-inset-bottom)); }
  .sd-x { top:10px; right:8px; }
  .signin-dialog .panel-h { font:700 21px/1.3 var(--sans); letter-spacing:0; }
  .signin-dialog .panel-email .field-row { align-items:stretch; }
}
@media (prefers-reduced-motion: no-preference) {
  .signin-dialog, .signin-dialog::backdrop { transition:opacity .12s ease-in, overlay .12s allow-discrete, display .12s allow-discrete; }
  .signin-dialog:not([open]), .signin-dialog:not([open])::backdrop { opacity:0; }
  .signin-dialog[open] { transition:opacity .18s var(--ease), transform .18s var(--ease), overlay .18s allow-discrete, display .18s allow-discrete; }
  .signin-dialog[open]::backdrop { transition:opacity .18s var(--ease); }
  @starting-style {
    .signin-dialog[open] { opacity:0; transform:translateY(8px); }
    .signin-dialog[open]::backdrop { opacity:0; }
  }
}

/* The sign-in panel's states and the /signin page (2a, 2b). public/signin-panel.js and public/signin.js build them. */
.panel-h { font:700 21px/1.3 var(--sans); }
.signin-panel .lines .tag { flex:none; padding-top:3px; white-space:nowrap; }
.kicker + .panel-h { margin-top:8px; }
/* A heading that takes focus from a script (after signing out, home's h1): a ring only for keyboard users. */
h1[tabindex="-1"]:focus { outline:none; }
h1[tabindex="-1"]:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.panel-h:focus, .signin-h:focus, .notice-h:focus, .notice[tabindex="-1"]:focus { outline:none; }
.panel-h:focus-visible, .signin-h:focus-visible, .notice-h:focus-visible, .notice[tabindex="-1"]:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.panel-intro { margin-top:8px; color:var(--ink-2); font-size:17px; line-height:1.5; }
.panel-send { flex:none; }
.panel-email .opt-row { margin-top:12px; }
.panel-email .field-error { margin-top:12px; }
.panel-actions { margin-top:14px; gap:6px 20px; }
.panel-wait { color:var(--ink-2); font-size:16px; font-variant-numeric:tabular-nums; }
.field-error .err-dot { flex:none; align-self:flex-start; width:18px; height:18px; margin-top:2px; border:2px solid var(--warning); border-radius:50%; }
.btn-spin { flex:none; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; }
.btn[aria-disabled="true"] { opacity:.75; }
@media (prefers-reduced-motion: no-preference) { .btn-spin { animation:spin 1.2s linear infinite; } }
.notice > p, .notice > div { flex:1; min-width:0; }
.notice-h { font:700 17px/1.45 var(--sans); color:var(--caution); }
.notice-h + p { margin-top:2px; }

/* /signin: one card, centred, then the line for people who only want a check. */
.signin-page { padding-top:48px; }
.signin-card, .signin-aside { max-width:620px; margin:0 auto; }
.signin-note + div { margin-top:16px; }
.signin-back { margin-top:4px; }
.signin-back .text-btn { margin-left:-4px; }
.signin-back + div { margin-top:8px; }
.signin-confirm { max-width:560px; margin:0 auto; }
.signin-h { margin-top:8px; font:800 28px/1.15 var(--sans); letter-spacing:-.015em; overflow-wrap:anywhere; }
.signin-actions { margin-top:24px; }
.signin-confirm .panel-help { margin-top:16px; }
.signin-confirm .field-error { margin-top:12px; }
.signin-done { display:flex; align-items:center; gap:10px; margin-top:0; color:var(--clear); font-size:24px; }
.signin-done .tick { flex:none; width:16px; height:9px; margin-top:-4px; border-left:2px solid var(--clear); border-bottom:2px solid var(--clear); transform:rotate(-45deg); }
.signin-next { margin-top:8px; font-size:17px; }
.signin-aside { margin-top:16px; color:var(--ink-2); font-size:16px; }
@media (max-width: 640px) {
  .signin-page { padding-top:24px; }
  .signin-page .card { padding:22px 20px; }
  .signin-h { font-size:21px; line-height:1.3; }
  .signin-actions .btn, .panel-send { width:100%; }
  .panel-actions { flex-direction:column; align-items:flex-start; }
}

/* The account pages: /account (3d), /account/settings (3e), /account/delete (3f) and /account/report (2d).
   public/account.js builds them; the saved report itself is app.js's report. No heavy rules on account pages. */
.account-page { padding-top:56px; }
.account-root { max-width:960px; }
.account-root > .signin-card, .account-root > .signin-aside { margin-left:0; }
.account-h { font:800 36px/1.12 var(--sans); letter-spacing:-.015em; }
.account-h:focus, .account-missing-h:focus, .saved-addr:focus { outline:none; }
.account-h:focus-visible, .account-missing-h:focus-visible, .saved-addr:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.account-lede { margin-top:8px; color:var(--ink-2); font-size:18px; }
/* My reports: the title and line on the left, Check another app on the right (full width on a phone). */
.account-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px; }
.account-head-text { min-width:0; }
.account-head .btn { flex:none; }
.account-note { margin-top:12px; color:var(--ink-2); font-size:17px; }
.account-notice { margin-top:20px; max-width:620px; }
.account-err:empty { display:none; }
.account-err { margin-top:8px; }
.account-done-p { max-width:560px; margin-top:12px; font-size:17px; }
.account-done-cta { margin-top:24px; }
.account-missing { max-width:620px; }
.account-missing-h { font:700 21px/1.3 var(--sans); }
.account-missing-p { margin-top:8px; color:var(--ink-2); font-size:17px; }
.account-missing-cta { margin-top:16px; }
/* The sub-nav My reports and Settings share: plain links, the current one underlined in ink. */
.subnav { margin-top:28px; border-bottom:1px solid var(--rule); }
.subnav ul { display:flex; gap:28px; margin-bottom:-1px; list-style:none; }
.subnav a { display:inline-flex; align-items:center; min-height:48px; border-bottom:3px solid transparent; color:var(--ink-2); font:700 17px var(--sans); text-decoration:none; }
.subnav a:hover { color:var(--ink); }
.subnav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--ink); }
/* My reports: rows for scanning. The address is the row's title, the dates sit small and quiet under it, Open is the
   filled action, then Check again; the delete question appears inside the row. Chips carry their status icon here, and
   worth fixing gets a 1 px amber border (--caution on --caution-bg passes contrast, day and night). */
.saved-full { margin-top:24px; font-size:16px; }
.saved-full p { flex:1; min-width:0; }
.saved-list { list-style:none; }
.saved-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 32px; align-items:start; padding:24px 0; border-bottom:1px solid var(--rule); }
.saved-main { min-width:0; }
.saved-addr { font:400 22px/1.3 var(--mono); color:var(--ink); overflow-wrap:anywhere; }
.saved-when { margin-top:6px; color:var(--ink-2); font-size:15px; line-height:1.4; }
.saved-date { color:var(--ink-2); font-size:15px; line-height:1.4; }
.saved-row .chips { margin-top:12px; }
.saved-row .resp { border:1px solid transparent; }
.saved-row .resp-warn { border-color:var(--caution); }
.row-acts { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.row-pair { display:flex; align-items:center; gap:4px 14px; } /* each pair wraps as a unit: Open with Check again, Email with Delete */
.row-acts .text-btn { padding:0 4px; }
.saved-row > .keep-states { grid-column:1 / -1; margin-top:0; }
.saved-row > .row-confirm { margin-top:4px; }
.row-q { margin:0; }
.row-confirm-err:empty { display:none; }
.row-confirm-err { flex-basis:100%; }
.saved-empty { max-width:520px; margin-top:40px; }
.saved-empty-h { font:700 21px/1.3 var(--sans); }
.saved-empty-p { margin-top:8px; color:var(--ink-2); font-size:17px; }
.saved-empty-cta { margin-top:20px; }
/* Settings: heading left, content right, 1 px rules 32 px apart; a quiet Delete account at the end. */
.set-secs { margin-top:8px; }
.set-sec { display:grid; grid-template-columns:220px minmax(0,1fr); gap:12px 40px; padding:32px 0; border-top:1px solid var(--rule); }
.set-sec:first-child { border-top:0; }
.set-h { font:700 21px/1.3 var(--sans); }
.set-val { min-width:0; font-size:18px; line-height:1.5; }
.set-help { margin-top:10px; color:var(--ink-2); font-size:16px; line-height:1.5; }
.ident { display:flex; align-items:center; gap:14px; }
.ident-how { display:block; color:var(--ink-2); font-size:16px; }
.ident b { display:block; overflow-wrap:anywhere; }
.set-val .switch-row { margin-top:0; padding-top:0; font-size:18px; }
.switch-state { display:block; }
.switch-msg { margin-top:4px; font-size:16px; }
.set-out { margin-top:0; }
.set-tail { margin-top:24px; padding-top:24px; border-top:1px solid var(--rule); }
.set-quiet { display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2); font:700 16px var(--sans); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px; }
.set-quiet:hover { color:var(--ink); text-decoration-thickness:2px; }
.set-tail .set-help { margin-top:0; }
/* Delete account: what goes (neutral words, not check colours), what stays, Keep my account first, the danger apart. */
.delete-h { margin-top:16px; }
.delete-sub { margin-top:32px; font:700 21px/1.3 var(--sans); }
.goes { max-width:640px; margin-top:12px; }
.goes .line-row { padding:7px 0; }
.goes .claim { font-size:16px; overflow-wrap:anywhere; }
.tag-n { flex:none; padding-top:3px; color:var(--ink-2); font:700 15px var(--deck); white-space:nowrap; }
.delete-p { max-width:640px; margin-top:8px; font-size:17px; }
.delete-keep { margin-top:32px; }
.dzone { max-width:640px; margin-top:32px; padding-top:24px; border-top:1px solid var(--rule); }
.dzone .set-help { margin-top:8px; }
.delete-err:empty { display:none; }
/* The saved report: breadcrumb (its link a 44 px target), the saved-on line, then the report. */
.crumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; list-style:none; font:700 16px var(--sans); color:var(--ink-2); }
.crumb li { display:flex; align-items:center; gap:8px; min-width:0; }
.crumb a { display:inline-flex; align-items:center; min-height:44px; }
.crumb .crumb-slash { color:var(--leader); }
.crumb .mono { overflow-wrap:anywhere; }
.saved-h { margin-top:4px; overflow-wrap:anywhere; }
.saved-on { margin-top:8px; color:var(--ink-2); font-size:17px; }
.saved-report { margin-top:28px; padding-top:24px; border-top:1px solid var(--rule); }
.saved-report .verdict-box { margin-top:0; }
.saved-report .verdict { font:700 24px/1.25 var(--sans); letter-spacing:-.005em; }
.saved-confirm { margin-top:12px; }
/* Every problem is open, so each one is set apart by a rule above it. */
.saved-report .group .line:not([data-kind="pass"]):not(.pro) { margin-top:10px; padding-top:6px; border-top:1px solid var(--rule); }
.saved-report .group .line:not([data-kind="pass"]):not(.pro):first-child { margin-top:4px; }
@media (max-width: 640px) {
  .account-page { padding-top:32px; }
  .account-h { font-size:28px; line-height:1.15; }
  .account-lede { font-size:16px; }
  .saved-on { font-size:16px; }
  .saved-row { grid-template-columns:minmax(0,1fr); padding:20px 0; }
  .account-head .btn { width:100%; }
  .saved-addr { font-size:19px; }
  .row-acts { gap:4px 14px; }
  .set-sec { grid-template-columns:minmax(0,1fr); padding:24px 0; }
  .set-val, .set-val .switch-row { font-size:17px; }
  .set-out { align-items:stretch; }
  .set-out .btn, .delete-keep .btn, .dzone .btn, .saved-empty-cta .btn, .account-done-cta .btn, .account-missing .btn { width:100%; }
}