/* inrealtime. The guideline is docs/style.md: monochrome, square like the wordmark, three voices
   (serif headlines, Jost capitals for labels, system sans for reading). Tokens first; every rule
   below uses them. */

@font-face { font-family: 'Jost'; src: url('/fonts/jost-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* colour: neutrals, every text tone at least 4.5:1 on every surface, plus one accent for what you are
     about to press. The accent is a fill behind black text (6.3:1) or text on black (6.3:1); never text
     on paper (3.1:1). */
  --accent: #ff3d8e;
  --on-accent: #000;
  --fg: #121211;
  --fg-2: #4c4b47;
  --fg-3: #6c6b64;
  --bg: #f6f5f1;
  --bg-2: #eeece6;
  --card: #fbfaf7;
  --line: #e2e0d9;
  --error: #c62828;
  /* type */
  --serif: ui-serif, 'New York', 'Iowan Old Style', 'Charter', Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --label: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tracking: 0.12em;
  /* shape */
  --radius: 0;
  --control: 46px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #ecebe6; --fg-2: #b3b2ab; --fg-3: #8a8982; --bg: #0e0e0d; --bg-2: #171716; --card: #141413; --line: #262624; --error: #ef6461; }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--fg); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--fg) 14%, transparent); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
del { color: var(--fg-3); }

/* ---- the label voice: the wordmark's face in tracked capitals, for short words that orient or act ---- */
.label, .nav a, .sev, .summary, .sheet-kicker, .copy, .button, .site-footer nav a {
  font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking);
}

/* ---- brand and header bar ---- */
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { display: block; height: 24px; width: auto; }
.wordmark picture { display: block; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The nav word is a box the same 24px tall as the wordmark: always ink with paper text and a paper
   underline. On the landing film, where the wordmark is the paper box, it is the counterweight. */
.nav a { display: inline-block; font-size: 12px; line-height: 1; padding: 6px 8.5px 6px 10px; background: #121211; color: #f6f5f1;
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: background-color 0.2s ease, color 0.2s ease; }
.nav a:hover, .nav a:focus-visible { background: var(--accent); color: var(--on-accent); }
/* The language globe sits left of the nav word: the same ink box, square, opening a list of the languages
   served (each named in itself, in the label voice). The current one carries a small accent square. */
.bar-end { display: flex; align-items: center; gap: 6px; }
.languages { position: relative; }
.languages summary { list-style: none; display: grid; place-items: center; width: 24px; height: 24px; background: #121211;
  color: #f6f5f1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.languages summary::-webkit-details-marker { display: none; }
.languages summary:hover, .languages summary:focus-visible, .languages[open] summary { background: var(--accent); color: var(--on-accent); }
.languages ul { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 184px; margin: 0; padding: 6px 0;
  list-style: none; background: #121211; }
.languages a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px;
  font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking);
  font-size: 12px; line-height: 1; color: #f6f5f1; text-decoration: none; }
.languages a:hover, .languages a:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }
.languages a[aria-current]::after { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); }
.languages a[aria-current]:hover::after, .languages a[aria-current]:focus-visible::after { background: var(--on-accent); }

/* ---- landing: two full-screen noir films (her street under the tagline, then her reflection in a puddle with
   the members-only question in the centre), then the footer. The first fades to black at the bottom, a short
   black pause follows, the second fades in from black, and the footer fades up out of it. No edges anywhere.
   Always dark, whatever the visitor's colour scheme: the films are the page. Film tones pass AA on black. ---- */
.landing { background: #000; color: #f1f0eb; color-scheme: dark;
  --film-fg: #f1f0eb; --film-fg-2: #c9c8c1; --film-fg-3: #9a9992; --film-edge: #8a8982; --film-error: #ff8a80; }
.landing :focus-visible { outline-color: var(--film-fg); }
/* The header stays at the top over both films. Its black is a layer that is solid for the top half and then
   eases out to nothing along a scrim curve, so the bar has no edge, only a fade (the same shape as
   blackbear.app's). The bar is tight so the film keeps its sky, and clear at the top of the page: the
   fade comes in as the page scrolls (--veil 0..1, public/landing.js; without the script it stays clear).
   The layer is twice the bar's height, plus --dusk (0..1) times 36svh: scrolling from the first film to
   the second, the fade deepens a little and recedes again as the second film arrives. */
.landing-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 14px clamp(24px, 6vw, 72px); }
.landing-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: -1; pointer-events: none;
  height: calc(200% + var(--dusk, 0) * 36svh); opacity: var(--veil, 0);
  background: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.987) 53.1%, rgba(0, 0, 0, 0.951) 56.3%,
    rgba(0, 0, 0, 0.896) 59.4%, rgba(0, 0, 0, 0.825) 62.5%, rgba(0, 0, 0, 0.741) 65.6%, rgba(0, 0, 0, 0.648) 68.8%,
    rgba(0, 0, 0, 0.55) 71.9%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.352) 78.1%, rgba(0, 0, 0, 0.259) 81.3%,
    rgba(0, 0, 0, 0.175) 84.4%, rgba(0, 0, 0, 0.104) 87.5%, rgba(0, 0, 0, 0.049) 90.6%, rgba(0, 0, 0, 0.013) 93.8%, transparent 100%); }
