/* Portal pages (sign-in, access denied, history, insights, users). Light only, on the same design tokens as
   docforensics/web/design-system.css so the review page and these pages read as one product. The role tokens below
   mirror that file's contrast pass (2026-10-12): text 4.5:1, white on the accent 4.5:1, control edges 3:1. */
:root {
  color-scheme: light;
  --font-sans: Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --n0: #ffffff; --n25: #f8f9fb; --n50: #f1f3f6; --n100: #e3e7ee; --n200: #cbd2dd; --n300: #9aa4b5;
  --n400: #6b7586; --n500: #4e5768; --n600: #353d4c; --n800: #0e151c; --n900: #081116;
  --bg: #ffffff; --panel: var(--n0); --ink: var(--n800); --muted: var(--n500); --faint: #646e7f;
  --line: var(--n100); --line-soft: var(--n50); --soft: var(--n25); --control-border: #7c869a;
  --accent: #325fec; --accent-hover: #2449cf; --blue: #325fec; --blue-bg: #eef2fe; --blue-bg2: #f6f8ff;
  --green: #007a3a; --green-bg: #ecf9ef; --amber: #866504; --amber-bg: #fef8e6; --red: #db1313; --red-bg: #fdeeee;
  --bar-fill: #325fec;
  --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 100px;
  --shadow-xs: 0 1px 2px rgba(2,6,23,.04);
  --shadow-sm: 0 1px 2px rgba(2,6,23,.04), 0 1px 4px 2px rgba(2,6,23,.02);
  --shadow-md: 0 4px 6px -2px rgba(2,6,23,.04), 0 6px 4px -4px rgba(2,6,23,.03), 0 1px 4px rgba(2,6,23,.04);
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 14px/1.5 var(--font-sans); font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eyeline { margin: 0 0 4px; font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
h1 { font: 600 32px/36px var(--font-sans); letter-spacing: -.025em; margin: 0 0 6px; }
h2 { font: 600 15px/20px var(--font-sans); margin: 0 0 14px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.icon { width: 16px; height: 16px; flex: none; }
code { font: 500 12px var(--font-mono); background: var(--n50); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* brand */
.brand { display: flex; align-items: center; gap: 10px; color: var(--n600); font: 700 17px/1 var(--font-sans); letter-spacing: -.02em; white-space: nowrap; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-tile { width: 28px; height: 28px; border-radius: var(--radius); background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 1px rgba(255,255,255,.25); flex: none; }
.brand-tile svg { width: 16px; height: 16px; }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent); color: #fff; font: 500 14px/1 var(--font-sans); cursor: pointer; text-decoration: none; box-shadow: var(--shadow-xs); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn.ghost { background: var(--panel); color: var(--n600); border-color: var(--control-border); }
.btn.ghost:hover { background: var(--soft); color: var(--ink); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
label { display: block; font: 500 13px/18px var(--font-sans); margin: 16px 0 6px; color: var(--n600); }
input[type=email], input[type=password], input[type=text] { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit; box-shadow: var(--shadow-xs); }
input:is([type=email], [type=password], [type=text], [type=search]):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--blue-bg); }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--n600); }
.check input { margin-top: 3px; accent-color: var(--accent); }
.err { margin: 16px 0 0; padding: 10px 12px; background: var(--red-bg); color: var(--red); border: 1px solid #f8d4d6; border-radius: var(--radius-lg); font-size: 13px; }
.note { font-size: 12px; line-height: 18px; color: var(--muted); margin-top: 14px; }

/* sign-in and access denied: a centred card */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 32px 28px; }
.card .brand { margin-bottom: 32px; }
.card h1 { font-size: 24px; line-height: 30px; }
.card .btn { width: 100%; margin-top: 20px; height: 40px; }
.card.privacy h1 { margin-bottom: 12px; }
.card.privacy p { font-size: 14px; line-height: 22px; color: var(--n600); margin: 0 0 12px; }
.card .note { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--soft); }
.alt { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }

/* signed-in pages: the sidebar (the review page carries the same one; docforensics/web/design-system.css) */
:root { --side: 240px; }
body:has(> .side) { padding-left: var(--side); }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 40; display: flex; flex-direction: column; gap: 24px;
  padding: 20px 12px 16px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; box-sizing: border-box; }
.side .brand { padding: 4px 10px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid transparent;
  color: var(--n600); font: 500 14px/1 var(--font-sans); text-decoration: none; white-space: nowrap; }
