/* Vector — shared design system
   Loaded by every tool. Page-specific rules stay inline in each tool. */

/* Tokens follow overton.cloud (freelance-website/app/globals.css), so the
   tools read as part of the same practice. Change them there first. */
:root {
  --canvas: #ffffff; --surface: #FFFFFF; --sunken: rgba(17,17,17,.05);
  --stone: #ededea; --paper: #f6f5f1;
  /* --ink-2 carries most of the body copy, so it has to clear 4.5:1 on
     paper as well as white. #5e5e5a does, at about 6:1. --ink-3 is for
     placeholders and decoration only. */
  --ink: #111111; --ink-2: #5e5e5a; --ink-3: #8a8a85;
  --accent: #111111; --accent-press: #000000; --accent-tint: #ECECEE;
  /* Amber is the thing you press. It's too pale to outline anything on white
     (under 2:1), so focus rings stay ink and amber only fills. */
  --brand: #ffac00; --brand-tint: rgba(255,172,0,.32);
  --green: #11875A; --green-tint: #E4F3EC;
  --amber: #A96500; --amber-tint: #F8EEDC;
  --coral: #C8402F; --coral-tint: #FBEAE6;
  --neutral: #8A8A8A; --neutral-tint: #ECECEE;
  --taupe: #D6D6D8; --taupe-ink: #8a8a85;
  --line: #e4e4e0;
  --r-card: 24px; --r-input: 14px; --r-pill: 999px;
  /* The glass tokens predate the move to flat surfaces. Kept as names because
     every page's inline styles use them, but they're solid now: with nothing
     moving behind them, blur bought nothing. */
  --glass:       var(--paper);
  --glass-hover: var(--stone);
  --glass-dark:  #0b0b0a;
  --blur: none;

  --shadow-sm: 0 0 0 1px var(--line);
  --shadow:    0 0 0 1px var(--line);
  --ease: cubic-bezier(0.2,0.8,0.2,1);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  background: var(--canvas); color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* cv11: single-storey a; ss03: rounder quotes. Same as overton.cloud. */
  font-feature-settings: "cv11", "ss03";
  font-weight: 400; -webkit-font-smoothing: antialiased;
}
/* Only 400-700 are loaded, so the 800s scattered through page styles land on
   700, the heaviest weight the main site uses. */
::selection { background: var(--brand); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
h1, h2 { text-wrap: balance; }

.wrap { max-width: 900px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.wrap-wide { max-width: 1000px; }

/* ---------- masthead ----------
   A full-width stone band, like the hero on every inner page of the main
   site. The shadow-and-clip pair paints it edge to edge without changing the
   markup, which sits inside a centred .wrap on every page. */
.masthead, .hero {
  background: var(--stone);
  box-shadow: 0 0 0 100vmax var(--stone); clip-path: inset(0 -100vmax);
  padding-top: 16px; padding-bottom: 72px; margin-bottom: 40px;
}
.brandrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border-radius: 16px; min-height: 60px; padding: 10px 12px 10px 20px;
  box-shadow: 0 8px 30px rgba(17,17,17,.08); margin-bottom: 56px;
}
.mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.wordmark { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.badge {
  font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--paper);
  border-radius: 10px; padding: 7px 12px;
}
.badge.link {
  margin-left: auto; background: var(--brand); color: var(--ink);
  border-radius: var(--r-pill); padding: 10px 18px; font-size: 14px;
  transition: opacity 160ms var(--ease);
}
.badge.link:hover { opacity: .85; }
h1 { font-size: 72px; line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; margin: 0 0 22px; max-width: 15ch; }
.lead { font-size: 21px; line-height: 1.5; font-weight: 400; color: #3a3a37; margin: 0 0 36px; max-width: 46ch; }
.dim { color: var(--ink-2); }

/* ---------- panels ---------- */
.panel {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: 28px 30px 30px; margin-bottom: 16px;
}
.panel h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.panel .sub { font-size: 15px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.5; }

/* ---------- fields ----------
   White with a hairline, on paper or stone, as on the main site's contact
   form. The pill button sits inside, like the one in the header bar. */
.field {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 7px 0 18px;
  border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); width: 100%;
  transition: box-shadow 200ms var(--ease);
}
.field:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--brand-tint); }
.field > svg { color: var(--ink-3); flex: none; }
.field .pre { font-family: var(--mono); font-size: 16px; color: var(--ink-3); flex: none; }
.field input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink);
}
.field input::placeholder { color: var(--ink-3); }
.field.mono input { font-family: var(--mono); font-size: 16px; }

