/* ==========================================================================
   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 ============================================================== */
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37BoltonTrial-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37BoltonTrial-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37BoltonTrial-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37BoltonTrial-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37BoltonTrial-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"F37 Bolton";src:url("/assets/fonts/F37BoltonTrial-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}

/* 02. Tokens =============================================================
   Brand palette is fixed. Semantic tokens below map brand -> role, so a
   future dark theme only needs to override the SEMANTIC block (see the
   commented [data-theme="dark"] stub at the end of this section).
   ======================================================================== */
:root{
  /* brand */
  --wrg-white:#FFFFFF;
  --wrg-grey-100:#F5F5F5;
  --wrg-grey-200:#E0E0E0;
  --wrg-grey-900:#080807;
  --wrg-red:#fa4c4f;
  --wrg-black:#000000;

  /* brand, derived (tints of the above — do not introduce new hues) */
  --wrg-red-dark:#e23a3d;
  --wrg-red-soft:#ffe8e8;
  --wrg-grey-400:#9A9A9A;
  --wrg-grey-500:#7A7A7A;
  --wrg-grey-700:#4A4A4A;

  /* status (muted, so red stays the loudest colour on screen) */
  --ok:#3F7D5C; --ok-soft:#E7F1EB;
  --warn:#8A6A1F; --warn-soft:#F8EFDC;
  --info:#3B6484; --info-soft:#E7EFF5;

  /* semantic — override these for themes */
  --bg-shell:var(--wrg-grey-900);
  --bg-app:var(--wrg-grey-100);
  --bg-surface:var(--wrg-white);
  --bg-subtle:var(--wrg-grey-100);
  --bg-hover:#FAFAFA;
  --border:var(--wrg-grey-200);
  --border-strong:#CFCFCF;
  --text:var(--wrg-grey-900);
  --text-muted:var(--wrg-grey-500);
  --text-faint:var(--wrg-grey-400);
  --text-invert:var(--wrg-white);
  --accent:var(--wrg-red);
  --accent-hover:var(--wrg-red-dark);

  /* sidebar */
  --side-text:rgba(255,255,255,.70);
  --side-muted:rgba(255,255,255,.38);
  --side-hover:rgba(255,255,255,.07);
  --side-active:rgba(255,255,255,.12);
  --side-rule:rgba(255,255,255,.09);

  /* shape & depth */
  --r-sm:6px; --r:9px; --r-lg:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.05);
  --sh-2:0 2px 10px rgba(0,0,0,.07);
  --sh-3:0 12px 34px rgba(0,0,0,.14);
  --sh-pane:-10px 0 34px rgba(0,0,0,.28);
  --ring:0 0 0 3px rgba(250,76,79,.24);

  /* rhythm (compact density) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;
  --side-w:236px;
}
/* Dark theme stub — uncomment & fill when needed.
[data-theme="dark"]{ --bg-app:#1B1B1B; --bg-surface:#232323; --bg-subtle:#1E1E1E;
  --border:#333; --text:#EDEDED; --text-muted:#9A9A9A; --bg-hover:#2A2A2A; } */

/* 03. Reset & base ======================================================= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"F37 Bolton","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.45;color:var(--text);
  background:var(--bg-shell);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
img{max-width:100%}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;line-height:1.25}
:focus-visible{outline:2px solid var(--accent);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 floats above with a rounded left edge + cast shadow.
   ======================================================================== */
.app{display:flex;min-height:100vh}
.app__main{
  flex:1;min-width:0;position:relative;z-index:1;
  background:var(--bg-app);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  box-shadow:var(--sh-pane);
  display:flex;flex-direction:column;
}
.app__body{padding:var(--sp-5) var(--sp-6) 40px;flex:1}

/* 05. Sidebar ============================================================ */
.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--bg-shell);color:var(--side-text);
  display:flex;flex-direction:column;
  padding:var(--sp-5) var(--sp-3) var(--sp-3);
  position:sticky;top:0;height:100vh;
}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:0 8px var(--sp-5)}
.sidebar__brand:hover{text-decoration:none;color:inherit} /* no red hover underline on the logo */
.sidebar__mark{width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border-radius:8px}
.sidebar__mark svg{width:19px;height:19px}
.sidebar__name{display:block;color:var(--wrg-white);font-weight:700;font-size:14.5px;letter-spacing:.01em}
.sidebar__sub{display:block;font-size:11.5px;color:var(--side-muted);letter-spacing:.02em}
.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:rgba(255,255,255,.12);border-radius:3px}

