/* What patients are told. Tokens and components are taken from the Paper file
   "Health Answers · Monitor · Open Index style" (see DESIGN_SYSTEM.md). Light mode only. */

:root {
  --tick-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ink: #0E1116;
  --ink-2: #2E333B;
  --ink-3: #454B55;
  --muted: #5B6270;
  --muted-2: #68707A;
  --muted-3: #6B717C;
  --faint-text: #6F7681;      /* Paper used #9AA0AA here; darkened for WCAG AA */
  --icon: #8A919C;
  --chev: #C3C8CF;
  --dot: #D3D8DF;
  --dot-rail: #C9CED6;
  --sep: #B8BDC5;
  --dash: #B8BDC5;
  --line: #E3E6EA;
  --line-2: #ECEEF1;
  --line-3: #F0F1F4;
  --line-rail: #DCDFE4;
  --line-dashed: #D3D7DD;
  --fill-nav: #F1F3F6;
  --fill-seg: #F2F3F5;
  --fill-kbd: #F3F4F6;
  --fill-stage: #FAFAFB;
  --blue: #2F7BEA;            /* matches the NHS */
  --blue-light: #B3D0F7;      /* right, but not up front; UK but not NHS */
  --more: #7B6CE0;            /* more urgent than the NHS: different, but the safe way */
  --tick: #8DB2EA;            /* the quiet tick in table cells */
  --blue-check: #2A78D6;
  --orange: #EA6131;          /* differs from the NHS */
  --orange-pale: #F3B79C;
  --grey-seg: #D9DDE3;
  --white: #FFFFFF;

  --shadow-input: 0 0 0 1px #0E111614, 0 1px 2px #0E11160A, 0 4px 12px #0E11160A;
  --shadow-card: 0 0 0 1px #0E111614, 0 2px 4px #0E11160A, 0 16px 32px -10px #0E111626;
  --shadow-pop: 0 0 0 1px #0E111614, 0 16px 32px -10px #0E111633, 0 2px 4px #0E11160A;
  --shadow-seg: 0 0 0 1px #0E11160F, 0 1px 2px #0E111614;
  --shadow-btn: 0 1px 1px #0E11160A;
  --shadow-side-input: 0 1px 2px #0E11160A;
  --shadow-toast: 0 0 0 1px #0E111614, 0 10px 24px -8px #0E11162E;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 120ms;
  --t-pop: 160ms;
  --t-row: 200ms;
  --t-page: 180ms;
  --t-bar: 320ms;

  --sidebar-w: 260px;
  --col: 840px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--white); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 20px;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 0; overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.i { display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--sw, 1.75); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ------------------------------------------------------------ shell */
.skip { position: absolute; left: 12px; top: -40px; z-index: 100; background: var(--ink); color: var(--white); padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.skip:focus { top: 12px; }

.banner {
  position: sticky; top: 0; z-index: 60; height: 26px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #F6F7F9; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0;
}
.banner b { color: var(--ink); font-weight: 600; }
.banner .dot-o { width: 6px; height: 6px; border-radius: 3px; background: var(--orange); }
.banner a { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: #B4501F; font-weight: 500; transition: color var(--t-hover) var(--ease); }
.banner a:hover { color: #8E3A12; }
.banner.dev { background: #7A2E10; }
.banner .short { display: none; }

.shell { display: flex; min-height: 100vh; padding: 8px 8px 8px 0; }
.has-banner .shell { min-height: calc(100vh - 26px); }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; padding: 0 8px;
  position: sticky; top: 8px; height: calc(100vh - 16px); align-self: flex-start;
}
.has-banner .sidebar { top: 34px; height: calc(100vh - 42px); }
.brand { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 10px; flex-shrink: 0; }
.brand-link { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; border-radius: 6px; }
.brand-mark { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 20px; color: var(--ink); white-space: nowrap; }
.icon-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--icon); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); flex-shrink: 0; }
.icon-btn:hover { background: var(--fill-nav); color: var(--ink-3); }
.brand .icon-btn { margin-right: -5px; }

.side-search {
  margin-top: 6px; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; width: 100%;
  background: var(--white); border: 1px solid #0E111614; border-radius: 8px; box-shadow: var(--shadow-side-input); color: var(--icon);
  transition: border-color var(--t-hover) var(--ease);
}
.side-search:hover { border-color: #0E111626; }
.side-search span:first-of-type { flex: 1; text-align: left; color: var(--muted-2); font-size: 13px; letter-spacing: -0.005em; line-height: 18px; }
.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--fill-kbd); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 14px; font-family: var(--font); }