.splash { position: relative; min-height: 100svh; display: grid; padding: 28px clamp(24px, 6vw, 72px); overflow: hidden; }
.splash-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.splash-shade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 45%); }
.splash > .hero, .splash > .members-body { position: relative; }
/* --tagline and --question (0..1) are set by public/landing.js as the page scrolls: the tagline fades out as
   its film leaves, the question fades in as its film arrives. Both stay at 1 without the script, and the
   question is always fully shown while the box has focus. */
.hero { align-self: end; max-width: 980px; padding: 0 0 12vh; opacity: var(--tagline, 1); }
/* Two lines that never wrap: the size follows the width so 'the way the world does.' fits down to 320px. */
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 8.4vw, 96px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.hero .line { display: block; white-space: nowrap; }
/* The tagline's turning word: a slow fade, rise and soft blur between words (public/landing.js). */
.turning { display: inline-block; transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; }
.turning.is-out { opacity: 0; transform: translateY(0.1em); filter: blur(6px); }
/* The first film: heavier on the left where the tagline sits, and fading to black at the bottom. */
.tagline .splash-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, #000 100%),
  linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05) 100%); }

/* A short black pause between the films, where the first has faded out and before the second fades in. */
.interlude { height: 22svh; background: #000; }

/* The members film: her reflection in a puddle, low in the frame, so the question and its answer (a way to
   reach us) hold the centre. The shade darkens the middle for reading and fades in from black at the top. */
.members { align-items: center; justify-items: center; text-align: center; }
.members .splash-shade { background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.4) 62%, rgba(0, 0, 0, 0) 100%),
  linear-gradient(0deg, rgba(0, 0, 0, 0) 64%, #000 100%); }
.members-body { width: 100%; max-width: 640px; padding: 14vh 0; opacity: var(--question, 1); }
.members-body:focus-within { opacity: 1; }
.members h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 32px; text-wrap: balance; }
/* On the film the action is the paper block, like the wordmark above it. */
.members .button { background: var(--film-fg); color: #121211; border-color: var(--film-fg); }

/* ---- footer: the same links everywhere, in the label voice ---- */
.site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--fg-3); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a { font-size: 11px; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer a { color: inherit; }
.site-footer p { margin: 0; }
/* On the landing the footer has no line: it is black, and a scrim reaching up over the last film fades into it
   (the header's curve, upside down). */
.landing .site-footer { position: relative; background: #000; padding: 32px clamp(24px, 6vw, 72px) calc(32px + env(safe-area-inset-bottom)); color: var(--film-fg-3); }
.landing .site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.987) 6.2%, rgba(0, 0, 0, 0.951) 12.6%, rgba(0, 0, 0, 0.896) 18.8%,
    rgba(0, 0, 0, 0.825) 25%, rgba(0, 0, 0, 0.741) 31.2%, rgba(0, 0, 0, 0.648) 37.6%, rgba(0, 0, 0, 0.55) 43.8%, rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.352) 56.2%, rgba(0, 0, 0, 0.259) 62.6%, rgba(0, 0, 0, 0.175) 68.8%, rgba(0, 0, 0, 0.104) 75%, rgba(0, 0, 0, 0.049) 81.2%,
    rgba(0, 0, 0, 0.013) 87.6%, transparent 100%); }