.side-nav a .icon { width: 16px; height: 16px; flex: none; color: var(--n500); }
.side-nav a:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.side-nav a[aria-current=page] { background: var(--accent); border-color: var(--accent); color: #fff; }
.side-nav a[aria-current=page] .icon { color: #fff; }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.side-foot form { margin: 0; }
.side-foot .btn { width: 100%; justify-content: center; }
.account-email { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.page { max-width: 1192px; margin: 0 auto; padding: 32px 24px 64px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.head p { margin: 0; }
.head p.muted { color: var(--faint); }
.head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* tables in a card */
.table-card, .panel table { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel table { box-shadow: none; border-color: var(--line-soft); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; color: var(--n600); }
th { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); background: var(--soft); border-bottom-color: var(--line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
td.name .muted { font-weight: 400; font-size: 12px; }
td.act { text-align: right; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-sans); white-space: nowrap; background: var(--n50); color: var(--n500); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.v-CLEAN { color: var(--green); background: var(--green-bg); }
.v-FORGED { color: var(--red); background: var(--red-bg); }
.v-SUSPICIOUS { color: var(--amber); background: var(--amber-bg); }
.v-INSUFFICIENT_EVIDENCE, .v-NOT_EXAMINED, .v-none { color: var(--n500); background: var(--n50); }
/* an unconfirmed (shadow-tier) finding is neutral, as on the review page: it is not a review flag */
.v-SUSPICIOUS-shadow { color: var(--n600); background: var(--n50); box-shadow: inset 0 0 0 1px var(--n100); }
/* a long outcome ("... in completed checks") wraps inside its pill rather than pushing the row past its card */
td .pill { white-space: normal; height: auto; min-height: 24px; padding: 5px 10px; line-height: 14px; }
.panel.jobs { margin-bottom: 16px; }
.empty-state { padding: 56px 24px; text-align: center; border: 1.5px dashed var(--n200); border-radius: var(--radius-xl); background: var(--panel); }
.empty-state .btn { margin-top: 8px; }
.pager { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--muted); }

/* insights */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column-reverse; gap: 8px; padding: 12px 14px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.kpi b { font: 500 24px/26px var(--font-sans); letter-spacing: -.02em; color: var(--n900); font-variant-numeric: tabular-nums; }
.kpi span { font: 700 11px/16px var(--font-sans); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 16px; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 13px; color: var(--n600); }
.bar-row .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .t { height: 8px; background: var(--n50); border-radius: var(--radius-pill); overflow: hidden; }
.bar-row .t i { display: block; height: 100%; background: var(--bar-fill); border-radius: var(--radius-pill); }
.bar-row .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.days { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.days i { flex: 1; min-height: 2px; background: var(--bar-fill); border-radius: 3px 3px 0 0; }

@media (max-width: 1280px) {   /* an icon rail (the review page switches at the same width) */
  :root { --side: 68px; }
  .side { padding: 16px 10px; align-items: center; }
  .side .brand { padding: 4px 0; }
  .side .brand > span:not(.brand-tile), .side-nav a .label, .account-email { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .side-nav a { width: 44px; justify-content: center; padding: 0; }
  .side-foot { padding: 12px 0 0; }
  .side-foot .btn { padding: 0 6px; font-size: 12px; }
}
@media (max-width: 760px) {   /* a bar along the top */
  body:has(> .side) { padding-left: 0; }
  .side { position: sticky; top: 0; inset: auto; width: auto; height: 56px; flex-direction: row; align-items: center; gap: 8px; padding: 0 12px;
    border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .side-nav { flex-direction: row; gap: 2px; }
  .side-nav a { width: 44px; height: 44px; justify-content: center; }   /* 44px touch targets, as on the review page */
  .side-foot { margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .side-foot .btn { width: auto; }
  main.page { padding: 24px 16px 48px; }
  h1 { font-size: 26px; line-height: 30px; }
  .bar-row { grid-template-columns: 110px minmax(0, 1fr) 36px; }
  .table-card { overflow-x: auto; }
  .table-card table { min-width: 640px; }
}

/* =====================================================================================================
   Sign-in and access denied: split layout. Left: the action. Right: a static picture of the review screen.
   ===================================================================================================== */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--panel); }
.signin-main { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.signin-panel { width: 100%; max-width: 400px; display: grid; gap: 20px; }
.signin-panel .brand { margin-bottom: 28px; }
.signin-head h1 { font: 600 30px/36px var(--font-sans); letter-spacing: -.025em; margin: 0 0 10px; }
.signin-head p { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.btn.btn-lg { width: 100%; height: 44px; font-size: 15px; gap: 8px; margin: 0; }
.btn.btn-lg .icon { transition: transform .15s; }
.btn.btn-lg:hover .icon { transform: translateX(2px); }
.signin-panel form { margin: 0; }
/* the invite-code box under the sign-in form (2026-10-16): a code leads to /signup with it filled in */
.signin-code { padding-top: 16px; border-top: 1px solid var(--line); }
.signin-code p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.signin-code p b { color: var(--ink); font-weight: 600; }
.signin-code-row { display: flex; gap: 8px; }
.signin-code-row input { flex: 1; min-width: 0; }
.signin-code-row .btn { flex: none; }
.signin-panel .err { margin: 0; }
.signin-secure { display: flex; gap: 8px; align-items: flex-start; margin: -8px 0 0; font-size: 12px; line-height: 18px; color: var(--faint); }
.signin-secure .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.signin-legal { margin: -8px 0 0; font-size: 12px; line-height: 18px; color: var(--faint); }
.signin-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.signin-legal a:hover { color: var(--ink); }
.signin-panel .alt { margin: 0; text-align: left; }

.signin-showcase { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 56px 56px;
  background: radial-gradient(circle at 1px 1px, rgba(0,122,255,.10) 1px, transparent 1.2px) 0 0/18px 18px, linear-gradient(160deg, #f2f7ff 0%, #e6efff 55%, #dfe9ff 100%);
  border-left: 1px solid var(--line); }
.signin-showcase::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(0,122,255,.16), transparent 65%); }
.showcase-copy { position: relative; z-index: 1; max-width: 460px; }
.showcase-copy .eyeline { color: var(--blue); }
.showcase-copy h2 { font: 600 28px/34px var(--font-sans); letter-spacing: -.025em; color: var(--ink); margin: 0 0 10px; }
.showcase-copy p { margin: 0; font-size: 15px; line-height: 22px; color: var(--n500); }
.showcase-card { position: relative; z-index: 1; max-width: 460px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.92); border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 48px -16px rgba(2,6,23,.18), 0 4px 12px rgba(2,6,23,.05); display: grid; gap: 14px; backdrop-filter: blur(6px); }
.sc-file { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.sc-file span:nth-child(2) { display: grid; min-width: 0; }
.sc-file b { font: 600 13px/18px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-file small { font-size: 11.5px; color: var(--muted); }
.sc-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--red-bg); color: var(--red); font: 600 11.5px/1 var(--font-sans); white-space: nowrap; }
.sc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sc-risk { padding: 12px 14px 14px; border-radius: 14px; background: #fdeff0; border: 1px solid #f8d4d6; display: grid; gap: 12px; }
.sc-risk-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.sc-risk-icon { color: #e5484d; display: grid; }
.sc-risk-icon svg { width: 16px; height: 16px; }
.sc-risk-row b { font: 600 14px/18px var(--font-sans); color: #c11515; }
.sc-score { font: 600 14px/18px var(--font-sans); color: #c11515; }
.sc-score small { font-size: 11px; }
.sc-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-bar i { height: 5px; border-radius: var(--radius-pill); background: #e5484d; }
.sc-bar i:nth-child(-n+2) { background: color-mix(in srgb, #e5484d 45%, #f6c9cc); }
.sc-label { margin: 2px 0 -6px; font: 600 12px/16px var(--font-sans); color: var(--ink); }
.sc-insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sc-insights li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; padding: 6px 4px; }
.sc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--n50); color: var(--n400); }
.sc-ic svg { width: 14px; height: 14px; }
.sc-insights li[data-tone="risk"] .sc-ic { background: #fde8e9; color: #e5484d; }
.sc-insights li[data-tone="review"] .sc-ic { background: #fff1dc; color: #cc780b; }
.sc-insights li span:last-child { display: grid; min-width: 0; }
.sc-insights b { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.sc-insights small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 960px) {
  .signin { grid-template-columns: 1fr; }
  .signin-showcase { display: none; }
  .signin-main { padding: 40px 20px; align-items: flex-start; }
  .signin-panel .brand { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .btn.btn-lg .icon { transition: none; } }

/* the welcome page (first visit, and again when the terms change) and What we check */
.welcome { min-height: 100vh; display: flex; justify-content: center; padding: 48px 16px 64px; box-sizing: border-box; background: var(--bg); }
.welcome-card { width: 100%; max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 36px 40px; box-sizing: border-box; }
.welcome-card > .brand { margin-bottom: 28px; }
.welcome-head h1 { font-size: 28px; line-height: 34px; margin: 0 0 10px; }
.welcome-head p:not(.eyeline) { margin: 0 0 24px; color: var(--n600); font-size: 15px; line-height: 24px; }
.cap-callout { margin: 0 0 28px; padding: 16px 18px; border: 1px solid #f1d38a; border-left: 4px solid var(--amber); border-radius: var(--radius-lg); background: var(--amber-bg); }
.cap-callout h2 { margin: 0 0 6px; font-size: 16px; line-height: 22px; color: var(--ink); }
.cap-callout p { margin: 0; font-size: 14px; line-height: 22px; color: var(--n600); }
.cap-section { margin: 0 0 28px; }
.cap-section h2 { margin: 0 0 8px; font-size: 18px; line-height: 24px; }
.cap-lead { margin: 0 0 12px; color: var(--n600); font-size: 14px; line-height: 22px; }
.cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cap-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; background: var(--panel); font-size: 14px; line-height: 21px; }
.cap-list li + li { border-top: 1px solid var(--line); }
.cap-list li::before { grid-row: span 2; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font-sans); color: #fff; }
.cap-list.good li::before { content: "\2713"; background: var(--green); }
.cap-list.limits li::before { content: "!"; background: var(--amber); }
.cap-list.next li::before { content: "\2192"; background: var(--accent); }
.cap-list b { color: var(--ink); font-weight: 600; }
.cap-list span { color: var(--n600); }
.terms-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--n600); font-size: 14px; line-height: 22px; }
.welcome-agree { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.welcome-agree .check { margin-top: 0; font-size: 14px; line-height: 22px; color: var(--ink); }
.welcome-actions { margin-top: 18px; display: flex; gap: 12px; }
.welcome-out { margin-top: 12px; }
.coverage { max-width: 820px; }
@media (max-width: 760px) { .welcome-card { padding: 24px 18px; } .welcome-head h1 { font-size: 24px; line-height: 30px; } }

/* sharp (2026-10-14): square corners everywhere, flat surfaces, the blue kept; the grouped sidebar and help card follow
   the grouped dashboard layout (docforensics/web/design-system.css carries the same block for the review page) */
:root { --radius: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; --shadow-sm: none; --shadow-md: none; }
*, *::before, *::after { border-radius: 0 !important; }
.side-nav { gap: 1px; }
.side-group { margin: 14px 10px 6px; font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.side-nav > .side-group:first-child { margin-top: 0; }
.side-nav a[aria-current=page] { box-shadow: inset 3px 0 0 var(--accent-hover, #005acc); }
.side-help { display: grid; gap: 6px; padding: 14px; background: var(--accent); color: #fff; }
.side-help b { font: 600 14px/1.3 var(--font-sans); }
.side-help p { margin: 0; font-size: 12px; line-height: 1.5; color: #fff; opacity: .9; }
.side-help a { margin-top: 6px; display: block; padding: 8px 10px; background: #fff; color: var(--accent); font: 600 13px/1 var(--font-sans); text-align: center; text-decoration: none; }
.side-help a:hover { background: var(--blue-bg, #eef5ff); text-decoration: none; }
.welcome-card, .card, .table-card, .panel table { box-shadow: none; }
@media (max-width: 1280px) { .side-group, .side-help { display: none; } }
.side-help { margin-top: auto; }
.side-help + .side-foot { margin-top: 0; }

/* polish (2026-10-14, after a redesign audit): sentence-case labels, balanced headings, readable line
   lengths, press feedback, a skip link, named icons in the rail, and the not-found page */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { letter-spacing: -.03em; }
.eyeline, .side-group { text-transform: none; letter-spacing: 0; font-weight: 500; }
.eyeline { font-size: 13px; color: var(--muted); }
.side-group { font-size: 12px; color: var(--faint); }
.head p.muted, .cap-lead, .welcome-head p:not(.eyeline) { max-width: 68ch; }
.btn, .side-nav a, .side-help a { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.btn:active, .side-nav a:active, .side-help a:active { transform: translateY(1px); }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--accent); color: #fff; font: 600 13px/1 var(--font-sans); text-decoration: none; }
.skip-link:focus { top: 12px; text-decoration: none; }
.side-legal { display: flex; gap: 12px; font-size: 12px; }
.side-legal a { color: var(--muted); }
@media (max-width: 1280px) and (min-width: 761px) {
  .side { overflow: visible; }
  .side-nav a { position: relative; overflow: visible; }
  .side-nav a:is(:hover, :focus-visible) .label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: auto; height: auto;
    margin: 0; clip: auto; overflow: visible; padding: 6px 10px; background: var(--ink); color: #fff; font: 500 12px/1 var(--font-sans); white-space: nowrap; z-index: 60; pointer-events: none; }
  .side-legal { display: none; }
}
.not-found { max-width: 560px; padding: 48px 0; }
.not-found h1 { margin-bottom: 10px; }
.not-found p { color: var(--n600); margin: 0 0 20px; }
@media (prefers-reduced-motion: reduce) { .btn, .side-nav a { transition: none; } .btn:active, .side-nav a:active { transform: none; } }

/* dark theme (2026-10-14): the same values as docforensics/web/design-system.css's dark block, so both halves of the
   product switch together. Chosen in the sidebar or taken from the system setting (templates/base.html head script). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --n0: #0e1821; --n25: #121e29; --n50: #172430; --n100: #22303e; --n200: #2e3e4e; --n300: #445569;
  --n400: #8695a8; --n500: #a6b2c2; --n600: #c6cfdb; --n800: #eef2f7; --n900: #f8fafc;
  --bg: #081116; --panel: var(--n0); --ink: var(--n800); --muted: var(--n500); --faint: #8b98a9;
  --line: var(--n100); --line-soft: var(--n50); --soft: var(--n25); --control-border: #62738a;
  --accent: #325fec; --accent-hover: #2449cf; --blue: #518fff; --blue-bg: #0f1d3d; --blue-bg2: #0b1630;
  --green: #4fd38c; --green-bg: #0f2a1d; --amber: #e6b84a; --amber-bg: #2a220d; --red: #ff7a7a; --red-bg: #361619;
  --bar-fill: #518fff;
}
:root[data-theme="dark"] .err { border-color: #4a1d22; }
:root[data-theme="dark"] .cap-callout { border-color: #4a3c15; }
:root[data-theme="dark"] .side-help a { color: #2449cf; }
:root[data-theme="dark"] .signin-showcase { filter: brightness(.92); }
.theme-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.theme-pick select { height: 28px; padding: 0 6px; border: 1px solid var(--control-border); background: var(--panel); color: var(--ink); font: 500 12px/1 var(--font-sans); }
@media (max-width: 1280px) { .theme-pick { display: none; } }

/* ultramarine (2026-10-14): the same tags, type and blue panel as the
   review page (docforensics/web/design-system.css) */
.eyeline { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 9px; background: var(--accent);
  color: #fff !important; font: 500 12px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.eyeline::before { content: ""; width: 6px; height: 6px; background: currentColor; flex: none; }
.showcase-copy .eyeline { color: #fff; }
h1 { font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: -.035em; }
.welcome-head h1 { font-weight: 400; }
.side-nav a[aria-current=page] { box-shadow: none; }
.sc-score, .stat b, .metric b, .num-big { font-weight: 300; letter-spacing: -.03em; }
.eyeline { width: fit-content; max-width: 100%; justify-self: start; align-self: flex-start; }

/* the Dark mode switch at the sidebar foot (replaces the theme dropdown): a square track with a square knob */
.theme-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:6px 0; border:0; background:none; color:var(--muted); font:500 12px/1 var(--font-sans); cursor:pointer; }
.theme-toggle:hover { color:var(--ink); }
.theme-toggle:focus-visible { outline:2px solid var(--focus, var(--accent)); outline-offset:2px; }
.theme-switch { position:relative; width:34px; height:18px; flex:none; background:var(--n200); border:1px solid var(--control-border); transition:background-color .15s ease; }
.theme-switch i { position:absolute; top:2px; left:2px; width:12px; height:12px; background:var(--panel); transition:transform .15s ease; }
.theme-toggle[aria-checked="true"] .theme-switch { background:var(--accent); border-color:var(--accent); }
.theme-toggle[aria-checked="true"] .theme-switch i { transform:translateX(16px); background:#fff; }
.theme-pick { display:none; }
@media (max-width:1280px) { .theme-toggle { justify-content:center; padding:6px 0; } .theme-toggle-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
@media (max-width:760px) { .theme-toggle { width:auto; } }
@media (prefers-reduced-motion:reduce) { .theme-switch, .theme-switch i { transition:none; } }
.brand { font-size:18px; letter-spacing:-.03em; }
@media (max-width:1280px) { .side .brand { display:none; } }

/* ---------- account menu, Demo tag (2026-10-14) ----------
   The sidebar foot is one account button (initials, email, role); it opens a menu with Dark mode, the legal links and
   Sign out (deploy/gcp/portal/app.py account_menu). It opens upward in the sidebar, to the right in the icon rail and
   downward in the phone bar. */
.brand { display:flex; align-items:center; gap:8px; }
.brand-tag { display:inline-flex; align-items:center; height:18px; padding:0 6px; border:1px solid var(--accent); color:var(--accent); font:600 10px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; }
:root[data-theme="dark"] .brand-tag { color:var(--blue); border-color:var(--blue); }
.side-foot { position:relative; padding:12px 0 0 !important; gap:0 !important; }
.account { position:relative; }
.account > summary { display:flex; align-items:center; gap:10px; padding:8px 10px; list-style:none; cursor:pointer; color:var(--ink); }
.account > summary::-webkit-details-marker { display:none; }
.account > summary:hover, .account[open] > summary { background:var(--soft2, var(--line-soft)); }
.account > summary:focus-visible { outline:2px solid var(--focus, var(--accent)); outline-offset:-2px; }
.avatar { width:30px; height:30px; flex:none; display:grid; place-items:center; background:var(--accent); color:#fff; font:600 12px/1 var(--font-sans); letter-spacing:.02em; }
.account-id { display:grid; gap:2px; min-width:0; flex:1; }
.account-id b { font:500 13px/1.2 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-id small { font-size:12px; color:var(--muted); }
.account .chev { width:16px; height:16px; flex:none; color:var(--muted); transition:transform .15s ease; }
.account[open] .chev { transform:rotate(180deg); }
.account-panel { position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:70; display:grid; gap:2px; padding:6px;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-pop, 0 12px 32px -8px rgba(0,0,0,.25)); }
.account-head { display:none; margin:0; padding:8px 10px 10px; border-bottom:1px solid var(--line); }
.account-head b { display:block; font:500 13px/1.3 var(--font-sans); color:var(--ink); word-break:break-all; }
.account-head small { font-size:12px; color:var(--muted); }
.account-panel .theme-toggle { padding:9px 10px; color:var(--ink); font-size:13px; }
.account-panel .theme-toggle:hover { background:var(--soft2, var(--line-soft)); }
.account-panel .theme-toggle-label { position:static !important; width:auto !important; height:auto !important; clip:auto !important; overflow:visible !important; }
.account-links { display:grid; gap:2px; padding:4px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.account-links a { padding:9px 10px; color:var(--ink); font-size:13px; text-decoration:none; }
.account-links a:hover { background:var(--soft2, var(--line-soft)); text-decoration:none; }
.account-panel form { margin:0; }
.account-signout { width:100%; padding:9px 10px; border:0; background:none; color:var(--red); font:500 13px/1 var(--font-sans); text-align:left; cursor:pointer; }
.account-signout:hover { background:var(--red-bg); }
.side-legal, .account-email { display:none !important; }
/* nothing to show yet: the Dashboard item waits for a review instead of sitting greyed out */
.side .top-links #dashboardNav:disabled { display:none; }
@media (max-width:1280px) and (min-width:761px) {   /* icon rail: the avatar alone; the menu opens to the right */
  .account > summary { justify-content:center; padding:6px 0; }
  .account-id, .account .chev { display:none; }
  .account-panel { left:calc(100% + 8px); right:auto; bottom:0; width:240px; }
  .account-head { display:block; }
  .brand-tag { display:none; }
}
@media (max-width:760px) {   /* phone bar: the avatar at the right; the menu opens downward */
  .account-id, .account .chev { display:none; }
  .account > summary { padding:4px; }
  .account-panel { left:auto; right:0; bottom:auto; top:calc(100% + 6px); width:240px; }
  .account-head { display:block; }
}
.account-panel .theme-toggle { justify-content:space-between !important; }
@media (max-width:1280px) and (min-width:761px) { .side-foot { margin-top:auto !important; } }

/* the help card's close button: a small white x in its top-right corner; once closed the card stays closed in this
   browser (data-help, set in the page head before paint). What we check stays in the sidebar menu. */
.side-help { position:relative; }
.side-help b { padding-right:26px; }
.side-help .side-help-close { position:absolute; top:6px; right:6px; width:26px; height:26px; margin:0; padding:0; display:grid; place-items:center;
  border:0; background:transparent; color:#fff; font:400 20px/1 var(--font-sans); cursor:pointer; opacity:.8; box-shadow:none; }
.side-help .side-help-close:hover { opacity:1; background:rgba(255,255,255,.16); }
.side-help .side-help-close:focus-visible { opacity:1; outline:2px solid #fff; outline-offset:-2px; }
:root[data-help="hidden"] .side-help { display:none; }

/* ---------- brand surface (2026-10-14): the brand black #081116, blue #325FEC, light blue #518FFF and white ----------
   A dark navy-to-blue gradient under a fine grid and a soft pixel dither, used where a customer forms a first
   impression: the sign-in showcase and the sidebar help card. Text on it is white; its lightest
   stop is the brand blue, which white text clears at 5.3:1. */
:root { --brand-black: #081116; --brand-blue: #325fec; --brand-sky: #518fff;
  --brand-surface: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 56px 56px,
                   linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 56px 56px,
                   radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.3px) 0 0 / 7px 7px,
                   linear-gradient(165deg, #081116 0%, #0f2152 38%, #2448c4 72%, #325fec 100%); }
.signin-showcase { background: var(--brand-surface) !important; color: #fff; }
/* the help card wears the brand surface on every page, as on the review page (design-system.css): a flat blue card here
   and a navy one there read as two products */
.side-help { background: var(--brand-surface) !important; }
.signin-showcase::after { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, rgba(81,143,255,.35), transparent 65%) !important; }
.showcase-copy h2 { color: #fff; font-weight: 400; font-size: 34px; line-height: 40px; letter-spacing: -.035em; }
.showcase-copy p { color: rgba(255,255,255,.82); }
.showcase-copy .eyeline { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.28); color: #fff !important; backdrop-filter: blur(6px); }
.showcase-card { background: rgba(255,255,255,.96) !important; border: 1px solid rgba(255,255,255,.5) !important; box-shadow: 0 24px 60px -20px rgba(8,17,22,.6) !important; }
/* the product preview on the sign-in showcase is a white card in either theme, with its own light colours */
.showcase-card { color-scheme: light; --ink: #0e151c; --muted: #4e5768; --n500: #4e5768; --n600: #353d4c; --faint: #646e7f;
  --panel: #ffffff; --line: #e3e7ee; --soft: #f8f9fb; color: var(--ink); }
.showcase-card { --red: #db1313; --red-bg: #fdeeee; --amber: #866504; --amber-bg: #fef8e6; --green: #007a3a; --green-bg: #ecf9ef;
  --n25: #f8f9fb; --n50: #f1f3f6; --n100: #e3e7ee; --n200: #cbd2dd; --n300: #9aa4b5; --n400: #6b7586; --blue: #325fec; --blue-bg: #eef2fe; }
/* the agreement stays in reach while the customer reads the welcome page: the agree bar sticks to the bottom of the screen */
.welcome-agree { position: sticky; bottom: 0; z-index: 5; margin: 8px -40px 0; padding: 16px 40px 18px; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(8,17,22,.5); }
.welcome-agree .welcome-actions { margin-top: 12px; }
@media (max-width: 760px) { .welcome-agree { margin: 8px -18px 0; padding: 14px 18px 16px; } }
/* the sidebar's current item: a blue edge on a pale blue row (as on the review page) */
.side-nav a[aria-current=page] { background: var(--blue-bg) !important; border-color: transparent !important; color: var(--blue) !important; box-shadow: inset 3px 0 0 var(--accent) !important; }
.side-nav a[aria-current=page] .icon { color: var(--blue); }


/* the upload heat-grid on Insights: one square per day, darker for more uploads */
.heat { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 8px; }
.heat-days { display: grid; grid-template-rows: 18px repeat(7, 16px); gap: 4px; font: 500 10px/16px var(--font-mono); color: var(--faint); text-transform: uppercase; }
.heat-days::before { content: ""; }
.heat-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.heat-col { display: grid; grid-template-rows: 18px repeat(7, 16px); gap: 4px; }
.heat-week { font: 500 10px/18px var(--font-mono); color: var(--faint); white-space: nowrap; }
.heat-col i { display: block; height: 16px; background: var(--n50); border: 1px solid var(--line); }
.heat-col i[data-level="1"] { background: #c9d6fb; border-color: #c9d6fb; }
.heat-col i[data-level="2"] { background: #8eaaf6; border-color: #8eaaf6; }
.heat-col i[data-level="3"] { background: #5a82f0; border-color: #5a82f0; }
.heat-col i[data-level="4"] { background: #325fec; border-color: #325fec; }
.heat-col i[data-future] { background: transparent; border-style: dashed; }
/* the heat-grid as squares: 13 week columns of 14px days, month names where a month starts */
.heat-grid { grid-auto-columns: 14px; gap: 4px; justify-content: start; }
.heat-col { grid-template-rows: 18px repeat(7, 14px); gap: 4px; }
.heat-days { grid-template-rows: 18px repeat(7, 14px); }
.heat-col i { width: 14px; height: 14px; box-sizing: border-box; }
.heat-week { overflow: visible; }


/* the welcome page, plain (2026-10-14): white, no banner, no tiles. What it checks and where it stops sit side by side
   so a reader compares them at a glance; the agree bar stays in reach. */
.welcome { background: var(--bg); padding-top: 40px; }
.welcome-card { max-width: 980px; border: 0; box-shadow: none; padding: 0 24px; background: transparent; }
.welcome-head { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.welcome-head h1 { font-size: 32px; line-height: 38px; letter-spacing: -.01em; }
.cap-callout { border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--panel); }
.cap-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.cap-cols .cap-section { margin-bottom: 28px; }
.cap-list li { align-content: start; }
.cap-list.next { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.cap-list.next li + li { border-top: 0; border-left: 1px solid var(--line); }
.welcome-agree { margin: 8px -24px 0; padding: 16px 24px 18px; }
@media (max-width: 860px) {
  .cap-cols, .cap-list.next { grid-template-columns: 1fr; }
  .cap-list.next li + li { border-left: 0; border-top: 1px solid var(--line); }
  .welcome-card { padding: 0 16px; } .welcome-agree { margin: 8px -16px 0; padding: 14px 16px 16px; }
}
/* on a phone a wide Insights table scrolls inside its panel instead of pushing the page sideways */
@media (max-width:760px) { section.panel:has(> table) { overflow-x:auto; } }
/* the heat-grid in dark mode: darker squares for quiet days, the brand blue for the busiest, so the scale reads the same way */
:root[data-theme="dark"] .heat-col i[data-level="1"] { background:#1b2b55; border-color:#1b2b55; }
:root[data-theme="dark"] .heat-col i[data-level="2"] { background:#2846a8; border-color:#2846a8; }
:root[data-theme="dark"] .heat-col i[data-level="3"] { background:#3a63e0; border-color:#3a63e0; }
/* the sidebar's pilot line (when PORTAL_PILOT_ENDS is set), above the help card */
.side-pilot { display:grid; gap:4px; margin-top:auto; padding:10px 12px; border:1px solid var(--line); background:var(--panel); font-size:12.5px; }
.side-pilot b { font-weight:600; color:var(--ink); }
.side-pilot a { color:var(--blue); }
.side-pilot + .side-help { margin-top:10px !important; }
@media (max-width:1280px) { .side-pilot { display:none; } }

/* ---------- short and plain (2026-10-14, owner: underwriters, not technical users; no noise; a "?" for detail) ----------
   .tip is a small "?" circle; its text shows on hover and on keyboard focus (and on tap, which focuses the button). */
.tip { position:relative; display:inline-grid; place-items:center; width:16px; height:16px; margin-left:4px; padding:0; vertical-align:-2px;
  border:1px solid var(--control-border); border-radius:50% !important; background:var(--panel); color:var(--muted); font:600 10px/1 var(--font-sans); cursor:help; }
.tip:hover, .tip:focus-visible { border-color:var(--accent); color:var(--accent); }
.tip-body { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:260px; max-width:70vw; padding:10px 12px;
  background:#081116; color:#fff; font:400 13px/1.45 var(--font-sans); text-align:left; white-space:normal; z-index:90;
  box-shadow:0 10px 30px -12px rgba(8,17,22,.6); visibility:hidden; opacity:0; transition:opacity .12s ease; pointer-events:none; }
.tip:hover .tip-body, .tip:focus .tip-body, .tip:focus-within .tip-body { visibility:visible; opacity:1; }
.welcome-head h1 { margin-bottom:8px; }
.welcome-head { padding-bottom:20px; margin-bottom:20px; }
.tldr { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:0 0 16px; }
.tldr-card { padding:18px 18px 16px; border:1px solid var(--line); background:var(--panel); border-top:3px solid var(--accent); }
.tldr-card.good { border-top-color:var(--green); }
.tldr-card.limits { border-top-color:var(--amber); }
.tldr-card h2 { margin:0 0 10px; font-size:16px; }
.tldr-card ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.tldr-card li { font-size:14px; line-height:21px; color:var(--ink); }
.tldr-card li b { font-weight:600; }
.tldr-truth { margin:0 0 20px; padding:12px 14px; border-left:3px solid var(--amber); background:var(--panel); border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; color:var(--n600); }
.tldr-truth b { color:var(--ink); }
.welcome-terms { margin:0 0 16px; border:1px solid var(--line); background:var(--panel); }
.welcome-terms > summary { cursor:pointer; padding:12px 14px; font-weight:600; font-size:14px; }
.welcome-terms > .cap-section { margin:0; padding:0 14px 6px; }
.welcome-terms > .cap-section > h2 { display:none; }
@media (max-width:860px) { .tldr { grid-template-columns:1fr; } }

/* the sidebar's collapse control, wide screens only (narrower ones always show the icon rail) */
.side-toggle { display:none; }
@media (min-width:1281px) {
  /* the collapse control stays on one spot, the sidebar's top-left corner, whether the sidebar is open or folded (owner,
     2026-10-15: it moved between the top right and the foot, so the pointer could not stay put to switch back; Material's
     navigation rail and most consoles keep the menu control at the top left): open, it sits before the name; folded, it is
     the rail's first icon, at the same 19px x 18px */
  .side-toggle { display:grid; place-items:center; position:absolute; top:18px; left:19px; z-index:2; width:30px; height:30px; padding:0;
    border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; }
  .side-toggle:hover { background:var(--soft); color:var(--ink); }
  .side-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .side-toggle svg { width:16px; height:16px; }
  :root:not([data-side="collapsed"]) .side .brand { margin-left:40px; }   /* room for the toggle before the name */
  :root[data-side="collapsed"] .side-toggle svg { transform:scaleX(-1); }
  /* collapsed: the same icon rail as at 1280px and below (each rule mirrors one in a max-width:1280px block above) */
  :root[data-side="collapsed"] { --side: 68px; }
  :root[data-side="collapsed"] .side { padding: 62px 10px 16px; align-items: center; }
  :root[data-side="collapsed"] .side .brand { padding: 4px 0; }
  :root[data-side="collapsed"] .side .brand > span:not(.brand-tile), :root[data-side="collapsed"] .side-nav a .label, :root[data-side="collapsed"] .account-email { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  :root[data-side="collapsed"] .side-nav a { width: 44px; justify-content: center; padding: 0; }
  :root[data-side="collapsed"] .side-foot { padding: 12px 0 0; }
  :root[data-side="collapsed"] .side-foot .btn { padding: 0 6px; font-size: 12px; }
  :root[data-side="collapsed"] .side-group, :root[data-side="collapsed"] .side-help { display: none; }
  :root[data-side="collapsed"] .side { overflow: visible; }
  :root[data-side="collapsed"] .side-nav a { position: relative; overflow: visible; }
  :root[data-side="collapsed"] .side-nav a:is(:hover, :focus-visible) .label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: auto; height: auto; margin: 0; clip: auto; overflow: visible; padding: 6px 10px; background: var(--ink); color: #fff; font: 500 12px/1 var(--font-sans); white-space: nowrap; z-index: 60; pointer-events: none; }
  :root[data-side="collapsed"] .side-legal { display: none; }
  :root[data-side="collapsed"] .theme-pick { display: none; }
  :root[data-side="collapsed"] .theme-toggle { justify-content:center; padding:6px 0; }
  :root[data-side="collapsed"] .theme-toggle-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  :root[data-side="collapsed"] .side .brand { display:none; }
  :root[data-side="collapsed"] .account > summary { justify-content:center; padding:6px 0; }
  :root[data-side="collapsed"] .account-id, :root[data-side="collapsed"] .account .chev { display:none; }
  :root[data-side="collapsed"] .account-panel { left:calc(100% + 8px); right:auto; bottom:0; width:240px; }
  :root[data-side="collapsed"] .account-head { display:block; }
  :root[data-side="collapsed"] .brand-tag { display:none; }
  :root[data-side="collapsed"] .side-foot { margin-top:auto !important; }
  :root[data-side="collapsed"] .side-pilot { display:none; }
}

/* the page sits beside the sidebar (2026-10-14, owner: centring it in the space left a wide, awkward gap) */
main.page { margin:0; padding:32px 40px 64px; }
@media (max-width:760px) { main.page { padding:24px 16px 48px; } }

/* the "?" marks, smaller and quieter (2026-10-14, owner: too many, too big): 13px, a hairline ring, used only where the
   words need more; the upload steps have none */
.tip { width:13px !important; height:13px !important; margin-left:3px !important; vertical-align:-1px !important; border-color:var(--line) !important;
  color:var(--faint) !important; font:600 8.5px/1 var(--font-sans) !important; }
.tip:hover, .tip:focus-visible { border-color:var(--accent) !important; color:var(--accent) !important; }

/* light and dark: a sun or moon button at the sidebar's top, beside the collapse control, in every layout (owner,
   2026-10-14: the switch inside the account menu was hard to find) */
.side-theme { display:grid; place-items:center; width:30px; height:30px; padding:0; flex:none; border:1px solid transparent; background:transparent;
  color:var(--muted); cursor:pointer; }
.side-theme:hover { background:var(--soft); color:var(--ink); }
.side-theme:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.side-theme svg { width:16px; height:16px; }
.side-theme .i-sun, :root[data-theme="dark"] .side-theme .i-moon { display:none; }
:root[data-theme="dark"] .side-theme .i-sun { display:block; }
@media (min-width:1281px) {
  .side-theme { position:absolute; top:18px; right:12px; }
  :root[data-side="collapsed"] .side-theme { position:static; }
}
@media (max-width:760px) { .side-theme { order:5; margin-left:auto; } .side-theme ~ .side-foot, .side .side-foot { margin-left:0; } }
/* the icon rail (1280px and below) and the collapsed sidebar put the navigation first, the most used controls at the top
   (owner, 2026-10-15: the theme switch was the first icon): the theme and expand controls follow the navigation in the
   markup, so they sit at the foot above the account and the keyboard reaches them in the same order; on wide screens
   they are placed at the top right (position:absolute above); the same rules as design-system.css */
@media (max-width:1280px) and (min-width:761px) { .side > .side-theme { margin:0 auto 4px; } }
@media (min-width:1281px) { :root[data-side="collapsed"] .side > .side-theme { margin:0 auto 4px; } }

/* the account sits at the foot of the sidebar whether or not the help card shows (owner, 2026-10-15: with the card
   closed it rode up under the menu): the navigation takes the spare height */
.side > .side-nav, .side > .top-links { flex:1 1 auto; }

/* History's Risk Score: the figure and its band by the reviewer's own thresholds (owner, 2026-10-15) */
td.num .band { display:inline-block; min-width:44px; margin-left:8px; text-align:left; font:500 12px/1 var(--font-sans); color:var(--faint); }
td.num .band[data-band="review"] { color:var(--amber); }
td.num .band[data-band="high"] { color:var(--red); }
/* History's band words in the Risk Score card's colours (docforensics/web/design-system.css) */
:root { --band-low-ink:#4e7d17; --band-review-ink:#8a6400; --band-high-ink:#c01c55; }
:root[data-theme="dark"] { --band-review-ink:#f2cd5c; --band-high-ink:#ff7aa3; }
td.num .band[data-band="review"] { color:var(--band-review-ink); }
td.num .band[data-band="high"] { color:var(--band-high-ink); }

/* ---------- the sign-in preview (2026-10-15): a plain soft panel and a still of the Risk Score card ----------
   Replaces the blue gradient with its grid and dither, the eyebrow chip and the old three-bar card. */
.signin-showcase { background:#eef0f3 !important; color:var(--ink) !important; }
.signin-showcase::before, .signin-showcase::after { display:none !important; }
:root[data-theme="dark"] .signin-showcase { background:#0d151c !important; }
.showcase-copy h2 { color:var(--ink) !important; }
.showcase-copy p { color:var(--muted) !important; }
.sc2 { width:min(440px, 100%); background:var(--soft); border:1px solid var(--line); box-shadow:0 18px 40px -24px rgba(8,17,22,.35); color:var(--ink);
  --band-low:#8cc63f; --band-review:#efc237; --band-high:#ea4c7d; }
:root[data-theme="dark"] .sc2 { background:#121b23; }
.sc2-head { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.sc2-ic { width:32px; height:32px; display:grid; place-items:center; flex:none; background:var(--panel); border:1px solid var(--line); color:var(--band-high); }
.sc2-ic svg { width:16px; height:16px; }
.sc2-head b { flex:1; font:600 16px/1.2 var(--font-sans); }
.sc2-btn { height:30px; padding:0 12px; display:inline-flex; align-items:center; border:1px solid var(--line); background:var(--panel); font:500 12.5px/1 var(--font-sans); }
.sc2-body { display:grid; gap:6px; padding:16px; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sc2-chip { justify-self:start; padding:5px 8px; border:1px solid var(--line); font:600 10px/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--band-high-ink, #c01c55); }
.sc2-figure { display:flex; align-items:baseline; gap:8px; margin:2px 0 0; }
.sc2-figure b { font:600 30px/1 var(--font-sans); letter-spacing:-.03em; }
.sc2-figure span { font:500 13px/1 var(--font-sans); color:var(--muted); }
.sc2-figure em { font-style:normal; font-weight:600; color:var(--band-high-ink, #c01c55); }
.sc2-file { margin:0 0 4px; font-size:12.5px; color:var(--muted); }
.sc2-meter { position:relative; height:24px;
  --bands:linear-gradient(90deg, var(--band-low) 0 50%, var(--band-review) 50% 70%, var(--band-high) 70% 100%);
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px); mask:repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px); }
.sc2-meter::before { content:""; position:absolute; inset:0; background:var(--bands); opacity:.22; }
.sc2-meter i { position:absolute; inset:0 auto 0 0; width:calc(var(--score) * 1%); background:var(--bands); background-size:calc(100% * 100 / var(--score)) 100%; background-repeat:no-repeat; }
.sc2-scale { position:relative; height:32px; margin-top:4px; }
.sc2-scale span { position:absolute; top:0; display:grid; gap:1px; padding-left:7px; border-left:2px solid; font:400 11px/1.2 var(--font-sans); color:var(--faint); }
.sc2-scale b { font:600 12px/1.2 var(--font-sans); color:var(--ink); }
.sc2-scale [data-zone="low"] { left:0; border-color:var(--band-low); opacity:.6; }
.sc2-scale [data-zone="review"] { left:50%; border-color:var(--band-review); opacity:.6; }
.sc2-scale [data-zone="high"] { left:70%; border-color:var(--band-high); }
.sc2-rows { list-style:none; margin:0; padding:6px 16px 10px; }
.sc2-rows li { display:grid; gap:2px; padding:8px 0 8px 14px; position:relative; font-size:12.5px; }
.sc2-rows li + li { border-top:1px solid var(--line); }
.sc2-rows li::before { content:""; position:absolute; left:0; top:13px; width:6px; height:6px; background:var(--band-high); }
.sc2-rows li[data-tone="review"]::before { background:var(--band-review); }
.sc2-rows b { font-weight:600; }
.sc2-rows span { color:var(--muted); }

/* ─── Dashboard (/dashboard) ───
   The signed-in person's reviews counted by result and by document type (owner, 2026-10-15). Each tile is a link into
   History filtered to those documents; the left edge carries the result's colour, as the result pills do. */
.dash-section { margin: 0 0 28px; }
.dash-section h2 { margin: 0 0 12px; font: 600 16px/22px var(--font-sans); }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-section-head a { font-size: 13px; color: var(--blue); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.dash-tile { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--tile-tone, var(--line)); text-decoration: none; }
.dash-tile span { font: 600 12px/16px var(--font-sans); color: var(--muted); }
.dash-tile b { font: 500 28px/30px var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-tile:hover { border-color: var(--accent); border-left-color: var(--tile-tone, var(--accent)); background: var(--soft); text-decoration: none; }
.dash-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-tile[data-zero] b { color: var(--faint); }
.dash-tile[data-outcome="all"] { --tile-tone: var(--accent); }
.dash-tile[data-outcome="anomaly"] { --tile-tone: var(--red); }
.dash-tile[data-outcome="review"] { --tile-tone: var(--amber); }
.dash-tile[data-outcome="clear"] { --tile-tone: var(--green); }
.dash-note { margin: -12px 0 24px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-tile b { font-size: 24px; line-height: 26px; } }

/* ─── What we check (/coverage) ───
   The engine's coverage body fragment (docforensics/coverage.py) inside the shell (templates/coverage.html). The
   shell's own .head / .eyeline / .btn / .cap-section / .cap-list rules carry it; this section only reconciles what
   this page's markup shares a class name with: the tiles are the engine's (figure, then the sentence) rather than the
   Insights tile (label first, figure last), the accept list has an "i" badge the welcome page never uses, values in a
   title are set in the accent, a deep-linked item gets the outline, and "What to do with a result" stays one column
   (the welcome page's three-across list is its own). The standalone engine page carries the same rules in its _CSS,
   under the same .coverage-page prefix, so the two stay comparable line by line. */
.coverage-page .kpis { margin-bottom: 28px; }
.coverage-page .kpi { flex-direction: column; gap: 6px; }
.coverage-page .kpi span { font: 400 13px/19px var(--font-sans); color: var(--faint); text-transform: none; letter-spacing: 0; }
.coverage-page .cap-list.accept li::before { content: "i"; background: var(--n600); }
.coverage-page .cap-list b em { font-style: normal; color: var(--accent); }
.coverage-page .cap-list li:target { outline: 2px solid var(--accent); outline-offset: -2px; }
.coverage-page .cap-list.next { grid-template-columns: 1fr; gap: 2px; }
.coverage-page .cap-list.next li + li { border-left: 0; border-top: 1px solid var(--line); }

/* the welcome page leads with what Trustable finds, one card (Neo, 2026-10-16) */
/* Neo, 2026-10-16 (second pass): the card spans the page, its four findings in two columns, so no empty right half */
.tldr { grid-template-columns:minmax(0, 1fr) !important; max-width:none; }
.tldr-card.good ul { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 32px; }
@media (max-width:640px) { .tldr-card.good ul { grid-template-columns:minmax(0, 1fr); } }
.tldr-next { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:21px; max-width:640px; }