/* ==========================================================================
   White Rabbit Group — Internal Tools UI Kit
   Shared stylesheet. Pure CSS, no JavaScript, no dependencies.

   Contents
   01. Fonts
   02. Tokens
   03. Reset & base
   04. App shell (sidebar + elevated main pane)
   05. Sidebar
   06. Topbar & page head
   07. Buttons
   08. Cards & widgets
   09. Charts (CSS bars, inline SVG helpers, donut)
   10. Lists (activity, approvals, calendar)
   11. Tables
   12. Forms
   13. Feedback (pills, alerts, tags, empty state)
   14. Tool hub
   15. Login
   16. Utilities
   18. Overlays (modal, drawer, sheet, palette, toast, tooltip, popover, loader)
   19. Responsive
   ========================================================================== */

/* 01. Fonts ============================================================== */
/**
 * F37 Bolton — the licensed faces, from the WRG design system.
 *
 * Was `F37BoltonTrial-*`, six trial files, embedded in every report we send to
 * a client. Replaced 28 Sep 2026 with the faces the design system ships.
 *
 * ## The 700 slot has no upright face
 *
 * The design system carries Thin 100 through SuperBold 900 and an italic at
 * most weights, but there is NO upright Bold: it has `BoldItalic` at 700 and
 * nothing beside it. This stylesheet asks for weight 700 in 43 places.
 *
 * So 700 is pointed at ExtraBold here, deliberately and visibly, rather than
 * left to the browser. Unmapped, CSS font matching would reach for the same
 * file anyway — for a requested weight above 500 it searches upwards first —
 * and would do it silently, which is the version nobody notices is happening.
 * The result is a little heavier than the trial Bold it replaces.
 *
 * If WRG licensed an upright Bold, it belongs in the design system and then
 * here; this mapping is the workaround, not the intent.
 *
 * Weight 600 appears in this file too and has never had a face. It matches
 * ExtraBold by the same rule.
 */
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-Book.otf") format("opentype");font-weight:350;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
/* No upright Bold in the design system — see above. */
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-ExtraBold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37Bolton-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

/* IBM Plex Mono and JetBrains Mono — the design system's two monospace faces.
 *
 * Plex is the "chrome" face: uppercase eyebrows, labels, table headers. JetBrains
 * is the figures face: scores, stat tiles, table numbers, button labels. Both
 * SIL Open Font License (licences beside the files), self-hosted rather than
 * loaded from Google Fonts: the client report is opened by clients from a share
 * link, and loading it should not tell a third party who opened it. It also
 * keeps print-to-PDF working with no network. Latin subset, 400 and 500 only —
 * nothing in the app asks for another weight in mono. */
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* 02. Tokens =============================================================
   The WRG design system, for the whole app since 29 Sep 2026.

   This block was a `.pm { … }` override for one view until then (scope:
   change-pm-view-design-system). It was written to be promoted here, and was:
   the ramp and radii are the system's values verbatim, and the SEMANTIC names
   below are the ones every rule in both stylesheets already read.

   Near-monochrome by design. Red is the ONE accent — dots, rules, one
   highlighted figure — never a large fill, never body text (3.38:1 on white),
   never a button. States are told apart by fill, outline and dash, and always
   carry their word, so nothing depends on colour alone (scope Q1).
   ======================================================================== */
:root{
  /* the system's black ramp, verbatim (black-650 is an alias of 850 there) */
  --black-950:#080807; --black-850:#272725; --black-750:#41413f; --black-550:#5a5a58;
  --black-350:#a8a8a4; --black-250:#c2c1bd; --black-150:#dadad7; --black-050:#f3f3f2;
  --mono-label-grey:#8d8d8b;
  --rabbit-white:#fafaf9;
  --white:#ffffff;
  --red:#fa4c4f;

  /* Legacy names, still read by rules in both files. Pointed at the ramp
     rather than find-and-replaced, so no rule had to be rewritten to change
     colour. `--wrg-black` is the system's darkest, never #000: pure black on
     #080807 reads as a rendering fault. */
  --wrg-white:var(--white);
  --wrg-grey-100:var(--black-050);
  --wrg-grey-200:var(--black-150);
  --wrg-grey-400:var(--black-350);
  --wrg-grey-500:var(--black-550);
  --wrg-grey-700:var(--black-750);
  --wrg-grey-900:var(--black-950);
  --wrg-black:var(--black-950);
  --wrg-red:var(--red);
  --wrg-red-dark:var(--red);
  --wrg-red-soft:var(--black-050);

  /* Status. There is no green, amber or blue in the system and, since Q1, none
     here. The names survive because 28 rules read them; the values say what
     each meaning looks like now. "Good" is plain ink on a hairline, "partial"
     and "info" are mid-grey on a tint, "bad" is the one place red appears —
     as a dot or rule beside black, never as the text. */
  --ok:var(--black-950);    --ok-soft:var(--white);
  --warn:var(--black-750);  --warn-soft:var(--black-050);
  --info:var(--black-750);  --info-soft:var(--black-050);
  /* Named for the meaning, not the hue, so a theme can move the accent without
     taking the failure colour with it. */
  --bad:var(--red);
  --bad-soft:var(--black-050);
  --bad-text:var(--black-950);

  /* semantic — override these for themes */
  --bg-shell:var(--black-950);
  /* Sidebar only. Deliberately NOT --bg-shell: that is also the <body> and the
     login page background, so changing it would move three surfaces at once. */
  --bg-sidebar:var(--black-950);
  --bg-app:var(--rabbit-white);
  --bg-surface:var(--white);
  --bg-subtle:var(--black-050);
  --bg-hover:var(--black-050);
  /* Two hairlines: the light one divides rows inside a card, the dark one
     outlines the card itself — the system's "Black 750 on light". */
  --border:var(--black-150);
  --border-strong:var(--black-350);
  --border-card:var(--black-750);
  --line:var(--border);
  --text:var(--black-950);
  --text-muted:var(--black-750);
  /* black-550, not mono-label-grey: the label grey is 3.3:1 on white and this
     token carries 11–12px text. */
  --text-faint:var(--black-550);
  --text-invert:var(--rabbit-white);
  --accent:var(--red);
  /* Same colour as --accent, as raw channels. Exists because rgba() cannot take
     a hex var — without it every translucent accent has to hard-code the red
     and silently stops tracking it. */
  --accent-rgb:250,76,79;
  --accent-hover:var(--red);

  /* sidebar, on black-950 */
  --side-text:var(--black-250);
  --side-muted:var(--black-350);
  --side-hover:var(--black-850);
  --side-active:var(--black-850);
  --side-rule:var(--black-750);

  /* type — the system's three families */
  --font-display:"F37 Bolton",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-label:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-num:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-mono:var(--font-num);
  --tracking-label:0.08em;

  /* shape: the system's card 10, badge 11, pill 999. No shadows at all — the
     system has none, and a card is a flat fill with a 1px hairline. The names
     stay so the rules that read them resolve to nothing rather than break. */
  --r-sm:10px; --r:10px; --r-lg:11px; --r-pill:999px;
  --sh-1:none; --sh-2:none; --sh-3:none; --sh-pane:none;
  --ring:none;
  --transition-standard:.3s ease-in-out;
  --ease-reveal:cubic-bezier(.22,1,.36,1);

  /* rhythm */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;
  --gutter:60px;
  --side-w:256px;
}
/* Dark theme stub — uncomment & fill when needed.
[data-theme="dark"]{ --bg-app:var(--black-950); --bg-surface:var(--black-850); --bg-subtle:var(--black-850);
  --border:var(--black-750); --text:var(--rabbit-white); --text-muted:var(--black-350); --bg-hover:var(--black-850); } */

/* 03. Reset & base ======================================================= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-display);
  font-size:15px;line-height:1.5;color:var(--text);
  background:var(--bg-shell);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
img{max-width:100%}
/* No upright Bold exists in the design system (see 01), and its display type is
   set light. Headings and inline bold take Medium; the few places that want
   weight get it from size instead. */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;line-height:1.25}
b,strong{font-weight:500}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 04. App shell ==========================================================
   Dark shell colour on <body>; the sidebar sits flat on it and the main
   pane sits beside it, flat. The system has no shadows, so the pane's old
   rounded edge and cast shadow went with them.
   ======================================================================== */
.app{display:flex;min-height:100vh}
.app__main{
  flex:1;min-width:0;position:relative;z-index:1;
  background:var(--bg-app);
  display:flex;flex-direction:column;
}
.app__body{padding:48px var(--gutter) 60px;flex:1}

/* 05. Sidebar ============================================================ */
.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--bg-sidebar);color:var(--side-text);
  display:flex;flex-direction:column;
  padding:28px 20px 24px;
  position:sticky;top:0;height:100vh;
}
.sidebar__brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px;
  /* The brand is an <a>, so it picked up the global `a` rules: accent colour at
     rest and accent-hover + underline on hover. A logo that changes colour on
     hover reads as a broken link, not an affordance. Neutralised in BOTH states
     — setting only :hover would have made hovered and un-hovered differ, which
     is the same bug the other way round. `inherit` takes the sidebar's own text
     colour rather than re-stating a literal here. */
  color:inherit;text-decoration:none}
.sidebar__brand:hover,.sidebar__brand:focus-visible,.sidebar__brand:active{
  color:inherit;text-decoration:none}
.sidebar__brand:hover .sidebar__mark{background:none}
.sidebar__mark{width:26px;height:30px;flex:none;display:grid;place-items:center}
.sidebar__mark svg{width:26px;height:30px}
.sidebar__name{display:block;color:var(--rabbit-white);font-weight:500;font-size:17px;letter-spacing:-.01em}
.sidebar__sub{display:block;margin-top:3px;font-size:10px;color:var(--side-muted);font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase}
.sidebar__scroll{flex:1;overflow-y:auto;overflow-x:hidden;margin-right:-4px;padding-right:4px}
.sidebar__scroll::-webkit-scrollbar{width:6px}
.sidebar__scroll::-webkit-scrollbar-thumb{background:var(--black-750);border-radius:3px}

.nav-group{margin-bottom:28px}
.nav-group__label{font-size:11px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--side-muted);padding:0 12px;margin-bottom:8px}
.nav{display:flex;flex-direction:column;gap:6px}
.nav__link{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r);
  font-size:15px;color:var(--side-text);transition:background .2s ease-in-out,color .2s ease-in-out;
}
.nav__link:hover{background:var(--side-hover);color:var(--rabbit-white);text-decoration:none}
.nav__link.is-active{background:var(--side-active);color:var(--rabbit-white);font-weight:400}
/* The one red on the sidebar: a dot marking where you are. It replaced a 2px
   red inset rail, because the system has no coloured borders. */
.nav__link.is-active::after{content:"";width:6px;height:6px;flex:none;border-radius:var(--r-pill);
  background:var(--red)}
.nav__icon{width:18px;height:18px;flex:none;opacity:.9;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.nav__link.is-active .nav__icon{opacity:1}
.nav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__badge{min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--rabbit-white);color:var(--black-950);font-size:11.5px;font-family:var(--font-num);
  display:inline-flex;align-items:center;justify-content:center}
.nav__badge--quiet{background:var(--black-850);color:var(--side-text);font-weight:400}
.nav__badge--dot{min-width:7px;width:7px;height:7px;padding:0}
.nav__tag{font-size:10px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:2px 5px;border-radius:4px;background:var(--black-850);color:var(--rabbit-white)}

/* collapsible group (pure CSS, <details>) */
.nav-sub{margin:1px 0 0 26px;display:flex;flex-direction:column;gap:1px;
  border-left:1px solid var(--side-rule);padding-left:8px}
.nav-sub .nav__link{font-size:13.5px;padding:6px 8px;color:var(--side-muted)}
.nav-sub .nav__link:hover{color:var(--wrg-white)}
details.nav-fold>summary{list-style:none;cursor:pointer}
details.nav-fold>summary::-webkit-details-marker{display:none}
.nav__caret{width:12px;height:12px;flex:none;opacity:.5;transition:transform .15s;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
details.nav-fold[open] .nav__caret{transform:rotate(90deg)}

.sidebar__cta{margin:0 0 28px;display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--rabbit-white);
  color:var(--black-950);font-size:13px;font-family:var(--font-num);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;border:1px solid var(--rabbit-white);cursor:pointer;width:100%;
  transition:background .2s ease-in-out}
.sidebar__cta:hover{background:var(--white)}
.sidebar__kbd{margin-left:auto;font-size:11px;padding:1px 6px;border-radius:4px;
  border:1px solid var(--black-250);color:var(--black-550);text-transform:none}

.sidebar__foot{margin-top:auto;padding:16px 0 0 8px;border-top:1px solid var(--side-rule);
  display:flex;align-items:center;gap:12px}