.landing .site-footer nav a:hover { color: var(--accent); }

/* ---- document pages: report, account, sign-in, legal ---- */
.doc { max-width: 720px; margin: 0 auto; padding: 28px 24px 96px; }
.doc > header { margin-bottom: 72px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.5vw, 56px); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 14px; }
.doc h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; margin: 56px 0 12px; }
.doc p { margin: 0 0 16px; }
.doc .lede { font-size: 18px; color: var(--fg-2); }
.doc .site-footer { margin-top: 96px; padding-top: 20px; border-top: 1px solid var(--line); }
.meta { color: var(--fg-3); font-size: 14px; letter-spacing: 0.01em; }
.fine { font-size: 13px; color: var(--fg-2); }
.fine a, .sheet-fine a { color: inherit; }

/* ---- buttons: primary ink block, secondary outline, tertiary text link ---- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control); padding: 0 24px;
  font-size: 12.5px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg); border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
/* Every button, quiet or not, lights up in the accent under the pointer or keyboard focus. */
.button:not(:disabled):hover, .button:not(:disabled):focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button:disabled { opacity: 0.4; cursor: not-allowed; }
.button.quiet { background: transparent; color: var(--fg); }
.button.wide { display: flex; width: 100%; min-height: 52px; margin-top: 18px; font-size: 13px; }
.textlink { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--fg-2); text-decoration: underline; cursor: pointer; }
.textlink:hover { color: var(--fg); }

/* ---- forms ---- */
.stack { display: grid; gap: 10px; max-width: 420px; margin-top: 28px; }
.stack label, .sheet-form label:not(.check) { display: block; font-size: 14px; font-weight: 550; }
.sheet-form label:not(.check) { margin-bottom: 6px; }
.stack input[type=email], .stack input[type=text], .stack textarea, .sheet-form input[type=email] { width: 100%; min-height: var(--control); padding: 0 14px;
  font: 16px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--fg-3); border-radius: var(--radius); }
.stack input:focus, .stack textarea:focus, .sheet-form input[type=email]:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.stack textarea { padding: 12px 14px; line-height: 1.5; min-height: 180px; resize: vertical; }
.stack label + input, .stack label + textarea { margin-bottom: 8px; }
.stack .optional { font-weight: 400; color: var(--fg-2); }
/* The contact form is wider than sign-in: a message wants room. Turnstile sizes itself to the form. */
.contact-form { max-width: 560px; }
.cf-turnstile { min-height: 65px; margin-top: 4px; }
.stack input[aria-invalid=true], .sheet-form input[aria-invalid=true] { border-color: var(--error); }
.stack .button { justify-self: start; margin-top: 6px; }
/* A square checkbox drawn by us (native ones are rounded and sit differently in every browser),
   centred on the first line of its label: 14px text at line-height 21px, an 18px box 1.5px down. */
.check { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 6px; font-size: 14px; line-height: 21px; color: var(--fg-2); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 3px 0 0; display: grid; place-content: center;
  background: var(--card); border: 1px solid var(--fg-3); border-radius: var(--radius); cursor: pointer; }