.nav-group{margin-bottom:var(--sp-5)}
.nav-group__label{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--side-muted);padding:0 10px;margin-bottom:var(--sp-2)}
.nav{display:flex;flex-direction:column;gap:1px}
.nav__link{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:14px;color:var(--side-text);transition:background .14s,color .14s;
}
.nav__link:hover{background:var(--side-hover);color:var(--wrg-white);text-decoration:none}
.nav__link.is-active{background:var(--side-active);color:var(--wrg-white);font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent)}
.nav__icon{width:16px;height:16px;flex:none;opacity:.8;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.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(--accent);color:#fff;font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.nav__badge--quiet{background:rgba(255,255,255,.13);color:var(--side-text);font-weight:500}
.nav__badge--dot{min-width:7px;width:7px;height:7px;padding:0}
.nav__tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.13);color:#fff}

/* 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 2px var(--sp-4);display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);
  color:var(--side-muted);font-size:13.5px;border:1px solid transparent;cursor:pointer;width:calc(100% - 4px)}
.sidebar__cta:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar__kbd{margin-left:auto;font-size:11px;padding:1px 5px;border-radius:4px;
  border:1px solid rgba(255,255,255,.18);color:var(--side-muted)}

.sidebar__foot{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--side-rule);
  display:flex;align-items:center;gap:9px;padding-left:6px}
.sidebar__foot .avatar{background:var(--accent)}
.sidebar__user{min-width:0}
.sidebar__user b{display:block;color:#fff;font-size:13.5px;font-weight:500}
.sidebar__user span{display:block;font-size:11.5px;color:var(--side-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__gear{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--side-muted);background:none;border:0;cursor:pointer;
  list-style:none}
.sidebar__gear::-webkit-details-marker{display:none}
.sidebar__gear:hover{background:var(--side-hover);color:#fff}

/* 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:#fff}
.menu__pop{position:absolute;bottom:calc(100% + 8px);right:-4px;z-index:50;
  min-width:186px;padding:5px;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:1px}
.menu__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}
.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(--accent)}
.menu__item--danger:hover{background:var(--wrg-red-soft);color:var(--accent)}
.menu__sep{height:1px;background:var(--border);margin:4px 2px}

/* 06. Topbar & page head ================================================= */
.topbar{display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);
  height:52px;border-bottom:1px solid var(--border);background:var(--bg-surface);
  border-radius:var(--r-lg) 0 0 0}
.topbar__tabs{display:flex;gap:var(--sp-4);height:100%;align-items:stretch}
.tab{display:flex;align-items:center;white-space:nowrap;font-size:14px;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(--wrg-grey-900)}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;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-start;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.page-head__title{font-size:21px}
.page-head__sub{color:var(--text-muted);font-size:13.5px;margin-top:3px;max-width:62ch;text-wrap:pretty}
.page-head__actions{margin-left:auto;display:flex;gap:var(--sp-2);flex:none}

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