.sidebar__foot .avatar{background:var(--black-850);border:1px solid var(--black-550)}
.sidebar__user{min-width:0}
.sidebar__user b{display:block;color:var(--rabbit-white);font-size:14px;font-weight:500}
.sidebar__user span{display:block;font-size:12px;color:var(--side-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__gear{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--side-text);background:none;border:0;cursor:pointer;
  list-style:none}
.sidebar__gear::-webkit-details-marker{display:none}
.sidebar__gear:hover{background:var(--side-hover);color:var(--rabbit-white)}

/* account popup — CSS-only, opens upward from the sidebar footer */
.menu{position:relative;margin-left:auto}
.menu[open] .sidebar__gear{background:var(--side-hover);color:var(--rabbit-white)}
.menu__pop{position:absolute;bottom:calc(100% + 8px);right:-4px;z-index:50;
  min-width:200px;padding:6px;background:var(--bg-surface);border:1px solid var(--border-card);
  border-radius:var(--r);display:flex;flex-direction:column;gap:2px}
.menu__item{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 12px;border-radius:var(--r);
  font-size:14px;color:var(--text);white-space:nowrap}
.menu__item:hover{background:var(--bg-subtle);color:var(--text);text-decoration:none}
.menu__item .icon{width:15px;height:15px;opacity:.65;flex:none}
.menu__item--danger{color:var(--text)}
.menu__item--danger:hover{background:var(--bg-subtle);color:var(--text)}
.menu__sep{height:1px;background:var(--border);margin:4px 2px}

/* 06. Topbar & page head ================================================= */
.topbar{display:flex;align-items:center;gap:32px;padding:0 var(--gutter);
  height:64px;flex:none;border-bottom:1px solid var(--border);background:var(--bg-surface)}
.topbar__tabs{display:flex;gap:28px;height:100%;align-items:stretch}
.tab{display:flex;align-items:center;white-space:nowrap;font-size:15px;color:var(--text-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 1px}
.tab:hover{color:var(--text);text-decoration:none}
.tab.is-active{color:var(--text);font-weight:500;border-bottom-color:var(--black-950)}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.crumbs{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-muted)}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-current]{color:var(--text)}

.page-head{display:flex;align-items:flex-end;gap:40px;margin-bottom:32px}
.page-head__title{font-size:clamp(40px,4.4vw,64px);font-weight:300;line-height:1;
  letter-spacing:-.04em;text-wrap:balance}
/* Where you are, in the system's mono chrome: "Workspace / Scans". */
.page-head__eyebrow{display:block;margin-bottom:14px;font-size:12px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.page-head__sub{color:var(--text-muted);font-size:17px;line-height:1.5;margin-top:14px;max-width:64ch;text-wrap:pretty}
.page-head__actions{margin-left:auto;display:flex;gap:var(--sp-2);flex:none;align-items:center}

/* burger — only visible on small screens (see §17) */
.burger{display:none;width:44px;height:44px;border:1px solid var(--border);background:var(--bg-surface);
  border-radius:var(--r-pill);place-items:center;cursor:pointer;color:var(--text)}

/* 07. Buttons ============================================================
   Pills with a mono uppercase label, as the system draws them. Primary is
   BLACK: the system never puts red behind a button, and white on red is
   3.38:1. --dark is the same fill, kept as a name. --outline / --ghost for
   secondary; --danger is outlined in red and fills black on hover.
   ======================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;font-size:12.5px;font-family:var(--font-num);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:0 20px;border-radius:var(--r-pill);
  border:1px solid transparent;background:none;color:var(--text);cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:background .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}
.btn:hover{text-decoration:none}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter}
.btn--primary{background:var(--black-950);border-color:var(--black-950);color:var(--rabbit-white)}
.btn--primary:hover{background:var(--black-850);border-color:var(--black-850);color:var(--rabbit-white)}
.btn--dark{background:var(--black-950);border-color:var(--black-950);color:var(--rabbit-white)}
.btn--dark:hover{background:var(--black-850);border-color:var(--black-850);color:var(--rabbit-white)}
.btn--outline{background:transparent;border-color:var(--border-card);color:var(--text)}
.btn--outline:hover{border-color:var(--black-950);background:var(--bg-subtle)}
.btn--ghost{color:var(--text)}
.btn--ghost:hover{background:var(--bg-subtle);color:var(--text)}
.btn--danger{background:transparent;border-color:var(--red);color:var(--text)}
.btn--danger:hover{background:var(--black-950);border-color:var(--black-950);color:var(--rabbit-white)}
.btn--sm{min-height:36px;padding:0 14px;font-size:11.5px}
.btn--lg{min-height:52px;padding:0 26px;font-size:13.5px}
.btn--block{width:100%}
.btn--icon{padding:0;width:44px;height:44px;flex:none}
.btn--icon.btn--sm{width:36px;height:36px}
.btn:disabled,.btn.is-disabled{opacity:.42;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}

/* 08. Cards & widgets ==================================================== */
.card{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--r)}
.card__head{display:flex;align-items:baseline;gap:var(--sp-3);padding:18px 24px;
  border-bottom:1px solid var(--border)}
.card__title{font-size:19px;font-weight:400;letter-spacing:-.02em}
.card__meta{font-size:11px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.card__tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.card__body{padding:24px}
.card__body--flush{padding:0}
.card__foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;
  align-items:center;gap:var(--sp-2);font-size:13px;line-height:1.5;color:var(--text-muted)}

.grid{display:grid;gap:20px;margin-bottom:20px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.grid--side{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.stack{display:flex;flex-direction:column;gap:20px}

/* KPI */
.kpi{padding:24px}
.kpi__label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase}
.kpi__row{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.kpi__value{font-family:var(--font-num);font-size:48px;font-weight:400;letter-spacing:-.035em;line-height:1}
.kpi__unit{font-size:14px;color:var(--text-muted)}
.kpi__delta{font-size:13px;display:inline-flex;align-items:center;gap:3px}
.kpi__delta--up{color:var(--text)}
.kpi__delta--down{color:var(--text)}
.kpi__delta--flat{color:var(--text-muted)}
/* The accent KPI is the one black tile on the dashboard, with its figure in
   red: red on black-950 is 5.93:1, so there the colour can carry a number. */
.kpi--accent{background:var(--black-950);border-color:var(--black-950);color:var(--rabbit-white)}
.kpi--accent .kpi__label{color:var(--black-250)}
.kpi--accent .kpi__label::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--red)}
.kpi--accent .kpi__value{color:var(--red)}
.kpi--accent .kpi__unit{color:var(--black-350)}
.kpi__spark{margin-top:10px;height:30px;width:100%}
.kpi__spark path{fill:none;stroke:var(--wrg-grey-900);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kpi__spark .fill{fill:var(--black-050);stroke:none}
.kpi--accent .kpi__spark path{stroke:var(--accent)}
.kpi--accent .kpi__spark .fill{fill:rgba(var(--accent-rgb),.1)}

/* ticker meter (the little hatched gauge) */
.meter{margin-top:12px;height:26px;position:relative}
.meter__ticks{display:flex;gap:2px;align-items:flex-end;height:12px}
.meter__ticks i{flex:1;height:100%;background:var(--wrg-grey-200);border-radius:1px}
.meter__ticks i.on{background:var(--wrg-grey-900)}
.meter__ticks i.hot{background:var(--accent)}
.meter__caret{position:absolute;top:-6px;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid var(--wrg-grey-900)}

/* 09. Charts ============================================================= */
/* cards in a row stretch; body grows so charts fill the card */
.grid>.card{display:flex;flex-direction:column}
.grid>.card>.card__body{flex:1;display:flex;flex-direction:column;justify-content:center}

.bars{display:flex;align-items:flex-end;gap:10px;height:270px;flex:1;min-height:230px}
.bars__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:7px;height:100%}
.bars__stack{width:100%;max-width:34px;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;gap:2px}
.bars__seg{border-radius:3px;background:var(--wrg-grey-900)}
.bars__seg--2{background:var(--wrg-grey-200)}
.bars__seg--accent{background:var(--accent)}
.bars__label{font-size:11.5px;color:var(--text-muted)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--text-muted)}
.legend span{white-space:nowrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}

.area{width:100%;height:250px;display:block;overflow:visible}
.area .grid-line{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.area .series{fill:none;stroke:var(--wrg-grey-900);stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.area .series--accent{stroke:var(--accent)}
.area .series--dash{stroke:var(--wrg-grey-400);stroke-dasharray:4 4}
.area .band{fill:url(#wrgFade)}
.axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);
  margin-top:6px}

.donut{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}
.donut__svg{width:168px;height:168px;flex:none;transform:rotate(-90deg)}
.donut__svg circle{fill:none;stroke-width:10.5;stroke-linecap:butt}
.donut__center{position:absolute;text-align:center;padding:8px}
.donut__wrap{position:relative;display:grid;place-items:center;flex:none}
.donut__num{font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.donut__cap{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.09em;margin-top:3px}
.donut__key{display:flex;flex-direction:column;gap:12px;font-size:13px;min-width:0;flex:1}
.donut__key div{display:flex;align-items:center;gap:8px}
.donut__key i{width:8px;height:8px;border-radius:2px;flex:none}
.donut__key b{margin-left:auto;font-weight:500}

.progress{display:flex;flex-direction:column;gap:18px}
.progress__row{display:grid;gap:8px}
.progress__meta{display:flex;justify-content:space-between;font-size:15px}
.progress__meta b{font-family:var(--font-num);font-weight:400}
.progress__track{height:6px;background:var(--black-050);border-radius:var(--r-pill);overflow:hidden}
.progress__fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--black-950)}
.progress__fill--accent{background:var(--accent)}
.progress__fill--mid{background:var(--black-550)}

/* 10. Lists ============================================================== */
.feed{display:flex;flex-direction:column}
.feed__item{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}
.feed__item:last-child{border-bottom:0}
.feed__dot{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bg-subtle);color:var(--text-muted)}
.feed__dot svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.feed__dot--accent{background:var(--black-950);color:var(--red)}
.feed__body{min-width:0;flex:1}
.feed__text{display:block;font-size:13.5px;text-wrap:pretty}
.feed__text b{font-weight:500}
.feed__time{display:block;font-size:12px;color:var(--text-faint);margin-top:2px}

.approvals{display:flex;flex-direction:column}
.approval{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}
.approval:last-child{border-bottom:0}
.approval__body{min-width:0;flex:1}
.approval__title{display:block;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.approval__meta{display:block;font-size:12px;color:var(--text-muted)}
.approval__act{display:flex;gap:6px;flex:none}

.agenda{display:flex;flex-direction:column}
.agenda__day{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.agenda__day:last-child{border-bottom:0}
.agenda__date{flex:none;width:38px;text-align:center}
.agenda__date b{display:block;font-size:17px;line-height:1.1}
.agenda__date span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
.agenda__items{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.agenda__item{font-size:13px;padding-left:9px;border-left:2px solid var(--wrg-grey-200)}
.agenda__item--accent{border-left-color:var(--accent)}
.agenda__item span{display:block;color:var(--text-muted);font-size:12px}

/* mini calendar */
.cal{padding:12px 16px 16px}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal__month{font-size:13.5px;font-weight:500}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal__grid span{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px}
.cal__grid a{font-size:12.5px;color:var(--text);aspect-ratio:1;display:grid;place-items:center;
  border-radius:var(--r-sm);position:relative}
.cal__grid a:hover{background:var(--bg-subtle);text-decoration:none}
.cal__grid a.is-out{color:var(--text-faint)}
.cal__grid a.is-today{background:var(--black-950);color:var(--rabbit-white);font-weight:500}
.cal__grid a.has-dot::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;
  border-radius:50%;background:var(--accent)}
.cal__grid a.is-today.has-dot::after{background:var(--rabbit-white)}

/* 11. Tables ============================================================= */
.table-wrap{width:100%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:820px}
.table thead th{position:sticky;top:0;background:var(--bg-subtle);z-index:2;
  text-align:left;font-size:11px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
.table thead th a{color:inherit;display:inline-flex;align-items:center;gap:4px}
.table thead th a:hover{color:var(--text);text-decoration:none}
.table thead th svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.table tbody td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:15px;
  vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
/* The first and last columns line up with the card's own 24px padding. */
.table thead th:first-child,.table tbody td:first-child{padding-left:24px}
.table thead th:last-child,.table tbody td:last-child{padding-right:24px}
.table tbody tr:hover{background:var(--bg-hover)}
.table tbody tr.is-selected{background:var(--bg-subtle)}
.table .col-check{width:38px}
.table .col-act{width:56px;text-align:right}
.table .num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.cell-strong{font-weight:500}
.cell-muted{color:var(--text-muted);font-size:13.5px}
.cell-user{display:flex;align-items:center;gap:8px;min-width:0}
.cell-stackn{min-width:0}
.cell-stackn b{display:block;font-weight:500;margin-bottom:2px}

.avatar{width:28px;height:28px;border-radius:50%;flex:none;display:inline-grid;place-items:center;
  background:var(--black-850);color:var(--rabbit-white);font-size:11px;font-family:var(--font-label)}
.avatar--lg{width:36px;height:36px;font-size:12px}
.avatar--soft{background:var(--black-150);color:var(--text-muted)}

.toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:16px 24px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.toolbar__title{font-size:17px;font-weight:400;letter-spacing:-.01em}
.toolbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}

.pagination{display:flex;align-items:center;gap:4px;margin-left:auto}
.pagination a,.pagination span{min-width:26px;height:26px;padding:0 7px;display:inline-grid;
  place-items:center;border-radius:var(--r-sm);font-size:13px;color:var(--text-muted)}
.pagination a:hover{background:var(--bg-subtle);color:var(--text);text-decoration:none}
.pagination a.is-active{background:var(--black-950);color:var(--rabbit-white);font-weight:500}

/* floating bulk-action bar */
.bulkbar{position:sticky;bottom:16px;margin:14px auto 0;width:max-content;
  display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:var(--r-pill);
  background:var(--black-950);color:var(--rabbit-white);z-index:5}
.bulkbar__count{font-size:13px;padding:0 10px 0 6px;color:rgba(255,255,255,.85)}
.bulkbar__count b{font-weight:500;color:var(--text-invert)}
.bulkbar__sep{width:1px;height:18px;background:rgba(255,255,255,.18);margin:0 4px}
.bulkbar button{width:28px;height:28px;display:grid;place-items:center;border:0;background:none;
  color:rgba(255,255,255,.8);border-radius:50%;cursor:pointer}
.bulkbar button:hover{background:rgba(255,255,255,.12);color:var(--text-invert)}
.bulkbar button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bulkbar__x{background:var(--black-850) !important;color:var(--rabbit-white) !important;margin-right:4px}

/* 12. Forms ============================================================== */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.label{font-size:14px;font-weight:500;display:flex;align-items:center;gap:5px}
.label .req{color:var(--text)}
.hint{font-size:13px;line-height:1.5;color:var(--text-muted)}
.err{font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px}
.ok-msg{font-size:13px;color:var(--text)}

.input,.select,.textarea{
  width:100%;min-height:44px;font-size:15px;padding:10px 14px;background:var(--bg-surface);
  border:1px solid var(--border-card);border-radius:var(--r);color:var(--text);
  transition:border-color .2s ease-in-out}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--black-950)}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--text);outline-offset:1px;border-color:var(--black-950)}