.check input::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.check input:checked { background: var(--fg); border-color: var(--fg); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.error { color: var(--error); font-size: 14px; margin: 0 !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- surfaces: cards are raised (--card + --line), wells are recessed (--bg-2) ---- */
.panel { margin-top: 32px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.panel h2 { margin: 0 0 10px; font-size: 22px; }
.panel form { margin: 12px 0 0; }
.panel form + p { margin-top: 10px; }
.panel > :last-child { margin-bottom: 0; }
.signout { margin-top: 28px; }
.notice { padding: 12px 16px; background: var(--bg-2); border-radius: var(--radius); margin: 20px 0 0 !important; }

/* ---- report ---- */
.ribbon { display: inline-block; margin: 6px 0 0; padding: 8px 12px; border: 1px solid var(--line); background: var(--bg-2); font-size: 14px; color: var(--fg-2); }
.ribbon strong { color: var(--fg); font-weight: 600; }
.summary { display: flex; flex-wrap: wrap; margin: 26px 0 0; font-size: 11.5px; color: var(--fg-2); }
.summary .count + .count::before { content: '·'; padding: 0 12px; color: var(--fg-3); }
.findings { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 12px; }
.finding { padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.finding h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 12px; }
.sev { font-size: 10.5px; flex: none; }
.sev.high { color: var(--fg); }
.sev.medium { color: var(--fg-2); }
.sev.low { color: var(--fg-3); }
.where { font-size: 12.5px; color: var(--fg-3); margin-bottom: 10px; word-break: break-all; }
pre { font-family: var(--mono); background: var(--bg-2); padding: 12px 14px; border-radius: var(--radius); overflow-x: auto; font-size: 12.5px; margin: 12px 0; }
code { font-family: var(--mono); font-size: 0.9em; }
.fix { margin-top: 12px; padding: 12px 14px; background: var(--bg-2); border-radius: var(--radius); font-size: 15px; }
.fix p { margin: 0; }
.fix strong { font-weight: 600; }
.fix code { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 5px; }
.codeblock { position: relative; margin: 10px 0 0; }
.codeblock pre { margin: 0; padding: 12px 72px 12px 14px; background: var(--card); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.codeblock code { font-size: 12.5px; background: none; border: 0; padding: 0; }
.copy { position: absolute; top: 6px; right: 6px; font-size: 10.5px; line-height: 1; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 9px 6px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.copy:hover { color: var(--fg); }
.copy.done { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.shot { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; display: block; }
.locked { margin-top: 24px; padding: 28px 24px; border: 1px dashed var(--fg-3); border-radius: var(--radius); color: var(--fg-2); text-align: center; }
.cta { margin-top: 56px; }
/* pages.tsx Offers: the full report and real-time audits as cards side by side, stacked on a phone. */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; text-align: left; }
.offer { display: flex; flex-direction: column; padding: 24px; background: var(--bg-2); border-radius: var(--radius); color: var(--fg-2); }
.offer h2, .offer h3 { margin: 0 0 10px; color: var(--fg); font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.offer p { margin: 0 0 10px; }
.offer .button { margin-top: auto; align-self: flex-start; }
.price { font-size: 15.5px; }
.locked-lead { font-family: var(--serif); font-size: 21px; color: var(--fg); margin: 0 0 6px !important; }
.offer .price { margin: 4px 0 16px; }
.price .amount { font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; color: var(--fg); margin-right: 2px; }
.cancel-note { font-size: 14px; color: var(--fg-2); margin: -6px 0 22px !important; }

/* ---- account ---- */
.sites { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sites li { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.sites .site { font-weight: 600; }

/* ---- legal ---- */
.legal h2 { font-size: 22px; margin: 36px 0 8px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }

/* ---- overlays: the email unlock and the checkout. A square card on wide screens, a bottom sheet on
   phones. Native <dialog>: focus stays inside, Esc closes, the page is inert. ---- */
html.sheet-open { overflow: hidden; }
.sheet { width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 48px); overflow: auto; padding: 30px 28px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); }
.sheet::backdrop { background: rgba(14, 14, 13, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet[open] { animation: sheet-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet[open]::backdrop { animation: fade-in 0.26s ease; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
.sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 6px 0 8px; }
.sheet-kicker { font-size: 11px; color: var(--fg-2); margin: 0; }
.sheet-lede { color: var(--fg-2); margin: 0 0 18px; }
.sheet-close { position: absolute; top: 12px; right: 12px; margin: 0; }
.sheet-close button { width: 36px; height: 36px; border: 0; border-radius: var(--radius); background: var(--bg-2); color: var(--fg-2); font-size: 20px; line-height: 1; cursor: pointer; }
.sheet-close button:hover { color: var(--fg); }
.sheet-price { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.sheet-price div { background: var(--bg-2); padding: 12px 14px; }
.sheet-price dt { font-size: 12px; color: var(--fg-2); letter-spacing: 0.02em; }
.sheet-price dd { margin: 2px 0 0; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.sheet-price del { font-size: 16px; margin-right: 4px; }
.sheet-price.one { grid-template-columns: 1fr; }
.sheet-price .once { font-family: var(--sans); font-size: 14px; color: var(--fg-2); margin-left: 2px; }
.sheet-express[hidden], .sheet-or[hidden] { display: none; }
.sheet-or { display: flex; align-items: center; gap: 12px; margin: 28px 0 18px; font-size: 12.5px; color: var(--fg-3); }
.sheet-or::before, .sheet-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sheet-element { margin-bottom: 12px; }
.sheet-status { min-height: 1.2em; font-size: 14px; color: var(--fg-2); margin: 10px 0 0 !important; }
.sheet-fine { font-size: 12.5px; color: var(--fg-2); margin: 8px 0 0 !important; text-align: center; }
.sheet-cancel { font-size: 13.5px; color: var(--fg-2); margin: -8px 0 18px !important; }
@media (max-width: 560px) {
  .sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-bottom: 0; border-left: 0; border-right: 0;
    max-height: 92svh; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); }
  @keyframes sheet-in { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet[open]::backdrop { animation: none; }
}

/* ---- report sections (src/audits, docs/audits.md): What matters most, then one section per audit ---- */
.top-title { margin-top: 40px !important; }
.doc h2 .count-label { font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--fg-2); margin-left: 12px; vertical-align: 0.35em; }
.report-section { margin-top: 8px; }
.section-why { color: var(--fg-2); font-size: 15px; margin: 0 0 6px !important; }
.section-sources { font-size: 12.5px; color: var(--fg-3); margin: 0 0 18px !important; }
.section-sources a { color: inherit; }
.report-section .findings { margin-top: 18px; }
.impact { font-size: 14px; color: var(--fg-2); margin: 4px 0 0 !important; }
/* A section's locked findings in a preview: counted by severity, never named. */
.locked-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 18px 0 0; padding: 13px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; }
.locked-summary .lock { margin-left: auto; font-family: var(--label); font-size: 10.5px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--fg-3); }
.facts { list-style: none; padding: 0; margin: 16px 0 0; font-size: 14px; color: var(--fg-2); }
.facts li { position: relative; padding: 3px 0 3px 16px; }
.facts li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 7px; height: 1px; background: var(--fg-3); }
/* A long URL or code line must wrap inside its card, never widen the page. */
.findings { grid-template-columns: minmax(0, 1fr); }
.finding { min-width: 0; }
.finding pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- admin dashboard (src/worker/admin.tsx) ---- */
.doc:has(.admin) { max-width: 1040px; }
.admin h2 { margin-top: 44px; }
.admin-nav { display: flex; gap: 6px; margin: 4px 0 8px; }
.admin-nav a { font-family: var(--label); font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; padding: 6px 10px; color: var(--fg-2); text-decoration: none; border: 1px solid var(--line); }
.admin-nav a[aria-current=page] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.admin-table th, .admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.admin-table th:first-child, .admin-table td:first-child { text-align: left; padding-left: 0; }
.admin-table thead th { font-family: var(--label); font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
.admin-table tbody th { font-weight: 500; }
.admin-total th, .admin-total td { font-weight: 600; border-bottom: 0; }
.admin-sub { display: block; font-size: 12.5px; color: var(--fg-3); font-weight: 400; }
.admin-note, .admin-empty { font-size: 14px; color: var(--fg-2); }
.admin-waiting { list-style: none; padding: 0; margin: 0; }
.admin-waiting li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.admin-count { display: inline-block; min-width: 2.5em; font-family: var(--serif); font-size: 20px; }
.admin-draft { margin-top: 28px; padding: 24px; border: 1px solid var(--line); background: var(--bg-2); }
.admin-draft h2 { margin: 0 0 4px; }
.admin-shadow { font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.admin-score { font-size: 12.5px; color: var(--fg-3); }
.admin-subject { font-weight: 600; margin: 16px 0 6px; }
.admin-body { white-space: pre-wrap; font: 14.5px/1.6 var(--sans); color: var(--fg); background: var(--bg); padding: 16px; border: 1px solid var(--line); margin: 0 0 16px; }
.admin-decide { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-decide input { flex: 1 1 240px; min-height: var(--control); padding: 0 12px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--fg-3); border-radius: var(--radius); }
.admin-signout { font-family: var(--label); font-size: 12px; line-height: 1; letter-spacing: var(--tracking); text-transform: uppercase; padding: 6px 10px; background: #121211; color: #f6f5f1; border: 0; border-radius: 0; cursor: pointer; }

/* The high finding a preview holds back (pages.tsx WithheldFinding): blank lines behind a pane of frosted
   glass, like Apple's. The page carries none of the finding's text; the lines are all there is, and they
   only drift. Under the pane they move slowly (14-19s, out of step); the pane softens them, sits a little
   above the card (bevelled edges, a soft shadow), and a sheen crosses it every 11s. Where backdrop-filter
   isn't supported, the lines blur themselves. */
.withheld-veil { position: relative; overflow: hidden; isolation: isolate; margin: 8px 0 4px; padding: 14px 18px 16px; }
.withheld-line { display: block; height: 0.7em; margin: 13px 0; width: 92%; background: var(--fg-3); opacity: 0.42; filter: blur(1.5px);
  animation: withheld-drift 16s ease-in-out infinite alternate; will-change: transform; }
.withheld-line.title { width: 46%; height: 0.95em; margin-top: 2px; opacity: 0.55; animation-duration: 19s; }
.withheld-line:nth-child(2) { animation-duration: 14s; animation-delay: -5s; }
.withheld-line:nth-child(3) { animation-duration: 17s; animation-delay: -9s; }
.withheld-line.short { width: 58%; animation-duration: 15s; animation-delay: -3s; }
.withheld-veil::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 42%, rgb(255 255 255 / 0.32));
  -webkit-backdrop-filter: blur(8px) saturate(1.8); backdrop-filter: blur(8px) saturate(1.8);
  border: 1px solid rgb(255 255 255 / 0.75); border-bottom-color: rgb(0 0 0 / 0.07); border-right-color: rgb(0 0 0 / 0.05);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 1px 0 0 rgb(255 255 255 / 0.6), 0 1px 2px rgb(0 0 0 / 0.05), 0 10px 26px rgb(0 0 0 / 0.07); }
.withheld-veil::before { content: ""; position: absolute; z-index: 2; top: -40%; bottom: -40%; left: -45%; width: 32%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.85), transparent); transform: skewX(-16deg); mix-blend-mode: soft-light;
  animation: withheld-sheen 11s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.withheld-note { color: var(--fg-2); font-size: 14px; margin: 14px 0 12px; }
@keyframes withheld-drift { from { transform: translateX(-3%); } to { transform: translateX(5%); } }
@keyframes withheld-sheen { 0%, 30% { left: -45%; } 80%, 100% { left: 125%; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .withheld-line { filter: blur(4px); } }
@media (prefers-color-scheme: dark) {
  .withheld-line { opacity: 0.55; }
  .withheld-veil::after { background: linear-gradient(150deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03) 42%, rgb(255 255 255 / 0.08));
    border-color: rgb(255 255 255 / 0.16); border-bottom-color: rgb(0 0 0 / 0.4); border-right-color: rgb(0 0 0 / 0.3);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 1px 0 0 rgb(255 255 255 / 0.1), 0 10px 26px rgb(0 0 0 / 0.4); }
  .withheld-veil::before { background: radial-gradient(closest-side, rgb(255 255 255 / 0.10), transparent); mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) { .withheld-line { animation: none; } .withheld-veil::before { display: none; } }

/* terminus review queue (src/worker/review-pages.tsx) */
.review-card { margin-top: 24px; padding: 24px; border: 1px solid var(--line); background: var(--bg-2); }
.review-card h2 { margin: 6px 0 4px; }
.review-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13px; color: var(--fg-2); margin: 0 0 18px; }
.review-detail { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.review-fix { font-size: 14.5px; color: var(--fg-2); }
.review-shot { display: block; max-width: 100%; max-height: 70vh; border: 1px solid var(--line); margin: 16px 0; }
.review-decide { margin-top: 22px; align-items: center; }
.review-skip { font-size: 14px; color: var(--fg-2); }
.admin kbd { font-family: var(--label); font-size: 10.5px; line-height: 1; padding: 2px 5px; margin-left: 6px; border: 1px solid currentColor; border-radius: 3px; opacity: 0.6; }
.admin-shows { margin: 14px 0 18px; }
.admin-shows .admin-waiting li { font-size: 14px; }