/* ==========================================================================
   The sanctions screening site: its layout, on top of Policy365's own brand
   (brand/): the broker console's tokens - petrol and slate, the system's body
   face with a mono beside it, two weights - and the element rules Policy365's
   apps share. Colour, type, radius and the element rules come from those; this
   is the components layer only - where things sit. Labels are the mono face in
   small capitals, as the console has them.
   ========================================================================== */

@layer components {
  .wrap{ max-width:72rem; margin-inline:auto; padding-inline:16px; }
  .narrow{ max-width:44rem; }

  .skip{ position:absolute; left:-999px; top:8px; background:var(--surface); padding:8px 12px; border-radius:var(--radius-md); z-index:10; }
  .skip:focus{ left:8px; }

  body{ font-weight:var(--weight-regular); }
  /* a jump to a heading glides there (instantly, for those who've asked for less motion) and stops with the heading
     just below the header, not under it */
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
  [id]{ scroll-margin-top:calc(var(--chrome-all, var(--chrome)) + 24px); }

  /* the page fills the screen, so a short page's footer sits at the bottom, not halfway up */
  body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
  body > main{ flex:1 0 auto; }
  strong, b{ font-weight:var(--weight-semibold); }
  a{ color:var(--accent); }
  a.button, .button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
    min-height:var(--target); padding:var(--cta-pad-y) calc(var(--cta-pad-x) * 2.5); border-radius:var(--radius-md);
    border:1px solid var(--control-border); font:inherit; cursor:pointer; background:var(--surface); color:var(--text); }
  /* a link dressed as a button takes the shared variants' colours (this layer would otherwise win over them) */
  a.button.is-primary, .button.is-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  a.button.is-primary:hover{ background:color-mix(in srgb, var(--accent) 88%, black); }
  a.button.is-secondary, .button.is-secondary{ background:none; border-color:var(--accent); color:var(--accent); }

  /* ---------- header and footer ---------- */
  .site-header{ background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; }
  .site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--chrome); flex-wrap:wrap; padding-block:8px; }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
  /* the wordmark, as the console sets it: policy, then 365 in the accent */
  .wordmark{ display:inline-flex; align-items:baseline; font:var(--weight-regular) 1.375rem/1 var(--font-body); letter-spacing:-0.01em; color:var(--text); white-space:nowrap; }
  .wordmark__strong{ font-weight:var(--weight-semibold); color:var(--accent); }
  .brand__product{ font:0.75rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-left:1px solid var(--border); padding-left:12px; }
  .site-nav{ display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; font:0.75rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }
  .site-nav a:not(.button){ color:var(--text); text-decoration:none; padding:8px 0; }
  .site-nav a:not(.button):hover{ color:var(--accent); }

  /* the signed-in account's own menu: a blue bar under the site's, its items from the page's left edge, who's signed in
     at its right. The header (both bars) stays at the top, so what's jumped to sits below both */
  :root{ --user-bar:#2C5A8E; --user-bar-text:#FFFFFF; --user-bar-muted:#C9D8EC; }
  :root[data-theme="dark"]{ --user-bar:#1B3557; --user-bar-text:#E6EEF9; --user-bar-muted:#9DB3D1; }
  :root:has(.user-bar){ --chrome-all:calc(var(--chrome) + 42px); }
  .user-bar{ background:var(--user-bar); color:var(--user-bar-text); }
  .user-bar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; }
  .user-bar__nav{ display:flex; align-items:center; gap:4px 22px; overflow-x:auto; scrollbar-width:none; font:0.75rem var(--font-mono);
    text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
  .user-bar__nav a{ color:var(--user-bar-text); text-decoration:none; padding:11px 0 9px; border-bottom:2px solid transparent; }
  .user-bar__nav a:hover{ border-bottom-color:var(--user-bar-muted); }
  .user-bar__nav a[aria-current="page"]{ border-bottom-color:var(--user-bar-text); font-weight:var(--weight-semibold); }
  .user-bar__who{ display:flex; align-items:center; gap:14px; font-size:var(--text-sm); white-space:nowrap; }
  .user-bar__email{ color:var(--user-bar-muted); max-width:22rem; overflow:hidden; text-overflow:ellipsis; }
  .user-bar__out{ background:none; border:1px solid var(--user-bar-muted); color:var(--user-bar-text); border-radius:999px; padding:3px 12px;
    min-height:0; font:0.75rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }
  .user-bar__out:hover{ background:rgb(255 255 255 / .12); }
  .user-bar a:focus-visible, .user-bar button:focus-visible{ outline:2px solid var(--user-bar-text); outline-offset:2px; }
  .user-bar__burger, .site-burger{ display:none; }
  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  /* on a phone: the site's bar is the logo and its few links in one row; the account's bar is a menu button (with the
     page's name) at the left and Sign out at the right, its items folding down under it */
  @media (max-width:40em){
    .brand__product{ display:none; }
    .site-header:has(.user-bar) .site-header__inner{ flex-wrap:nowrap; }
    .site-header:has(.user-bar) .site-nav{ flex-wrap:nowrap; gap:4px 14px; }
    /* signed out: the logo, and a menu button at the right; the site's links fold down under the header */
    .site-burger{ display:inline-flex; align-items:center; background:none; border:none; color:var(--text); padding:8px; margin-right:-8px; min-height:0; cursor:pointer; }
    .site-header:not(:has(.user-bar)) .site-header__inner{ flex-wrap:nowrap; }
    .site-header:not(:has(.user-bar)) .site-nav{ display:none; position:absolute; top:100%; left:0; right:0; z-index:6; flex-direction:column;
      align-items:stretch; gap:0; padding:4px 16px 16px !important; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 12px 24px rgb(0 0 0 / .2); }
    .site-header:not(:has(.user-bar)) .site-nav.is-open{ display:flex; }
    .site-header:not(:has(.user-bar)) .site-nav a:not(.button){ padding:12px 0; border-bottom:1px solid var(--border); }
    .site-header:not(:has(.user-bar)) .site-nav .button{ margin-top:12px; }
    .user-bar__email{ display:none; }
    .user-bar__inner{ position:relative; }
    .user-bar__burger{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:var(--user-bar-text); padding:8px 0;
      min-height:0; cursor:pointer; font:0.75rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }
    .user-bar__nav{ display:none; position:absolute; top:100%; left:0; right:0; z-index:6; flex-direction:column; align-items:stretch; gap:0;
      padding:4px 16px 12px; background:var(--user-bar); box-shadow:0 12px 24px rgb(0 0 0 / .25); }
    .user-bar__nav.is-open{ display:flex; }
    .user-bar__nav a{ padding:12px 0; border-bottom:1px solid rgb(255 255 255 / .12); }
    .user-bar__nav a[aria-current="page"]{ border-bottom-color:rgb(255 255 255 / .12); text-decoration:underline; text-underline-offset:4px; }
  }

  .site-footer{ margin-top:64px; border-top:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:var(--text-sm); }
  .site-footer__inner{ display:grid; gap:12px; padding-block:28px; }
  .site-footer__sources{ font-size:var(--text-3xs); }
  .site-footer__links{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
  /* the theme switch: a tiny sun in dark mode, a moon in light, with room round it to tap */
  .site-footer__theme{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background:none; border:none;
    padding:0; min-height:0; color:var(--text-muted); cursor:pointer; border-radius:var(--radius-sm); }
  .site-footer__theme:hover{ color:var(--accent); }
  .site-footer__theme .theme-moon, [data-theme="light"] .site-footer__theme .theme-sun{ display:none; }
  [data-theme="light"] .site-footer__theme .theme-moon{ display:block; }

  /* ---------- sections ---------- */
  section{ padding-block:48px; }
  section + section{ border-top:1px solid var(--border); }
  .eyebrow{ font:0.6875rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:8px; }
  h1{ font-size:clamp(2rem, 5vw, 3rem); line-height:1.1; letter-spacing:-.01em; font-weight:var(--weight-semibold); }
  h2{ font-size:var(--text-2xl); line-height:1.2; margin-bottom:12px; font-weight:var(--weight-semibold); }
  h3{ font-size:var(--text-lg); margin-bottom:6px; font-weight:var(--weight-semibold); }
  .lead{ font-size:var(--text-lg); color:var(--text-muted); max-width:40rem; }
  .stack > * + *{ margin-top:12px; }
  .stack-lg > * + *{ margin-top:24px; }
  .grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); }
  /* the homepage's six features: one a row on a phone, two on a tablet, three on a desktop; each with its icon above */
  .features{ grid-template-columns:1fr; }
  @media (min-width:40em){ .features{ grid-template-columns:repeat(2, 1fr); } }
  @media (min-width:60em){ .features{ grid-template-columns:repeat(3, 1fr); } }
  .feature__icon{ display:block; color:var(--accent); margin-bottom:12px; }
  .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
  .card h3{ margin-bottom:8px; }
  .muted{ color:var(--text-muted); }
  .small{ font-size:var(--text-sm); }
  .hero{ display:grid; gap:32px; grid-template-columns:1fr; align-items:start; padding-block:56px 40px; }
  /* side by side, the try box runs the intro's full height */
  @media (min-width:60em){ .hero{ grid-template-columns:1.1fr 1fr; align-items:stretch; } }
  .hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

  /* ---------- forms ---------- */
  /* a fieldset is as wide as its widest content unless told otherwise, which pushes a phone's page sideways */
  fieldset{ min-width:0; margin:0; }
  form .field + .field, form .field + .check, form .check + .field{ margin-top:14px; }
  .field input, .field select, .field textarea{ font:inherit; min-height:var(--target); padding:0 var(--field-pad); border:1px solid var(--control-border);
    border-radius:var(--radius-md); background:var(--surface); color:var(--text); width:100%; }
  .field textarea{ padding:var(--field-pad); min-height:6rem; }
  .field .hint{ font-size:var(--text-3xs); color:var(--text-muted); }
  .field .error, .form-error{ font-size:var(--text-sm); color:var(--danger); }
  .row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); align-items:start; }
  /* fields side by side in a row start level: the space between stacked fields is for one above another, not beside */
  form .row > .field + .field{ margin-top:0; }
  .trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:20px; }

  /* ---------- the Companies House type-ahead ---------- */
  .typeahead{ position:absolute; top:100%; left:0; right:0; z-index:4; list-style:none; margin:4px 0 0; padding:4px; background:var(--surface);
    border:1px solid var(--control-border); border-radius:var(--radius-md); max-height:20rem; overflow:auto; box-shadow:0 8px 24px rgb(0 0 0 / .12); }
  .typeahead li{ padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--text-sm); }
  .typeahead li:hover, .typeahead li[aria-selected="true"]{ background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }

  /* ---------- the account's check-builder ---------- */
  .list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
  .added{ border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; background:var(--bg); display:grid; gap:8px; }
  .added__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  #people .added__head{ border-bottom:1px solid var(--border); padding:6px 0; }
  .total{ position:sticky; bottom:0; z-index:2; box-shadow:0 -6px 18px rgb(0 0 0 / .08); }
  .tabs a.tab{ text-decoration:none; padding:8px 12px; color:var(--text-muted); border:1px solid transparent; border-bottom:none; border-radius:var(--radius-md) var(--radius-md) 0 0; }
  .tabs a.tab[aria-selected="true"]{ border-color:var(--border); background:var(--surface); color:var(--text); margin-bottom:-1px; }

  /* ---------- the printable record ---------- */
  .record__head{ display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
  @media (min-width:48em){ .record__head{ grid-template-columns:1fr auto; } }
  .record__facts th{ width:9rem; }
  .record__seal{ text-align:center; border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px; background:#fff; color:#1F2933; }
  .record__seal svg{ display:block; margin:0 auto; width:148px; height:148px; }
  .record__seal .muted{ color:#52606D; }
  .record__code{ font:600 1.25rem var(--font-mono); letter-spacing:.08em; }

  /* ---------- the try box ---------- */
  .try{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:0 1px 0 var(--border); }
  .try > p{ margin-bottom:14px; }
  .try__result{ margin-top:16px; border-radius:var(--radius-md); padding:14px; border:1px solid var(--border); }
  .try__result[data-status="clear"]{ border-color:var(--success); }
  .try__result[data-status="review"]{ border-color:var(--warning); }
  .try__result[data-status="match"]{ border-color:var(--danger); }
  .status{ white-space:nowrap; overflow-wrap:normal; word-break:normal; display:inline-block; font:0.6875rem var(--font-mono); text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border-radius:var(--radius-full);
    color:var(--accent-contrast); background:var(--text-muted); }
  .status--clear{ background:var(--success); color:var(--success-contrast); }
  .status--review{ background:var(--warning); color:var(--warning-contrast); }
  .status--match{ background:var(--danger); color:var(--danger-contrast); }
  .status--notScreened, .status--choose{ background:var(--text-muted); }

  /* ---------- pricing ---------- */
  .ticks{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
  .ticks li{ display:flex; gap:10px; align-items:baseline; }
  .ticks li::before{ content:"✓"; color:var(--accent); font-weight:var(--weight-semibold); }
  .price{ font-size:var(--text-poster); line-height:1; letter-spacing:-.02em; font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums; }
  .price small{ font-size:var(--text-lg); color:var(--text-muted); letter-spacing:0; }
  table.plain{ border-collapse:collapse; width:100%; font-size:var(--text-sm); }
  table.plain th, table.plain td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
  table.plain th{ font:var(--weight-regular) 0.6875rem/1.4 var(--font-mono); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }

  /* ---------- the key, shown once ---------- */
  .key{ display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
  .key code{ flex:1 1 20rem; font:1rem var(--font-mono); padding:12px; border-radius:var(--radius-md); background:var(--code-bg); color:var(--code-text); border:1px solid var(--border); word-break:break-all; }
  /* re-screening's offer, under the pricing: the accent, full width */
  .banner{ display:flex; gap:12px 24px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:32px; padding:20px 24px;
    background:var(--accent); color:var(--accent-contrast); border-radius:var(--radius-lg); }
  .banner p{ margin:0; font-size:var(--text-lg); font-weight:var(--weight-semibold); }
  .banner small{ font-size:var(--text-sm); font-weight:var(--weight-regular); opacity:.85; }
  .callout{ border-left:4px solid var(--warning); background:color-mix(in srgb, var(--warning) 8%, var(--surface)); padding:12px 14px; border-radius:var(--radius-sm); }
  .callout--ok{ border-color:var(--success); background:color-mix(in srgb, var(--success) 8%, var(--surface)); }
  .callout--bad{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 8%, var(--surface)); }

  /* ---------- the docs ---------- */
  .docs{ display:grid; gap:32px; grid-template-columns:1fr; padding-block:32px; }
  @media (min-width:60em){ .docs{ grid-template-columns:14rem 1fr; } }
  /* a grid column grows to its widest code block unless told it may shrink: then the blocks scroll, not the page */
  .docs > *{ min-width:0; }
  .docs article{ overflow-wrap:anywhere; }
  .docs article pre{ overflow-wrap:normal; }
  .docs article table.plain{ display:block; overflow-x:auto; }
  /* the menu follows you down beside the text; on a narrow screen, where it sits above the text, it stays put */
  .docs__nav{ position:static; align-self:start; font-size:var(--text-sm); display:grid; gap:6px; }
  @media (min-width:60em){ .docs__nav{ position:sticky; top:calc(var(--chrome-all, var(--chrome)) + 16px); } }
  .docs__nav a{ color:var(--text-muted); text-decoration:none; }
  .docs__nav a:hover{ color:var(--accent); }
  .docs__nav a{ border-left:2px solid transparent; padding-left:8px; margin-left:-10px; }
  .docs__nav a.sub{ padding-left:24px; }
  .docs__nav a.sub::before{ content:"- "; }
  .docs__nav a[aria-current="location"]{ color:var(--accent); border-left-color:var(--accent); font-weight:var(--weight-semibold); }
  .docs article > * + *{ margin-top:12px; }
  /* each endpoint headed by its name, as the menu has it, with its method and path under it */
  .docs article h3.endpoint-title{ margin-top:40px; padding-top:16px; border-top:1px solid var(--border); font-size:var(--text-xl); }
  .docs article table.plain code, .docs article table.plain th{ white-space:nowrap; overflow-wrap:normal; }
  /* the help page: numbered steps, and questions that open */
  .steps{ display:grid; gap:8px; padding-left:1.4em; }
  .steps li::marker{ color:var(--accent); font-weight:var(--weight-semibold); }
  .faq{ display:grid; gap:8px; }
  .faq details{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
  .faq summary{ cursor:pointer; padding:12px 14px; font-weight:var(--weight-semibold); }
  .faq details[open] summary{ border-bottom:1px solid var(--border); }
  .faq details p{ padding:12px 14px; margin:0; }
  .help article h3{ margin-top:32px; }
  /* the step-by-steps as tiles: a numbered circle over the corner, the screen grab, what to do under it */
  .tiles{ list-style:none; padding:12px 0 0 12px; margin:0; display:grid; gap:32px 24px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); counter-reset:tile; }
  .tile{ position:relative; counter-increment:tile; display:grid; gap:10px; align-content:start; padding:14px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-lg); }
  .tile::before{ content:counter(tile); position:absolute; top:-14px; left:-14px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
    background:var(--accent); color:var(--accent-contrast, #fff); font-weight:var(--weight-semibold); box-shadow:0 0 0 4px var(--bg); }
  .tile p{ margin:0; font-size:var(--text-sm); }
  .tile__shot{ display:block; width:100%; aspect-ratio:4 / 3; padding:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
    background:var(--bg); cursor:zoom-in; min-height:0; }
  .tile__shot:hover, .tile__shot:focus-visible{ border-color:var(--accent); }
  .tile__shot img{ display:block; width:100%; height:100%; object-fit:contain; object-position:top center; }
  .shot--light{ display:none !important; }
  :root[data-theme="light"] .shot--light{ display:block !important; }
  :root[data-theme="light"] .shot--dark{ display:none !important; }
  /* a grab enlarged: as wide as the text, over a darkened page; a click or Escape closes it */
  .lightbox{ padding:0; border:none; background:transparent; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:auto; cursor:zoom-out; }
  .lightbox:focus, .lightbox:focus-visible{ outline:none; }
  .lightbox::backdrop{ background:rgb(8 12 16 / .8); }
  .lightbox img{ display:block; width:100%; height:auto; border-radius:var(--radius-md); box-shadow:0 24px 64px rgb(0 0 0 / .5); }

  /* the red count of screenings needing a decision (js/live.js) */
  .badge{ display:inline-block; min-width:1.4em; padding:1px 6px; margin-left:4px; border-radius:var(--radius-full); background:var(--danger);
    color:#fff; font:600 0.6875rem/1.4 var(--font-sans); text-align:center; vertical-align:1px; }
  .badge[hidden]{ display:none; }

  /* decisions on reviews, on the record's page */
  .decision-subject{ display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--border); }
  .decision{ display:grid; gap:8px; grid-template-columns:1fr; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); }
  @media (min-width:48em){ .decision{ grid-template-columns:1fr minmax(18rem, 26rem); align-items:start; } }
  .decision__form{ display:grid; gap:6px; }
  .decision__form input{ font-size:var(--text-sm); }

  /* which outside services an endpoint calls */
  .uses{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:var(--text-sm); }
  .uses__label{ font:0.6875rem/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
  .uses__item{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); font-size:var(--text-xs, .75rem); white-space:nowrap; }
  .uses__item--lists{ border-color:var(--accent); color:var(--accent); }
  .uses__item--ch{ border-color:var(--accent-2); color:var(--accent-2); }
  .uses__note{ flex-basis:100%; color:var(--text-muted); }
  .docs article .endpoint{ margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:var(--text-lg); }
  .docs article h2{ margin-top:40px; padding-top:8px; }
  .docs article h3{ margin-top:24px; }
  /* code as the console has it: the mono face on the code colours */
  pre{ font:var(--weight-regular) 0.875rem/1.5 var(--font-mono); background:var(--code-bg); color:var(--code-text); padding:14px 16px; border-radius:var(--radius-md); overflow-x:auto; border:1px solid var(--border); }
  code{ font-family:var(--font-mono); font-size:.92em; }
  :not(pre) > code{ background:var(--code-bg); color:var(--code-text); padding:1px 5px; border-radius:var(--radius-sm); }
  .tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-top:16px; }
  .tabs button{ border:1px solid transparent; border-bottom:none; background:none; padding:8px 12px; border-radius:var(--radius-md) var(--radius-md) 0 0;
    font:inherit; font-size:var(--text-sm); color:var(--text-muted); cursor:pointer; min-height:auto; }
  .tabs button[aria-selected="true"]{ border-color:var(--border); background:var(--surface); color:var(--text); margin-bottom:-1px; }
  .tab-panel{ margin-top:0 !important; }
  .tab-panel pre{ border-top-left-radius:0; }
  .method{ display:inline-block; font:var(--weight-semibold) 0.6875rem var(--font-mono); letter-spacing:.06em; padding:2px 6px; border-radius:var(--radius-sm);
    background:var(--accent); color:var(--accent-contrast); margin-right:6px; vertical-align:middle; }
  .method--get{ background:var(--accent-2); color:var(--accent-2-contrast); }

  /* ---------- a file dropped: the drop area, the modal that reads and maps it, and verify's own drop area ---------- */
  .dropzone{ display:grid; justify-items:center; gap:6px; text-align:center; padding:40px 16px; border:2px dashed var(--border-strong, var(--border));
    border-radius:var(--radius-lg); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s; }
  .dropzone svg{ color:var(--accent); }
  .dropzone .link{ color:var(--accent); text-decoration:underline; }
  .dropzone:hover, .dropzone:focus-within, .dropzone.is-over{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  .table-scroll{ overflow-x:auto; max-width:100%; }
  table.files td:last-child{ text-align:right; white-space:nowrap; }
  .bad{ color:var(--danger); }
  .modal{ border:none; padding:0; overflow:auto; border-radius:var(--radius-lg); background:var(--surface); color:var(--text); width:min(64rem, calc(100vw - 32px));
    max-height:calc(100dvh - 32px); box-shadow:0 24px 64px rgb(0 0 0 / .3); }
  .modal::backdrop{ background:rgb(15 23 32 / .55); }
  .modal__body{ padding:20px; display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); }
  .modal__body > *, .modal .row > *{ min-width:0; }
  .modal [hidden]{ display:none !important; }
  .modal section{ padding-block:0; border-top:none; }
  @media (max-width:40em){ .modal{ width:calc(100vw - 16px); max-height:calc(100dvh - 16px); } .modal__body{ padding:16px; } }
  .modal__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .modal .total{ position:static; box-shadow:none; }
  .spinner{ width:36px; height:36px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){ .spinner{ animation-duration:2.4s; } }
  .map-scroll{ border:1px solid var(--border); border-radius:var(--radius-md); max-height:22rem; overflow:auto; }
  table.map{ border-collapse:collapse; font-size:var(--text-sm); min-width:100%; }
  table.map th, table.map td{ padding:6px 10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; max-width:16rem; overflow:hidden; text-overflow:ellipsis; }
  table.map thead th{ position:sticky; top:0; background:var(--surface); z-index:1; padding:8px; }
  table.map thead select{ min-width:9rem; font-size:var(--text-sm); }
  table.map th.n, table.map td.n{ color:var(--text-muted); font:0.75rem var(--font-mono); text-align:right; }
  table.map tr.is-heading td{ font-weight:var(--weight-semibold); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  table.map tr.is-above td{ color:var(--text-muted); text-decoration:line-through; }
  table.map td.is-used{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
  .counts{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:0; padding:0; list-style:none; }
  .counts strong{ font-size:var(--text-lg); font-variant-numeric:tabular-nums; }
  .progress{ height:10px; border-radius:999px; background:var(--border); overflow:hidden; }
  .progress span{ display:block; height:100%; width:0; background:var(--accent); transition:width .4s; }
}


/* printing a record: the page's own chrome left off, light colours whatever the screen's theme, and the record whole */
@media print {
  :root{ color-scheme:light; --bg:#FFFFFF; --surface:#FFFFFF; --text:#1F2933; --text-muted:#52606D; --border:#CBD2D9; --code-bg:#E9EEF2; --code-text:#1F2933; }
  .site-header, .site-footer, .no-print, .skip, .user-bar, .decision__form{ display:none !important; }
  body{ background:#fff; color:#1F2933; }
  .record{ padding:0 !important; max-width:none !important; }
  .card{ border:none; padding:0; box-shadow:none; }
  a{ color:inherit; text-decoration:none; }
  .status{ border:1px solid currentColor; }
  tr, .record__seal{ break-inside:avoid; }
}