.textarea{min-height:84px;resize:vertical}
.select{appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:13px}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--bg-subtle);
  color:var(--text-faint);cursor:not-allowed}
.field.is-error .input,.field.is-error .select,.field.is-error .textarea{border-color:var(--red)}
.field.is-success .input{border-color:var(--black-950)}
.input-group{display:flex;align-items:stretch}
.input-group .input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.input-group__addon{display:grid;place-items:center;padding:0 10px;font-size:13px;
  color:var(--text-muted);background:var(--bg-subtle);border:1px solid var(--border);
  border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
.input-icon{position:relative;display:block}
.input-icon svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  stroke:var(--text-muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none}
.input-icon .input{padding-left:29px}

/* checkbox / radio */
.choice{display:inline-flex;align-items:flex-start;gap:12px;font-size:15px;cursor:pointer}
.choice input{appearance:none;width:18px;height:18px;flex:none;margin-top:1px;
  border:1px solid var(--border-card);background:var(--bg-surface);border-radius:4px;
  cursor:pointer;position:relative;transition:background .12s,border-color .12s}
.choice input[type="radio"]{border-radius:50%}
.choice input:hover{border-color:var(--black-950)}
.choice input:checked{background:var(--black-950);border-color:var(--black-950)}
.choice input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(43deg)}
.choice input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:var(--white)}
.choice input:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.choice input:disabled{background:var(--bg-subtle);border-color:var(--border);cursor:not-allowed}
.choice input:disabled+span{color:var(--text-faint)}
.choice span small{display:block;margin-top:3px;color:var(--text-muted);font-size:13px;line-height:1.45}
.choice-list{display:flex;flex-direction:column;gap:8px}
.choice-row{display:flex;flex-wrap:wrap;gap:16px}

/* toggle switch */
.switch{display:flex;align-items:center;gap:16px;cursor:pointer;font-size:15px}
.switch input{appearance:none;width:44px;height:24px;flex:none;border-radius:var(--r-pill);
  background:var(--black-250);position:relative;cursor:pointer;transition:background .2s ease-in-out}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:var(--white);transition:transform .2s ease-in-out}
.switch input:checked{background:var(--black-950)}
.switch input:checked::after{transform:translateX(20px)}
.switch input:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.switch input:disabled{opacity:.45;cursor:not-allowed}
.switch__text{min-width:0}
.switch__text b{display:block;font-weight:500}
.switch__text small{display:block;margin-top:3px;color:var(--text-muted);font-size:13px;line-height:1.45}
.switch-list{display:flex;flex-direction:column;gap:12px}
.switch--right{width:100%}
.switch--right input{order:2;margin-left:auto}

/* segmented control (CSS-only, radio driven) */
.seg{display:inline-flex;gap:4px;background:transparent;border:1px solid var(--border-card);
  border-radius:var(--r-pill);padding:4px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:focus-visible+label{outline:2px solid var(--text);outline-offset:2px}
.seg label{font-size:14px;min-height:36px;display:inline-flex;align-items:center;padding:0 18px;
  border-radius:var(--r-pill);cursor:pointer;color:var(--text)}
.seg input:checked+label{background:var(--black-950);color:var(--rabbit-white);font-weight:400}

/* file drop */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;
  border:1px dashed var(--border-strong);border-radius:var(--r);background:var(--bg-subtle);
  text-align:center;cursor:pointer}
.dropzone:hover{border-color:var(--black-950);background:var(--bg-subtle)}
.dropzone svg{width:20px;height:20px;stroke:var(--text-muted);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.dropzone b{font-size:13.5px;font-weight:500}
.dropzone small{font-size:12px;color:var(--text-muted)}
.filerow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);
  font-size:14px}
.filerow__ico{width:28px;height:28px;border-radius:var(--r-pill);background:var(--bg-subtle);display:grid;
  place-items:center;font-size:12px;color:var(--text)}
.filerow__bar{flex:1;height:4px;background:var(--wrg-grey-100);border-radius:2px;overflow:hidden}
.filerow__bar i{display:block;height:100%;background:var(--black-950)}

.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp-2);padding-top:4px;
  border-top:1px solid var(--border);margin-top:2px;padding-top:14px}
.form-foot .spacer{flex:1}
.fieldset{display:grid;gap:12px}
.fieldset__legend{font-size:13.5px;font-weight:500;padding-bottom:2px}

/* 13. Feedback ===========================================================
   Monochrome states (scope Q1). Every pill keeps a dot and a word; the fill
   and the outline say how serious, and red appears only as the dot on the
   worst state, beside black. Nothing is told apart by hue alone. */
.pill{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:400;white-space:nowrap;border:1px solid var(--border-card);color:var(--text)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--black-550);flex:none}
.pill--ok{background:transparent;border-color:var(--black-250);color:var(--text-muted)}
.pill--warn{background:transparent;border-color:var(--border-card);color:var(--text)}
.pill--info{background:transparent;border-color:var(--border-card);color:var(--text)}
.pill--danger{background:var(--black-950);border-color:var(--black-950);color:var(--rabbit-white)}
.pill--neutral{background:transparent;border-color:var(--black-250);color:var(--text-muted)}
.pill--plain::before{display:none}
.pill--ok::before{background:var(--black-950)}
/* The one state that keeps its dot even when "plain": a failure is the worst
   thing a row can say, and the red dot is how it says it at a glance. */
.pill--danger::before,.pill--danger.pill--plain::before{display:block;background:var(--red)}

.tag{display:inline-block;white-space:nowrap;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;
  font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;background:transparent;color:var(--text);border:1px solid var(--black-250)}

.alert{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-radius:var(--r);
  border:1px solid var(--border-card);background:var(--bg-surface);font-size:15px;line-height:1.5;color:var(--text-muted)}
.alert svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--text);fill:none;
  stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.alert b{display:block;font-weight:500;margin-bottom:2px;color:var(--text)}
.alert__body{min-width:0;flex:1;text-wrap:pretty}
.alert--danger{background:var(--bg-surface);border-color:var(--black-950);color:var(--text-muted)}
.alert--ok{background:var(--bg-surface);border-color:var(--border-card);color:var(--text-muted)}
.alert--warn{background:var(--bg-surface);border-color:var(--border-card);color:var(--text-muted)}
.alert--info{background:var(--bg-surface);border-color:var(--border-card);border-style:dashed;color:var(--text-muted)}

/* The warning and danger icons are the red in an alert; the text stays ink. */
.alert--danger svg,.alert--warn svg{stroke:var(--red)}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center}
.empty svg{width:26px;height:26px;stroke:var(--text-faint);fill:none;stroke-width:1.4}
.empty b{font-size:20px;font-weight:400}
.empty p{font-size:15px;line-height:1.55;color:var(--text-muted);max-width:52ch;text-wrap:pretty}

/* 14. Tool hub =========================================================== */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.tool{display:flex;flex-direction:column;gap:9px;padding:15px;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);
  transition:box-shadow .16s,transform .16s,border-color .16s;color:var(--text)}
a.tool:hover{text-decoration:none;box-shadow:var(--sh-2);transform:translateY(-1px);
  border-color:var(--border-strong)}
.tool__top{display:flex;align-items:center;gap:9px}
.tool__ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--wrg-grey-900);color:var(--text-invert)}
.tool__ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tool__ico--accent{background:var(--black-950);color:var(--red)}
.tool__ico--soft{background:var(--bg-subtle);color:var(--text)}
.tool__name{display:block;font-size:14px;font-weight:500}
.tool__owner{display:block;font-size:11.5px;color:var(--text-muted)}
.tool__desc{display:block;font-size:13px;color:var(--text-muted);text-wrap:pretty;flex:1}
.tool__foot{display:flex;align-items:center;gap:6px;padding-top:2px}
.tool__foot .pill{margin-left:auto}

/* 15. Login ============================================================== */
.auth{min-height:100vh;background:var(--bg-shell);display:grid;place-items:center;padding:24px}
.auth__card{width:100%;max-width:440px;background:transparent;border-radius:0;padding:0}
.auth__mark{width:46px;height:46px;border-radius:11px;background:var(--wrg-grey-900);
  display:grid;place-items:center;margin:0 auto 14px}
.auth__mark svg{width:26px;height:26px}
.auth__title{font-size:48px;font-weight:300;letter-spacing:-.04em;line-height:1}
.auth__sub{font-size:17px;line-height:1.5;color:var(--text-muted);margin:14px 0 32px}
.auth__form{display:flex;flex-direction:column;gap:12px}
.auth__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.auth__meta a{white-space:nowrap}
.auth__or{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:11px;
  font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;margin:8px 0}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--border)}
.auth__foot{font-size:14px;line-height:1.55;color:var(--text-muted);margin-top:24px}
.auth__legal{width:100%;max-width:440px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border);
  font-size:14px;line-height:1.55;color:var(--text-muted)}

.auth__legal-label{margin-bottom:10px;font-size:11px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
/* The red rule and mono label that open the brand panel and the notice page. */
.auth__kicker{display:flex;align-items:center;gap:12px;font-size:12px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--black-250)}
.auth__kicker::before{content:"";width:32px;height:1px;background:var(--red)}

/* split variant */
.auth--split{display:grid;grid-template-columns:minmax(0,53fr) minmax(0,47fr);place-items:stretch;padding:0}
.auth__brand{background:var(--black-950);color:var(--rabbit-white);padding:56px var(--gutter);display:flex;
  flex-direction:column;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.auth__brand-copy{display:flex;flex-direction:column;gap:28px}
.auth__brand-mark{width:40px;height:46px}
.auth__quote{font-size:clamp(56px,7vw,104px);font-weight:300;line-height:.94;letter-spacing:-.045em;max-width:12ch}
.auth__quote b{font-weight:300}
.auth__quote em{font-style:normal;color:var(--red)}
.auth__brand-top{display:flex;align-items:center;gap:14px}
.auth__brand-name{font-size:12px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--black-350)}
.auth__brand-lede{max-width:30em;font-size:20px;line-height:1.45;color:var(--black-250)}
.auth__brand-foot{font-size:11px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--black-350)}
.auth__pane{background:var(--bg-app);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px}
.auth__pane .auth__card{border:0}

/* The expired-link notice: the whole page is the black panel. */
.auth--notice{place-items:center start;padding:60px max(24px,calc((100vw - 560px)/2))}
.auth__notice{max-width:560px;display:flex;flex-direction:column;gap:28px;color:var(--rabbit-white)}
.auth__notice-title{font-size:clamp(40px,6vw,64px);font-weight:300;line-height:1;letter-spacing:-.04em}
.auth__notice-sub{font-size:20px;line-height:1.5;color:var(--black-250)}

/* compact variant on the dark shell */
.auth--bare .auth__card{box-shadow:none;background:transparent;max-width:330px}
.auth--bare .auth__title,.auth--bare .auth__sub{color:var(--text-invert)}
.auth--bare .auth__sub{color:var(--side-muted)}
.auth--bare .input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--text-invert)}
.auth--bare .input::placeholder{color:rgba(255,255,255,.35)}
.auth--bare .label{color:rgba(255,255,255,.75)}
.auth--bare .auth__mark{background:rgba(255,255,255,.08)}
.auth--bare .choice span{color:rgba(255,255,255,.7)}

/* 16. Utilities ========================================================== */
.u-muted{color:var(--text-muted)}
.u-right{margin-left:auto}
.u-mono{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.u-mb0{margin-bottom:0}
.u-mb4{margin-bottom:var(--sp-4)}
.u-flex{display:flex;align-items:center;gap:var(--sp-2)}
.u-wrap{flex-wrap:wrap}
.u-scroll-y{max-height:290px;overflow-y:auto}
.icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter}
.section-label{font-size:12px;font-family:var(--font-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
  margin:40px 0 14px}


/* 18. Overlays ===========================================================
   All overlays are CSS-only. Pattern:
     <input class="ovl-in" type="checkbox" id="ovl-x">   <- trigger state
     <label for="ovl-x">Open</label>                     <- any opener
     <div class="ovl">                                   <- must be the
       <label class="ovl__scrim" for="ovl-x"></label>       NEXT SIBLING
       <div class="modal"> … </div>                        of the input
     </div>
   In a real app, drop the input/label and toggle a .is-open class instead.
   ======================================================================== */
/* Fixed, not absolute: an absolute checkbox after .app sat at its static
   position below the page and added 13px of body background to every screen. */
.ovl-in{position:fixed;top:0;left:0;opacity:0;pointer-events:none}
.ovl{display:none}
.ovl-in:checked+.ovl{display:block}
.ovl__scrim{position:fixed;inset:0;z-index:100;background:rgba(8,8,7,.6);
  animation:ovlFade .2s ease-in-out}
@keyframes ovlFade{from{opacity:0}to{opacity:1}}
@keyframes ovlPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
/* centred variants — keep the centring transform inside the keyframes so the
   element never animates from an off-centre position */
@keyframes ovlPopC{from{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.985)}
  to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes ovlPopX{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.985)}
  to{opacity:1;transform:translateX(-50%)}}