textarea.area {
  width: 100%; min-height: 200px; resize: vertical;
  background: #fff; border: 0; border-radius: var(--r-input); box-shadow: 0 0 0 1px var(--line);
  padding: 16px 18px; outline: none;
  font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--ink);
  transition: box-shadow 200ms var(--ease);
}
textarea.area:focus { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--brand-tint); }
textarea.area::placeholder { color: var(--ink-3); }

/* ---------- buttons ----------
   Amber with ink text, as on the main site. Hover fades rather than darkens,
   which is what the main site does too. */
.btn-inset {
  flex: none; height: 42px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: opacity 160ms var(--ease), scale 160ms var(--ease);
}
.btn-inset:hover { opacity: .85; }
.btn-inset:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-inset:disabled { background: var(--stone); color: var(--taupe-ink); opacity: 1; cursor: not-allowed; }
.btn-inset.loading { color: transparent; position: relative; background: var(--brand); opacity: 1; }
.btn-inset.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(17,17,17,0.25); border-top-color: var(--ink);
  animation: spin 700ms linear infinite;
}
.btn-block {
  width: 100%; height: 52px; border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: opacity 160ms var(--ease), scale 160ms var(--ease);
}
.btn-block:hover { opacity: .9; }
.btn-block:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-block:disabled { background: var(--stone); color: var(--taupe-ink); opacity: 1; cursor: not-allowed; }
.btn-inset:active:not(:disabled), .btn-block:active:not(:disabled) { scale: .97; }