.side-nav { display: flex; flex-direction: column; gap: 1px; padding-top: 12px; overflow-y: auto; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px 0 10px; border-radius: 6px; flex-shrink: 0;
  color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; line-height: 18px; width: 100%; text-align: left;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.nav-item .i { color: var(--muted-3); }
.nav-item .grow { flex: 1; min-width: 0; }
.nav-item .chev { color: var(--icon); transition: transform var(--t-row) var(--ease); }
.nav-item .count { color: var(--muted-2); font-size: 11px; font-weight: 500; line-height: 14px; font-variant-numeric: tabular-nums; }
.nav-item:hover { background: #F6F7F9; color: var(--ink); }
.nav-item.on { background: var(--fill-nav); color: var(--ink); }
.nav-item.on > .i:first-child, .nav-item.open > .i:first-child { color: var(--ink); }
.nav-item.open { color: var(--ink); }
.nav-group.open > .nav-item .chev { transform: rotate(90deg); }
.subnav { display: none; padding: 2px 0 6px 17px; }
.nav-group.open .subnav { display: block; }
.subnav-rail { border-left: 1px solid var(--line-rail); padding-left: 8px; display: flex; flex-direction: column; gap: 1px; }
.subnav a {
  display: flex; align-items: center; height: 28px; padding: 0 8px 0 7px; border-radius: 6px; color: var(--ink-3);
  font-size: 13px; letter-spacing: -0.005em; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.subnav a:hover { background: #F6F7F9; color: var(--ink); }
.subnav a.on { background: var(--fill-nav); color: var(--ink); font-weight: 500; }
.subnav a.more { color: var(--muted-2); }
.nav-review { margin-top: 10px; }
.nav-review .count { color: var(--orange); }
.side-spacer { flex: 1; }
.side-foot { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; border-top: 1px solid var(--line); flex-shrink: 0; }
.side-foot a { color: var(--muted-3); font-size: 12px; line-height: 16px; transition: color var(--t-hover) var(--ease); }
.side-foot a:hover, .side-foot a.on { color: var(--ink); }
.side-foot a.on { font-weight: 500; }
.side-foot .sep { width: 3px; height: 3px; border-radius: 2px; background: var(--sep); flex-shrink: 0; }

.panel {
  flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; position: relative;
}
.mask { position: fixed; left: var(--sidebar-w); right: 0; height: 8px; background: var(--white); z-index: 25; pointer-events: none; }
.mask.top { top: 0; }
.mask.bottom { bottom: 0; }
.has-banner .mask.top { top: 26px; }

.topbar {
  position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 8px; height: 48px;
  padding: 0 10px 0 16px; background: var(--white); border-bottom: 1px solid var(--line-2);
  margin: -1px -1px 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
}
.has-banner .topbar { top: 34px; }
.topbar.sub { padding-left: 12px; }
.topbar .page-icon { color: var(--muted-3); }
.topbar .back { color: var(--ink-3); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 4px; font-size: 13px; letter-spacing: -0.005em; line-height: 18px; }
.topbar:not(.sub) .crumbs { padding-left: 0; }
.crumbs a { color: var(--muted); white-space: nowrap; transition: color var(--t-hover) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs .slash { color: var(--chev); }
.crumbs .here { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .grow { flex: 1; }
.menu-btn { display: none; }
.m-only { display: none !important; }
.expand-btn { display: none; }
.sidebar-collapsed .expand-btn { display: inline-flex; }

.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 10px; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; background: var(--white);
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.pill-btn:hover { background: #F8F9FA; border-color: #D9DDE2; }
.pill-btn .i { color: var(--icon); }
.pill-btn.tools { gap: 7px; padding-left: 8px; }
.pill-btn.share { padding: 0 11px; box-shadow: var(--shadow-btn); }
.pill-btn[aria-expanded="true"] { background: #F6F7F9; }
.faces { display: inline-flex; align-items: center; }
.faces .face { width: 14px; height: 14px; border-radius: 7px; background: var(--white); box-shadow: 0 0 0 1.5px var(--white); display: inline-flex; }
.faces .face + .face { margin-left: -2px; }
.faces .face { box-shadow: 0 0 0 2px var(--white); }

.content { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 72px 24px 80px; }
.col { width: 100%; max-width: var(--col); display: flex; flex-direction: column; position: relative; }

.statusbar {
  position: sticky; bottom: 8px; z-index: 20; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 14px;
  background: var(--white); border-top: 1px solid var(--line-2);
  margin: 0 -1px -1px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
}
.statusbar .left { color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar .grow { flex: 1; }
.statusbar .right { color: var(--muted-2); font-size: 11px; line-height: 14px; white-space: nowrap; }
.statusbar .right a { color: var(--muted-2); transition: color var(--t-hover) var(--ease); }
.statusbar .right a:hover { color: var(--ink); }
.statusbar .sb-sep { margin: 0 6px; color: var(--sep); }
.tag-placeholder { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted-2); font-size: 11px; font-weight: 500; line-height: 14px; vertical-align: 1px; }
a.u { text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 3px; }
a.u:hover { text-decoration-color: var(--ink-3); }
.corrections { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.corr { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line-3); }
.corr-meta { display: flex; gap: 12px; color: var(--muted-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.corr-area { color: var(--ink-3); font-weight: 500; }
.corr-title { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 22px; max-width: 680px; }
.corr-detail { color: var(--ink-2); font-size: 14px; line-height: 22px; max-width: 680px; text-wrap: pretty; }
.corr-change { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--icon); }
.corr-change .was { color: var(--muted-2); text-decoration: line-through; text-decoration-color: var(--orange-pale); }
.corr-change .now { color: var(--ink); font-weight: 500; }
.corr-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; color: var(--muted-2); font-size: 12px; line-height: 16px; }
.corr-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 500; }
.corr-foot a:hover { color: var(--ink); }

/* ------------------------------------------------------------ type */
.h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 46px; color: var(--ink); text-wrap: balance; }
.h1.q { max-width: 740px; }
.lead { padding-top: 14px; color: var(--muted); font-size: 16px; letter-spacing: -0.01em; line-height: 25px; max-width: 560px; text-wrap: pretty; }
.lead.strong { color: var(--ink-2); font-size: 18px; font-weight: 500; letter-spacing: -0.015em; line-height: 27px; max-width: 620px; }
.h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 26px; color: var(--ink); }
.h2 .count { color: var(--faint-text); font-weight: 500; margin-left: 4px; }
.sec { display: flex; flex-direction: column; padding-top: 80px; }
.sec.tight { padding-top: 56px; }
.sec.tighter { padding-top: 48px; }
.sec-head { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.sec-head.end { align-items: flex-end; }
.sec-head.plain { border-bottom: 0; padding-bottom: 8px; }
.sec-head .h2 { flex: 1; }
.muted { color: var(--muted-2); }
.prose { color: var(--ink-2); font-size: 15px; line-height: 24px; letter-spacing: -0.01em; max-width: 640px; }
.prose p + p { margin-top: 14px; }
.prose a { text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ink-3); }
.flag-eng {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--fill-seg);
  color: var(--ink-3); font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: 0; vertical-align: 2px; white-space: nowrap;
}

/* ------------------------------------------------------------ segmented + chips */
.seg { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 2px; border-radius: 8px; background: var(--fill-seg); flex-shrink: 0; }
.seg button, .seg a {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 6px;
  color: var(--muted); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg [aria-selected="true"], .seg [aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-seg); }
.seg .n { color: var(--muted-2); font-weight: 400; }
.seg.lg { height: 34px; border-radius: 9px; }
.seg.lg button { height: 30px; padding: 0 12px; gap: 7px; border-radius: 7px; font-size: 13px; line-height: 18px; }
.seg.full { display: flex; }
.seg.full button { flex: 1; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border: 1px dashed var(--line-dashed); border-radius: 7px;
  color: var(--ink-3); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.chip .i { color: var(--muted-3); }
.chip:hover { border-color: #B9BEC6; }
.chip.set { border-style: solid; border-color: var(--line); background: #F8F9FA; color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-btn); color: var(--ink); background: var(--white); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.btn .i { color: var(--ink-3); }
.btn.icon-l { padding-left: 11px; }
.btn:hover { background: #F8F9FA; border-color: #D9DDE2; }
.btn.sm { height: 30px; font-size: 12px; border-radius: 7px; gap: 6px; }
.btn.dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn.dark .i { color: #C9CED6; }
.btn.dark:hover { background: #24282F; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.link-arrow .i { transition: transform var(--t-hover) var(--ease); }
.link-arrow:hover .i { transform: translateX(2px); }

/* ------------------------------------------------------------ stats + bars */
.stats { display: flex; gap: 40px; padding-top: 56px; }
.stats.hero { padding-top: 72px; }
.stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.stat-label { color: var(--ink-2); font-size: 14px; line-height: 20px; display: flex; align-items: center; gap: 6px; }
.stat-label .i { color: var(--blue); }
.stat-big { padding-top: 10px; color: var(--ink); font-size: 52px; font-weight: 600; letter-spacing: -0.045em; line-height: 56px; white-space: nowrap; }
.stat-big .of { color: var(--muted-2); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.stat-big.empty { color: var(--line); }
.stat { position: relative; }
.np-btn { display: block; align-self: flex-start; margin: 0; padding: 10px 0 0; border: 0; background: none; font: inherit; font-size: 52px; font-weight: 600; letter-spacing: -0.045em; line-height: 56px; color: var(--ink); text-align: left; cursor: pointer; border-radius: 6px; transition: color var(--t-hover) var(--ease); }
.np-btn:hover { color: var(--ink-3); }
.np-btn:focus-visible { outline: 2px solid var(--blue-check); outline-offset: 3px; }
.pop.numpop { top: 96px; left: 0; width: 440px; padding: 20px; transform-origin: top left; }
.stat:last-child .pop.numpop { left: auto; right: 0; transform-origin: top right; }
.np-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.np-head b { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 20px; }
.np-head span { color: var(--muted-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.np-row { display: flex; align-items: center; gap: 14px; height: 36px; }
.np-tool { display: flex; align-items: center; gap: 8px; width: 130px; flex-shrink: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.np-bar { display: flex; gap: 2px; flex: 1 1 0; min-width: 0; height: 10px; }
.np-bar > i { display: block; flex: var(--g) 1 0px; min-width: 3px; border-radius: 2px; }
.np-bar > i:first-child { border-radius: 5px 2px 2px 5px; min-width: 6px; }
.np-bar > i:last-child { border-radius: 2px 5px 5px 2px; min-width: 6px; }
.np-bar > i:only-child { border-radius: 5px; }
.np-n { width: 76px; flex-shrink: 0; color: var(--muted-2); font-size: 13px; line-height: 18px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .pop.numpop { width: calc(100vw - 32px); left: 0; right: auto; } .np-tool { width: 108px; } }
.np-hist { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--muted-3); font-size: 12px; font-weight: 500; line-height: 16px; }
.stat-sub { padding-top: 10px; color: var(--muted-2); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.stat-sub.after-big { padding-top: 8px; }
.stat-note { color: var(--muted-2); font-size: 12px; line-height: 16px; padding-top: 2px; }
.bar + .stat-note { padding-top: 10px; }
.bar { display: flex; gap: 2px; height: 8px; margin-top: 16px; flex-shrink: 0; }
.bar > i { display: block; flex: var(--g) 1 0px; min-width: 3px; transform-origin: left; }
.bar > i:first-child { border-radius: 4px 0 0 4px; }
.bar > i:last-child { border-radius: 0 4px 4px 0; }
.bar > i:only-child { border-radius: 4px; }
.bar.thin { height: 6px; margin-top: 0; }
.bar.track { background: none; }
.seg-good { background: var(--blue); }
.seg-partial { background: var(--blue-light); }
.seg-bad { background: var(--orange); }
.seg-overseas { background: var(--orange-pale); }
.seg-none { background: var(--grey-seg); }
.seg-review { background: repeating-linear-gradient(135deg, #D9DDE3 0 3px, #EEF0F3 3px 6px); }
.seg-unrev { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--dot-rail); }
.stat-key { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 5px 12px; padding-top: 10px; color: var(--muted-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.stat-key .sk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stat-key .sk b { color: var(--ink-2); font-weight: 500; margin-right: -2px; }
.sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.sw.good { background: var(--blue); } .sw.partial { background: var(--blue-light); } .sw.bad { background: var(--orange); }
.sw.none, .sw.other { background: var(--grey-seg); } .sw.unrev { box-shadow: inset 0 0 0 1.5px #A9AFB8; }
.sw.review { background: repeating-linear-gradient(135deg, #C3C8CF 0 2px, #EEF0F3 2px 4px); }
.stat-sub + .stat-key { padding-top: 6px; }
.stat-split { padding-top: 4px; color: var(--muted-2); font-size: 12px; line-height: 17px; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.bar + .stat-split { padding-top: 10px; }
.seg-track { background: #EFF1F4; }
.js .bar.grow { animation: reveal 640ms var(--ease) both; }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* tools switch: one block per tool, CSS shows the chosen one */
[data-sv] { display: none; }
html[data-surface="all"] [data-sv="all"],
html[data-surface="google_ai_overviews"] [data-sv="google_ai_overviews"],
html[data-surface="google_ai_mode"] [data-sv="google_ai_mode"],
html[data-surface="chatgpt"] [data-sv="chatgpt"] { display: contents; }
html[data-surface="google_ai_overviews"] .col-google_ai_mode, html[data-surface="google_ai_overviews"] .col-chatgpt,
html[data-surface="google_ai_mode"] .col-google_ai_overviews, html[data-surface="google_ai_mode"] .col-chatgpt,
html[data-surface="chatgpt"] .col-google_ai_overviews, html[data-surface="chatgpt"] .col-google_ai_mode { display: none !important; }

/* ------------------------------------------------------------ list rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 14px; height: 54px; border-bottom: 1px solid var(--line-3); flex-shrink: 0; position: relative;
  transition: background var(--t-hover) var(--ease);
}
a.row:hover, .row.link:hover { background: linear-gradient(90deg, transparent, #FAFAFB 12%, #FAFAFB 88%, transparent); }
.row .ricon { color: var(--ink-3); width: 18px; height: 18px; }
.row .rname { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; white-space: nowrap; }
.row .rmeta { flex: 1; min-width: 0; color: var(--muted-2); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { color: var(--orange); font-size: 9px; letter-spacing: 0.35em; line-height: 12px; white-space: nowrap; }
.row .dots { color: var(--orange); font-size: 9px; letter-spacing: 0.35em; line-height: 12px; white-space: nowrap; overflow: hidden; max-width: 340px; }
.row .rcount { width: 22px; flex-shrink: 0; text-align: right; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; }
.row .nothing { color: var(--faint-text); font-size: 13px; line-height: 18px; white-space: nowrap; }
.row .chev { color: var(--chev); width: 14px; height: 14px; transition: transform var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
a.row:hover .chev { color: var(--icon); transform: translateX(1px); }
.row.end { border-bottom: 0; gap: 6px; }

.mini-rows .row { height: 54px; gap: 16px; border-bottom: 0; border-top: 1px solid var(--line-3); }
.mini-rows .row:last-child { border-bottom: 1px solid var(--line-3); }
.mini-rows .rname { flex: 1; }

/* ------------------------------------------------------------ grid table (questions x tools) */
.grid { display: flex; flex-direction: column; }
.ghead, .grow-r { display: flex; align-items: center; }
.ghead { height: 40px; border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 12px; line-height: 16px; }
.ghead .gq { flex: 1; }
.ghead .gc { display: flex; align-items: center; gap: 6px; }
.gnhs { width: 150px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.gnhs .i { color: var(--muted-3); }
.gc { width: 114px; flex-shrink: 0; position: relative; }
.gend { width: 20px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.grow-r { height: 52px; border-bottom: 1px solid var(--line-3); position: relative; transition: background var(--t-hover) var(--ease); }
.grow-r:hover { background: linear-gradient(90deg, transparent, #FAFAFB 10%, #FAFAFB 90%, transparent); }
.grow-r.more { display: none; }
.grow-r.peeking { background: var(--fill-nav); }
.grid.open .grow-r.more { display: flex; }
.grid.no-data .gc { display: none; }
button.link-arrow { padding: 0; }
.grow-r > a.cover { position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
.grow-r .gq { flex: 1; min-width: 0; padding-right: 24px; display: flex; align-items: center; gap: 8px; position: relative; }
.split { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); width: 16px; text-align: center; color: #C2551F; font-size: 15px; font-weight: 600; line-height: 20px; }
.split-l { color: #C2551F; font-weight: 600; font-size: 13px; }
.grow-r .qtext { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grow-r .gnhs { color: var(--ink-2); font-size: 14px; line-height: 20px; }
.grow-r .gnhs span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-width: 0; padding-right: 14px; font-size: 13px; line-height: 17px; }
.grow-r .gnhs .nokey { color: var(--dash); }
.grow-r .chev { color: var(--chev); margin-left: 6px; transition: color var(--t-hover) var(--ease); }
.grow-r:hover .chev { color: var(--icon); }
.disagree { flex-shrink: 0; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: #FDF0EA; color: #A4441C; font-size: 11px; font-weight: 500; line-height: 14px; white-space: nowrap; }
.grid .gnhs .flag-eng { margin-left: 2px; }

.cell:hover, .cell:focus-visible, .cell:focus-within { z-index: 30; }
.cell { position: relative; z-index: 2; display: inline-flex; align-items: center; height: 28px; border-radius: 6px; cursor: default; }
.cell .d { width: 16px; flex-shrink: 0; padding-left: 1px; font-size: 0; line-height: 20px; color: var(--orange); display: inline-flex; align-items: center; }
.cell .d::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cell .lab { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.cell .x { color: var(--muted-2); font-size: 12px; font-weight: 400; margin-left: 4px; }
.cell.ok { color: var(--tick); font-size: 0; padding-left: 0; }
.cell.ok::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--tick-svg) center / 14px 14px no-repeat; mask: var(--tick-svg) center / 14px 14px no-repeat; }
.cell.ok { width: 20px; }
.cell.soft .d { color: var(--orange-pale); }
.cell.more .d { color: var(--more); }
.hovercard .hc-said.more span { text-decoration-color: var(--more); }
.frow.more .ft::before { color: var(--more); }
.frow.more.awaiting .ft::before { -webkit-text-stroke-color: var(--more); }
.legend .li .mu { color: var(--more); font-size: 10px; }
.cell.soft .lab { color: var(--ink-2); font-weight: 500; }
.cell.review .d { color: var(--sep); }
.ring { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #B3B9C2; flex-shrink: 0; }
.cell.unrev { width: 20px; padding-left: 1px; }
.legend .li .ring { margin-right: 1px; }
.hovercard .hc-said.unrev { color: var(--muted); }
.cell.review .lab { color: var(--muted-2); font-weight: 500; }
.cell.none { color: var(--dash); font-size: 14px; padding-left: 2px; }
.cell.notasked { color: var(--line); font-size: 14px; padding-left: 2px; }
.cell.awaiting .lab::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--orange) inset; vertical-align: 1px; }

.hovercard {
  position: absolute; left: -12px; top: calc(100% + 6px); z-index: 40; width: 268px; padding: 14px; border-radius: 10px; background: var(--white);
  box-shadow: var(--shadow-pop); text-align: left; pointer-events: none;
  opacity: 0; transform: translateY(-2px) scale(0.98); transform-origin: top left; visibility: hidden;
  transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms;
}
.cell:hover .hovercard, .cell:focus-visible .hovercard, .cell:focus-within .hovercard {
  opacity: 1; transform: none; visibility: visible; transition: opacity var(--t-pop) var(--ease), transform var(--t-pop) var(--ease), visibility 0s;
}
.gc.c-right .hovercard { left: auto; right: -12px; transform-origin: top right; }
.hovercard .hc-top { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; line-height: 16px; }
.hovercard .hc-said { margin-top: 4px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 24px; white-space: normal; }
.hovercard .hc-said.bad span { text-decoration: underline 2px var(--orange); text-underline-offset: 4px; }
.hovercard hr { border: 0; height: 1px; background: var(--line-2); margin: 12px 0; }
.hovercard .hc-nhs { color: var(--ink-2); font-size: 13px; line-height: 18px; white-space: normal; }
.hovercard .hc-nhs b { color: var(--ink); font-weight: 500; }
.hovercard .hc-eng { display: inline-flex; margin-left: 6px; height: 16px; padding: 0 5px; border-radius: 4px; background: var(--fill-seg); color: var(--ink-3); font-size: 10px; font-weight: 500; line-height: 16px; vertical-align: 1px; }
.hovercard .hc-meta { margin-top: 2px; color: var(--muted-2); font-size: 12px; line-height: 16px; white-space: normal; }
.hovercard .hc-await { margin-top: 8px; color: #A4441C; font-size: 12px; line-height: 16px; font-weight: 500; }

.legend { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; min-height: 54px; padding: 13px 0; }
.legend .grow { flex: 1 0 12px; }
.legend > .link-arrow { white-space: nowrap; flex-shrink: 0; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.legend .li .o { color: var(--orange); font-size: 10px; }
.legend .li .g { color: var(--dot); font-size: 8px; }
.legend .li .p { color: var(--orange-pale); font-size: 10px; }
.legend .li .r { color: var(--sep); font-size: 10px; }
.legend .li .sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.legend .ld { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ld.g { background: var(--tick); border-radius: 0; width: 12px; height: 12px; -webkit-mask: var(--tick-svg) center / 12px 12px no-repeat; mask: var(--tick-svg) center / 12px 12px no-repeat; } .ld.p { background: var(--orange-pale); } .ld.o { background: var(--orange); }
.ld.mu { background: var(--more); } .ld.ring { box-shadow: inset 0 0 0 1.5px #B3B9C2; }

/* ------------------------------------------------------------ home */
.hero-search {
  margin-top: 28px; width: 460px; max-width: 100%; height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 10px 0 14px;
  border-radius: 12px; background: var(--white); box-shadow: var(--shadow-input); color: var(--icon); text-align: left;
  transition: box-shadow var(--t-hover) var(--ease);
}
.hero-search:hover { box-shadow: 0 0 0 1px #0E111626, 0 1px 2px #0E11160A, 0 4px 12px #0E11160F; }
.hero-search .ph { flex: 1; color: var(--muted-2); font-size: 15px; letter-spacing: -0.01em; line-height: 20px; }
.hero-search .kbd { height: 22px; padding: 0 6px; }
.hero-text { max-width: 470px; }

.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.hero-left { flex: 1; min-width: 0; }
.feature {
  position: relative; margin-top: 4px; width: 332px; flex-shrink: 0; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
}
.feature .f-q { display: flex; align-items: flex-start; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; line-height: 18px; }
.feature .f-q .i { color: var(--icon); margin-top: 2px; }
.feature .f-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.feature .f-who { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; line-height: 16px; }
.feature .f-text { color: var(--ink-2); font-size: 15px; letter-spacing: -0.01em; line-height: 23px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.feature .f-text mark { background: none; color: var(--ink); font-weight: 500; text-decoration: underline 2px var(--orange); text-underline-offset: 4px; }
.feature .f-found { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; border-top: 1px solid var(--line-2); }
.feature .f-found-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; line-height: 16px; }
.feature .f-found-head .grow { flex: 1; }
.feature .f-n { color: var(--faint-text); font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; }
.feature .f-nav { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--muted); }
.feature .f-nav:disabled { color: #B3B8C0; cursor: default; }
.feature .f-nav:not(:disabled):hover { background: var(--fill-nav); }
.feature .f-found-text { color: var(--ink); font-size: 13px; line-height: 19px; }
.feature .slide { display: none; }
.feature .slide.on { display: contents; }
.feature .slide.on > * { animation: fadein var(--t-page) var(--ease) both; }
.feature a.f-open { color: inherit; }
.feature.empty .f-body { color: var(--muted-2); font-size: 14px; line-height: 21px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.briefing-row { display: flex; align-items: center; gap: 20px; padding-top: 56px; }
.briefing-row .bt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.briefing-row .bt b { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.briefing-row .bt span { color: var(--muted-2); font-size: 13px; line-height: 18px; }

.kind-rows .krow { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-3); }
.kind-rows .krow .kt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kind-rows .krow .kt b { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 22px; }
.kind-rows .krow .kt span { color: var(--muted-2); font-size: 13px; line-height: 18px; }
.kind-rows .sub { padding-left: 20px; }
.kind-rows .sub .row { height: 44px; }
.kind-rows .sub .rname { font-size: 15px; font-weight: 400; color: var(--ink); flex: 1; }

/* ------------------------------------------------------------ question page */
.tabs-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 36px; }
.tab-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--orange); margin-left: -2px; flex-shrink: 0; }
.disagree-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; line-height: 18px; }
.tool-face { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
.answer-layout { display: flex; align-items: flex-start; gap: 48px; padding-top: 20px; }
.answer-card {
  width: 500px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; padding: 22px 26px; border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow-card);
}
.ac-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.ac-date { color: var(--muted-3); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.ac-waves { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; color: var(--faint-text); font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; }
.ac-waves button { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--muted); }
.ac-waves button:disabled { color: #B3B8C0; cursor: default; }
.ac-waves button:not(:disabled):hover { background: var(--fill-nav); }
.ac-head .grow { flex: 1; }
.ac-body { color: var(--ink-2); font-size: 15px; letter-spacing: -0.01em; line-height: 24px; position: relative; }
.ac-body.clamp { max-height: 330px; overflow: hidden; }
.ac-body.clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.ac-body.open { max-height: none; }
.ac-body.open::after { display: none; }
.md > * + * { margin-top: 12px; }
.md h1, .md h2, .md h3, .md h4 { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 22px; margin-top: 18px; }
.md h1 + *, .md h2 + *, .md h3 + *, .md h4 + * { margin-top: 6px; }
.md strong { color: var(--ink); font-weight: 600; }
.md ul, .md ol { padding-left: 20px; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li + li { margin-top: 4px; }
.md li::marker { color: var(--icon); }
.md a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 3px; }
.md table { border-collapse: collapse; font-size: 13px; line-height: 18px; width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--line-3); padding: 6px 8px 6px 0; text-align: left; vertical-align: top; }
.md code, .md pre { font: inherit; background: none; padding: 0; white-space: inherit; }
.md sup.fn { font-size: 10px; line-height: 0; color: var(--faint-text); font-weight: 500; letter-spacing: 0.02em; margin-left: 1px; font-variant-numeric: tabular-nums; vertical-align: super; }
.md blockquote { border-left: 2px solid var(--line); padding-left: 12px; color: var(--muted); }
mark.hl { background: none; color: var(--ink); font-weight: 500; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
mark.hl-us, mark.hl-miss { text-decoration-color: var(--orange); }
mark.hl-match { text-decoration-color: var(--blue); }
.ac-more { display: flex; align-items: center; height: 24px; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; width: 100%; }
.ac-more span { flex: 1; text-align: left; }
.ac-more .i { color: var(--muted); transition: transform var(--t-row) var(--ease); }
.ac-more[aria-expanded="true"] .i { transform: rotate(180deg); }
.ac-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ac-legend .lg { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 12px; line-height: 16px; }
.ac-legend .lg i { width: 14px; height: 2px; border-radius: 1px; background: var(--orange); }
.ac-legend .lg.hl-match i { background: var(--blue); }
.shot-frame { height: 520px; overflow-y: auto; overflow-x: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--line) inset; background: var(--fill-stage); overscroll-behavior: contain; }
.shot-frame img { width: 100%; height: auto; display: block; }
.shot-foot { display: flex; align-items: flex-start; gap: 16px; margin-top: 10px; }
.shot-label { flex: 1; color: var(--muted-2); font-size: 11px; line-height: 15px; }
.shot-open { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 16px; }
.shot-open:hover { color: var(--ink); }
.ac-empty { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 6px; }
.ac-empty b { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 22px; }
.ac-empty span { color: var(--muted); font-size: 14px; line-height: 21px; }
.ac-empty .help { margin-top: 10px; color: var(--ink-2); }
.ac-foot { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-3); color: var(--muted-2); font-size: 12px; line-height: 16px; }
.ac-foot .grow { flex: 1; }
.cite-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; margin-right: -8px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 500; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.cite-btn:hover { background: var(--fill-nav); color: var(--ink); }

.rail { flex: 1; min-width: 0; padding-top: 4px; display: flex; flex-direction: column; }
.rail-title { padding-bottom: 10px; color: var(--muted-3); font-size: 12px; font-weight: 500; line-height: 16px; }
.rail-row { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-top: 1px solid var(--line-3); }
.rail-row .rr { display: flex; align-items: flex-start; }
.rail-row .rd { width: 20px; flex-shrink: 0; font-size: 10px; line-height: 20px; color: var(--dot-rail); }
.rail-row.bad .rd { color: var(--orange); }
.rail-row.none .rd, .rail-row.partial .rd { color: var(--orange-pale); }
.rail-row.review .rd { color: var(--sep); }
.rail-row.info .rd { color: var(--dot-rail); }
.rail-row.info .rv { color: var(--muted); font-weight: 500; }
.rail-row.unrev .rd { color: transparent; position: relative; }
.rail-row.unrev .rd::after { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #A9AFB8; }
.rail-row.unrev .rv { color: var(--muted); font-weight: 500; }
details.why p b { color: var(--ink-2); font-weight: 600; }
details.why p + p { margin-top: 6px; }
.rail-row .rn { flex: 1; color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.rail-row .rv { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 20px; text-align: right; white-space: nowrap; padding-left: 12px; }
.rail-row .rx { padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 19px; text-wrap: pretty; }
.rail-row .await { color: #A4441C; }
details.why { padding-left: 20px; }
details.why summary { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 12px; font-weight: 500; line-height: 16px; cursor: pointer; list-style: none; border-radius: 4px; }
details.why summary::-webkit-details-marker { display: none; }
details.why summary .i { transition: transform var(--t-row) var(--ease); }
details.why[open] summary .i { transform: rotate(180deg); }
details.why summary:hover { color: var(--ink); }
details.why p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 18px; max-width: 360px; text-wrap: pretty; }
@media print { details.why { display: none; } }

.disagree-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.disagree-line b { color: var(--ink); font-weight: 600; }
.disagree-line b::before { content: "≠"; color: #C2551F; margin-right: 8px; }
.disagree-line .tool { display: inline-flex; align-items: center; gap: 6px; }

.nhs-says { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; max-width: 640px; }
.nhs-quote { color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -0.015em; line-height: 28px; text-wrap: pretty; }
.nhs-src { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 18px; }
.nhs-src a { color: var(--ink); font-weight: 500; }
.nhs-src a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nhs-src .i { color: var(--muted-3); }
.nhs-src .muted { color: var(--muted-2); }
.nhs-none { padding-top: 24px; color: var(--muted); font-size: 15px; line-height: 24px; max-width: 640px; }

.src-sentence { padding-top: 16px; color: var(--muted); font-size: 14px; letter-spacing: -0.005em; line-height: 20px; }
.src-bar { display: flex; gap: 2px; height: 8px; margin: 14px 0 10px; }
.src-bar > i { display: block; flex: var(--g) 1 0px; }
.src-bar > i:first-child { border-radius: 4px 0 0 4px; }
.src-bar > i:last-child { border-radius: 0 4px 4px 0; }
.src-bar > i:only-child { border-radius: 4px; }
.src-labels { display: flex; gap: 2px; padding-bottom: 18px; }
.src-labels > span { flex: var(--g) 1 0px; min-width: 0; color: var(--muted-2); font-size: 11px; line-height: 14px; white-space: nowrap; }
.src-labels b { color: var(--ink); font-weight: 500; }
.srcs { border-top: 1px solid var(--line-3); display: flex; flex-direction: column; }
.src { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 0; border-bottom: 1px solid var(--line-3); }
.src .st { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.src .sn { color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.src .sl { color: var(--muted-2); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src .sd { width: 220px; flex-shrink: 0; text-align: right; color: var(--muted); font-size: 13px; line-height: 18px; }
.src a.sn:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-dashed); }
.src.hidden { display: none; }
.srcs.open .src.hidden { display: flex; }
.more-btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; color: var(--ink-3); font-size: 13px; font-weight: 500; line-height: 18px; }
.more-btn .i { color: var(--icon); transition: transform var(--t-row) var(--ease); }
.more-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.more-btn.lg { height: 52px; color: var(--ink); font-size: 14px; line-height: 20px; }
.more-btn.lg .i { color: var(--ink); }

.fav { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.fav img { width: 16px; height: 16px; border-radius: 3px; display: block; }
.fav.c0 { background: #E8F0FC; color: #2A5FA8; }
.fav.c1 { background: #FDECE4; color: #A4441C; }
.fav.c2 { background: #E6F3EC; color: #2F6E47; }
.fav.c3 { background: #F1ECFA; color: #61439B; }
.fav.c4 { background: #FBF2D9; color: #7E6112; }
.fav.c5 { background: #EEF0F3; color: #454B55; }

.drows { display: flex; flex-direction: column; padding-top: 48px; }
details.drow { border-top: 1px solid var(--line-3); }
details.drow:last-child { border-bottom: 1px solid var(--line-3); }
details.drow summary { display: flex; align-items: center; gap: 16px; height: 54px; cursor: pointer; list-style: none; }
details.drow summary::-webkit-details-marker { display: none; }
details.drow summary b { flex: 1; min-width: 150px; color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
details.drow summary span { color: var(--muted-2); font-size: 13px; line-height: 18px; text-align: right; }
details.drow summary .i { color: var(--chev); transition: transform var(--t-row) var(--ease); }
details.drow[open] summary .i { transform: rotate(90deg); }
details.drow .dbody { padding: 0 0 20px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: 13px; line-height: 18px; }
.kv dt { color: var(--muted-2); }
.kv dd { margin: 0; color: var(--ink-2); }
.mini { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.mini th { text-align: left; font-weight: 400; color: var(--muted-2); font-size: 12px; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line-3); }
.mini td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-3); color: var(--ink-2); vertical-align: top; }
.mini td a { color: var(--ink); font-weight: 500; }

.charities { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-top: 56px; }
.charities .cl { color: var(--muted-2); font-size: 13px; line-height: 18px; }
.charities a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 20px; transition: color var(--t-hover) var(--ease); }
.charities a:hover { color: var(--ink); }
.charities.q { padding-top: 40px; }

/* ------------------------------------------------------------ worry */
.flow { padding-top: 56px; }
.flow-head { display: flex; padding-bottom: 14px; color: var(--muted-2); font-size: 12px; line-height: 16px; }
.flow-head .l { width: 150px; padding-right: 14px; text-align: right; flex-shrink: 0; }
.flow-head .m { width: 540px; flex-shrink: 0; }
.flow-head .r { padding-left: 14px; }
.flow-body { display: flex; height: 264px; }
.flow-labels { position: relative; height: 264px; }
.flow-labels.l { width: 150px; flex-shrink: 0; }
.flow-labels.r { flex: 1; }
.flow-labels .nl { position: absolute; display: flex; flex-direction: column; transform: translateY(-50%); }
.flow-labels.l .nl { right: 14px; align-items: flex-end; text-align: right; }
.flow-labels.r .nl { left: 14px; }
.flow-labels .nl b { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.flow-labels .nl span { color: var(--muted-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.flow-labels .nl.small { flex-direction: row; gap: 4px; color: var(--ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.flow-labels .nl.small b { font-size: 12px; font-weight: 400; color: var(--ink-2); line-height: 16px; }
.flow svg { display: block; flex-shrink: 0; overflow: visible; }
.flow path { transition: opacity var(--t-row) var(--ease); stroke: #FFFFFF; stroke-width: 1; paint-order: stroke; cursor: pointer; }
.flow svg.picked path { opacity: 0.16; }
.flow svg.picked path.on { opacity: 1; }
.flow svg:hover path { opacity: 0.55; }
.flow svg path:hover { opacity: 1; }
.f-good { fill: var(--blue); }
.f-partial { fill: var(--blue-light); }
.f-bad { fill: var(--orange); }
.f-more { fill: var(--more); }
.f-other { fill: var(--orange-pale); }
.f-none { fill: var(--dot-rail); }
.f-review { fill: #B8BDC5; }
.f-unrev { fill: #E3E6EA; }
.sq.f-unrev { background: var(--white); box-shadow: inset 0 0 0 1.5px #A9AFB8; }
.node { fill: var(--sep); }
/* topic map (03 Topic): bubbles per condition, a dot per question and tool */
.tmap { margin: 40px 0 0; background: #F6F8FB; border-radius: 14px; overflow: hidden; }
.tmap-c { position: relative; }
.tmap-c svg { display: block; width: 100%; height: auto; }
.tmap-c.m { display: none; }
.tmap .bub { fill: var(--white); stroke: #0E111614; stroke-width: 1; transition: stroke var(--t-hover) var(--ease); }
.tmap .tb:hover .bub { stroke: #0E111633; }
.tmap .tdots { pointer-events: none; }
.tmap svg g[data-sv] { display: none; }
html[data-surface="all"] .tmap svg g[data-sv="all"],
html[data-surface="google_ai_overviews"] .tmap svg g[data-sv="google_ai_overviews"],
html[data-surface="google_ai_mode"] .tmap svg g[data-sv="google_ai_mode"],
html[data-surface="chatgpt"] .tmap svg g[data-sv="chatgpt"] { display: inline; }
.td-m { fill: var(--blue); } .td-w { fill: var(--blue-light); } .td-f { fill: var(--orange); } .td-u { fill: var(--more); }
.td-n { fill: var(--white); stroke: #A9AFB8; stroke-width: 1.5; } .td-h { fill: #C3C8CF; }
.tlabel { position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; background: var(--white); border-radius: 6px;
  box-shadow: 0 0 0 1px #0E11161A; padding: 2px 7px; color: var(--ink-2); font-size: 11px; font-weight: 500; line-height: 16px; }
.tmap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 14px; }
.tmap-legend .li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; line-height: 16px; }
.tmap-legend .li i { width: 8px; height: 8px; border-radius: 50%; }
.tmap-legend .li i.td-m { background: var(--blue); } .tmap-legend .li i.td-w { background: var(--blue-light); } .tmap-legend .li i.td-f { background: var(--orange); }
.tmap-legend .li i.td-u { background: var(--more); } .tmap-legend .li i.td-n { box-shadow: inset 0 0 0 1.5px #A9AFB8; } .tmap-legend .li i.td-h { background: #C3C8CF; }
.tmap-legend .note { margin-left: auto; color: var(--faint-text); }
@media (max-width: 600px) {
  .tmap { margin-top: 28px; border-radius: 12px; }
  .tmap-c.d { display: none; }
  .tmap-c.m { display: block; }
  .tmap-legend .note { margin-left: 0; }
}
.flow-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding: 24px 0 0 158px; }
.flow-legend .li { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0 -8px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 12px; line-height: 16px; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.flow-legend .li:hover { color: var(--ink); }
.flow-legend .li.on { background: var(--fill-seg); color: var(--ink); }
.flow-legend .sq { width: 8px; height: 8px; border-radius: 2px; }
.sq.f-good { background: var(--blue); } .sq.f-partial { background: var(--blue-light); } .sq.f-bad { background: var(--orange); }
.sq.f-more { background: var(--more); } .sq.f-other { background: var(--orange-pale); } .sq.f-none { background: var(--dot-rail); } .sq.f-review { background: #B8BDC5; }
.per-tool { display: flex; gap: 48px; padding-top: 48px; }
.per-tool .pt { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.per-tool .pt-name { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.per-tool .pt-n { display: flex; align-items: baseline; gap: 6px; }
.per-tool .pt-n b { white-space: nowrap; color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -0.035em; line-height: 34px; font-variant-numeric: tabular-nums; }
.per-tool .pt-n span { color: var(--muted-2); font-size: 13px; line-height: 18px; }

/* ------------------------------------------------------------ flagged */
.frows { display: flex; flex-direction: column; }
.frow { display: flex; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line-3); position: relative; }
.frow > a.cover { position: absolute; inset: 0; z-index: 1; }
.frow .ft { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 24px; position: relative; }
.frow .ft::before { content: "●"; position: absolute; left: -20px; top: 0; color: var(--orange); font-size: 10px; line-height: 20px; }
.frow.awaiting .ft::before { color: var(--white); text-shadow: 0 0 0 var(--orange); -webkit-text-stroke: 1.5px var(--orange); }
.frow .fq { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.frow .fs { color: var(--muted); font-size: 13px; line-height: 19px; }
.frow .ftool { width: 150px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.frow .fc { width: 130px; flex-shrink: 0; text-align: right; color: var(--muted-2); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .fc.since { color: var(--ink); font-weight: 500; }
.frow .fe { width: 28px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.frow .fe .chev { color: var(--chev); }
.frow .fcite { position: relative; z-index: 2; opacity: 0; transition: opacity var(--t-hover) var(--ease); margin-left: 8px; }
.frow:hover .fcite, .frow .fcite:focus-visible { opacity: 1; }
.await-note { display: block; color: var(--muted-2); font-size: 12px; line-height: 16px; }
.tag-unrev { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 14px; }
.ri-why { color: var(--ink-2); font-size: 13px; line-height: 19px; max-width: 680px; }
.ri-why b { font-weight: 600; color: var(--ink); }
.frow.unrev .ft::before { content: ""; width: 8px; height: 8px; top: 6px; left: -19px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #A9AFB8; }
.frow.unrev .fs b { color: var(--ink-2); font-weight: 600; }
.frow.unrev .fs { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.frow.unrev .fs + .fs { margin-top: 2px; }
.tag-await { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 4px; height: 20px; padding: 0 7px; border-radius: 5px; background: #FDF0EA; color: #A4441C; font-size: 11px; font-weight: 600; line-height: 14px; }
.frow.hidden { display: none; }
.frows.open .frow.hidden { display: flex; }
.fixed-row { display: flex; align-items: center; gap: 10px; height: 54px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); width: 100%; text-align: left; }
.fixed-row .i.ok { color: var(--blue); }
.fixed-row b { flex: 1; color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.fixed-row span { color: var(--muted-2); font-size: 13px; line-height: 18px; }
.fixed-row .chev { color: var(--chev); transition: transform var(--t-row) var(--ease); }
.fixed-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
.fixed-list { display: none; }
.fixed-list.open { display: flex; }
.fixed-list .frow .ft::before { content: none; }
.filter-chips { display: flex; gap: 6px; }
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px 0 8px; }
.empty-state b { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.empty-state span { color: var(--muted-2); font-size: 14px; line-height: 21px; max-width: 520px; }
.empty-state.center { align-items: center; text-align: center; padding: 40px 0; }

/* peek window (space bar on a question row) */
.peek-veil { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
  background: #0E111629; opacity: 0; transition: opacity var(--t-row) var(--ease); }
.peek-veil[hidden] { display: none; }
.peek-veil.open { opacity: 1; }
.peek-veil.closing { transition-duration: 120ms; }
.peek { width: 620px; max-width: 100%; max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--white);
  box-shadow: 0 0 0 1px #0E111614, 0 24px 64px #0E111638, 0 4px 12px #0E111614; outline: none; transform: translateY(4px); transition: transform var(--t-row) var(--ease); }
.peek-veil.open .peek { transform: none; }
.pk-head { display: flex; align-items: center; gap: 8px; height: 48px; flex-shrink: 0; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line-2); }
.pk-face { display: inline-flex; }
.pk-tool { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.pk-sep { width: 3px; height: 3px; border-radius: 2px; background: var(--chev); flex-shrink: 0; }
.pk-date { color: var(--muted-2); font-size: 13px; line-height: 18px; white-space: nowrap; }
.pk-head .grow { flex: 1; }
.pk-open { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--white);
  box-shadow: var(--shadow-btn); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 16px; text-decoration: none; white-space: nowrap; }
.pk-open:hover { background: var(--fill-stage); }
.peek kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: var(--fill-seg);
  color: var(--muted); font: 11px/14px var(--font); }
.pk-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.pk-x:hover { background: var(--fill-nav); }
.pk-body { padding: 22px 24px 24px; overflow-y: auto; }
.pk-q { margin: 0; color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 28px; }
.pk-cmp { display: flex; gap: 40px; margin-top: 18px; }
.pk-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-c[hidden] { display: none; }
.pk-c small { color: var(--muted); font-size: 12px; line-height: 16px; }
.pk-c b { color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 34px; }
.pk-said.bad span { text-decoration: underline 3px var(--orange); text-underline-offset: 5px; }
.pk-said.more span { text-decoration: underline 3px var(--more); text-underline-offset: 5px; }
.pk-said.unrev { color: var(--muted); }
.pk-ex { margin-top: 20px; color: var(--ink-2); font-size: 15px; letter-spacing: -0.005em; line-height: 24px; }
.pk-ex p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.pk-ex .pk-wait, .pk-ex .pk-none { color: var(--muted-2); font-size: 14px; line-height: 21px; }
.pk-foot { display: flex; align-items: center; gap: 16px; height: 44px; flex-shrink: 0; padding: 0 18px; border-top: 1px solid var(--line-2); color: var(--muted-2); font-size: 12px; line-height: 16px; }
.pk-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-keys { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 600px) {
  .peek-veil { padding: 8vh 12px 12px; }
  .pk-cmp { flex-direction: column; gap: 14px; }
  .pk-c b { font-size: 24px; line-height: 30px; }
  .pk-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .peek { transform: none !important; } }

/* popover menus */
.pop {
  position: absolute; z-index: 70; min-width: 220px; padding: 6px; border-radius: 10px; background: var(--white); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(-2px) scale(0.98); transform-origin: top right; visibility: hidden;
  transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms;
}
.pop.open { opacity: 1; transform: none; visibility: visible; transition: opacity var(--t-pop) var(--ease), transform var(--t-pop) var(--ease), visibility 0s; }
.pop .opt { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--ink); font-size: 13px; line-height: 18px; text-align: left; white-space: nowrap; }
.pop .opt:hover, .pop .opt:focus-visible { background: var(--fill-nav); outline: none; }
.pop .opt .grow { flex: 1; }
.pop .opt .tick { color: var(--blue-check); visibility: hidden; }
.pop .opt[aria-checked="true"] .tick, .pop .opt.on .tick { visibility: visible; }
.pop .opt .meta { color: var(--faint-text); font-size: 12px; }
.pop .note { padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--line-2); color: var(--muted-2); font-size: 12px; line-height: 16px; white-space: normal; max-width: 240px; }
.pop.share { width: 360px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.share-box { border-radius: 8px; box-shadow: 0 0 0 1px var(--line) inset; padding: 12px 14px; color: var(--ink-2); font-size: 13px; line-height: 19px; word-break: break-word; user-select: all; }
.share-box.url { color: var(--ink); font-weight: 500; font-size: 12px; line-height: 17px; }
.share-hint { color: var(--muted-2); font-size: 12px; line-height: 16px; }
.share-actions { display: flex; gap: 8px; }
.share-actions .btn { flex: 1; justify-content: center; height: 30px; font-size: 12px; border-radius: 7px; }

.toasts { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-toast); color: var(--ink); font-size: 13px; line-height: 18px; animation: toast-in 200ms var(--ease) both; }
.toast .i { color: var(--blue-check); }
.toast.out { animation: toast-out 160ms var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(4px); } }

/* search */
.search-veil { position: fixed; inset: 0; z-index: 80; background: rgba(14,17,22,0.12); display: none; align-items: flex-start; justify-content: center; padding-top: 100px; }
.search-veil.open { display: flex; animation: fadein 160ms var(--ease) both; }
.search-box { width: 720px; max-width: calc(100vw - 32px); border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px #0E111614, 0 24px 48px -12px #0E111640, 0 2px 4px #0E11160A; overflow: hidden; animation: rise 200ms var(--ease) both; display: flex; flex-direction: column; max-height: calc(100vh - 140px); }
@keyframes rise { from { opacity: 0; transform: translateY(4px) scale(0.99); } to { opacity: 1; transform: none; } }
.search-in { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line-2); color: var(--muted); flex-shrink: 0; }
.search-in input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); background: none; min-width: 0; }
.search-in input::-webkit-search-cancel-button, .search-in input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-in input::placeholder { color: var(--faint-text); }
.search-res { overflow-y: auto; padding: 8px; min-height: 120px; }
.search-group { padding: 10px 10px 6px; color: var(--muted-2); font-size: 12px; line-height: 16px; }
.search-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 20px; }
.search-item .i { color: var(--icon); }
.search-item .st { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item .st b { font-weight: 600; }
.search-item .sm { color: var(--muted-2); font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.search-item .sm .o { color: var(--orange); font-size: 9px; }
.search-item.on { background: var(--fill-nav); }
.search-foot { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; border-top: 1px solid var(--line-2); background: var(--fill-stage); color: var(--muted-2); font-size: 12px; flex-shrink: 0; }
.search-foot .k { display: inline-flex; align-items: center; gap: 4px; }
.search-foot .kb { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 5px; box-shadow: 0 0 0 1px var(--line) inset; background: var(--white); color: var(--muted); font-size: 11px; font-weight: 500; }
.search-none { padding: 32px 16px; text-align: center; color: var(--muted-2); font-size: 14px; line-height: 21px; }
.search-none b { display: block; color: var(--ink); font-weight: 500; }
.search-none .i { display: block; margin: 0 auto 8px; stroke: var(--muted-2); fill: none; stroke-width: 1.75; stroke-linecap: round; }
.search-none a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* method / about / data */
.steps { display: flex; gap: 48px; padding-top: 56px; }
.steps .step { flex: 1 1 0; border-top: 1px solid var(--line); padding-top: 20px; min-width: 0; }
.steps .step b { display: block; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 26px; }
.steps .step span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 22px; }
.check-row { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--line-3); }
.check-row .cn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.check-row .cn b { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.check-row .cn span { color: var(--muted-2); font-size: 13px; line-height: 19px; }
.check-row .cb { width: 160px; flex-shrink: 0; }
.check-row .cp { width: 52px; flex-shrink: 0; text-align: right; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; }
.check-row .cc { width: 120px; flex-shrink: 0; text-align: right; color: var(--muted-2); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.dont { display: flex; flex-direction: column; }
.dont div { padding: 15px 0; border-bottom: 1px solid var(--line-3); color: var(--ink-2); font-size: 15px; line-height: 22px; letter-spacing: -0.01em; }
.file-row { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 11px 0; border-bottom: 1px solid var(--line-3); }
.file-row b { width: 180px; flex-shrink: 0; color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.file-row .files { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.file-row .files a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font-size: 12px; font-weight: 500; transition: background var(--t-hover) var(--ease); }
.file-row .files a:hover { background: #F8F9FA; }
.file-row .files a span { color: var(--muted-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.md-page h2, .md-page h3 { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 22px; margin-top: 22px; }
.md-page ul { list-style: disc; padding-left: 20px; }
.md-page li + li { margin-top: 4px; }
.md-page > * + * { margin-top: 12px; }
.about-who { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }

/* review queue */
.review-item { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line-3); }
.review-item .ri-top { display: flex; align-items: center; gap: 10px; }
.review-item .ri-q { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 22px; }
.review-item .ri-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted-2); font-size: 13px; line-height: 18px; }
.review-item .ri-meta span { display: inline-flex; align-items: center; gap: 6px; }
.review-item .ri-ex { color: var(--ink-2); font-size: 14px; line-height: 22px; padding: 10px 14px; border-radius: 10px; background: var(--fill-stage); box-shadow: 0 0 0 1px var(--line-2) inset; }
.review-item .ri-cmp { display: flex; gap: 28px; }
.review-item .ri-cmp div { display: flex; flex-direction: column; gap: 2px; }
.review-item .ri-cmp small { color: var(--muted-2); font-size: 12px; line-height: 16px; }
.review-item .ri-cmp b { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 22px; }
.review-item .ri-cmp b.bad { text-decoration: underline 2px var(--orange); text-underline-offset: 4px; }

/* briefing */
.brief-actions { display: flex; gap: 8px; padding-top: 28px; }
.brief-list { display: flex; flex-direction: column; }
.brief-list .bl { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-3); }
.brief-list .bl .bq { flex: 1; min-width: 0; }
.brief-list .bl .bq b { display: block; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.brief-list .bl .bq span { color: var(--muted); font-size: 13px; line-height: 18px; }
.brief-list .bl .bt { width: 140px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; line-height: 18px; }

/* topics grid */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: column; column-gap: 40px; border-top: 1px solid var(--line-2); }
.tcell { display: flex; align-items: center; gap: 10px; height: 46px; border-bottom: 1px solid var(--line-3); color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 20px; }
.tcell .tn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcell .o { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.tcell .c { width: 22px; text-align: right; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.tcell.off { color: var(--muted-2); font-weight: 400; }
a.tcell:hover .tn { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-dashed); }
.topic-title { display: flex; align-items: center; gap: 14px; }
.topic-title .i { color: var(--ink); }
.orgs { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; border-top: 1px solid var(--line-2); }
.orgs a, .orgs span.o { display: flex; align-items: center; gap: 10px; height: 44px; border-bottom: 1px solid var(--line-3); color: var(--ink-2); font-size: 14px; line-height: 20px; }
.orgs a:hover { color: var(--ink); }
.orgs .hidden { display: none !important; }
.orgs.open .hidden { display: flex !important; }
.orgs .on { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-line { padding-top: 12px; color: var(--muted-2); font-size: 13px; line-height: 19px; max-width: 640px; }

/* sources page */
.tool-bars { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.tool-bar { display: flex; align-items: center; gap: 12px; height: 44px; }
.tool-bar .tb-name { width: 150px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.tool-bar .bar { flex: 1; margin: 0; }
.tool-bar .tb-n { width: 130px; flex-shrink: 0; text-align: right; color: var(--muted-2); font-size: 13px; }
.tool-bar .tb-n b { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-right: 4px; }

/* ------------------------------------------------------------ preview / dev banners in print */
@media print {
  .sidebar, .topbar, .statusbar, .mask, .banner, .no-print, .toasts, .search-veil { display: none !important; }
  .shell { padding: 0; display: block; }
  .panel { border: 0; }
  .content { padding: 0; }
  .col { max-width: none; }
  .sec { padding-top: 28px; }
  .stats { padding-top: 24px; }
  body { font-size: 12px; }
  a { text-decoration: none !important; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ------------------------------------------------------------ narrower screens */
@media (max-width: 1180px) {
  .hero { flex-direction: column; gap: 0; }
  .feature { margin-top: 40px; width: 100%; max-width: 460px; }
}
@media (max-width: 1100px) {
  :root { --sidebar-w: 232px; }
  .answer-layout { flex-direction: column; gap: 32px; }
  .answer-card { width: 100%; }
  .rail { width: 100%; }
  .flow-head .m, .flow svg { width: calc(100% - 300px) !important; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .shell { padding: 0; display: block; }
  .mask { display: none; }
  .sidebar {
    position: fixed; z-index: 85; top: 0; left: 0; bottom: 0; width: 288px; height: 100%; padding: 8px 10px 0; background: var(--white);
    box-shadow: 0 0 0 1px #0E111614, 24px 0 48px -16px #0E111633; transform: translateX(-105%); transition: transform 220ms var(--ease);
  }
  .has-banner .sidebar { top: 0; height: 100%; }
  .drawer-open .sidebar { transform: none; }
  .drawer-veil { position: fixed; inset: 0; z-index: 84; background: rgba(14,17,22,0.18); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), visibility 0s linear 200ms; }
  .drawer-open .drawer-veil { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease), visibility 0s; }
  .panel { border: 0; border-radius: 0; min-height: 100vh; }
  .topbar { top: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0 8px 0 6px; height: 52px; gap: 6px; }
  .has-banner .topbar { top: 26px; }
  .topbar.sub { padding-left: 6px; }
  .menu-btn { display: inline-flex; width: 36px; height: 36px; color: var(--ink-3); }
  .topbar .page-icon, .topbar .back { display: none; }
  .crumbs > :not(.here):not(.m-brand) { display: none; }
  .crumbs { padding-left: 0 !important; }
  .crumbs .here { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
  .pill-btn.tools .tl, .pill-btn.month .ml-long { display: none; }
  .pill-btn.share .tl { display: none; }
  .pill-btn.share { width: 32px; padding: 0; justify-content: center; }
  .pill-btn.share .m-only { display: inline-block !important; color: var(--ink-3); }
  .pill-btn { height: 32px; }
  .statusbar { position: static; margin: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; height: auto; min-height: 44px; flex-wrap: wrap; padding: 10px 16px; gap: 2px 12px; }
  .statusbar .left { white-space: normal; }
  .statusbar .grow { display: none; }
  .content { padding: 36px 16px 56px; }
  .h1 { font-size: 30px; line-height: 35px; letter-spacing: -0.035em; }
  .lead { font-size: 16px; line-height: 24px; }
  .lead.strong { font-size: 17px; line-height: 25px; }
  .sec { padding-top: 56px; }
  .sec.tight { padding-top: 44px; }
  .stats, .stats.hero { flex-direction: column; gap: 28px; padding-top: 40px; }
  .stat-big { font-size: 44px; line-height: 48px; }
  .hero-search { width: 100%; margin-top: 22px; }
  .feature { max-width: none; margin-top: 32px; }
  .row { height: auto; min-height: 54px; padding: 10px 0; gap: 12px; }
  .row .rname { white-space: normal; }
  .row .rmeta { display: none; }
  .row .dots { max-width: 90px; }
  .sec-head { flex-wrap: wrap; row-gap: 12px; }
  .sec-head .h2 { flex-basis: 100%; }
  .sec-head.end .h2 { flex-basis: auto; }
  .sec-head .seg { overflow-x: auto; max-width: 100%; }
  /* grid becomes stacked cards: question on top, three tools beneath */
  .ghead { display: none; }
  .grow-r { height: auto; flex-wrap: wrap; padding: 12px 0 10px; row-gap: 8px; }
  .grow-r .gq { flex-basis: 100%; padding-right: 22px; }
  .grow-r .qtext { white-space: normal; }
  .grow-r .gnhs { width: auto; flex-basis: 100%; color: var(--muted); font-size: 13px; line-height: 18px; }
  .grow-r .gnhs::before { content: "The NHS says "; }
  .grow-r .gnhs span { display: inline; }
  .grow-r .gc { width: 33.33%; display: flex; flex-direction: column; gap: 0; }
  .grow-r .gc::before { content: attr(data-tool); color: var(--muted-2); font-size: 11px; line-height: 14px; }
  .grow-r .gend { position: absolute; right: 0; top: 14px; }
  .hovercard { display: none; }
  .legend { flex-wrap: wrap; height: auto; padding: 16px 0; gap: 8px 14px; justify-content: flex-start; }
  .legend .grow { flex-basis: 100%; height: 0; }
  .answer-card { padding: 18px 18px; border-radius: 12px; }
  .seg.lg { width: 100%; }
  .seg.lg button { flex: 1; justify-content: center; padding: 0 6px; font-size: 12px; gap: 5px; }
  .tabs-wrap { padding-top: 24px; }
  .src .sd { display: none; }
  .src-labels > span { white-space: normal; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .flow-head, .flow-body, .flow-legend { display: none; }
  .flow-mobile { display: flex !important; }
  .per-tool { flex-direction: column; gap: 16px; padding-top: 32px; }
  .frow { flex-wrap: wrap; row-gap: 6px; padding-left: 18px; }
  .frow .ft { flex-basis: 100%; padding-right: 0; }
  .frow .ft::before { left: -18px; }
  .frow .ftool { width: auto; }
  .frow .fc { width: auto; flex: 1; }
  .frow .fcite { opacity: 1; }
  .frows { padding-left: 0; }
  .steps { flex-direction: column; gap: 24px; padding-top: 40px; }
  .check-row { flex-wrap: wrap; }
  .check-row .cn { flex-basis: 100%; }
  .check-row .cb { flex: 1; width: auto; }
  .tgrid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .orgs { grid-template-columns: 1fr; }
  .file-row { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .file-row b { width: 100%; }
  .briefing-row { flex-wrap: wrap; }
  .briefing-row .bt { flex-basis: 100%; }
  .tool-bar { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .tool-bar .tb-name { width: auto; flex: 1; }
  .tool-bar .bar { flex-basis: 100%; order: 3; }
  .pop.share { width: calc(100vw - 24px); }
  .search-veil { padding-top: 12px; }
  .search-box { max-height: calc(100vh - 24px); }
  .brief-list .bl { flex-wrap: wrap; }
  .review-item .ri-cmp { flex-wrap: wrap; gap: 12px 24px; }
  .charities { padding-top: 44px; }
  .disagree-line { align-items: flex-start; }
  .split { position: static; transform: none; width: auto; flex-shrink: 0; align-self: flex-start; }
  .cell .lab { max-width: none; }
  .row .rname { flex: 1; }
  details.drow summary { flex-wrap: wrap; height: auto; padding: 14px 24px 14px 0; position: relative; row-gap: 2px; }
  details.drow summary b { flex-basis: 100%; }
  details.drow summary span { text-align: left; }
  details.drow summary .i { position: absolute; right: 0; top: 17px; }
  .src-labels { flex-wrap: wrap; gap: 4px 14px; }
  .src-labels > span { flex: none; }
  .banner .long { display: none; }
  .banner .short { display: inline; }
  .grow-r .flag-eng { align-self: flex-start; margin-top: 1px; }
}
.flow-mobile { display: none; flex-direction: column; gap: 10px; padding-top: 32px; }
.flow-mobile .fm { display: flex; flex-direction: column; gap: 8px; }
.flow-mobile .fm-h { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink); font-size: 14px; font-weight: 500; }
.flow-mobile .fm-h span { color: var(--muted-2); font-size: 12px; font-weight: 400; }
.flow-mobile .fm-l { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12px; }
.flow-mobile .fm-l .sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 120ms !important; transition-duration: 120ms !important; }
  .js .bar.grow { animation: fadein 120ms linear both; }
  .hovercard, .pop { transform: none !important; }
}

.out-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-right: 8px; padding: 0 7px 0 10px; border-radius: 8px; background: var(--fill-seg);
  color: var(--ink); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; transition: background var(--t-hover) var(--ease); }
.out-chip:hover { background: #E9EBEE; }
.out-chip .i { color: var(--muted); }
.out-chip[hidden] { display: none; }

/* flagged: the three numbers are the tabs */
.ktabs { padding-top: 56px; }
.ktab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-top: 16px;
  border-top: 1px solid var(--line); position: relative; cursor: pointer; }
.ktab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-row) var(--ease); }
.ktab[aria-selected="true"]::before { transform: none; }
.ktab .stat-label { color: var(--muted); transition: color var(--t-hover) var(--ease); }
.ktab:hover .stat-label, .ktab[aria-selected="true"] .stat-label { color: var(--ink); }
.ktab .stat-big { padding-top: 8px; }
.ktab .stat-sub { padding-top: 6px; }
.ktab:focus-visible { outline-offset: 6px; }
.kpanel[hidden] { display: none; }
.frow.unrev .fs { -webkit-line-clamp: 1; }
details.drow .dbody .frows { border-top: 1px solid var(--line-3); }
details.drow .dbody .frow:last-child { border-bottom: 0; }

.rows .row.hidden { display: none; }
.rows.open .row.hidden { display: flex; }

/* method: tables and numbered lists from markdown */
.md-page ol { list-style: decimal; padding-left: 20px; }
.md-page li::marker { color: var(--muted-2); }
.md-page table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; line-height: 18px; }
.md-page th { text-align: left; font-weight: 400; color: var(--muted-2); font-size: 12px; padding: 0 16px 8px 0; border-bottom: 1px solid var(--line); }
.md-page td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line-3); color: var(--ink-2); vertical-align: top; }
.md-page td:nth-child(2) { white-space: nowrap; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.md-page th:last-child, .md-page td:last-child { padding-right: 0; }

.grow-r[hidden], .frow[hidden], .row[hidden] { display: none !important; }

.stats.hero { align-items: stretch; justify-content: flex-start; }
@media (max-width: 900px) { .ktab .stat-big { font-size: 36px; line-height: 40px; } .ktabs { gap: 20px; } }

/* review queue: decide in place */
.review-item { gap: 12px; padding: 24px 0; }
.review-item .ri-top { align-items: flex-start; gap: 20px; }
.review-item .ri-q { flex: 1; min-width: 0; }
.review-item .ri-q:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-dashed); }
.ri-decide button { gap: 5px; padding: 0 10px 0 8px; }
.ri-decide button .i { color: var(--icon); }
.ri-decide [data-decide="confirm"][aria-pressed="true"] { color: #A4441C; }
.ri-decide [data-decide="confirm"][aria-pressed="true"] .i { color: var(--orange); }
.ri-decide [data-decide="dismiss"][aria-pressed="true"] .i { color: var(--ink-3); }
.review-item.decided { opacity: 0.55; transition: opacity var(--t-row) var(--ease); }
.review-item.decided:hover { opacity: 1; }
.review-item details.why { padding-left: 0; }
.review-item details.why p { max-width: 640px; }
.decide-bar { position: sticky; bottom: 46px; z-index: 30; align-self: center; display: flex; align-items: center; gap: 16px; margin-top: 32px; height: 48px;
  padding: 0 8px 0 18px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-pop); color: var(--muted); font-size: 13px; line-height: 18px;
  animation: toast-in 200ms var(--ease) both; }
.decide-bar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.decide-bar[hidden] { display: none; }

/* ---- pass 3 (after the design critique) ---- */
.seg-unrev, .seg-review { background: #E9EBEF; box-shadow: none; }
.stat-split { padding-top: 4px; color: var(--muted-2); font-size: 13px; line-height: 18px; }
.cell.soft .d { color: var(--blue-light); }
.ld.p { background: var(--blue-light); }
.rail-row.partial .rd { color: var(--blue-light); }
.ktab[aria-selected="false"] .stat-big { color: #A9AFB8; transition: color var(--t-hover) var(--ease); }
.ktab[aria-selected="false"]:hover .stat-big { color: var(--ink-3); }
.flow-legend { padding-top: 32px; }
.frow .ftool { width: 186px; }
.frow .ftool .faces { flex-shrink: 0; }
.frow .fc { width: 140px; }
.charities .more-inline { color: var(--muted-2); font-size: 14px; line-height: 20px; transition: color var(--t-hover) var(--ease); }
.charities .more-inline:hover { color: var(--ink); }
.charities.tick .hidden { display: none; }
.charities.tick.open .hidden { display: inline-flex; }
.tmap-legend { justify-content: flex-start; }
/* question tables: the question may take two lines; the NHS answer stays on one */
.grow-r { height: auto; min-height: 52px; padding: 7px 0; }
.grow-r .qtext { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.grow-r .gnhs span { -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; font-size: 14px; line-height: 20px; }
@media (max-width: 900px) {
  .sidebar { box-shadow: none; }
  .drawer-open .sidebar { box-shadow: 0 0 0 1px #0E111614, 24px 0 48px -16px #0E111633; }
  .topbar .crumbs { display: none; }
  .pill-btn.tools .tl { display: inline; }
  .grow-r .gnhs span { white-space: normal; }
}
@media (max-width: 420px) { .pill-btn.tools .tl { display: none; } }

.cell.quiet .d { color: var(--dot); }
.cell.quiet .lab { color: var(--muted); font-weight: 400; }
.td-q { fill: #D3D8DF; }
.tmap-legend .li i.td-q { background: #D3D8DF; }

/* ===================================================================== final pass (14 Nov): home, letter asks, examples */
.home-hero { display: flex; flex-direction: column; align-items: flex-start; }
.home-title { font-size: 46px; line-height: 50px; letter-spacing: -0.045em; }
.home-lead { max-width: 600px; padding-top: 16px; font-size: 17px; line-height: 27px; }
.home-hero .hero-search { width: 520px; margin-top: 32px; }
.sec-lead { padding-top: 14px; color: var(--muted); font-size: 15px; line-height: 24px; letter-spacing: -0.01em; max-width: 640px; text-wrap: pretty; }
.sec-meta { color: var(--muted-2); font-size: 13px; line-height: 18px; padding-bottom: 2px; }
.link-arrow.sm { font-size: 13px; line-height: 18px; padding-bottom: 2px; color: var(--ink-2); }

/* examples: what the tool said, beside what the NHS says */
.ex-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; padding-top: 12px; }
.ex { display: flex; flex-direction: column; gap: 10px; padding: 22px 0 24px; border-bottom: 1px solid var(--line-3); min-width: 0; }
.ex:nth-last-child(-n+2) { border-bottom: 0; }
.ex-q { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.015em; text-wrap: pretty; }
.ex-q::before { content: "“"; } .ex-q::after { content: "”"; }
.ex-said { display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 12.5px; line-height: 16px; }
.ex-text { color: var(--ink-2); font-size: 14px; line-height: 22px; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex-text mark { background: none; color: var(--ink); font-weight: 500; text-decoration: underline 2px var(--orange); text-underline-offset: 4px; text-decoration-skip-ink: none; }
.ex-nhs { display: flex; align-items: baseline; gap: 7px; color: var(--muted); font-size: 13px; line-height: 19px; }
.ex-nhs .i { flex: none; transform: translateY(2px); color: var(--icon); }
.ex-nhs b { color: var(--ink); font-weight: 500; }
.ex:hover .ex-q { text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 4px; }

/* the letter's asks, by tool */
.asks { --ask-col: 108px; display: flex; flex-direction: column; padding-top: 18px; }
.ask-head, .ask-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, var(--ask-col)) 18px; column-gap: 20px; align-items: start; }
.ask-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.ah-t { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 12.5px; line-height: 16px; white-space: nowrap; }
.ask-row { padding: 20px 0; border-bottom: 1px solid var(--line-3); position: relative; }
.ask-row:last-child { border-bottom: 0; }
.ask-q { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ask-q b { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 21px; letter-spacing: -0.01em; text-wrap: balance; }
.ask-quote { color: var(--muted-2); font-size: 12.5px; line-height: 18px; text-wrap: pretty; }
.ask-note { color: var(--muted-2); font-size: 12.5px; line-height: 18px; padding-top: 4px; }
.ask-v { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ask-v b { color: var(--ink); font-size: 22px; font-weight: 600; line-height: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ask-v small { color: var(--muted-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask-bar { display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--seg-track, #EFF1F4); overflow: hidden; }
.ask-bar i { display: block; height: 100%; background: var(--blue); border-radius: 2px; }
.ask-v.flag b { color: var(--orange); }
.ask-v.flag .ask-bar i { background: var(--orange); }
.ask-text { grid-column: span 3; color: var(--ink-2); font-size: 15px; line-height: 23px; padding-top: 1px; text-wrap: pretty; }
.ask-go { padding-top: 3px; }
.ask-go .chev { color: var(--chev); transition: transform var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.ask-row:hover .ask-go .chev { color: var(--ink-3); transform: translateX(2px); }
.ask-row:hover .ask-q b { text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 4px; }

/* case studies, small */
.case-mini { display: flex; flex-direction: column; padding-top: 8px; }
.cm { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line-3); }
.cm:last-child { border-bottom: 0; }
.cm-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-t b { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.cm-t span { color: var(--muted); font-size: 13.5px; line-height: 20px; }
.verdict { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.v-fixed { background: #EAF2FD; color: #1F62C4; }
.v-still_there { background: #FDEDE6; color: #B9461B; }
.v-mixed { background: #F1F0FC; color: #5B4DC4; }

@media (max-width: 760px) {
  .home-title { font-size: 34px; line-height: 39px; }
  .home-lead { font-size: 16px; line-height: 25px; }
  .home-hero .hero-search { width: 100%; }
  .ex-list { grid-template-columns: minmax(0, 1fr); }
  .ex:nth-last-child(2) { border-bottom: 1px solid var(--line-3); }
  .asks { --ask-col: minmax(0, 1fr); }
  .ask-head, .ask-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .ah-q, .ask-go { display: none; }
  .ask-q { grid-column: 1 / -1; padding-bottom: 12px; }
  .ask-text { grid-column: 1 / -1; }
  .ask-bar { width: 100%; max-width: 72px; }
}
.nav-sep { height: 1px; background: var(--line-2); margin: 10px 10px; }

/* organisation pages and the charities index */
.org-head { display: flex; align-items: center; gap: 14px; }
.org-fav .fav, .org-fav .fav img { width: 32px; height: 32px; border-radius: 7px; font-size: 16px; }
.org-lead { padding-top: 12px; }
.dot-sep { margin: 0 8px; color: var(--sep); }
a.u { text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 3px; }
a.u:hover { text-decoration-color: var(--ink-3); }
.org-tools { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--line-2); }
.ot-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px 80px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-3); font-size: 14px; }
.ot-row.two { grid-template-columns: minmax(0, 1fr) 200px; }
.ot-head { color: var(--muted-2); font-size: 12.5px; padding: 10px 0; }
.ot-tool { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.ot-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; min-width: 28px; }
.ot-row .ask-bar { display: inline-block; vertical-align: middle; margin-left: 8px; width: 64px; }
.ot-n { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.cond-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.cchip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 13.5px; font-weight: 500; }
.cchip span { color: var(--muted-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.cchip:hover { box-shadow: inset 0 0 0 1px #C9CED6; background: #FAFBFC; }
.page-row .rname, .q-row .rname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: 14px; max-width: 640px; }
.page-row .rname { color: var(--ink-2); }
.q-row .faces { display: inline-flex; gap: 4px; }
.ricon-s { color: var(--icon); display: inline-flex; }
.num { font-variant-numeric: tabular-nums; }
.org-foot { padding-top: 56px; color: var(--muted); font-size: 14px; line-height: 22px; max-width: 640px; }
.filter-in { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin-top: 28px; max-width: 420px; border-radius: 10px; box-shadow: var(--shadow-input); color: var(--icon); }
.filter-in input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.alpha { padding-top: 16px; }
.alpha-g { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 8px; padding-top: 22px; }
.alpha-l { font-size: 15px; font-weight: 600; color: var(--muted-2); padding-top: 14px; }
.char-row .rname { white-space: normal; }
.char-row .rmeta { text-align: right; }
.empty-filter { padding-top: 28px; color: var(--muted-2); }
@media (max-width: 760px) {
  .ot-row { grid-template-columns: minmax(0, 1fr) 64px 64px 44px; gap: 10px; }
  .ot-row .ask-bar { display: none; }
  .ot-row.two { grid-template-columns: minmax(0, 1fr) 90px; }
  .alpha-g { grid-template-columns: 28px minmax(0, 1fr); }
  .char-row .rmeta { display: none; }
}
.row .grow { flex: 1; }
.alpha-g .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.alpha-g .char-row { align-items: flex-start; padding: 12px 0; }
.char-row .fav { margin-top: 2px; }
.char-row .ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.char-row .ct b { color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 20px; }
.char-row .ct span { color: var(--muted-2); font-size: 12.5px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .alpha-g .rows { grid-template-columns: minmax(0, 1fr); } }
/* sources: one bar per tool that adds up to 100% */
.mix-bars { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; }
.mix-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 54px; gap: 16px; align-items: center; }
.mix-tool { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.mix-bar { display: flex; gap: 2px; height: 28px; border-radius: 6px; overflow: hidden; }
.mix-bar i { display: flex; align-items: center; padding-left: 8px; min-width: 0; font-style: normal; }
.mix-bar i span { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--white); font-variant-numeric: tabular-nums; }
.mix-n { color: var(--muted-2); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.mx-nhs { background: var(--blue); } .mx-tick { background: #6FA3EF; } .mx-uk_other { background: var(--blue-light); } .mx-none_uk { background: var(--orange); } .mx-unconfirmed { background: #E3E6EA; }
.mx-uk_other span, .mx-unconfirmed span { color: var(--ink) !important; }
.mix-legend { padding-left: 146px; }
.legend .sq { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ask-row.static:hover .ask-q b { text-decoration: none; }
.src-row .rmeta { text-align: left; }
@media (max-width: 760px) { .mix-row { grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 10px; } .mix-legend { padding-left: 0; flex-wrap: wrap; } }

/* languages and places */
.h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 21px; color: var(--ink); }
.sec > .h3 { padding-top: 28px; }
.lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 16px; }
.lc-head { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.lc-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 62px; gap: 10px; align-items: center; padding: 9px 0; font-size: 13px; color: var(--ink-2); }
.lc-bar { height: 8px; border-radius: 4px; background: #EFF1F4; overflow: hidden; }
.lc-bar i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.lc-row.drop .lc-bar i { background: var(--orange); }
.lc-row.drop .lc-n { color: var(--orange); }
.lc-n { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-n small { font-weight: 400; color: var(--muted-2); font-size: 12px; }
.quote-card { margin: 32px 0 0; padding: 22px 24px; border-radius: 12px; background: var(--fill-stage); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.quote-card figcaption { color: var(--muted-2); font-size: 12.5px; line-height: 18px; }
.quote-card blockquote { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.qc-gist { color: var(--ink-2); font-size: 14px; line-height: 22px; }
.qc-note { color: var(--muted); font-size: 13.5px; line-height: 21px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.small-prose { padding-top: 24px; font-size: 14.5px; line-height: 23px; }
.place-table { display: flex; flex-direction: column; padding-top: 18px; }
.pt-row { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-3); font-size: 14px; }
.pt-head { color: var(--muted-2); font-size: 12.5px; border-bottom-color: var(--line-2); }
.pt-tool { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pt-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-row small { color: var(--muted-2); font-size: 12px; }
.read-rows { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.rd-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 80px; gap: 14px; align-items: center; font-size: 14px; }
.rd-who { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.rd-who .i { color: var(--icon); }
.rd-bar { height: 10px; border-radius: 5px; background: #EFF1F4; overflow: hidden; }
.rd-bar i { display: block; height: 100%; border-radius: 5px; background: var(--blue-light); }
.rd-row.nhs .rd-bar i { background: var(--blue); }
.rd-n { text-align: right; color: var(--muted-2); font-size: 13px; }
.rd-n b { color: var(--ink); font-size: 15px; font-weight: 600; margin-right: 2px; font-variant-numeric: tabular-nums; }
.skin-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 20px; }
.sk { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.sk-who { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.sk b { color: var(--ink); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sk b small { font-size: 16px; color: var(--muted-2); font-weight: 500; letter-spacing: -0.01em; }
.sk-sub { color: var(--muted-2); font-size: 12.5px; }

/* case studies */
.cases { display: flex; flex-direction: column; padding-top: 40px; }
.case { padding: 36px 0; border-top: 1px solid var(--line-2); scroll-margin-top: 80px; }
.case-head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.case-head .fav { margin-top: 3px; }
.case-t { display: flex; flex-direction: column; gap: 2px; }
.case-t .h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-dashed); }
.case-t span { color: var(--muted-2); font-size: 12.5px; line-height: 18px; }
.case-headline { padding: 14px 0 0 28px; color: var(--ink); font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; max-width: 680px; }
.case-then { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 18px 0 0 28px; }
.case-then .k { display: block; color: var(--muted-2); font-size: 12px; line-height: 16px; padding-bottom: 4px; }
.case-then p { color: var(--ink-2); font-size: 14px; line-height: 22px; }
.case-now { display: flex; flex-direction: column; margin: 20px 0 0 28px; border-top: 1px solid var(--line-3); }
.cn-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-3); }
.cn-tool { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; height: 22px; }
.cn-items { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cn-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; }
.cn-ev { color: var(--ink-2); font-size: 13.5px; line-height: 21px; text-wrap: pretty; }
.cs-st { display: inline-flex; align-items: center; gap: 6px; height: 22px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cs-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-gone { color: #1F62C4; } .cs-still_there { color: #C24A1B; } .cs-no_answer { color: var(--muted-2); }
.case-qs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 0 28px; }
.case-qs a, .case-qs span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12.5px; }
.case-qs a:hover { box-shadow: inset 0 0 0 1px #C9CED6; color: var(--ink); }
.method-note { padding-top: 40px; border-top: 1px solid var(--line-2); max-width: 680px; }
.method-note p { padding-top: 8px; color: var(--muted); font-size: 14px; line-height: 22px; }
@media (max-width: 760px) {
  .lang-grid, .skin-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pt-row { grid-template-columns: 96px repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 13px; }
  .case-headline, .case-then, .case-qs { padding-left: 0; }
  .case-now { margin-left: 0; }
  .case-then { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cn-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cn-item { grid-template-columns: 76px minmax(0, 1fr); }
  .rd-row { grid-template-columns: 100px minmax(0, 1fr) 64px; }
}
.src-row .rcount { width: auto; min-width: 44px; }
.cs-partly { color: var(--ink-2); } .cs-partly::before { background: #EFA57F; }
.v-mixed { background: #F1F3F6; color: #454B55; } .v-mixed::before { background: #EFA57F; }
.lc-row { grid-template-columns: 64px minmax(0, 1fr) 78px; }
.case-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding-top: 28px; }
.case-index .cm { padding: 13px 0; }
@media (max-width: 760px) { .case-index { grid-template-columns: minmax(0, 1fr); } }
/* briefing */
.eyebrow { color: var(--muted-2); font-size: 13px; line-height: 18px; }
.brief-title { margin-top: 8px; max-width: 720px; }
.brief-lead { max-width: 640px; }
.brief-actions { display: flex; gap: 8px; padding-top: 24px; }
.key-lines { display: flex; flex-direction: column; gap: 0; margin-top: 40px; border-top: 1px solid var(--line-2); }
.key-lines p { padding: 16px 0; border-bottom: 1px solid var(--line-3); color: var(--ink-2); font-size: 16px; line-height: 25px; letter-spacing: -0.01em; text-wrap: pretty; }
.key-lines b { color: var(--ink); font-weight: 600; }
.brief-notes { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; color: var(--muted); font-size: 13.5px; line-height: 21px; max-width: 680px; }
.brief-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 18px; }
.brief-brand span { margin-left: auto; font-weight: 400; color: var(--muted-2); font-size: 12px; }
.support-box { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin-bottom: 32px; border-radius: 12px; background: #F3F7FE; box-shadow: inset 0 0 0 1px #DCE8FB; color: var(--ink-2); font-size: 14px; line-height: 21px; }
.support-box b { color: var(--ink); font-weight: 600; font-size: 14.5px; padding-bottom: 2px; }
.support-box a { color: var(--ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.cons-line { display: flex; align-items: center; gap: 7px; padding-top: 10px; color: var(--muted); font-size: 13.5px; line-height: 20px; }
.cons-line .i { color: var(--icon); }
.sd a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-dashed); text-underline-offset: 3px; }
.sd a:hover { color: var(--ink); }
.per-tool-h { padding-top: 40px; color: var(--ink-2); font-size: 14px; line-height: 21px; max-width: 640px; }
.per-tool-h + .per-tool { padding-top: 14px; }
/* numbers never wrap */
.rcount, .rmeta.num, .ask-v b, .ask-v small, .ot-row b, .lc-n, .mix-n, .pt-row b, .stat-big, .count, .np-n, .tb-n, .sec-meta { white-space: nowrap; }
.row .rcount { width: auto; min-width: 22px; flex-shrink: 0; }
.drow.link { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-3); }
.drow.link:first-child { border-top: 1px solid var(--line-2); }
.drow.link b { color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.drow.link span { flex: 1; color: var(--muted-2); font-size: 13.5px; min-width: 0; }
.drow.link .i { color: var(--chev); }
.drow.link:hover .i { color: var(--ink-3); }

mark.hl-late { text-decoration-color: var(--blue-light); }
.ac-legend .lg.hl-late i { background: var(--blue-light); }
.print-only.brief-brand { display: none; }
/* the briefing prints on two A4 pages: the headline and the letter's asks, then the urgent examples and method */
@media print {
  @page { size: A4; margin: 12mm 13mm; }
  .print-only.brief-brand { display: flex !important; margin-bottom: 10px; font-size: 13px; }
  body:has(.brief-title) .shell, body:has(.brief-title) .panel { min-height: 0; }
  body:has(.brief-title) main.content { padding-bottom: 0; }
  body:has(.brief-title) .eyebrow { font-size: 11.5px; }
  .h1.brief-title { font-size: 25px; line-height: 30px; margin-top: 4px; max-width: 560px; }
  .lead.brief-lead { font-size: 13.5px; line-height: 20px; margin-top: 6px; max-width: 600px; }
  .key-lines { margin-top: 12px; }
  .key-lines p { padding: 6px 0; font-size: 13px; line-height: 19px; break-inside: avoid; }
  body:has(.brief-title) .sec.tight { padding-top: 14px; }
  body:has(.brief-title) .sec-head { break-after: avoid; }
  body:has(.brief-title) .sec-head .h2 { font-size: 17px; line-height: 22px; }
  body:has(.brief-title) .sec-lead { font-size: 12.5px; line-height: 18px; }
  body:has(.brief-title) .asks { --ask-col: 96px; padding-top: 8px; }
  body:has(.brief-title) .ask-head, body:has(.brief-title) .ask-row { column-gap: 14px; grid-template-columns: minmax(0, 1fr) repeat(3, var(--ask-col)); }
  body:has(.brief-title) .ask-head { padding-bottom: 6px; }
  body:has(.brief-title) .ask-row { padding: 7px 0; break-inside: avoid; }
  body:has(.brief-title) .ask-q { gap: 2px; }
  body:has(.brief-title) .ask-q b { font-size: 13px; line-height: 17px; text-wrap: wrap; }
  body:has(.brief-title) .ask-quote, body:has(.brief-title) .ask-note { font-size: 10.5px; line-height: 14px; }
  body:has(.brief-title) .ask-note { padding-top: 1px; }
  body:has(.brief-title) .ask-v { gap: 3px; }
  body:has(.brief-title) .ask-v b { font-size: 17px; line-height: 19px; }
  body:has(.brief-title) .ask-v small { font-size: 10.5px; line-height: 13px; white-space: normal; }
  body:has(.brief-title) .ask-go { display: none; }
  body:has(.brief-title) .ask-after { padding-top: 8px; font-size: 12px; line-height: 17px; }
  body:has(.brief-title) .brief-notes { font-size: 11.5px; line-height: 16px; gap: 6px; }
  .ex { break-inside: avoid; }
}
.hero-search .ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 760px) { .hero-search .kbd { display: none; } }
.chev-space { width: 14px; flex-shrink: 0; }
.origin-t .ot-row { grid-template-columns: minmax(0, 1fr) 90px 170px 150px; }
.ot-l { display: flex; flex-direction: column; gap: 2px; }
.ot-l b { min-width: 0 !important; font-weight: 500 !important; }
.ot-l small { color: var(--muted-2); font-size: 12.5px; line-height: 17px; }
.origin-t small.muted { font-size: 12px; }
@media (max-width: 760px) { .origin-t .ot-row { grid-template-columns: minmax(0, 1fr) 54px 74px 74px; } .ot-l small { display: none; } }
.ask-after { padding-top: 18px; color: var(--muted); font-size: 14px; line-height: 22px; max-width: 680px; }

/* case studies as a quiet list that opens */
.case { padding: 0; }
.case > summary.case-head { list-style: none; cursor: pointer; padding: 18px 0; grid-template-columns: 16px minmax(0, 1fr) auto 16px; align-items: center; }
.case > summary::-webkit-details-marker { display: none; }
.case > summary .fav { margin-top: 0; align-self: start; margin-top: 3px; }
.case > summary .case-t .h3 { font-size: 15px; line-height: 22px; }
.case > summary .case-t span { color: var(--ink-2); font-size: 14px; line-height: 21px; text-wrap: pretty; }
.case > summary:hover .case-t .h3 { color: var(--ink); }
.case > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.case-chev { color: var(--muted-2); transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.case[open] .case-chev { transform: rotate(180deg); }
.case[open] { padding-bottom: 32px; }
.case-src { padding: 0 0 0 28px; color: var(--muted-2); font-size: 12.5px; line-height: 18px; }
.case-src a { color: var(--muted); }
@media (max-width: 720px) { .case-src { padding-left: 0; } .case > summary.case-head { grid-template-columns: 16px minmax(0, 1fr) 16px; } .case > summary .verdict { grid-column: 2; justify-self: start; } .case > summary .case-chev { grid-row: 1; grid-column: 3; } }

/* every part of a headline bar, named */
.stat-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; color: var(--muted-2); font-size: 12px; line-height: 17px; font-variant-numeric: tabular-nums; }
.stat-legend .lg-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stat-legend .lg-i b { color: var(--ink-2); font-weight: 500; }
.stat-legend .sw.unrev, .stat-legend .sw.review { background: #E9EBEF; box-shadow: none; }

/* sources mix on a phone: tool and count above, the bar full width */
.mix-tool { white-space: nowrap; }
@media (max-width: 760px) {
  .mix-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'tool n' 'bar bar'; gap: 6px 10px; }
  .mix-tool { grid-area: tool; font-size: 13.5px; }
  .mix-n { grid-area: n; }
  .mix-bar { grid-area: bar; height: 24px; }
  .mix-bar i span.sm { display: none; }
}

[hidden] { display: none !important; }
.lead-tool { color: var(--muted); font-weight: 500; }
/* a match in the checks rail is a quiet tick, like the tables */
.rail-row.good .rd { color: transparent; position: relative; }
.rail-row.good .rd::after { content: ""; position: absolute; left: -2px; top: 4px; width: 12px; height: 12px; background: var(--tick); -webkit-mask: var(--tick-svg) center / 12px 12px no-repeat; mask: var(--tick-svg) center / 12px 12px no-repeat; }
/* flagged tabs: the other counts stay readable; filter chips are solid, not dashed */
.ktab[aria-selected="false"] .stat-big { color: #858B94; }
.chip { border-style: solid; border-color: var(--line); }
.chip:hover { border-color: #C9CED6; }
/* two citation numbers side by side get a little air */
.md sup.fn + sup.fn { margin-left: 3px; }
/* phone headings: balanced lines, meta on its own line */
.h1, .h2, .case-headline { text-wrap: balance; }
@media (max-width: 720px) {
  .sec-head.end { flex-wrap: wrap; row-gap: 4px; }
  .sec-head.end .sec-meta, .sec-head.end .link-arrow { flex-basis: 100%; }
}

/* phone: the tool names stay in view while the letter table scrolls */
@media (max-width: 760px) {
  .ask-head { position: sticky; top: 52px; z-index: 3; background: var(--white); padding-top: 10px; margin-top: -10px; }
}
.alpha-g .char-row { height: auto; min-height: 54px; }

/* ---- QA pass, 14 Nov ---- */
/* 1. method: where the questions come from, on a phone */
.origin-t .ot-l b { white-space: normal; }
@media (max-width: 760px) {
  .origin-t .ot-row { grid-template-columns: minmax(0, 1fr) 62px 72px 72px; gap: 8px; align-items: start; font-size: 13.5px; }
  .origin-t .ot-head { font-size: 11.5px; line-height: 15px; align-items: end; }
  .origin-t .ot-row > span[role="cell"]:not(.ot-tool) { display: flex; flex-direction: column; gap: 1px; }
  .origin-t .ot-row small.muted { font-size: 11.5px; line-height: 15px; white-space: nowrap; }
}
/* 2. images in answers are counted, not shown */
.md img { display: none; }
.ac-imgs { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--muted-2); font-size: 12.5px; line-height: 18px; }
.ac-imgs .i { color: var(--icon); }
/* 3. small tables never break a word; they scroll if they must */
.dbody { overflow-x: auto; }
.mini th { white-space: nowrap; }
@media (max-width: 760px) { .mini { font-size: 12.5px; } .mini th, .mini td { padding-right: 10px; } }
/* 4-6. charity and source pages */
@media (max-width: 760px) { .ot-row { grid-template-columns: minmax(0, 1fr) 58px 58px 60px; } .ot-head span { white-space: nowrap; } }
.q-row .rname.qn, .page-row .rname { flex: 1 1 auto; }
.q-tools { flex-shrink: 0; color: var(--muted-2); font-size: 12.5px; white-space: nowrap; }
.hl-num { margin-left: auto; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
@media (max-width: 760px) {
  .q-row { align-items: flex-start; flex-wrap: wrap; row-gap: 2px; }
  .q-row .rname.qn { white-space: normal; flex-basis: calc(100% - 30px); max-width: none; }
  .q-row .q-tools { order: 3; flex-basis: 100%; font-size: 12px; }
  .q-row .chev { order: 2; margin-top: 3px; }
}
/* 7. the sources bar is keyed by a legend, not labels squeezed under each segment */
.src-labels { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 0 18px; }
.src-labels > span { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; line-height: 16px; }
.src-labels .sw2 { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
/* 8. on a phone the tool picker opens from its left edge, inside the screen */
@media (max-width: 760px) { #tools-pop { right: auto !important; left: 0; transform-origin: top left; max-width: calc(100vw - 32px); } }
/* 10. questions with no single NHS line: say so once, no empty cells */
.grow-r .gnhs .nokey { color: var(--muted-3); font-size: 13px; }
.nokey-row .gc .cell.notasked { visibility: hidden; }
@media (max-width: 760px) { .nokey-row .gc { display: none; } .nokey-row .gnhs::before { content: none; } }
/* 9. the NHS line in tables may take two lines rather than be cut */
@media (min-width: 761px) { .grow-r .gnhs span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: clip; font-size: 13.5px; line-height: 18px; } }
/* 13. home: the case rows put the verdict under the text on a phone */
@media (max-width: 720px) { .case-mini .cm { grid-template-columns: 16px minmax(0, 1fr); row-gap: 8px; align-items: start; } .case-mini .cm .verdict { grid-column: 2; justify-self: start; } .case-mini .cm .fav { margin-top: 2px; } }
/* 14. languages: tool names and the places header on a phone */
.pt-tool, .rd-who { white-space: nowrap; }
@media (max-width: 760px) {
  .pt-row { grid-template-columns: 104px repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pt-head span { font-size: 11.5px; line-height: 15px; }
  .rd-row { grid-template-columns: 112px minmax(0, 1fr) 60px; gap: 10px; }
}
/* 15. filter tabs that scroll on a phone fade at the edge */
@media (max-width: 760px) {
  .sec-head .seg[data-filter-group] { scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 24px; }
  .sec-head .seg[data-filter-group]::-webkit-scrollbar { display: none; }
}
/* 16. headings never leave a word alone */
h1, h2, h3, .h3, .corr-title { text-wrap: balance; }
/* 21. pale favicons get a hairline so they don't vanish */
.fav img { box-shadow: 0 0 0 1px rgba(17, 24, 39, .06); }
@media (min-width: 901px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mix-legend { padding-left: 146px; justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 760px) { .mix-legend { padding-left: 0; } }
@media (max-width: 760px) { .origin-t .ot-head span { white-space: normal; } }
.np-n { width: auto; min-width: 76px; }
.ac-foot { flex-wrap: wrap; row-gap: 8px; }
.org-lead { text-wrap: balance; }
.q-row .rname.qn, .page-row .rname { min-width: 0; }
.md-page table td:nth-child(2), .md-page table th:nth-child(2) { white-space: nowrap; }
@media (max-width: 760px) { .ot-head.two span { white-space: normal; } }