@keyframes ovlSlideR{from{transform:translateX(100%)}to{transform:none}}
@keyframes ovlSlideU{from{transform:translateY(100%)}to{transform:none}}

/* --- modal / dialog --- */
.modal{position:fixed;z-index:101;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(660px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow:auto;
  background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--r);
  animation:ovlPopC .2s ease-in-out}
.modal--sm{width:min(440px,calc(100vw - 32px))}
.modal--lg{width:min(800px,calc(100vw - 32px))}
.modal__head{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px}
.modal__title{font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1.05}
.modal__sub{font-size:14px;color:var(--text-muted);margin-top:6px;text-wrap:pretty}
.modal__x{margin-left:auto;flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text);cursor:pointer}
.modal__x:hover{background:var(--bg-subtle);border-color:var(--black-950)}
.modal__body{padding:0 32px 24px;font-size:15px}
.modal__foot{display:flex;align-items:center;gap:12px;padding:20px 32px;
  border-top:1px solid var(--border);background:var(--bg-surface);
  border-radius:0 0 var(--r) var(--r)}
.modal__foot .spacer{flex:1}
.modal__icon{width:44px;height:44px;flex:none;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--black-950);color:var(--rabbit-white)}
.modal__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter}
.modal__icon--danger{background:var(--black-950);color:var(--red)}
.modal__icon--warn{background:var(--bg-subtle);color:var(--text)}
.modal__icon--ok{background:var(--black-950);color:var(--rabbit-white)}

/* --- drawer / side panel --- */
.drawer{position:fixed;z-index:101;top:0;right:0;height:100vh;
  width:min(440px,calc(100vw - 40px));background:var(--bg-surface);
  border-left:1px solid var(--border-card);display:flex;flex-direction:column;animation:ovlSlideR .3s var(--ease-reveal)}
.drawer--left{right:auto;left:0;animation-name:ovlSlideL}
@keyframes ovlSlideL{from{transform:translateX(-100%)}to{transform:none}}
.drawer--wide{width:min(600px,calc(100vw - 40px))}
.drawer__head{display:flex;align-items:flex-start;gap:16px;padding:28px 32px;
  border-bottom:1px solid var(--border)}
.drawer__title{font-size:36px;font-weight:300;letter-spacing:-.035em;line-height:1;margin-bottom:6px}
.drawer__body{flex:1;overflow-y:auto;padding:28px 32px}
.drawer__foot{display:flex;gap:12px;padding:20px 32px;border-top:1px solid var(--border);
  background:var(--bg-surface)}
.drawer__foot .spacer{flex:1}

/* --- bottom sheet (mobile-first pattern) --- */
.sheet{position:fixed;z-index:101;left:0;right:0;bottom:0;background:var(--bg-surface);
  border-radius:var(--r) var(--r) 0 0;border-top:1px solid var(--border-card);padding:8px 18px 18px;
  max-height:80vh;overflow:auto;animation:ovlSlideU .2s ease}
.sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--wrg-grey-200);
  margin:2px auto 12px}

/* --- command palette --- */
.palette{position:fixed;z-index:101;top:14vh;left:50%;transform:translateX(-50%);
  width:min(560px,calc(100vw - 32px));background:var(--bg-surface);border-radius:var(--r);
  border:1px solid var(--border-card);overflow:hidden;animation:ovlPopX .18s ease}
.palette__search{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--border)}
.palette__search svg{width:16px;height:16px;flex:none;stroke:var(--text-muted);fill:none;
  stroke-width:1.7;stroke-linecap:round}
.palette__search input{flex:1;border:0;outline:0;font-size:14.5px;background:none}
.palette__search input::placeholder{color:var(--text-faint)}
.palette__list{max-height:330px;overflow-y:auto;padding:6px}
.palette__group{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-faint);padding:8px 10px 4px}
.palette__item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text)}
.palette__item:hover,.palette__item.is-active{background:var(--bg-subtle);text-decoration:none}
.palette__item.is-active{background:var(--bg-subtle);color:var(--text)}
.palette__item svg{width:15px;height:15px;flex:none;opacity:.6;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.palette__item .kbd{margin-left:auto}
.palette__foot{display:flex;align-items:center;gap:14px;padding:9px 14px;
  border-top:1px solid var(--border);background:var(--bg-subtle);font-size:11.5px;
  color:var(--text-muted)}
.kbd{font-size:10.5px;padding:1px 6px;border-radius:4px;border:1px solid var(--border-strong);
  background:var(--bg-surface);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* --- toasts --- */
.toast-stack{position:fixed;z-index:110;right:18px;bottom:18px;display:flex;
  flex-direction:column;gap:9px;width:min(340px,calc(100vw - 32px))}
.toast-stack--inline{position:static;width:100%}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r);
  background:var(--black-950);color:var(--rabbit-white);font-size:14px;
  animation:ovlPop .2s ease}
.toast svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toast__body{flex:1;min-width:0;text-wrap:pretty}
.toast__body b{display:block;font-weight:500}
.toast__body small{color:rgba(255,255,255,.62);font-size:11.5px}
.toast__x{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:5px;
  color:rgba(255,255,255,.6);cursor:pointer}
.toast__x:hover{background:rgba(255,255,255,.12);color:var(--text-invert)}
.toast--ok svg{color:var(--text-invert)}
.toast--danger svg{color:var(--accent)}
.toast--warn svg{color:var(--text-invert)}
.toast--light{background:var(--bg-surface);color:var(--text);border:1px solid var(--border)}
.toast--light .toast__body small{color:var(--text-muted)}
.toast--light .toast__x{color:var(--text-faint)}
.toast--light .toast__x:hover{background:var(--bg-subtle);color:var(--text)}
.toast__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
  border-radius:0 0 var(--r) var(--r)}

/* --- tooltip (hover, no JS) --- */
.tip{position:relative;display:inline-flex}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%) translateY(3px);white-space:nowrap;pointer-events:none;
  background:var(--black-950);color:var(--rabbit-white);font-size:12px;padding:6px 10px;
  border-radius:6px;opacity:0;transition:opacity .13s,transform .13s;z-index:60}
.tip::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;
  transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--black-950);
  opacity:0;transition:opacity .13s;pointer-events:none;z-index:60}
.tip:hover::after,.tip:focus-within::after{opacity:1;transform:translateX(-50%)}
.tip:hover::before,.tip:focus-within::before{opacity:1}
.tip--right::after{bottom:auto;top:50%;left:calc(100% + 9px);transform:translateY(-50%)}
.tip--right::before{bottom:auto;top:50%;left:100%;transform:translateY(-50%);
  border-top-color:transparent;border-right-color:var(--black-950)}

/* --- popover / dropdown (details-based, reusable) --- */
.pop{position:relative;display:inline-flex}
.pop>summary{list-style:none;cursor:pointer}
.pop>summary::-webkit-details-marker{display:none}
.pop__panel{position:absolute;z-index:70;top:calc(100% + 6px);left:0;min-width:210px;
  background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--r);
  padding:6px;animation:ovlPop .14s ease}
.pop__panel--right{left:auto;right:0}
.pop__panel--pad{padding:13px}
.pop__title{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-faint);padding:6px 9px 4px}
.pop__item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text);white-space:nowrap;cursor:pointer}
.pop__item:hover{background:var(--bg-subtle);color:var(--text);text-decoration:none}
.pop__item svg{width:15px;height:15px;flex:none;opacity:.6;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pop__item .kbd{margin-left:auto}
.pop__item--danger{color:var(--text)}
.pop__item--danger:hover{background:var(--bg-subtle)}
.pop__sep{display:block;height:1px;background:var(--border);margin:4px 2px}

/* --- loading / blocking overlay --- */
.loader{position:fixed;z-index:101;top:50%;left:50%;transform:translate(-50%,-50%);animation:ovlPopC .18s ease;
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 30px;
  background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--r)}
.spinner{width:26px;height:26px;border-radius:50%;border:2px solid var(--black-150);
  border-top-color:var(--black-950);animation:spin .7s linear infinite}
.spinner--sm{width:14px;height:14px;border-width:1.6px}
.spinner--invert{border-color:var(--black-750);border-top-color:var(--rabbit-white)}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__text{font-size:13px;color:var(--text-muted)}
.skeleton{background:var(--black-050);border-radius:5px;height:11px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* --- inline banner (page-level, dismissible) --- */
.banner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--black-950);
  color:var(--rabbit-white);font-size:14px}
.banner svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.banner__body{flex:1;text-wrap:pretty}
.banner a{color:var(--rabbit-white);text-decoration:underline}
.banner--accent{background:var(--rabbit-white);color:var(--text);border-bottom:1px solid var(--border-card)}
.banner--accent a{color:var(--text)}
.banner__x{width:24px;height:24px;display:grid;place-items:center;border-radius:5px;
  color:rgba(255,255,255,.7);cursor:pointer}
.banner__x:hover{background:rgba(255,255,255,.14);color:var(--text-invert)}

@media (max-width:640px){
  .toast-stack{left:16px;right:16px;bottom:16px;width:auto}
  .drawer{width:100vw}
}

/* 19. Responsive =========================================================
   Sidebar collapses behind a burger below 900px. Driven by a single
   checkbox (#nav-toggle) placed as the first child of <body> — no JS.
   ======================================================================== */
#nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-scrim{display:none}

