/* ============================================================================
   DetectiveCheck — public document pages
   Legal texts, About, Contact and 404. These pages carry no app chrome, so
   they load this instead of app.css: a slim bar, a reading column, a footer.
   It was nine byte-identical copies inlined across nine files until it was
   lifted here — one edit now reaches all of them.
   ============================================================================ */
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2'); font-weight:300 700; font-display:swap; }
  @font-face { font-family:'Inter'; src:url('/assets/fonts/inter-latin.woff2') format('woff2'); font-weight:400 700; font-display:swap; }

  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  :root {
    --bg:#FFFFFF; --bg-soft:#F5F7FB; --bg-sunken:#ECF0F6;
    --ink:#070C16; --line:#070C16;
    --text-primary:#0B1220; --text-secondary:#44536A; --text-muted:#5C6880;
    --border:#E2E7EF; --border-strong:#C9D2E0;
    --accent:#1F4BF0; --accent-deep:#1130A8; --accent-hover:#1539C4;
    --accent-soft:#EDF1FF; --accent-border:#C2D0FF;
    --danger:#C0231A; --danger-soft:#FDF0EF; --success:#05663F; --success-soft:#E6F4EE;
    --warn:#9A5B00; --warn-soft:#FFF4E0;
    --r-control:12px; --r-card:18px; --r-panel:26px; --r-pill:999px;
    --neo-1:3px 3px 0 var(--line); --neo-2:5px 5px 0 var(--line);
    --neo-3:8px 8px 0 var(--line); --neo-press:1px 1px 0 var(--line);
    --font-display:'Space Grotesk',system-ui,sans-serif;
    --font-sans:'Inter',system-ui,-apple-system,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
    --page-gutter:clamp(1rem,2.25vw,3rem);
    --ease:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  }
  html { scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:7rem; }
  body { font-family:var(--font-sans); background:var(--bg-soft); color:var(--text-primary); line-height:1.7; overflow-x:clip; -webkit-font-smoothing:antialiased; }
  body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(to right,rgba(11,18,32,.032) 1px,transparent 1px),linear-gradient(to bottom,rgba(11,18,32,.032) 1px,transparent 1px);
    background-size:64px 64px; }
  header,main,footer { position:relative; z-index:1; }
  a { color:inherit; text-decoration:none; }
  ul,ol { list-style:none; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .wrap { width:min(calc(100% - (var(--page-gutter)*2)),64rem); margin:0 auto; }

  /* nav */
  .bar { position:sticky; top:0; z-index:60; padding-top:16px; }
  .bar-inner { display:flex; align-items:center; gap:1rem; height:70px; padding-inline:1.25rem;
    background:rgba(255,255,255,.94); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
    border:2px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--neo-2); }
  .logo { display:inline-flex; align-items:center; gap:.5rem; flex-shrink:0; font-family:var(--font-display); font-weight:700; font-size:1.1875rem; letter-spacing:-.035em; }
  .logo svg { width:28px; height:28px; color:var(--accent); }
  .bar-links { display:none; gap:1.5rem; margin-inline:auto; }
  .bar-links a { font-size:.9375rem; font-weight:600; color:var(--text-secondary); transition:color .2s var(--ease); }
  .bar-links a:hover { color:var(--text-primary); }
  @media (min-width:800px) { .bar-links { display:flex; } }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; flex-shrink:0;
    font-family:var(--font-display); font-weight:600; font-size:.875rem; padding:.6875rem 1.125rem;
    border:2px solid var(--line); border-radius:var(--r-control); cursor:pointer; white-space:nowrap;
    background:#fff; color:var(--text-primary); box-shadow:var(--neo-2); margin-left:auto;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease-spring), background-color .2s var(--ease); }
  .bar-links ~ .btn { margin-left:0; }
  .btn:hover { box-shadow:var(--neo-3); transform:translate(-1px,-1px); }
  .btn:active { box-shadow:var(--neo-press); transform:translate(4px,4px); transition-duration:90ms; }
  .btn-primary { background:var(--accent); color:#fff; }
  .btn-primary:hover { background:var(--accent-hover); }

  /* page head */
  .phead { padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem); }
  .phead .kick { font-family:var(--font-display); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:.75rem; }
  .phead h1 { font-family:var(--font-display); font-weight:700; letter-spacing:-.035em; line-height:1.05;
    font-size:clamp(2rem,1.5rem + 2.2vw,3.25rem); text-wrap:balance; }
  .phead .lede { margin-top:1rem; font-size:1.125rem; color:var(--text-secondary); max-width:60ch; }
  .stamp { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.25rem; font-size:.8125rem; font-weight:600;
    color:var(--text-secondary); background:#fff; border:2px solid var(--line); box-shadow:var(--neo-1);
    padding:.375rem .75rem; border-radius:var(--r-pill); }

  /* body */
  main { padding-bottom:clamp(3rem,6vw,5rem); }
  .doc { background:#fff; border:2px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--neo-3);
    padding:clamp(1.5rem,4vw,3rem); }
  .doc h2 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; line-height:1.2;
    font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem); margin:2.5rem 0 .875rem; padding-top:2rem; border-top:2px solid var(--line); }
  .doc > h2:first-of-type { margin-top:0; padding-top:0; border-top:0; }
  .doc h3 { font-family:var(--font-display); font-weight:650; font-size:1.0625rem; margin:1.5rem 0 .5rem; }
  .doc p { margin-bottom:1rem; color:var(--text-secondary); max-width:72ch; }
  .doc p strong, .doc li strong { color:var(--text-primary); font-weight:650; }
  .doc ul, .doc ol { margin:0 0 1.25rem; }
  .doc li { position:relative; padding-left:1.5rem; margin-bottom:.5rem; color:var(--text-secondary); max-width:72ch; }
  .doc ul li::before { content:''; position:absolute; left:.25rem; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .doc ol { counter-reset:n; }
  .doc ol li { counter-increment:n; }
  .doc ol li::before { content:counter(n) '.'; position:absolute; left:0; font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:.875rem; }
  .doc a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  /* A comparison table is the one block that legitimately will not fit a
     phone. It scrolls inside itself instead of making the whole page scroll
     sideways — display:block turns the table into its own scroll container
     while the rows keep their tabular layout. Without this, contact.html ran
     142px wider than a 390px screen. */
  .doc table { display:block; overflow-x:auto; max-width:100%; width:100%; border-collapse:collapse; margin-bottom:1.5rem; font-size:.9375rem; }
  .doc th, .doc td { text-align:left; padding:.75rem .875rem; border-bottom:1px solid var(--border); vertical-align:top; }
  .doc thead th { background:var(--bg-sunken); font-family:var(--font-display); font-size:.8125rem; font-weight:700; border-bottom:2px solid var(--line); }
  .doc td { color:var(--text-secondary); }

  .callout { display:flex; gap:.875rem; padding:1.125rem 1.375rem; margin:0 0 1.75rem;
    border:2px solid var(--line); border-radius:var(--r-card); box-shadow:var(--neo-1); font-size:.9375rem; }
  .callout svg { width:21px; height:21px; flex-shrink:0; margin-top:.125rem; }
  .callout p { margin:0; max-width:none; }
  .callout.warn { background:var(--warn-soft); color:#6B4200; }
  .callout.warn svg { color:var(--warn); }
  .callout.warn p { color:#6B4200; }
  .callout.info { background:var(--accent-soft); color:var(--accent-deep); }
  .callout.info svg { color:var(--accent); }
  .callout.info p { color:var(--accent-deep); }
  .callout.bad { background:var(--danger-soft); color:#7A1710; }
  .callout.bad svg { color:var(--danger); }
  .callout.bad p { color:#7A1710; }

  /* toc */
  .toc { background:var(--bg-sunken); border:2px solid var(--line); border-radius:var(--r-card); box-shadow:var(--neo-1);
    padding:1.25rem 1.5rem; margin-bottom:2.5rem; }
  .toc h2 { font-size:.75rem !important; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted);
    margin:0 0 .75rem !important; padding:0 !important; border:0 !important; }
  .toc ol { column-gap:2rem; margin:0; }
  @media (min-width:640px) { .toc ol { columns:2; } }
  .toc li { margin-bottom:.375rem; break-inside:avoid; }
  .toc a { color:var(--text-secondary); text-decoration:none; font-size:.9375rem; }
  .toc a:hover { color:var(--accent); }

  /* breadcrumb — the trail the BreadcrumbList in the JSON-LD describes.
     Structured data that no visitor can see is the kind of markup search
     engines drop, so the trail is on the page as well as in the schema. */
  /* The trail sat directly under the header with no space above it, so it
     read as a second row of navigation rather than as the position of this
     page. The gap is what separates the two.

     Measured rather than guessed: at 32px above and 80px below, the trail
     still sat closer to the header than to the article and kept reading as
     navigation. Roughly half the gap below is what puts it with the page it
     describes. */
  .crumb { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--text-muted); margin-top:clamp(2rem, 5.5vh, 3.25rem); margin-bottom:1rem; }
  .crumb a { color:var(--text-secondary); }
  .crumb a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .crumb [aria-current] { color:var(--text-primary); font-weight:600; }
  .crumb svg { width:13px; height:13px; opacity:.55; }

  /* closing call to action. Lived twice: inline in the sample report as .try,
     and about to live once per lookup page. */
  .cta { margin-top:3rem; text-align:center; background:var(--ink); color:#F2F5FA;
    border:2px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--neo-3);
    padding:clamp(1.75rem,4vw,3rem); }
  .cta h2 { font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.15;
    font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem); text-wrap:balance; }
  .cta p { color:rgba(242,245,250,.78); max-width:46ch; margin:.75rem auto 1.5rem; }
  .cta .btn { margin-left:0; font-size:1rem; padding:.875rem 1.5rem; }
  .cta-fine { font-size:.8125rem; color:rgba(242,245,250,.6) !important; margin:1.25rem auto 0 !important; }

  /* FAQ. <details> rather than a scripted accordion: it opens with no JS, it
     is keyboard operable and announced correctly for free, and the answers are
     in the markup where a crawler reads them whether or not they are open. */
  .faq { margin-bottom:1.5rem; }
  .faq details { border:2px solid var(--line); border-radius:var(--r-card); box-shadow:var(--neo-1);
    background:#fff; margin-bottom:.875rem; overflow:hidden; }
  .faq summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
    padding:1rem 1.25rem; font-family:var(--font-display); font-weight:650; font-size:1rem;
    list-style:none; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:''; flex-shrink:0; width:10px; height:10px; border-right:2.5px solid var(--accent);
    border-bottom:2.5px solid var(--accent); transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s var(--ease); }
  .faq details[open] summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
  .faq summary:hover { background:var(--bg-sunken); }
  .faq .faq-body { padding:0 1.25rem 1.125rem; color:var(--text-secondary); font-size:.9375rem; max-width:72ch; }
  .faq .faq-body p + p { margin-top:.75rem; }

  /* footer */
  footer { background: var(--bg); border-top:2px solid var(--line); padding:clamp(2.5rem,4vw,3.5rem) 0 2rem; }
  .fgrid { display:grid; gap:2rem; }
  /* Four columns since the Lookups column was added. At 700px they would be
     ~150px each and every link would wrap, so the two-column step comes first
     and the four-column layout waits for the width it needs. */
  @media (min-width:700px) { .fgrid { grid-template-columns:1fr 1fr; gap:2.5rem 3rem; } }
  @media (min-width:1000px) { .fgrid { grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; } }
  .fgrid h3 { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); font-weight:700; margin-bottom:1rem; }
  .fgrid li { margin-bottom:.625rem; }
  .fgrid a { font-size:.9375rem; color:var(--text-secondary); }
  .fgrid a:hover { color:var(--accent); }
  .fdesc { color:var(--text-secondary); font-size:.9375rem; max-width:36ch; margin:1rem 0 0; }
  .fine { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.8125rem; color:var(--text-muted); line-height:1.6; }
  .fine p + p { margin-top:.75rem; }
  .fbot { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; font-size:.875rem; color:var(--text-muted); }

  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } html { scroll-behavior:auto; } }
  /* Touch targets. 44px for the things a thumb aims at deliberately; 24px —
     WCAG 2.5.8 AA — for the dense inline lists. The breadcrumb measured 22px
     and the table-of-contents links 19px, both just under the AA floor. They
     do not get 44px: twelve TOC entries at 44px would add half a screen of
     height to a page whose first paragraph already sits two and a half
     screens down, which trades a real reading problem for an AAA badge. */
  @media (pointer:coarse) {
    .btn { min-height:44px; }
    .bar-links a { min-height:44px; display:inline-flex; align-items:center; }
    .crumb a, .toc a { min-height:24px; display:inline-flex; align-items:center; }
  }