/* 07. Buttons ============================================================
   .btn--primary is RED (brand primary action). .btn--dark for neutral
   emphasis, .btn--outline / --ghost for secondary, .btn--danger destructive.
   ======================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid transparent;background:none;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s,box-shadow .14s}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--dark{background:var(--wrg-grey-900);color:#fff}
.btn--dark:hover{background:var(--wrg-black)}
.btn--outline{background:var(--bg-surface);border-color:var(--border);color:var(--text)}
.btn--outline:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.btn--ghost{color:var(--text-muted)}
.btn--ghost:hover{background:var(--wrg-grey-200);color:var(--text)}
.btn--danger{background:var(--bg-surface);border-color:var(--accent);color:var(--accent)}
.btn--danger:hover{background:var(--accent);color:#fff}
.btn--sm{padding:5px 10px;font-size:12.5px}
.btn--lg{padding:10px 18px;font-size:14.5px}
.btn--block{width:100%}
.btn--icon{padding:0;width:30px;height:30px;flex:none}
.btn--icon.btn--sm{width:26px;height:26px}
.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);border-radius:var(--r);
  box-shadow:var(--sh-1)}
.card__head{display:flex;align-items:center;gap:var(--sp-3);padding:12px 16px;
  border-bottom:1px solid var(--border)}
.card__title{font-size:14.5px;font-weight:700}
.card__meta{font-size:12.5px;color:var(--text-muted)}
.card__tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.card__body{padding:16px}
.card__body--flush{padding:0}
.card__foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;
  align-items:center;gap:var(--sp-2);font-size:13px;color:var(--text-muted)}

.grid{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.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:var(--sp-4)}

/* KPI */
.kpi{padding:14px 16px}
.kpi__label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.09em}
.kpi__row{display:flex;align-items:flex-end;gap:8px;margin-top:6px}
.kpi__value{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1}
.kpi__unit{font-size:13px;color:var(--text-muted);padding-bottom:2px}
.kpi__delta{font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:3px}
.kpi__delta--up{color:var(--ok)}
.kpi__delta--down{color:var(--accent)}
.kpi__delta--flat{color:var(--text-muted)}
.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:rgba(38,38,38,.06);stroke:none}
.kpi--accent .kpi__spark path{stroke:var(--accent)}
.kpi--accent .kpi__spark .fill{fill:rgba(228,103,91,.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:700;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:700}

.progress{display:flex;flex-direction:column;gap:12px}
.progress__row{display:grid;gap:5px}
.progress__meta{display:flex;justify-content:space-between;font-size:13px}
.progress__meta b{font-weight:700}
.progress__track{height:6px;background:var(--wrg-grey-100);border-radius:3px;overflow:hidden}
.progress__fill{height:100%;border-radius:3px;background:var(--wrg-grey-900)}
.progress__fill--accent{background:var(--accent)}
.progress__fill--mid{background:var(--wrg-grey-400)}

/* 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(--wrg-red-soft);color:var(--accent)}
.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(--wrg-grey-900);color:#fff;font-weight:700}
.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:#fff}

/* 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-surface);z-index:2;
  text-align:left;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-muted);padding:9px 14px;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:9px 14px;border-bottom:1px solid var(--border);font-size:13.5px;
  vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--bg-hover)}
.table tbody tr.is-selected{background:#FDF6F5}
.table .col-check{width:38px}
.table .col-act{width:56px;text-align:right}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.cell-strong{font-weight:500}
.cell-muted{color:var(--text-muted);font-size:12.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}

.avatar{width:26px;height:26px;border-radius:50%;flex:none;display:inline-grid;place-items:center;
  background:var(--wrg-grey-900);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.avatar--lg{width:32px;height:32px;font-size:12.5px}
.avatar--soft{background:var(--wrg-grey-200);color:var(--text-muted)}

.toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:10px 14px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.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(--wrg-grey-900);color:#fff;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(--wrg-grey-900);color:#fff;box-shadow:var(--sh-3);z-index:5}
.bulkbar__count{font-size:13px;padding:0 10px 0 6px;color:rgba(255,255,255,.85)}
.bulkbar__count b{font-weight:700;color:#fff}
.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:#fff}
.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(--accent) !important;color:#fff !important;margin-right:4px}

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

.input,.select,.textarea{
  width:100%;font-size:13.5px;padding:7px 10px;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);
  transition:border-color .14s,box-shadow .14s}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.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='%237A7A7A' 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(--accent)}
.field.is-success .input{border-color:var(--ok)}
.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:8px;font-size:13.5px;cursor:pointer}
.choice input{appearance:none;width:15px;height:15px;flex:none;margin-top:1px;
  border:1px solid var(--border-strong);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(--wrg-grey-500)}
.choice input:checked{background:var(--accent);border-color:var(--accent)}
.choice input[type="checkbox"]:checked::after{content:"";position:absolute;left:4px;top:1px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.choice input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;
  border-radius:50%;background:#fff}
.choice input:focus-visible{box-shadow:var(--ring)}
.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;color:var(--text-muted);font-size:12px}
.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:10px;cursor:pointer;font-size:13.5px}
.switch input{appearance:none;width:34px;height:19px;flex:none;border-radius:var(--r-pill);
  background:var(--wrg-grey-200);position:relative;cursor:pointer;transition:background .16s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .16s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(15px)}
.switch input:focus-visible{box-shadow:var(--ring)}
.switch input:disabled{opacity:.45;cursor:not-allowed}
.switch__text{min-width:0}
.switch__text b{display:block;font-weight:500}
.switch__text small{color:var(--text-muted);font-size:12px}
.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;background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:2px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{font-size:13px;padding:4px 12px;border-radius:5px;cursor:pointer;color:var(--text-muted)}
.seg input:checked+label{background:var(--bg-surface);color:var(--text);font-weight:500;box-shadow:var(--sh-1)}

/* 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(--accent);background:var(--wrg-red-soft)}
.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:9px;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:13px;margin-top:8px}
.filerow__ico{width:26px;height:26px;border-radius:5px;background:var(--bg-subtle);display:grid;
  place-items:center;font-size:10px;font-weight:700;color:var(--text-muted)}
.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(--accent)}

.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:700;padding-bottom:2px}

/* 13. Feedback =========================================================== */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:500;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75}
.pill--ok{background:var(--ok-soft);color:var(--ok)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--info{background:var(--info-soft);color:var(--info)}
.pill--danger{background:var(--wrg-red-soft);color:var(--accent)}
.pill--neutral{background:var(--bg-subtle);color:var(--text-muted)}
.pill--plain::before{display:none}

.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11.5px;font-weight:500;
  background:var(--bg-subtle);color:var(--text-muted);border:1px solid var(--border)}