@media (max-width:1240px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--main,.grid--side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .burger{display:grid}
  .topbar{padding:0 var(--sp-4);gap:var(--sp-4)}
  .app__body{padding:28px var(--sp-4) 40px}
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .3s var(--ease-reveal)}
  #nav-toggle:checked~.app .sidebar{transform:none}
  #nav-toggle:checked~.nav-scrim{display:block;position:fixed;inset:0;z-index:30;
    background:rgba(8,8,7,.6)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth--split{grid-template-columns:1fr}
  .auth--split .auth__brand{display:none}
}
@media (max-width:640px){
  .auth__pane{padding:40px 20px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .page-head{flex-wrap:wrap}
  .page-head__actions{margin-left:0;width:100%}
  .topbar__tabs{overflow-x:auto}
}

/* print — keep the shell out of the way */
@media print{
  /* States are black fills with light text now (a failed check, a high-priority
     finding, a grade chip). A browser drops backgrounds when printing unless
     told otherwise, which would print those as white text on white paper. The
     large black panels are turned white in their own print rules below. */
  body{background:var(--white);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sidebar,.topbar,.bulkbar,.burger{display:none !important}
  .card{break-inside:avoid}
}


/* 20. Audit & report =====================================================
   Shared by audit.html (internal, inside the shell) and report.html
   (standalone, client-facing). Grades: A/B pass, C caution, D/F fail.
   ======================================================================== */
.grade{font-weight:800;letter-spacing:-.03em;line-height:1}
.grade--a,.grade--b{color:var(--ok)}
.grade--c{color:var(--warn)}
.grade--d,.grade--f{color:var(--accent)}
.grade--na{color:var(--text-faint);font-weight:700;font-size:12px;letter-spacing:.06em}

/* internal audit header */
.audit-eyebrow{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.audit-eyebrow span{color:var(--text-faint)}
.audit-head{display:flex;align-items:center;gap:12px}
.audit-head h1{font-size:24px}
.audit-head .btn-row{margin-left:auto}
.audit-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--text-muted);
  margin:6px 0 18px}
.audit-meta b{font-weight:500;color:var(--text)}

.score-card{display:flex;gap:20px;padding:18px;align-items:flex-start}
.score-badge{width:118px;flex:none;border:1px solid var(--border);border-radius:var(--r);
  padding:16px 10px;text-align:center;background:var(--bg-subtle)}
.score-badge .grade{font-size:46px;display:block}
.score-badge b{display:block;font-size:14px;font-weight:700;margin-top:6px}
.score-badge__cap{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.score-body{flex:1;min-width:0}
.score-body p{font-size:13.5px;text-wrap:pretty;max-width:74ch}
.score-note{font-size:12px;color:var(--text-muted);margin-top:10px}

/* pillar summary strip */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.pillar{background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--border-strong);
  border-radius:var(--r);padding:12px 14px}
.pillar--pass{border-left-color:var(--ok)}
.pillar--warn{border-left-color:var(--warn)}
.pillar--fail{border-left-color:var(--accent)}
.pillar--na{border-left-color:var(--wrg-grey-200)}
.pillar__name{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.pillar__row{display:flex;align-items:baseline;gap:7px;margin-top:5px}
.pillar__row .grade{font-size:26px}
.pillar__score{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.pillar__notes{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--text-muted);margin-top:3px}
.pillar__notes b{color:var(--accent);font-weight:500}

/* talking points */
.points{padding:14px 16px}
.points li{display:flex;gap:10px;font-size:13px;padding:5px 0;text-wrap:pretty}
.points li::before{content:"→";color:var(--accent);flex:none}

/* findings tables */
.finding{margin-bottom:12px}
.finding>summary{display:flex;align-items:center;gap:9px;padding:11px 16px;cursor:pointer;
  list-style:none;border-bottom:1px solid var(--border)}
.finding>summary::-webkit-details-marker{display:none}
.finding__caret{width:12px;height:12px;flex:none;stroke:var(--text-muted);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.finding[open] .finding__caret{transform:rotate(90deg)}
.finding__name{font-size:14px;font-weight:700}
.finding__tally{margin-left:auto;font-size:11.5px;color:var(--text-muted)}
.finding__grade{font-size:16px}
.table--checks{min-width:640px}
.table--checks td{vertical-align:top;padding:10px 14px}
.check__name{display:block;font-size:13px;font-weight:500}
.check__rule{display:block;font-size:11.5px;color:var(--text-faint)}
.status{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.status--pass{background:var(--ok-soft);color:var(--ok)}
.status--fail{background:var(--wrg-red-soft);color:var(--accent)}
.status--partial{background:var(--warn-soft);color:var(--warn)}
.status--na{background:var(--bg-subtle);color:var(--text-faint)}
.status--unknown{background:var(--info-soft);color:var(--info)}
.evidence>summary{list-style:none;cursor:pointer;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.evidence>summary::-webkit-details-marker{display:none}
.evidence pre{margin-top:7px;padding:10px 12px;background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:var(--r-sm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  line-height:1.55;color:var(--text-muted);overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.pillar-flag{display:flex;gap:9px;margin:10px 14px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--wrg-red-soft);border:1px solid #F3CFCB;color:#8E3A32;font-size:12.5px}
.pillar-note{margin:10px 14px;padding:9px 12px;border-radius:var(--r-sm);background:var(--bg-subtle);
  border:1px solid var(--border);color:var(--text-muted);font-size:12.5px}

/* ---- public report (standalone page) ---- */
.report{background:var(--bg-app);min-height:100vh}

/* --- banner: full-bleed black, editorial display type --- */
.report__banner{position:relative;overflow:hidden;background:#0A0A0A;color:#fff;
  padding:34px 24px 60px}
.report__banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%,rgba(228,103,91,.20),transparent 62%),
             radial-gradient(70% 90% at 0% 100%,rgba(255,255,255,.045),transparent 60%)}
.report__inner{width:min(980px,100%);margin:0 auto;position:relative;z-index:1}
.report__nav{display:flex;align-items:center;gap:12px;padding-bottom:78px}
.report__nav img{width:36px;height:42px}
.report__nav .report__nav-tag{margin-left:auto;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.report__back{display:inline-flex;align-items:center;gap:6px;margin-left:18px;color:#fff;
  font-size:13px;text-decoration:none;border:1px solid rgba(255,255,255,.28);
  border-radius:9px;padding:7px 13px;transition:background .13s,border-color .13s}
.report__back:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);
  color:#fff;text-decoration:none}
.report__back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){ .report__back{margin-left:12px;padding:6px 10px;font-size:12px} }
.report__slash{font-size:15px;color:var(--accent);margin-bottom:18px;letter-spacing:-.01em}
.report__slash span{color:rgba(255,255,255,.42);margin-left:8px}
.report__title{font-size:clamp(42px,6.4vw,74px);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;max-width:15ch;text-wrap:balance}
.report__title em{font-style:normal;color:var(--accent)}
.report__sub{font-size:16px;color:rgba(255,255,255,.55);margin-top:20px}

/* headline score row (replaces the old boxed hero) */
.report__hero{display:flex;gap:34px;align-items:flex-end;flex-wrap:wrap;margin-top:52px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.report__score{display:flex;align-items:baseline;gap:12px;flex:none}
.report__score b{font-size:78px;font-weight:800;letter-spacing:-.05em;line-height:.86}
.report__score i{font-style:normal;font-size:19px;color:rgba(255,255,255,.4)}
.report__score .grade{font-size:30px;padding-left:14px;margin-left:6px;
  border-left:1px solid rgba(255,255,255,.16);color:#F09A90}
.report__hero p{flex:1;min-width:300px;font-size:17px;line-height:1.55;
  color:rgba(255,255,255,.72);text-wrap:pretty;max-width:58ch}
.report__hero b{color:#fff;font-weight:700}

.report__main{padding:56px 24px 72px}
.report__label{font-size:14px;letter-spacing:-.01em;color:var(--accent);margin:52px 0 18px;
  text-transform:none}
.report__label::before{content:"// "}
.report__label:first-child{margin-top:0}
.report__lede{font-size:19px;line-height:1.62;text-wrap:pretty;max-width:66ch}

.area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.area{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px}
.area__top{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.area__name{font-size:14.5px;font-weight:700}
.area__top .grade{margin-left:auto;font-size:24px}
.area p{font-size:13px;color:var(--text-muted);text-wrap:pretty}

.opps{display:flex;flex-direction:column;gap:10px}
.opp{display:flex;gap:16px;align-items:flex-start;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r);padding:14px 18px}
.opp__n{font-size:22px;font-weight:800;color:var(--accent);line-height:1;flex:none;width:20px}
.opp__t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.opp__t b{font-size:15px;font-weight:500}
.opp__area{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px}
.opp__sev{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

.note-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;font-size:14px;line-height:1.55;color:var(--text-muted);text-wrap:pretty;margin-bottom:10px}
.report__foot{border-top:1px solid var(--border);margin-top:46px;padding-top:20px;
  font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
.report__foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}

@media (max-width:1100px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
}
@media (max-width:640px){
  .pillars,.area-grid{grid-template-columns:minmax(0,1fr)}
  .score-card{flex-direction:column}
  .report__title{font-size:28px}
  .report__banner{padding:30px 18px 38px}
  .report__main{padding:28px 18px 40px}
}
@media print{
  .report__banner{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .finding{break-inside:avoid}
}


/* 21. Client report v2 ===================================================
   Explanatory, client-facing report. Standalone page (no app shell).
   ======================================================================== */
.verdict-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.verdict-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.verdict-chip--risk{color:#F09A90}
.verdict-chip--ok{color:#8FD6AE}

/* score scale */
.scale{margin-top:30px;position:relative}
.scale__track{position:relative;height:9px;display:flex}
.scale__track i{height:100%}
.scale__track i:first-child{border-radius:5px 0 0 5px}
.scale__track i:last-child{border-radius:0 5px 5px 0}
.scale__marker{position:absolute;top:-1px;width:0;height:11px;
  border-left:2px solid #fff;transform:translateX(-1px)}
.scale__marker::before{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff}
.scale__legend{display:flex;justify-content:space-between;margin-top:11px;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.scale__legend b{color:#fff;font-weight:500}

/* verdict cards */
.verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.verdict{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);
  padding:20px 22px;border-top:3px solid var(--border-strong)}
.verdict--good{border-top-color:var(--ok)}
.verdict--watch{border-top-color:var(--warn)}
.verdict--risk{border-top-color:var(--accent)}
.verdict__label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px}
.verdict__head{display:block;font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.verdict p{font-size:15px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}

/* pillar explainers */
.pillar-list{display:flex;flex-direction:column;gap:12px}
.pl{display:grid;grid-template-columns:64px minmax(0,1fr) 168px;gap:22px;align-items:start;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.pl__grade{text-align:center}
.pl__grade .grade{font-size:40px;display:block}
.pl__grade small{display:block;font-size:11.5px;color:var(--text-faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.pl__name{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;margin-bottom:5px}
.pl__what{font-size:15px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}
.pl__why{display:flex;gap:8px;margin-top:9px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--bg-subtle);font-size:14.5px;line-height:1.55;text-wrap:pretty}
.pl__why b{font-weight:500}
.pl__why svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:var(--text-muted);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pl__side{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.pl__side>span{display:flex;justify-content:space-between;gap:8px;color:var(--text-muted)}
.pl__side>span>b{font-weight:500;color:var(--text);text-align:right}
.impact{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:2px 8px;border-radius:4px}
.impact--high{background:var(--wrg-red-soft);color:var(--accent)}
.impact--med{background:var(--warn-soft);color:var(--warn)}
.impact--low{background:var(--bg-subtle);color:var(--text-muted)}

/* visibility chain */
.chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.chain__col{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.chain__ico{width:32px;height:32px;border-radius:8px;background:var(--wrg-grey-900);color:#fff;
  display:grid;place-items:center;margin-bottom:11px}
.chain__ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.chain__col h3{font-size:17px;margin-bottom:5px}
.chain__col p{font-size:14.5px;line-height:1.55;color:var(--text-muted);text-wrap:pretty;margin-bottom:11px}
.chain__feeds{display:flex;flex-wrap:wrap;gap:6px}
.chain__feeds span{font-size:12.5px;padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid var(--border);color:var(--text-muted)}
.chain__feeds span.is-weak{border-color:#F3CFCB;background:var(--wrg-red-soft);color:var(--accent)}
.chain__verdict{margin-top:13px;padding-top:12px;border-top:1px solid var(--border);font-size:14.5px;line-height:1.55}
.chain__verdict b{font-weight:700}

/* drawbacks */
.draw{display:flex;flex-direction:column;gap:12px}
.draw__item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);
  border-left:3px solid var(--accent);padding:20px 22px}
.draw__top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.draw__n{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-faint)}
.draw__title{font-size:18px;font-weight:700;letter-spacing:-.01em}
.draw__area{font-size:13px;color:var(--text-muted)}
.draw p{font-size:15px;line-height:1.55;color:var(--text-muted);text-wrap:pretty;max-width:76ch}
.draw__cost{display:flex;flex-wrap:wrap;gap:26px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--border);font-size:13.5px}
.draw__cost span{display:flex;flex-direction:column;gap:2px}
.draw__cost em{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint)}
.draw__cost b{font-weight:500}
.draw--minor{border-left-color:var(--warn)}

/* strengths */
.wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.win{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.win b{display:flex;align-items:center;gap:7px;font-size:15.5px;margin-bottom:5px}
.win b svg{width:15px;height:15px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.win p{font-size:14px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}

/* projection */
.projection{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--wrg-grey-900);
  color:#fff;border-radius:var(--r-lg);padding:22px 24px}
.projection__now,.projection__then{text-align:center;flex:none}
.projection__now b,.projection__then b{display:block;font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1}
.projection__now span,.projection__then span{display:block;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:5px}
.projection__now b{color:#F09A90}
.projection__then b{color:#8FD6AE}
.projection__arrow{color:rgba(255,255,255,.3);font-size:22px;flex:none}
.projection p{flex:1;min-width:240px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.78);text-wrap:pretty}
.projection p b{color:#fff;font-weight:700}

/* CTA */
.cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--bg-surface);padding:20px 24px;margin-top:16px}
.cta h2{font-size:21px;margin-bottom:4px}
.cta p{font-size:15px;line-height:1.55;color:var(--text-muted);max-width:56ch;text-wrap:pretty}
.cta .btn-row{margin-left:auto}

/* ---- access gate: blurred report behind a lock dialog ---- */
.gate{position:relative;min-height:100vh;overflow:hidden}
.gate__behind{filter:blur(9px) saturate(.85);transform:scale(1.03);pointer-events:none;
  user-select:none;height:100vh;overflow:hidden}
.gate__veil{position:fixed;inset:0;background:rgba(38,38,38,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.gate__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 32px));background:var(--bg-surface);border-radius:var(--r-lg);
  border:1px solid var(--border-card);padding:34px 34px 26px;text-align:center;
  animation:ovlPopC .25s ease}
.gate__lock{width:48px;height:48px;border-radius:13px;background:var(--wrg-grey-900);color:#fff;
  display:grid;place-items:center;margin:0 auto 14px}
.gate__lock svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.gate__dialog h1{font-size:22px;letter-spacing:-.02em}
.gate__for{font-size:14px;color:var(--text-muted);margin:5px 0 4px}
.gate__site{font-size:15px;font-weight:700;margin-bottom:16px}
.gate__peek{display:flex;justify-content:center;gap:22px;padding:13px 0;margin-bottom:18px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.gate__peek span{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint)}
.gate__peek b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.gate__peek .blurred{filter:blur(6px);color:var(--text-muted)}
.gate__form{display:flex;flex-direction:column;gap:11px;text-align:left}
.gate__foot{font-size:13px;color:var(--text-muted);margin-top:15px}
.gate__brand{position:fixed;top:24px;left:50%;transform:translateX(-50%);color:#fff}
.gate__brand img{width:30px;height:35px}

@media (max-width:900px){
  .verdicts,.chain,.wins{grid-template-columns:minmax(0,1fr)}
  .pl{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .pl__side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:16px;padding-top:10px;
    border-top:1px solid var(--border)}
  .pl__side>span{display:inline-flex;gap:6px}
}

/* banner responsive */
@media (max-width:640px){
  .report__banner{padding:24px 18px 40px}
  .report__nav{padding-bottom:44px}
  .report__nav .report__nav-tag{display:none}
  .report__hero{margin-top:34px;gap:22px}
  .report__score b{font-size:58px}
  .report__hero p{font-size:15.5px;min-width:0}
  .report__lede{font-size:17px}
  .report__main{padding:36px 18px 48px}
}

/* ============================================================
   ADA Scan: tool-specific classes (on top of the kit)
   ============================================================ */
.req{color:var(--accent);font-weight:700}
.text-muted{color:var(--text-muted)}

/* New-project action inside a nav-group label */
.nav-group__label{display:flex;align-items:center;justify-content:space-between}
.nav-group__action{background:none;border:0;color:var(--side-text);font:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:2px 4px;border-radius:var(--r-sm)}
.nav-group__action:hover{background:var(--side-hover);color:#fff}

/* Selected-project header card */
.project-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.project-header__name{font-size:18px;font-weight:700;margin:0}
.project-header__meta{margin:2px 0 0;font-size:12.5px}
.project-header__actions{display:flex;gap:8px;flex-shrink:0}

/* Scan form + summary layout */
.scan-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-bottom:24px}
.crawl-opts{grid-column:1/-1;padding:10px 0px 25px 25px;margin-top:-4px}
@media (max-width:900px){.scan-grid{grid-template-columns:1fr}}

/* Summary list */
.summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.summary-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
.summary-list li span{color:var(--text-muted)}
.summary-list li b{font-weight:600;text-align:right}

/* Scan history */
.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.history-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.history-list li:last-child{border-bottom:0}
.history-list li:hover{background:var(--bg-hover)}

/* Report */
.report-actions{margin-bottom:14px}
.pdf-sets{display:contents}
.card--flush{padding:0;overflow:hidden}
#report-frame{width:100%;height:78vh;min-height:600px;border:0;display:block;background:#fff}

/* Project modal internals */
.modal__form{display:flex;flex-direction:column;gap:16px}
.auth-fields{margin-top:10px}

/* The kit's component classes set display, which overrides the `hidden` attribute the
   app uses to toggle sections. Make `hidden` authoritative again. */
[hidden]{display:none !important}

/* Scan history rows */
.history-list li{gap:14px}
.h-score{flex-shrink:0;width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;background:var(--bg-subtle);color:var(--text)}
.h-score--good{background:var(--ok-soft);color:var(--ok)}
.h-score--mid{background:var(--warn-soft);color:var(--warn)}
.h-score--bad{background:var(--wrg-red-soft);color:var(--accent-hover)}
.h-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.h-url{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-when{color:var(--text-muted);font-size:11.5px}
.h-delta{margin-left:6px;font-weight:600}
.h-delta.up{color:var(--ok)}
.h-delta.down{color:var(--accent-hover)}
.h-actions{flex-shrink:0}

/* Native <dialog> modal backdrop */
dialog#project-dialog{border:0;border-radius:var(--r-lg);padding:24px;max-width:640px;width:calc(100% - 32px);box-shadow:var(--sh-3)}
dialog#project-dialog::backdrop{background:rgba(0,0,0,.45)}

/* Disabled pagination arrows */
.pagination a.is-disabled{opacity:.35;pointer-events:none}

/* ============================================================
   /explainer content — polished editorial documentation. Everything is scoped
   under .report__main so none of it leaks into the dark hero banner. Stable
   data-section / class hooks (set in renderExplainerPage) drive the special
   blocks rather than brittle :nth-of-type().
   ============================================================ */
.report__main{
  --ink:#0f0f0e; --muted:#54524d; --line:#e7e4dd;
  --accent:#e23b3b; --paper:#faf9f6; --card:#fff;
  background:
     radial-gradient(1200px 500px at 80% -120px, rgba(226,59,59,.05), transparent 60%),
     var(--paper);
  color:var(--ink); padding:72px 0 0; -webkit-font-smoothing:antialiased;
}
.report__main .report__inner{ max-width:760px; margin:0 auto; padding:0 28px 96px; }

/* Lead / intro — the first paragraph, with a hairline divider under it */
.report__main .exp-p:first-of-type{
  font-size:1.45rem; line-height:1.55; color:var(--ink); font-weight:400;
  letter-spacing:-.01em; padding:0 0 34px; margin:0 0 8px; max-width:none;
  border-bottom:1px solid var(--line);
}

/* Section headings with a red accent bar */
.report__main .exp-h{
  position:relative; font-family:"F37 Bolton","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.62rem; line-height:1.2; letter-spacing:-.02em;
  font-weight:700; color:var(--ink); margin:64px 0 20px; padding-left:20px;
}
.report__main .exp-h:first-of-type{ margin-top:8px; }
.report__main .exp-h::before{
  content:""; position:absolute; left:0; top:.18em; width:5px; height:.82em;
  border-radius:3px; background:linear-gradient(var(--accent), #b62c2c);
}

/* Body paragraphs */
.report__main .exp-p{
  font-size:1.06rem; line-height:1.72; color:var(--muted); margin:0 0 18px; max-width:66ch; font-weight:400;
}
.report__main .exp-p strong{ color:var(--ink); }

/* Lists → clean white cards with red-dot bullets (markup uses <ul class="exp-list">) */
.report__main ul{
  list-style:none; margin:6px 0 26px; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.report__main ul li{
  background:var(--card); margin:0; padding:15px 18px 15px 46px; position:relative;
  list-style:none; font-size:1.02rem; line-height:1.55; color:#33322e;
}
.report__main ul li::marker{ content:""; }
.report__main ul li::before{
  content:""; position:absolute; left:18px; top:1.35em; width:9px; height:9px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(226,59,59,.12);
}
.report__main ul li:hover{ background:#fffdfb; }

/* Client callout — the paragraph rendered from the "What you can tell a client" quote */
.report__main .exp-h[data-section="client"]{ margin-bottom:22px; }
.report__main .exp-p.exp-callout{
  background:linear-gradient(180deg,#fff,#fdfbf8);
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:14px; padding:26px 28px; font-size:1.12rem; line-height:1.65;
  color:var(--ink); max-width:none; margin:0 0 18px;
}

/* Footer — top divider + muted text */
.report__main .report__foot{
  display:block; margin-top:20px; padding-top:26px; border-top:1px solid var(--line);
  color:var(--muted); line-height:1.6;
}
.report__main .report__foot a{ color:var(--muted); }
@media (max-width:560px){ .report__main{ padding-top:44px; } }

/* Grouped-accordion list (dashboard scans-by-URL + project scan history).
   One card, groups divided by hairlines; each group expands to clean rows. */
.toolbar--pad{padding:14px 16px;border-bottom:1px solid var(--border);margin:0}
.grp-list{display:flex;flex-direction:column}
.grp{border-top:1px solid var(--border)}
.grp:first-child{border-top:0}
.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:hover{background:var(--bg-hover)}
.grp[open]>summary{background:var(--bg-subtle)}
.grp__caret{width:15px;height:15px;flex:none;color:var(--text-faint);transition:transform .15s ease}
.grp[open]>summary .grp__caret{transform:rotate(90deg)}
.grp__icon{flex:none;width:30px;height:30px;border-radius:8px;background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.grp__icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.grp__main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.grp__title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp__sub{font-size:12px;color:var(--text-muted)}
.grp__count{flex:none;font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.grp__health{flex:none;display:flex;align-items:center;gap:10px}
.grp__score{font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.grp__score b{color:var(--text);font-weight:700}
.grp__bar{width:96px;height:5px;border-radius:3px;background:var(--wrg-grey-100);overflow:hidden}
.grp__fill{display:block;height:100%;background:var(--ok);border-radius:3px}
.grp__fill--mid{background:var(--warn)}
.grp__fill--bad{background:var(--accent)}
.grp__body{background:var(--bg-surface);border-top:1px solid var(--border)}
.grp__row{display:flex;align-items:center;gap:14px;padding:11px 16px 11px 46px;border-top:1px solid var(--border);font-size:13px}
.grp__row:first-child{border-top:0}
.grp__date{flex:1;min-width:0;font-weight:600;color:var(--text)}
.grp__act{flex:none;margin-left:auto}
@media (max-width:640px){ .grp__health .grp__bar{display:none} .grp__sub{display:none} }
@media (prefers-reduced-motion: reduce){.grp__caret{transition:none}}

/* Project details — latest-scan overview tiles */
.pv-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1000px){.pv-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.pv-tiles{grid-template-columns:repeat(2,1fr)}}
.pv-tile{background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.pv-tile__n{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.pv-tile__label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.pv-tile--critical{border-left-color:var(--accent)} .pv-tile--critical .pv-tile__n{color:var(--accent)}
.pv-tile--serious{border-left-color:#e06c1f} .pv-tile--serious .pv-tile__n{color:#c0560f}
.pv-tile--moderate{border-left-color:var(--warn)}
.pv-tile--minor{border-left-color:var(--info)}
.pv-tile--passed{border-left-color:var(--ok)} .pv-tile--passed .pv-tile__n{color:var(--ok)}
.pv-tile--review{border-left-color:var(--text-faint)}
.pv-latest{margin-top:12px}
#project-view .audit-meta{margin-bottom:8px}

/* Project drawer: auth toggle */
.auth-toggle{margin:6px 0 4px}
.auth-fields{margin-top:8px}

/* ==========================================================================
   Grouped records table (matches markup/table_grouped.html exactly)
   Accordion-grouped scans. Each group is a <details>; every group table uses
   table-layout:fixed + the same <colgroup> so columns stay aligned. Pure CSS.
   ========================================================================== */
.tgroups{border-top:1px solid var(--border)}
.tgroup{border-bottom:1px solid var(--border)}
.tgroup>summary{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;
  list-style:none;background:var(--bg-surface);transition:background .13s}
.tgroup>summary::-webkit-details-marker{display:none}
.tgroup>summary:hover{background:var(--bg-hover)}
.tgroup[open]>summary{background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.tgroup__caret{width:13px;height:13px;flex:none;stroke:var(--text-muted);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.tgroup[open] .tgroup__caret{transform:rotate(90deg)}
.tgroup__ico{width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--wrg-grey-900);color:#fff}
.tgroup__ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tgroup__ico--soft{background:var(--bg-subtle);color:var(--text-muted)}
.tgroup__name{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0} /* URLs can be long — allow shrink+ellipsis */
.tgroup__count{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:none}
.tgroup__stats{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none}
.tgroup__stat{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--text-muted)}
.tgroup__stat b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tgroup__bar{width:96px;height:5px;border-radius:3px;background:var(--wrg-grey-100);
  overflow:hidden;display:flex}
.tgroup__bar i{height:100%}
/* Inset the child table so it reads as nested under the open accordion rather than
   sitting flush against the left border. */
.tgroup__body{background:var(--bg-app);padding:8px 12px 12px 40px}
.tgroup__body .table-wrap{border:1px solid var(--border);border-radius:10px;background:var(--bg-surface)}
.table--grouped tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){ .tgroup__body{padding-left:20px} }
.table--grouped{table-layout:fixed;min-width:760px;width:100%;border-collapse:collapse}
.table--grouped .cell-stackn{overflow:hidden}
.table--grouped .cell-stackn b,
.table--grouped .cell-stackn .cell-muted{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.table--grouped tbody td{background:var(--bg-surface)}
.table--grouped tbody tr:hover td{background:var(--bg-hover)}
.table--grouped .col-act{text-align:right;white-space:nowrap}
.table--grouped .col-act .btn{vertical-align:middle}
.table--grouped .col-act .btn + .btn{margin-left:4px}

/* Scans listings (dashboard "Scans by domain" + project details "Scan history"):
   make the expanded table read as child rows nested under the accordion (column
   header row + indented, bulleted first column + faint tint). Scoped to .grouped-list
   so no other table is affected. Indentation is via cell padding only (never a table
   margin, which clipped the right-hand Open button). */
.grouped-list .tgroup[open] > summary{border-bottom:1px solid #ececec}
.grouped-list .tgroup__body{background:#fcfcfc;padding:0}
.grouped-list .tgroup__body .table-wrap{border:0;border-radius:0;background:transparent}
.grouped-list .tgroup .table--grouped thead th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#8a8d93;padding:8px 14px;background:#f3f3f4;border-bottom:1px solid #e0e0e0;
  white-space:nowrap;position:static}
.grouped-list .tgroup .table--grouped thead th:first-child{padding-left:40px}
.grouped-list .tgroup .table--grouped tbody td{background:transparent;border-bottom:1px solid #f0f0f0}
.grouped-list .tgroup .table--grouped tbody tr:last-child td{border-bottom:0}
.grouped-list .tgroup .table--grouped tbody tr:hover td{background:#f6f6f6}
.grouped-list .tgroup .table--grouped tbody td:first-child{padding-left:40px;position:relative}
.grouped-list .tgroup .table--grouped tbody td:first-child::before{
  content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#c2c5cb}
.grouped-list .tgroup .table--grouped tbody tr:hover td:first-child::before{background:#fa4c4f}
.grouped-list .tgroup .cell-stackn b{font-weight:500;color:#333}
/* Running-scan progress ("4 / 10 pages") shown under the status pill */
.scan-progress{font-size:12px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:2px}

/* Unsaved-scan cues */
.scan-expiry{font-size:12px;color:var(--warn);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){ .tgroup__stats .tgroup__bar{display:none} }

/* Report page: unsaved save/discard bar */
.save-bar{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 16px;
  background:var(--warn-soft);border:1px solid var(--border);border-radius:var(--r);
  color:#6B4F13;font-size:13.5px}
.save-bar>svg.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.save-bar__text{max-width:70ch}
.save-bar .spacer{flex:1}
@media (max-width:640px){ .save-bar{flex-wrap:wrap} .save-bar .spacer{display:none} }

/* Report page: PDF export status (fetch-driven download progress / result) */
.pdf-status{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 16px;
  border-radius:var(--r);border:1px solid;font-size:13.5px;line-height:1.45}
.pdf-status .spinner{flex:none}
.pdf-status--info{background:var(--info-soft);border-color:var(--border);color:var(--text)}
.pdf-status--ok{background:var(--ok-soft);border-color:var(--border-card);color:var(--text)}
.pdf-status--error{background:var(--wrg-red-soft);border-color:#eec7c7;color:#8a2b2b}

/* 404 / not-found page (auto-redirects to the dashboard) */
.nf{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-app);padding:24px}
.nf__card{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-2);padding:40px 44px;max-width:520px;text-align:center}
.nf__code{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--accent);
  background:var(--wrg-red-soft);border-radius:999px;padding:4px 14px;margin-bottom:16px}
.nf__title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.nf__msg{font-size:14.5px;color:var(--text-muted);line-height:1.55;margin:0 0 22px}
.nf__hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin:18px 0 0}

/* ===== Integrations / Connections ===== */
.notice{border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.5;border:1px solid var(--border)}
.notice code{word-break:break-all;font-weight:700}
.notice--ok{background:var(--ok-soft);border-color:var(--ok)}
.notice--danger{background:var(--wrg-red-soft);border-color:var(--wrg-red)}
.conn-keys{display:flex;flex-direction:column;gap:6px}
.conn-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.conn-key code{background:var(--bg-subtle);padding:2px 8px;border-radius:6px}
.conn-card{border:1px solid var(--border)}

/* ===== Credential reveal banner ===== */
.cred-reveal{position:relative;border-radius:12px;padding:16px 18px;margin:0 0 16px;border:1px solid var(--border)}
.cred-reveal--ok{background:var(--ok-soft);border-color:var(--ok)}
.cred-reveal--danger{background:var(--wrg-red-soft);border-color:var(--wrg-red)}
.cred-reveal__x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--text-muted)}
.cred-reveal__x:hover{color:var(--text)}
.cred-reveal__title{font-size:14px;font-weight:700;margin:0 0 4px}
.cred-reveal__warn{font-size:12.5px;color:var(--text-muted);margin:0 0 12px}
.cred-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.cred-row__label{font-size:12px;font-weight:600;min-width:110px;color:var(--text-muted)}
.cred-row__val{flex:1;min-width:220px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:6px 10px;word-break:break-all;font-size:12.5px}

.drawer__section{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:20px 0 8px;padding-top:14px;border-top:1px solid var(--border)}
.cell-trunc{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Users (admin) ===== */
.u-cell{display:flex;align-items:center;gap:10px}
.u-cell__text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.u-cell__text b{font-weight:650}
.select--sm{width:auto;min-width:104px;padding:5px 28px 5px 10px;font-size:13px;height:auto}
tr.is-muted td{opacity:.62}
tr.is-muted td:last-child{opacity:1}
/* Consistent action buttons in the users table; Block is a red-tinted outline. */
#users-tbody .col-act{white-space:nowrap}
#users-tbody .col-act .btn + .btn{margin-left:6px}
.btn--outline.u-danger{color:var(--accent);border-color:#E8C6C2}
.btn--outline.u-danger:hover{background:var(--wrg-red-soft);border-color:var(--accent);color:var(--accent)}


/* ========================================================================
   REPORT BODY — the redesigned accessibility report (score dial, tri-sections,
   findings, manual-review table, engine cards, disclaimer). Layered on top of
   the app stylesheet so the GENERAL APP is byte-identical to before; only the
   report page uses these classes. Source: report redesign, sections 28–29.
   ======================================================================== */
/* 28. Triage console (site audit, internal view) ==========================
   Two annotation channels, deliberately different shapes so they never read
   as the same thing:
     .gap   dashed neutral outline = data the scan does not collect yet
     red    solid                  = a real failure in the current scan
   ======================================================================== */
/* section headings — one rhythm for every block on the page */
.sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px}
.sec-head__t{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:max-content;
  font-size:19px;font-weight:700;letter-spacing:-.01em}
.sec-head__m{margin-left:auto;flex:0 1 auto;min-width:0;font-size:12.5px;color:var(--text-faint);
  text-align:right}
@media (max-width:900px){.sec-head__m{margin-left:0;flex-basis:100%;text-align:left}}
.sec-head__s{flex-basis:100%;font-size:13.5px;color:var(--text-muted);max-width:88ch;
  text-wrap:pretty;margin:0}
.tri-sec{margin-top:36px}

/* help bubble — CSS only. Distinct from .tip (§15): that one is a wrapper
   for a nowrap label; this is a standalone "?" affordance with a wide bubble. */
.help{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;flex:none;
  border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-surface);
  color:var(--text-faint);font-size:9.5px;font-weight:700;font-style:normal;letter-spacing:0;
  text-transform:none;cursor:help;vertical-align:1px}
.help:hover,.help:focus-visible{background:var(--wrg-grey-900);border-color:var(--wrg-grey-900);
  color:#fff;outline:none}
.help::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);bottom:auto;left:-10px;
  width:290px;padding:10px 12px;background:var(--wrg-grey-900);color:#E8E8E8;
  border-radius:var(--r-sm);box-shadow:var(--sh-3);font-size:12.5px;font-weight:400;line-height:1.55;
  text-align:left;text-transform:none;letter-spacing:0;white-space:normal;text-wrap:pretty;
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:70;pointer-events:none}
.help:hover::after,.help:focus-visible::after{opacity:1;visibility:visible}
.help--end::after{left:auto;right:-10px}
/* a bubble cannot escape an overflow:auto scroller (and overflow-x:auto forces
   overflow-y to auto), so near the bottom of one it opens upward instead */
.help--up::after,.evid tbody tr:nth-last-child(-n+3) .help::after{top:auto;bottom:calc(100% + 7px)}

.tri-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;color:var(--text-muted)}
.tri-legend span{display:inline-flex;align-items:center;gap:7px}
.tri-legend i{width:13px;height:13px;flex:none;border-radius:3px}
.tri-legend i.k-gap{border:1.5px dashed var(--wrg-grey-500);background:var(--bg-subtle)}
.tri-legend i.k-scan{background:var(--wrg-grey-900)}

/* --- gap annotation --------------------------------------------------- */
.gap{border:1.5px dashed var(--border-strong);background:#FAFAFA;border-radius:var(--r-sm);
  padding:11px 13px;font-size:12.5px;color:var(--text-muted);text-wrap:pretty}
.gap b{color:var(--text);font-weight:700}
.gap__tag{display:inline-block;padding:1px 7px;margin-right:8px;border-radius:4px;
  background:var(--wrg-grey-900);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;vertical-align:1px}
.gap--section{padding:16px 18px}
.gap__title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:6px}

/* --- scan header strip ------------------------------------------------ */
.scanbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 18px;
  background:var(--wrg-grey-900);border-radius:var(--r) var(--r) 0 0;color:#fff}
.scanbar__site{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700}
.scanbar__site img{width:15px;height:17px}
.scanbar__verdict{padding:3px 9px;border-radius:4px;background:var(--warn-soft);color:#6B5217;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.scanbar__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#A8A8A8;
  font-variant-numeric:tabular-nums}
.scanbar__acts{display:flex;gap:8px;margin-left:auto}
.scanbar .btn--onshell{background:transparent;border:1px solid #4A4A4A;color:#EDEDED;
  padding:6px 13px;font-size:12.5px}
.scanbar .btn--onshell:hover{background:#333;border-color:#5C5C5C;color:#fff;text-decoration:none}

/* --- three-column intake strip ---------------------------------------- */
.tri-strip{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;
  background:var(--bg-surface);border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--r) var(--r)}
.tri-strip>div{padding:18px;border-right:1px solid var(--border);min-width:0}
.tri-strip>div:last-child{border-right:0}
.tri-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:12px}

.stackchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip-k{padding:3px 9px;border-radius:5px;background:var(--wrg-grey-900);color:#fff;
  font-size:12px;font-weight:500}
.chip-k--quiet{background:var(--bg-subtle);color:var(--text-muted);border:1px solid var(--border)}

.factgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;font-size:12.5px;
  color:var(--text-muted);margin-bottom:14px}
.factgrid b{color:var(--text);font-weight:500}

.bignum{display:flex;align-items:baseline;gap:10px}
.bignum b{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.bignum span{font-size:13px;color:var(--text-muted);text-wrap:pretty}
.covbar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:14px 0 12px}
.covbar i{height:100%}
.covbar i.c-pass{background:var(--ok)}
.covbar i.c-fail{background:var(--accent)}
.covbar i.c-part{background:var(--warn)}
.covbar i.c-unk{background:var(--wrg-grey-400)}
.covbar i.c-na{background:var(--wrg-grey-200)}
.covkey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px;font-size:12.5px;
  color:var(--text-muted)}
.covkey b{font-weight:700;font-variant-numeric:tabular-nums;margin-right:4px}
.covkey b.n-pass{color:var(--ok)}
.covkey b.n-fail{color:var(--accent)}

.unk{display:flex;flex-direction:column;gap:11px;margin-bottom:12px}
.unk__row{display:flex;gap:11px;align-items:flex-start;font-size:12.5px}
.unk__n{width:20px;flex:none;font-size:15px;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.2}
.unk__t{flex:1;min-width:0;text-wrap:pretty}
.unk__s{flex:none;font-size:11.5px;font-weight:500}
.unk__s--run{color:var(--ok)}
.unk__s--cfg{color:var(--text-muted)}
.unk__s--our{color:var(--info)}

/* --- fix plan --------------------------------------------------------- */
.fixgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fix{background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r)}
.fix--warn{border-left-color:var(--warn)}
.fix__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;
  border-bottom:1px solid var(--border);background:var(--bg-subtle);
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.fix__name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.fix__note{font-size:12px;color:var(--text-muted)}
.fix__clears{margin-left:auto;padding:2px 9px;border-radius:4px;background:var(--wrg-grey-900);
  color:#fff;font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums}
.fix__clears--crit{background:var(--accent)}
.fix__size{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.fix__size--trivial{color:var(--ok)}
.fix__row{display:flex;align-items:flex-start;gap:14px;padding:10px 16px;
  border-bottom:1px solid var(--border);font-size:13px}
.fix__row:last-of-type{border-bottom:0}
.fix__lbl{flex:1;min-width:0}
.fix__h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;text-wrap:pretty}
.fix__id{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--text-faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fix__val{flex:none;text-align:right;font-size:12.5px;font-weight:500;color:var(--accent);
  padding-top:1px}
.fix__val--warn{color:var(--warn)}
.fix__val--mute{color:var(--text-faint)}
.fix__row--mute .fix__id{color:var(--text-faint)}
.fix .gap,.fix__aside{margin:12px 16px 14px}
.fix__aside{padding:11px 13px;border-radius:var(--r-sm);background:var(--warn-soft);
  border:1px solid #EBDCBD;color:#6B5217;font-size:12.5px;text-wrap:pretty}
.fix__aside b{font-weight:700}

/* --- evidence table --------------------------------------------------- */
.evid{width:100%;border-collapse:collapse}
.evid thead th{padding:10px 14px;text-align:left;background:var(--wrg-grey-900);color:#C9C9C9;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.evid td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.evid tbody tr:last-child td{border-bottom:0}
.evid .c-id{min-width:170px}
.evid .c-id b{display:flex;align-items:center;gap:7px;font-weight:500;font-size:13px;
  text-wrap:pretty}
.evid .c-id span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--text-faint);margin-top:2px}
.evid .c-st{width:86px}
.evid .c-ev{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--text-muted);line-height:1.7;text-wrap:pretty}
.st-chip{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em}
.st-chip--pass{background:var(--ok-soft);color:var(--ok)}
.st-chip--fail{background:var(--wrg-red-soft);color:var(--accent)}
.st-chip--num{background:var(--warn-soft);color:var(--warn);font-variant-numeric:tabular-nums}
.st-chip--unk{background:var(--bg-subtle);color:var(--text-muted)}
.miss{display:inline-block;padding:1px 6px;border:1.5px dashed var(--border-strong);border-radius:4px;
  color:var(--text-faint);white-space:nowrap}

/* --- per-page matrix -------------------------------------------------- */
.matrix{width:100%;border-collapse:collapse;background:var(--bg-surface);margin:12px 0}
.matrix th,.matrix td{padding:9px 14px;text-align:left;border:1px solid var(--border);font-size:12.5px}
.matrix th{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-muted);background:var(--bg-subtle)}
.matrix td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.matrix td{color:var(--text-faint)}

/* --- sitemap / site structure ------------------------------------------ */
.smap{width:100%;border-collapse:collapse}
.smap th{padding:9px 16px;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-muted);background:var(--bg-subtle);
  border-bottom:1px solid var(--border);white-space:nowrap}
.smap th.c,.smap td.c{text-align:center;width:96px}
.smap td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.smap tbody tr:last-child td{border-bottom:0}
.smap tbody tr.is-crawled td:first-child{box-shadow:inset 2px 0 0 var(--wrg-grey-900)}
.smap__u{display:flex;align-items:center;gap:8px;min-width:0}
.smap__u b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smap__t{display:block;font-size:12px;color:var(--text-muted);margin-top:3px;text-wrap:pretty}
.smap__d{display:inline-block;font-size:11.5px;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
.smap-in{display:block;margin-left:calc(var(--lvl,0) * 18px)}
.smap-yes{color:var(--ok);font-weight:700}
.smap-no{color:var(--text-faint)}

/* discovery counters */
.disc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border)}
.disc>div{padding:14px 16px;border-right:1px solid var(--border)}
.disc>div:last-child{border-right:0}
.disc__n{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.disc__n--mute{color:var(--text-faint)}
.disc__n--accent{color:var(--accent)}
.disc__l{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);
  margin-top:6px;text-wrap:pretty}
@media (max-width:900px){.disc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .disc>div:nth-child(2){border-right:0}}

/* --- observations / score math ---------------------------------------- */
.obs__row{display:flex;gap:18px;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
.obs__row:last-child{border-bottom:0}
.obs__k{width:190px;flex:none}
.obs__k b{display:flex;align-items:center;gap:7px;font-weight:500;font-size:13px;text-wrap:pretty}
.obs__k span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--text-faint);margin-top:2px}
.obs__v{flex:1;min-width:0;text-wrap:pretty}
.obs__v em{font-style:normal;color:var(--text-muted)}

.math{width:100%;border-collapse:collapse}
.math th{padding:9px 14px;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-muted);background:var(--bg-subtle);
  border-bottom:1px solid var(--border)}
.math th.n,.math td.n{text-align:right;font-variant-numeric:tabular-nums}
.math td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px}
.math tr.is-off td{color:var(--text-faint)}
.math td.z{color:var(--accent)}
.math tr.is-total td{background:var(--wrg-grey-900);color:#fff;font-weight:700;border-bottom:0}
.grade{font-weight:800;font-size:14px}
.grade--a{color:var(--ok)}.grade--b{color:var(--info)}
.grade--c{color:var(--warn)}.grade--f{color:var(--accent)}
.grade--na{color:var(--text-faint)}
.math tr.is-total .grade--c{color:#E8B84B}

/* --- cut list / backlog ----------------------------------------------- */
.cut{padding:4px 18px 18px}
.cut p{font-size:13px;color:var(--text-muted);margin-top:14px;text-wrap:pretty}
.cut b{color:var(--text);font-weight:700}
.cut code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--text)}

.want__row{display:flex;align-items:baseline;gap:18px;padding:10px 16px;
  border-bottom:1px solid var(--border);font-size:13px}
.want__row:last-child{border-bottom:0}
.want__t{flex:1;min-width:0;text-wrap:pretty}
.want__c{flex:none;font-size:12px;font-weight:500;white-space:nowrap}
.want__c--have{color:var(--ok)}
.want__c--near{color:var(--warn)}
.want__c--new{color:var(--accent)}

.tri-foot{display:flex;flex-wrap:wrap;gap:18px;padding:14px 18px;margin-top:var(--sp-4);
  border-top:1px solid var(--border);font-size:12px;color:var(--text-faint)}
.tri-foot .u-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media (max-width:1200px){
  .tri-strip{grid-template-columns:minmax(0,1fr)}
  .tri-strip>div{border-right:0;border-bottom:1px solid var(--border)}
  .tri-strip>div:last-child{border-bottom:0}
  .fixgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .obs__k{width:auto}
  .obs__row{flex-direction:column;gap:3px}
  .covkey,.factgrid{grid-template-columns:minmax(0,1fr)}
}


/* 29. ADA / accessibility report =========================================
   A scan result, read by a mixed audience: the account manager wants the
   score, the developer wants the selector. Plain English leads every block;
   the machine-readable id sits underneath it.
   ======================================================================== */

/* --- report header ------------------------------------------------------ */
.rep-pills{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px}
.rep-url{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:800;
  letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.rep-url a{color:inherit}
.rep-url .icon{width:17px;height:17px;flex:none;color:var(--text-faint)}
.rep-meta{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:12px;font-size:12.5px;
  color:var(--text-faint)}
.rep-meta span{display:flex;align-items:center;gap:6px}
.rep-meta b{font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* --- score dial --------------------------------------------------------- */
.scorecard{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 20px 20px;text-align:center;height:100%}
.dial{position:relative;width:210px;max-width:100%}
.dial svg{display:block;width:100%;height:auto;overflow:visible}
.dial__track{fill:none;stroke:var(--border);stroke-width:15;stroke-linecap:round}
.dial__fill{fill:none;stroke:var(--ok);stroke-width:15;stroke-linecap:round}
.dial--warn .dial__fill{stroke:var(--warn)}
.dial--bad .dial__fill{stroke:var(--accent)}
.dial__c{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;
  align-items:center}
.dial__n{font-size:52px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.dial__n em{font-style:normal;font-size:17px;font-weight:500;color:var(--text-faint);
  letter-spacing:0}
.dial__v{margin-top:4px;font-size:14px;font-weight:700;color:var(--ok)}
.dial--warn .dial__v{color:var(--warn)}
.dial--bad .dial__v{color:var(--accent)}
.dial__ends{display:flex;justify-content:space-between;width:210px;max-width:100%;
  margin-top:-4px;font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.scorecard__note{margin-top:14px;max-width:34ch;font-size:12.5px;color:var(--text-muted);
  text-wrap:pretty}

/* --- results tally ------------------------------------------------------ */
.tally{display:flex;flex-direction:column}
.tally__row{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--border)}
.tally__row:last-child{border-bottom:0}
.tally__ico{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center}
.tally__ico svg{width:14px;height:14px;stroke-width:2.4;fill:none;stroke-linecap:round;
  stroke-linejoin:round}
.tally__ico--crit{background:var(--accent);color:#fff}
.tally__ico--ser{background:#F0A03C;color:#fff}
.tally__ico--mod{background:#E9C43F;color:#fff}
.tally__ico--min{background:var(--info);color:#fff}
.tally__ico--pass{background:var(--ok);color:#fff}
.tally__ico--man{background:var(--wrg-grey-900);color:#fff}
.tally__l{display:flex;align-items:center;gap:7px;width:150px;flex:none;font-size:13.5px;
  font-weight:500}
.tally__bar{flex:1;min-width:40px;height:6px;border-radius:3px;background:var(--bg-subtle);
  overflow:hidden}
.tally__bar i{display:block;height:100%;border-radius:3px;background:var(--wrg-grey-900)}
.tally__n{width:34px;flex:none;text-align:right;font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums}
.tally__row.is-zero .tally__l,.tally__row.is-zero .tally__n{color:var(--text-faint);
  font-weight:500}
.tally__row.is-zero .tally__ico{background:var(--bg-subtle);color:var(--text-faint)}
@media (max-width:560px){.tally__l{width:auto}.tally__bar{display:none}}

/* --- a single finding --------------------------------------------------- */
.finding{border:1px solid var(--border);border-radius:var(--r);background:var(--bg-surface);
  border-left:3px solid var(--border-strong);overflow:hidden;margin-bottom:12px}
.finding--serious{border-left-color:#F0A03C}
.finding--minor{border-left-color:var(--info)}
.finding__head{display:flex;align-items:flex-start;gap:11px;padding:15px 17px}
.finding__ico{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:800}
.finding--serious .finding__ico{background:#F0A03C}
.finding--minor .finding__ico{background:var(--info)}
.finding__b{flex:1;min-width:0}
.finding__t{font-size:16px;font-weight:700;letter-spacing:-.01em;text-wrap:pretty}
.finding__d{margin-top:5px;font-size:13.5px;color:var(--text-muted);max-width:84ch;
  text-wrap:pretty}
.finding__n{flex:none;font-size:12px;color:var(--text-faint);padding-top:3px;white-space:nowrap}
.finding__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 17px 14px}
.finding__fix{margin:0 17px 15px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ok-soft);border:1px solid rgba(74,143,110,.25)}
.finding__fix b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ok);margin-bottom:5px}
.finding__fix p{font-size:13.5px;color:var(--text);text-wrap:pretty;max-width:84ch}
.finding__fix code{padding:1px 5px;border-radius:4px;background:var(--bg-surface);
  border:1px solid rgba(74,143,110,.28);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--text-muted);overflow-wrap:anywhere}
.finding__fix a{color:var(--ok);font-weight:500}
/* keep the trailing external-link glyph tied to its last word */
.nb{white-space:nowrap}
.finding__inst{border-top:1px solid var(--border);background:var(--bg-subtle)}
.finding__inst>summary{list-style:none;cursor:pointer;padding:10px 17px;font-size:12px;
  font-weight:500;color:var(--text-muted);display:flex;align-items:center;gap:7px}
.finding__inst>summary::-webkit-details-marker{display:none}
.finding__inst>summary:hover{color:var(--text)}
.finding__inst>summary svg{width:13px;height:13px;transition:transform .15s}
.finding__inst[open]>summary svg{transform:rotate(90deg)}
.finding__inst>div{padding:0 17px 15px}

/* path / snippet pair */
.cp{margin-bottom:9px}
.cp:last-child{margin-bottom:0}
.cp__k{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:4px}
.cp__v{display:block;padding:8px 11px;border-radius:var(--r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.65;
  overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.cp__v--path{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted)}
.cp__v--code{background:var(--wrg-grey-900);border:1px solid var(--wrg-grey-900);color:#D6D6D6}
.cp__v--code b{color:#F2B8B1;font-weight:400}
.inst-sep{height:1px;background:var(--border);margin:13px 0}
.inst-n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:7px}

/* --- incomplete checks -------------------------------------------------- */
.inc{border-bottom:1px solid var(--border);padding:14px 17px}
.inc:last-child{border-bottom:0}
.inc__t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-wrap:pretty}
.inc__id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  font-weight:400;color:var(--text-faint)}
.inc__d{margin:5px 0 10px;font-size:13.5px;color:var(--text-muted);max-width:84ch;
  text-wrap:pretty}

/* --- manual criteria table ---------------------------------------------- */
.mtab{width:100%;border-collapse:collapse}
.mtab thead th{padding:10px 14px;text-align:left;background:var(--wrg-grey-900);color:#C9C9C9;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.mtab td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13.5px;
  vertical-align:top;text-wrap:pretty}
.mtab tbody tr:last-child td{border-bottom:0}
.mtab tbody tr:hover td{background:var(--bg-subtle)}
.mtab .c-sc{width:78px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--text-faint);white-space:nowrap}
.mtab .c-nm{width:210px;font-weight:500}
.mtab .c-nm span{display:block;font-size:11.5px;font-weight:400;color:var(--text-faint);
  margin-top:2px}

/* --- passed / not-applicable rule lists --------------------------------- */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;padding:4px 17px 14px}
@media (max-width:1000px){.rules{grid-template-columns:minmax(0,1fr)}}
.rule{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--border);min-width:0}
.rule__id{width:170px;flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--text-muted);overflow-wrap:anywhere}
.rule__d{flex:1;min-width:0;font-size:12.5px;color:var(--text-muted);text-wrap:pretty}
.rule__w{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
@media (max-width:560px){.rule{flex-wrap:wrap;gap:2px 10px}.rule__id{width:100%}}

/* collapsible section shell for the long lists */
.fold{border:1px solid var(--border);border-radius:var(--r);background:var(--bg-surface);
  box-shadow:var(--sh-1);overflow:hidden}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 17px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:hover{background:var(--bg-subtle)}
.fold__cv{width:14px;height:14px;flex:none;transition:transform .15s;color:var(--text-faint)}
.fold[open]>summary .fold__cv{transform:rotate(90deg)}
.fold__n{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--text-faint)}
.fold__s{padding:0 17px 12px;font-size:13px;color:var(--text-muted);max-width:88ch;
  text-wrap:pretty;margin-top:-4px}

/* --- engines & coverage -------------------------------------------------- */
.eng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;padding:2px 0}
@media (max-width:800px){.eng{grid-template-columns:minmax(0,1fr)}}
.eng__row{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--border)}
.eng__n{flex:1;min-width:0;font-size:13.5px;font-weight:500}
.eng__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--text-faint)}
.disclaim{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--warn-soft);border:1px solid rgba(178,132,42,.3);margin-top:16px}
.disclaim svg{width:17px;height:17px;flex:none;stroke:var(--warn);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.disclaim p{font-size:13px;line-height:1.6;color:var(--text);text-wrap:pretty;max-width:92ch}
.disclaim b{font-weight:700}

.rep-foot{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:30px;padding-top:16px;
  border-top:1px solid var(--border);font-size:12px;color:var(--text-faint)}
.rep-foot b{font-weight:500;color:var(--text-muted)}

/* small general additions this section needed */
.tag--mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--text-faint)}
.icon--xs{display:inline-block;width:12px;height:12px;vertical-align:-1px}
.u-mb3{margin-bottom:var(--sp-3)}

/* ===== Multi-page (crawl) report: aggregate cards, pages table, page tabs ===== */
.crawl-top{align-items:stretch}
.crawl-top .card{display:flex;flex-direction:column}
.crawl-top .scorecard{flex:1;justify-content:center}
/* Coverage definition list */
.cov{display:flex;flex-direction:column;gap:2px;margin:0}
.cov__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border)}
.cov__row:last-child{border-bottom:0}
.cov__row dt{color:var(--text-muted);font-size:13px}
.cov__row dd{margin:0;font-weight:600;font-size:13px;text-align:right}
/* Pages table */
.pp-table td,.pp-table th{vertical-align:middle}
.pp-table th:not(:first-child),.pp-table td:not(.pp-url):not(.col-act){text-align:center;width:52px}
.pp-table th:nth-child(2),.pp-table td:nth-child(2){text-align:left;width:132px}
.pp-url{min-width:220px}
.pp-url b{display:block;font-weight:650}
.pp-url .cell-muted{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:340px}
.pp-nil{color:var(--text-faint)}
.pp-score{display:inline-flex;align-items:center;gap:8px}
.pp-score b{font-variant-numeric:tabular-nums;min-width:22px}
.pp-bar{display:inline-block;width:64px;height:6px;border-radius:4px;
  background:var(--wrg-grey-200,#e7e7e4);overflow:hidden}
.pp-bar i{display:block;height:100%;background:var(--ok)}
.pp-bar--needs-improvement i{background:var(--warn)}
.pp-bar--poor i{background:var(--accent)}
.pp-bar--unscorable i{background:var(--text-faint)}
.pp-in-set td{background:var(--ok-soft)}
.crawl-page{scroll-margin-top:16px}
/* Per-page header card */
.page-hc{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--border);
  border-left:3px solid var(--ink,#080807);border-radius:12px;background:var(--bg-surface);margin:0 0 var(--sp-4)}
.page-hc__num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--ink,#080807);color:#fff;
  display:inline-grid;place-items:center;font-weight:700;font-size:12.5px}
.page-hc__main{flex:1;min-width:0}
.page-hc__url{margin:0;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.page-hc__url a{color:inherit;text-decoration:none}
.page-hc__url a:hover{text-decoration:underline}
.page-hc__url .icon{width:13px;height:13px;flex:none;color:var(--text-faint)}
.page-hc__meta{margin:5px 0 0;font-size:12.5px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:2px 16px}
.page-hc__meta b{color:var(--text);font-weight:650}
.page-hc__score{flex:none;font-size:13px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.page-hc__score::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-faint)}
.score-dot--good::before{background:var(--ok)}
.score-dot--needs-improvement::before{background:var(--warn)}
.score-dot--poor::before{background:var(--accent)}
/* Manual-review accordion rows inside the card */
.inc-folds{padding:2px 2px}
.inc-fold.fold{border:0;border-radius:0;background:transparent;margin:0;border-bottom:1px solid var(--border)}
.inc-fold.fold:last-child{border-bottom:0}
.inc-fold>summary{padding:13px 8px}
.inc-fold__t{flex:1;font-weight:600;font-size:14px}
.inc-fold__t .inc__id{font-weight:400;color:var(--text-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;margin-left:6px}
.inc-fold__m{margin-left:auto;flex:none;font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.inc-fold__body{padding:0 8px 14px 32px}

/* ===== Integrations additions (re-appended over design.css) ===== */