/* Skip link. These are long documents, so a keyboard user must be able to
   jump the header rather than tab through it on every page. Off-screen until
   focused; without this rule the link renders as visible text at the top. */
.skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 1200;
    background: var(--ink); color: #fff;
    padding: .625rem 1rem; border-radius: var(--r-control);
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ============================================================================
   Dark theme for the document pages.
   Same tokens as app.css, so a reader who picked dark does not get thrown back
   to white when they open the terms. Only the values change — every rule above
   already goes through the custom properties.
   ============================================================================ */
:root[data-theme="dark"] {
    --bg: #0E141F;
    --bg-soft: #0A0F18;
    --bg-sunken: #131B29;
    --ink: #05080E;
    --line: #05080E;

    --text-primary: #E8EDF5;
    --text-secondary: #A9B6C9;
    --text-muted: #8494AA;

    --border: #253247;
    --border-strong: #35455E;

    --accent: #6E93FF;
    --accent-deep: #A9C0FF;
    --accent-hover: #89A7FF;
    --accent-soft: #16213A;
    --accent-border: #2F4570;

    --danger: #FF8A80;  --danger-soft: #2B1210;
    --success: #6EE7B7; --success-soft: #08251B;
    --warn: #FFC46B;    --warn-soft: #2B1F09;
}