.alert{display:flex;gap:10px;padding:11px 13px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg-surface);font-size:13.5px}
.alert svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.alert b{display:block;font-weight:700;margin-bottom:1px}
.alert__body{min-width:0;flex:1;text-wrap:pretty}
.alert--danger{background:var(--wrg-red-soft);border-color:#F3CFCB;color:#8E3A32}
.alert--ok{background:var(--ok-soft);border-color:#CFE3D8;color:#2F6249}
.alert--warn{background:var(--warn-soft);border-color:#EBDCBD;color:#7A5D1B}
.alert--info{background:var(--info-soft);border-color:#D3E1EB;color:#33566F}

.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;text-align:center}
.empty svg{width:26px;height:26px;stroke:var(--text-faint);fill:none;stroke-width:1.4}
.empty b{font-size:14px}
.empty p{font-size:13px;color:var(--text-muted);max-width:38ch;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:#fff}
.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(--accent)}
.tool__ico--soft{background:var(--bg-subtle);color:var(--text)}
.tool__name{display:block;font-size:14px;font-weight:700}
.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:372px;background:var(--bg-surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:30px 28px 22px}
.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:19px;text-align:center}
.auth__sub{font-size:13.5px;color:var(--text-muted);text-align:center;margin:4px 0 20px}
.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-faint);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;margin:4px 0}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--border)}
.auth__foot{text-align:center;font-size:12.5px;color:var(--text-muted);margin-top:16px}
.auth__legal{text-align:center;font-size:11.5px;color:var(--text-faint);margin-top:18px}

/* split variant */
.auth--split{display:grid;grid-template-columns:1fr 1fr;place-items:stretch;padding:0}
.auth__brand{background:var(--wrg-grey-900);color:#fff;padding:44px;display:flex;
  flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.auth__brand-copy{position:relative;z-index:1}
.auth__brand-mark{width:38px;height:38px}
.auth__quote{font-size:25px;font-weight:300;line-height:1.32;letter-spacing:-.015em;max-width:16ch;
  position:relative;z-index:1;margin-bottom:14px}
.auth__quote b{font-weight:700}
.auth__brand-foot{font-size:12.5px;color:var(--side-muted);position:relative;z-index:1}
.auth__ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  width:min(58%,230px);opacity:.9;z-index:0}
.auth__pane{background:var(--bg-app);display:grid;place-items:center;padding:24px}
.auth__pane .auth__card{box-shadow:var(--sh-2);border:1px solid var(--border)}

/* 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:#fff}
.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:#fff}
.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-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:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);
  margin:22px 0 10px}


/* 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.
   ======================================================================== */
.ovl-in{position:absolute;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(0,0,0,.45);
  animation:ovlFade .16s ease}
@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(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow:auto;
  background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  animation:ovlPopC .18s ease}