.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff;
  color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none;
  box-shadow: 0 0 0 1px var(--line); transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.icon-btn:hover { box-shadow: 0 0 0 1px rgba(17,17,17,.4); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- controls ---------- */
.rows { display: grid; gap: 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.row label { font-size: 16px; font-weight: 600; }
.row .hint { font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-top: 2px; max-width: 46ch; line-height: 1.45; }

.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; background: var(--taupe); border-radius: var(--r-pill); transition: background 200ms var(--ease); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 220ms var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.mini-seg { display: inline-flex; background: var(--sunken); border-radius: var(--r-pill); padding: 3px; gap: 3px; flex: none; }
.mini-seg button {
  border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink-2); padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.mini-seg button[aria-pressed="true"] { background: var(--brand); color: var(--ink); }
.mini-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- output ---------- */
.out { background: var(--sunken); border-radius: var(--r-input); padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
.mono-out {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 15px; line-height: 1.7;
  word-break: break-all; margin: 0; -webkit-user-select: all; user-select: all;
}
.mono-out .k { color: var(--ink-3); }

/* ---------- notices ---------- */
.notices { display: grid; gap: 10px; margin-top: 18px; }
.notice {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  border-radius: var(--r-input); padding: 15px 17px; font-size: 15px; line-height: 1.5; font-weight: 500;
}
.notice .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.notice.warn { background: var(--amber-tint); color: #7d4a00; }
.notice.warn .ic { background: rgba(169,101,0,.16); color: var(--amber); }
.notice.bad  { background: var(--coral-tint); color: #8f2c20; }
.notice.bad .ic { background: rgba(200,64,47,.16); color: var(--coral); }
.notice.good { background: var(--green-tint); color: #0c6141; }
.notice.good .ic { background: rgba(17,135,90,.16); color: var(--green); }
.notice.info { background: var(--sunken); color: var(--ink-2); }
.notice.info .ic { background: rgba(17,17,17,.06); color: var(--ink-2); }
.notice code { font-family: var(--mono); font-size: 13.5px; background: rgba(17,17,17,.06); border-radius: 5px; padding: 1px 5px; }

/* ---------- check rows ---------- */
.checks { display: flex; flex-direction: column; gap: 12px; }
.check {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: 22px 26px; display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start;
  animation: rise 460ms var(--ease) both;
}
.disc {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; line-height: 1;
}
.disc.pending { background: var(--sunken); }
.disc.pending::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid var(--ink-3); border-top-color: transparent; animation: spin 750ms linear infinite;
}
.disc.pass { background: var(--green-tint);  color: var(--green); }
.disc.warn { background: var(--amber-tint);  color: var(--amber); }
.disc.fail { background: var(--coral-tint);  color: var(--coral); }
.disc.info { background: var(--neutral-tint);color: var(--neutral); }
.disc.skip { background: var(--sunken); color: var(--ink-3); }

.check .body { min-width: 0; }
.check .title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.check .state { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 10px; }
.state.pass { color: var(--green); } .state.warn { color: var(--amber); }
.state.fail { color: var(--coral); } .state.info { color: var(--ink-3); } .state.skip { color: var(--ink-3); }
.check .note { font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--ink-2); margin: 5px 0 0; }
.check .record {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--ink);
  background: rgba(17,17,17,.055); border-radius: var(--r-input); padding: 14px 16px; margin-top: 14px;
  white-space: pre-wrap; word-break: break-all; font-weight: 400;
}
.check .record .k { color: var(--ink-2); font-weight: 600; }

/* ---------- sections ---------- */
.section { padding-top: 56px; }
.eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.section h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; margin: 0 0 6px; }
.section .blurb { font-size: 17px; margin: 0 0 24px; max-width: 52ch; color: var(--ink-2); }

/* ---------- footer ----------
   The main site's footer: a stone panel with the links in columns and the
   name set enormous underneath, cropped by the bottom edge. It sits outside
   .wrap so it can run the width of the page, as it does there. */
.site-foot {
  margin: 72px 24px 24px; border-radius: 32px; background: var(--stone); overflow: hidden;
}
.foot-inner {
  width: min(1280px, calc(100% - 5rem)); margin: 0 auto; padding-top: 80px;
  display: flex; flex-direction: column; gap: 80px;
}
.foot-top { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 24px; }
.foot-intro { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.foot-intro p { margin: 0; max-width: 260px; font-size: 15px; line-height: 1.5; color: #3a3a37; }
.foot-status {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); background: #fff; font-size: 13px; color: #3a3a37;
}
.foot-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-title { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.foot-col a {
  font-size: 15px; color: #3a3a37;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.foot-col a:hover { color: var(--ink); text-decoration-color: var(--brand); }
.foot-col a:focus-visible, .foot-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.foot-small {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  border-top: 1px solid #dcdcd7; padding-top: 20px; font-size: 13px; color: var(--ink-2);
}
.foot-small img { display: block; width: 150px; height: auto; }
/* 26cqw: "Overton." in Inter Bold at -0.06em is 3.82em wide, so it fills
   the content width exactly. Same measurement as the main site. */
.foot-sign { width: min(1280px, calc(100% - 5rem)); margin: 40px auto 0; container-type: inline-size; }
.foot-sign span {
  display: block; margin-bottom: -0.26em; white-space: nowrap; user-select: none;
  font-size: 26cqw; line-height: 1; font-weight: 700; letter-spacing: -0.06em; color: var(--ink);
}
.foot-sign b { color: var(--brand); font-weight: inherit; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: var(--r-pill); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease), transform 240ms var(--ease); z-index: 30;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.notice-line { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--coral); display: none; }
.notice-line.show { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::after { transition: none !important; animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .masthead { padding-top: 40px; }
  h1 { font-size: 52px; }
  .lead { font-size: 19px; }
  .section h2 { font-size: 30px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-inner, .foot-sign { width: calc(100% - 3rem); }
  .foot-inner { padding-top: 56px; gap: 56px; }
}
@media (max-width: 620px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 40px; max-width: none; }
  .lead { font-size: 17px; max-width: none; }
  .panel { padding: 20px 18px 22px; border-radius: 18px; }
  .panel h2 { font-size: 18px; }
  .panel .sub { font-size: 14.5px; margin-bottom: 18px; }
  .section { padding-top: 40px; }
  .section h2 { font-size: 25px; }
  .section .blurb { font-size: 15.5px; }

  .row { flex-direction: column; align-items: stretch; gap: 12px; }
  .row .hint { max-width: none; }
  .row:has(.switch) { flex-direction: row; align-items: center; }
  .row:has(.switch) > div { flex: 1; min-width: 0; }

  .mini-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px; }
  .mini-seg button { padding: 13px 10px; font-size: 14px; }

  .field { height: 54px; padding: 0 8px 0 16px; }
  .out { flex-direction: column; gap: 12px; padding: 16px; }
  .mono-out { font-size: 14px; }
  .icon-btn { align-self: flex-end; width: 48px; height: 48px; }

  .notice { grid-template-columns: 26px 1fr; gap: 12px; padding: 13px 14px; font-size: 14.5px; }
  .notice .ic { width: 26px; height: 26px; font-size: 13px; }

  .check { grid-template-columns: 36px 1fr; padding: 18px 16px; gap: 14px; border-radius: 18px; }
  .disc { width: 36px; height: 36px; font-size: 15px; }
  .check .title { font-size: 16px; }
  .check .state { display: block; margin-left: 0; margin-top: 3px; }
  .check .note { font-size: 15px; }
  .check .record { font-size: 12.5px; padding: 12px; }

  .masthead, .hero { padding-top: 12px; padding-bottom: 44px; }
  .site-foot { margin: 48px 12px 12px; border-radius: 28px; }
  .brandrow { margin-bottom: 40px; padding-left: 16px; }
  .brandrow .badge:not(.link) { display: none; }
}
@media (max-width: 380px) {
  h1 { font-size: 30px; }
  .mini-seg button { font-size: 13px; padding: 13px 6px; }
}

/* ============================================================
   PRINT — the "download report" path
   Browsers have a good PDF engine already, so the report is produced by
   print-to-PDF rather than a JS library. That keeps the text selectable and
   searchable in the PDF, and adds nothing to page weight.
   ============================================================ */
@media print {
  /* Backgrounds and glass cost ink and look muddy on paper. */
  * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  body {
    background: #fff !important; color: #000;
    padding: 0 !important; font-size: 11pt;
  }
  .wrap { max-width: none; padding: 0 !important; }

  /* Chrome the report doesn't need */
  .masthead, .brandrow, h1, .lead, form, .site-foot, .toast,
  .btn-inset, .btn-block, .icon-btn, .sticky-record, .notice-line,
  .try, .kicker, .refresh-mini, .bento, .note, .out-actions,
  .seg, .mini-seg, .switch, input, textarea, .stage .use,
  .report-bar, .btn-ghost {
    display: none !important;
  }

  /* Panels and cards become plain bordered blocks */
  .panel, .check, .verdict-card, .alt, .res, .hop, .stage, .policy, .auth, .note-card {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 6px !important;
    padding: 10pt 12pt !important;
    margin-bottom: 6pt !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .checks { gap: 6pt !important; }

  /* Records must print in full — truncation makes the report useless */
  .check .record, .mono-out, .demo, .record {
    background: #f4f4f4 !important;
    border: 1px solid #e0e0e0 !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    font-size: 8.5pt !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Status still needs to read once it's flattened to paper */
  .disc { border: 1px solid #999 !important; }
  .disc.pass { background: #e4f3ec !important; color: #0a6b45 !important; }
  .disc.warn { background: #f8eedc !important; color: #8a5300 !important; }
  .disc.fail { background: #fbeae6 !important; color: #a5331f !important; }
  .disc.info, .disc.skip { background: #eee !important; color: #555 !important; }
  .state.pass { color: #0a6b45 !important; }
  .state.warn { color: #8a5300 !important; }
  .state.fail { color: #a5331f !important; }
  .notice { border: 1px solid #d4d4d4 !important; break-inside: avoid; }

  .section { padding-top: 14pt !important; break-inside: auto; }
  .section h2 { font-size: 14pt !important; margin-bottom: 2pt !important; }
  .section .blurb, .panel .sub { font-size: 9.5pt !important; color: #555 !important; }
  .eyebrow { font-size: 8pt !important; color: #666 !important; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }

  a { color: #000 !important; text-decoration: none; }

  /* Report header and footer, hidden on screen */
  .print-only { display: block !important; }
  .print-head {
    display: flex !important; align-items: flex-start; justify-content: space-between;
    gap: 20pt; border-bottom: 2px solid #111; padding-bottom: 10pt; margin-bottom: 14pt;
  }
  .print-head .who { font-size: 17pt; font-weight: 800; letter-spacing: -.02em; }
  .print-head .what { font-size: 10pt; color: #555; margin-top: 2pt; }
  .print-head .meta { text-align: right; font-size: 9pt; color: #555; line-height: 1.5; }
  .print-head .meta b { display: block; font-size: 12pt; color: #111; font-family: var(--mono); }
  .print-foot {
    margin-top: 16pt; padding-top: 8pt; border-top: 1px solid #d4d4d4;
    font-size: 8.5pt; color: #666; display: flex; justify-content: space-between; gap: 20pt;
  }

  @page { margin: 14mm 12mm; }
}

/* Print-only blocks stay hidden on screen */
.print-only { display: none; }

/* Download button, shown once there's a result worth exporting */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: opacity 160ms var(--ease);
}
.btn-ghost:hover { opacity: .85; }
.btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-ghost svg { flex: none; }
.report-bar {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 28px; flex-wrap: wrap;
}
/* A class rule setting display beats the hidden attribute, so state it
   explicitly — otherwise the button shows before there's a result. */
.report-bar[hidden] { display: none; }
@media (max-width: 620px) {
  .report-bar { justify-content: stretch; }
  .btn-ghost { flex: 1; justify-content: center; }
}

/* ============================================================
   LOADING
   Two patterns, because the tools behave differently. The domain checker
   streams results in as each check resolves, so a determinate bar showing
   "9 of 18" is meaningful. The others fire everything at once and render in
   one go, so a skeleton showing the shape of what's coming is better than a
   spinner over an empty page.
   ============================================================ */

/* ---------- top progress bar ---------- */
#vprogress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  background: transparent; pointer-events: none;
  opacity: 0; transition: opacity 260ms var(--ease);
}
#vprogress.on { opacity: 1; }
#vprogress i {
  display: block; height: 100%; width: 0;
  background: var(--brand);
  transition: width 320ms var(--ease);
}
/* Unknown total — sweep rather than pretend to know a percentage. */
#vprogress.indeterminate i {
  width: 34%; animation: vsweep 1150ms var(--ease) infinite;
}
@keyframes vsweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(400%); }
}

/* Count beside the bar, so the number is available without hunting for it */
#vprogress b {
  position: absolute; top: 9px; right: 16px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .04em;
  color: var(--ink-2); background: #fff;
  border-radius: var(--r-pill); padding: 4px 11px;
  box-shadow: 0 0 0 1px var(--line); opacity: 0;
  transition: opacity 200ms var(--ease);
}
#vprogress.counting b { opacity: 1; }

/* ---------- skeletons ---------- */
.skel { background: rgba(17,17,17,.07); border-radius: 7px; position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: translateX(-100%);
  animation: vshimmer 1250ms var(--ease) infinite;
}
.skel-line { height: 11px; margin-bottom: 9px; }
.skel-line:last-child { margin-bottom: 0; }
.skel-w80 { width: 80%; } .skel-w60 { width: 60%; }
.skel-w45 { width: 45%; } .skel-w30 { width: 30%; }
.skel-title { height: 15px; width: 38%; margin-bottom: 13px; }
.skel-block { height: 54px; border-radius: 10px; margin-top: 13px; }
.skel-disc { width: 40px; height: 40px; border-radius: 50%; }

@keyframes vshimmer { to { transform: translateX(100%); } }

.skeleton-card {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: 22px 26px; display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  align-items: start; margin-bottom: 12px;
}
@media (max-width: 620px) {
  .skeleton-card { grid-template-columns: 36px 1fr; padding: 18px 16px; gap: 14px; }
  .skel-disc { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; opacity: 0; }
  #vprogress.indeterminate i { animation: none; width: 100%; }
}