/* Raised surfaces sit lighter than the page so the black edge reads as depth,
   the same inversion app.css makes. */
:root[data-theme="dark"] .doc,
:root[data-theme="dark"] .bar-inner,
:root[data-theme="dark"] .toc,
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .faq details,
:root[data-theme="dark"] .stamp {
    background-color: var(--bg);
}

/* The CTA panel is ink-on-ink once --ink goes near-black, so the border
   disappears and the panel merges into the page. A lifted surface keeps the
   same raised-and-outlined reading as everything else in dark. */
:root[data-theme="dark"] .cta { background: var(--bg-sunken); color: var(--text-primary); }
:root[data-theme="dark"] .cta p { color: var(--text-secondary); }
:root[data-theme="dark"] .cta-fine { color: var(--text-muted) !important; }
:root[data-theme="dark"] body::before { opacity: .35; }

/* The primary button uses the lifted accent on dark, which is light enough
   that white text on it falls under 3:1. Dark text on a light accent is the
   correct pairing — the same choice app.css makes. */
:root[data-theme="dark"] .btn-primary { color: #0A0F18; }

/* The callouts hardcode a dark ink for their text (#6B4200, #7A1710), which is
   correct on their pale light backgrounds and unreadable on the dark ones.
   These are the warnings the page most wants read, so they get an explicit
   pairing rather than inheriting a broken one. */
:root[data-theme="dark"] .callout.warn,
:root[data-theme="dark"] .callout.warn p { color: #FFD9A0; }
:root[data-theme="dark"] .callout.bad,
:root[data-theme="dark"] .callout.bad p { color: #FFC4BE; }
:root[data-theme="dark"] .callout.info,
:root[data-theme="dark"] .callout.info p { color: var(--accent-deep); }