.modal--sm{width:min(400px,calc(100vw - 32px))}
.modal--lg{width:min(760px,calc(100vw - 32px))}
.modal__head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px}
.modal__title{font-size:15.5px}
.modal__sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;text-wrap:pretty}
.modal__x{margin-left:auto;flex:none;width:28px;height:28px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer}
.modal__x:hover{background:var(--bg-subtle);color:var(--text)}
.modal__body{padding:0 18px 16px;font-size:13.5px}
.modal__foot{display:flex;align-items:center;gap:9px;padding:12px 18px;
  border-top:1px solid var(--border);background:var(--bg-subtle);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.modal__foot .spacer{flex:1}
.modal__icon{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center}
.modal__icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.modal__icon--danger{background:var(--wrg-red-soft);color:var(--accent)}
.modal__icon--warn{background:var(--warn-soft);color:var(--warn)}
.modal__icon--ok{background:var(--ok-soft);color:var(--ok)}

/* --- drawer / side panel --- */
.drawer{position:fixed;z-index:101;top:0;right:0;height:100vh;
  width:min(420px,calc(100vw - 40px));background:var(--bg-surface);
  box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:ovlSlideR .2s ease}
.drawer--left{right:auto;left:0;animation-name:ovlSlideL}
@keyframes ovlSlideL{from{transform:translateX(-100%)}to{transform:none}}
.drawer--wide{width:min(620px,calc(100vw - 40px))}
.drawer__head{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--border)}
.drawer__title{font-size:14.5px}
.drawer__body{flex:1;overflow-y:auto;padding:16px 18px}
.drawer__foot{display:flex;gap:9px;padding:12px 18px;border-top:1px solid var(--border);
  background:var(--bg-subtle)}
.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-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);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-lg);
  box-shadow:var(--sh-3);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(--wrg-red-soft);color:var(--accent)}
.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:11px 12px;border-radius:var(--r);
  background:var(--wrg-grey-900);color:#fff;box-shadow:var(--sh-3);font-size:13px;
  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:#fff}
.toast--ok svg{color:#7FD3A6}
.toast--danger svg{color:var(--accent)}
.toast--warn svg{color:#E8C071}
.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(--accent);
  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(--wrg-grey-900);color:#fff;font-size:11.5px;padding:4px 8px;
  border-radius:5px;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(--wrg-grey-900);
  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(--wrg-grey-900)}

/* --- 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);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:5px;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(--accent)}
.pop__item--danger:hover{background:var(--wrg-red-soft)}
.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-radius:var(--r-lg);box-shadow:var(--sh-3)}
.spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--wrg-grey-200);
  border-top-color:var(--accent);animation:spin .7s linear infinite}
.spinner--sm{width:15px;height:15px;border-width:2px}
.spinner--invert{border-color:rgba(255,255,255,.2);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__text{font-size:13px;color:var(--text-muted)}
.skeleton{background:linear-gradient(90deg,var(--wrg-grey-100) 25%,#EDEDED 37%,var(--wrg-grey-100) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;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:11px;padding:10px 14px;background:var(--wrg-grey-900);
  color:#fff;font-size:13px}
.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:#fff;text-decoration:underline}
.banner--accent{background:var(--accent)}
.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:#fff}

@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}
  .app__main{border-radius:0;box-shadow:none}
  .topbar{border-radius:0;padding:0 var(--sp-4)}
  .app__body{padding:var(--sp-4) var(--sp-4) 32px}
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:12px 0 34px rgba(0,0,0,.4)}
  #nav-toggle:checked~.app .sidebar{transform:none}
  #nav-toggle:checked~.nav-scrim{display:block;position:fixed;inset:0;z-index:30;
    background:rgba(0,0,0,.45)}
  .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){
  .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{
  body{background:#fff}
  .sidebar,.topbar,.bulkbar,.burger{display:none !important}
  .app__main{box-shadow:none;border-radius:0}
  .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);
  box-shadow:0 30px 70px rgba(0,0,0,.45);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 Testing Tool — 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;
  box-shadow:0 1px 2px rgba(15,15,14,.04), 0 8px 30px -18px rgba(15,15,14,.25);
}
.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;
  box-shadow:0 10px 34px -20px rgba(15,15,14,.35);
}

/* 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 #EAD9AE;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:#cfe0ea;color:#1f4d63}
.pdf-status--ok{background:var(--ok-soft);border-color:#c7e2d1;color:#215c3c}
.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) ===== */