/* Veraqen Intelligence Console. Colours, spacing, radii and type come only from tokens.css (the Veraqen design tokens).
   No page may use an inline style attribute (the console's CSP is style-src 'self'): add or reuse a class here instead.
   Sections: base, shell and navigation, page structure, cards and grids, badges and buttons, forms, tables, tabs,
   commercial components, evidence, board, login, utilities, responsive. */

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--surface); color: var(--ink); }
a { color: var(--link); text-underline-offset: 3px; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink); }
h1 { font-size: 28px; line-height: 36px; letter-spacing: -.01em; } h2 { font-size: 18px; line-height: 26px; } h3 { font-size: 16px; line-height: 24px; }
p { margin: 0; }
.muted { color: var(--ink-muted); } .small { font-size: 14px; line-height: 20px; }
.mono { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -48px; background: var(--pine); color: var(--on-pine); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 50; }
.skip-link:focus { top: var(--space-2); }
.eyebrow { font: 600 11px/16px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }

/* ---- shell and navigation ---- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--pine); color: var(--on-pine); padding: var(--space-6) var(--space-3); display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { padding: 0 var(--space-2); }
.sidebar .brand img { width: 156px; height: auto; }
.sidebar .brand .eyebrow { color: var(--on-pine); margin-top: var(--space-2); }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--on-pine); text-decoration: none; padding: 10px var(--space-3); border-radius: var(--radius-md); font-size: 15px; }
.nav a:hover { background: #ffffff1a; }
.nav a[aria-current="page"] { background: #ffffff26; font-weight: 600; }
.nav .count { font-size: 12px; font-weight: 700; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.sidebar .who { margin-top: auto; font-size: 14px; border-top: 1px solid #ffffff33; padding-top: var(--space-4); display: grid; gap: var(--space-2); }
.sidebar .who .who-role { font-weight: 400; }
.sidebar .who button { background: transparent; color: var(--on-pine); border: 1px solid #ffffff55; border-radius: var(--radius-md); padding: 6px 12px; cursor: pointer; font: inherit; }
.sidebar .who button:hover { background: #ffffff1a; }
.main { padding: var(--space-6) var(--space-8) var(--space-16); min-width: 0; width: 100%; max-width: 1640px; margin: 0 auto; }
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); margin: calc(var(--space-2) * -1) 0 var(--space-6); }
.subnav a { padding: 10px var(--space-4); color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--glacier); }
.subnav .count { font-size: 12px; background: var(--danger-soft); color: var(--danger); border-radius: 999px; padding: 0 7px; margin-left: 6px; }

/* ---- page structure ---- */
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-4); }
.page-head .sub { color: var(--ink-muted); margin-top: var(--space-1); max-width: 78ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.crumbs { font-size: 14px; margin-bottom: var(--space-2); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-title h2 { margin: 0; }

/* ---- cards and grids ---- */
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6) var(--space-6); box-shadow: var(--shadow-sm); min-width: 0; }
.card > h2 { margin: var(--space-2) 0 var(--space-3); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > h2 { padding: var(--space-4) var(--space-6) 0; margin-bottom: var(--space-3); }
.card-tight { padding: var(--space-3) var(--space-4); }
.grid { display: grid; gap: var(--space-4); } .grid + .grid, .grid + .card, .card + .grid, .card + .card { margin-top: var(--space-4); }
.grid > .card, .grid > .stat, .grid > div { margin-top: 0; } /* the grid gap spaces its children; sibling margins would stagger them */
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.cols-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cols-even { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stat { padding: var(--space-3) var(--space-4); }
.stat .label { color: var(--ink-muted); font-size: 14px; }
.stat .value { font: 600 28px/36px var(--font-display); color: var(--pine); }
.stat .value-sm { font: 600 18px/26px var(--font-display); color: var(--pine); }
.stat .note { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-1); }
.stat-link { display: block; text-decoration: none; color: inherit; }
.stat-link:hover .value { color: var(--glacier); }
.stat-warn .value { color: var(--danger); }
.stack { display: grid; gap: var(--space-3); }
.kv { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.kv dt { color: var(--ink-muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.callout { border-left: 3px solid var(--glacier); background: var(--sky); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* ---- badges and buttons ---- */
.vq-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); font: 600 13px/16px var(--font-sans); white-space: nowrap; }
.vq-badge-sky { background: var(--sky); color: var(--pine); } .vq-badge-success { background: var(--success-soft); color: var(--success); }
.vq-badge-warning { background: var(--warning-soft); color: var(--warning); } .vq-badge-danger { background: var(--danger-soft); color: var(--danger); }
.vq-badge-planned { background: transparent; border: 1px dashed var(--ridge); color: var(--ink-muted); }
.vq-badge-muted { background: transparent; border: 1px solid var(--line); color: var(--ink-muted); }
.vq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--ridge); background: var(--surface-raised); color: var(--ink); font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; }
.vq-btn:hover { border-color: var(--ink); } .vq-btn-primary { background: var(--pine); border-color: var(--pine); color: var(--on-pine); } .vq-btn-primary:hover { filter: brightness(1.15); }
.vq-btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: 14px; }
.vq-btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.btn-row form { margin: 0; }

/* ---- forms ---- */
.field { display: grid; gap: var(--space-1); } .field label { font: 600 14px/20px var(--font-sans); }
.field .hint { font-size: 14px; color: var(--ink-muted); }
.input { width: 100%; min-height: 38px; padding: 6px var(--space-3); border: 1px solid var(--ridge); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-sans); }
textarea.input { min-height: 96px; resize: vertical; }
textarea.ta-sm { min-height: 56px; } textarea.ta-md { min-height: 72px; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.filters .field { min-width: 140px; } .filters .field.grow { flex: 1 1 220px; }
.more-filters { margin-bottom: var(--space-4); } .more-filters > summary { margin-bottom: var(--space-3); }
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } .form-grid .wide { grid-column: 1 / -1; }
.form-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.form-inline .field { min-width: 120px; }
.error-text { color: var(--danger); font-size: 13px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; position: relative; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th { text-align: left; font: 600 13px/16px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); padding: 10px var(--space-4); background: var(--surface-sunk); white-space: nowrap; }
table.data th button { all: unset; cursor: pointer; } table.data th button:hover, table.data th button:focus-visible { text-decoration: underline; }
table.data th[aria-sort="ascending"] button::after { content: " ▲"; } table.data th[aria-sort="descending"] button::after { content: " ▼"; }
table.data td { padding: 10px var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:hover { background: var(--surface-sunk); } table.data tbody tr:last-child td { border-bottom: 0; }
table.data tr.row-muted { opacity: .6; }
table.data.compact td, table.data.compact th { padding: 8px var(--space-3); }
table.data.directory td:first-child { min-width: 14rem; max-width: 20rem; } table.data.directory td, table.data.directory th { padding-left: var(--space-3); padding-right: var(--space-3); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: var(--space-6); text-align: center; color: var(--ink-muted); display: grid; gap: var(--space-2); justify-items: center; }
.empty strong { color: var(--ink); }
.result-count { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.row-list > li:first-child { border-top: 0; }
.row-list .row-main { min-width: 0; } .row-list .row-main a { font-weight: 600; }
.row-list .row-side { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---- tabs (server-side links, work without JavaScript) ---- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); margin: 0 0 var(--space-4); }
.tabs a { padding: 9px var(--space-4); color: var(--ink-muted); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--glacier); }
.tabs .count { font-size: 12px; background: var(--surface-sunk); border-radius: 999px; padding: 1px 7px; margin-left: 6px; color: var(--ink-muted); }

/* ---- commercial components ---- */
.profile-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.profile-head .facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 15px; }
.profile-head .facts dt { color: var(--ink-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.profile-head .facts dd { margin: 0; font-weight: 600; }
.profile-head .facts div { display: grid; gap: 1px; }
.due-overdue { color: var(--danger); font-weight: 700; } .due-soon { color: var(--warning); font-weight: 700; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.checklist li { display: flex; gap: var(--space-2); align-items: flex-start; }
.checklist .mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-sunk); color: var(--ink-muted); }
.checklist .mark-ok { background: var(--success-soft); color: var(--success); } .checklist .mark-no { background: var(--warning-soft); color: var(--warning); }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); background: var(--surface-raised); }
.contact-card.is-primary { border-color: var(--glacier); }
.timeline { display: grid; gap: 0; }
.timeline .entry { border-top: 1px solid var(--line); padding: var(--space-3) 0; display: grid; gap: var(--space-1); }
.timeline .entry:first-child { border-top: 0; }
.pipeline-group { margin-top: var(--space-4); }
.pipeline-group > .section-title { margin-bottom: var(--space-2); }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-sunk); }
.bar span { display: block; height: 100%; }
.bar .b-prospect { background: var(--ridge); } .bar .b-qualified { background: var(--glacier); } .bar .b-active { background: var(--success); } .bar .b-closed { background: var(--line); }

/* ---- notices, evidence, prose ---- */
.notice { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); background: var(--sky); color: var(--ink); margin-bottom: var(--space-4); }
.notice-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .notice-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.notice-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.evidence-text { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); max-height: 360px; overflow: auto; font: 12.5px/18px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.finding { border-top: 1px solid var(--line); padding: var(--space-3) 0; display: grid; gap: var(--space-2); } .finding:first-of-type { border-top: 0; padding-top: 0; }
.meta, .finding .meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 14px; color: var(--ink-muted); }
details > summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: 14px; }
details[open] > summary { margin-bottom: var(--space-2); }
.prose { max-width: 78ch; } .prose h2 { font-size: 19px; margin: var(--space-6) 0 var(--space-2); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 16px; margin: var(--space-4) 0 var(--space-2); } .prose h4 { font-size: 15px; margin: var(--space-3) 0 var(--space-1); }
.prose table { border-collapse: collapse; font-size: 14px; margin: var(--space-3) 0; } .prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.prose p, .prose ul, .prose ol { margin: var(--space-2) 0; } .prose code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-sunk); padding: 1px 4px; border-radius: 3px; }

/* ---- board ---- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.lane { background: var(--surface-sunk); border-radius: var(--radius-lg); padding: var(--space-3); min-height: 120px; display: grid; gap: var(--space-2); align-content: start; }
.lane h2, .lane h3 { display: flex; justify-content: space-between; font-size: 14px; line-height: 20px; text-transform: capitalize; margin: 0; }
.lane .opp { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: 4px; font-size: 14px; }
.lane .opp a { font-weight: 600; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); background: var(--surface-sunk); }
.login-card { width: 100%; max-width: 400px; display: grid; gap: var(--space-4); }
.login-card img { width: 190px; height: auto; margin: 0 auto var(--space-2); }
.login-card .login-head { text-align: center; }

/* ---- loading ---- */
.is-loading { opacity: .55; pointer-events: none; }
.skeleton { background: linear-gradient(90deg, var(--surface-sunk), var(--line), var(--surface-sunk)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--radius-sm); height: 14px; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---- phase 2 components: wayfinding ---- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); list-style: none; margin: 0; padding: 0; color: var(--ink-muted); }
.crumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--ridge); }
.crumbs a { color: var(--ink-muted); } .crumbs a:hover { color: var(--ink); } .crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-search { padding: 0 var(--space-2); } .nav-search input { width: 100%; min-height: 36px; border-radius: var(--radius-md); border: 1px solid #ffffff55; background: #ffffff14; color: var(--on-pine); padding: 0 var(--space-3); font: inherit; font-size: 14px; }
.nav-search input::placeholder { color: var(--on-pine); opacity: 1; } .nav-search input:focus { background: #ffffff26; }
.page-head h1 + .sub { margin-top: var(--space-2); }

/* ---- phase 2 components: summaries, help, chips, toolbars ---- */
.summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--space-4); }
.summary-strip > * { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--line); display: grid; gap: 2px; align-content: start; text-decoration: none; color: inherit; min-width: 0; }
.summary-strip > *:first-child { border-left: 0; }
.summary-strip a:hover .value { color: var(--glacier); }
.summary-strip .label { color: var(--ink-muted); font-size: 14px; display: flex; gap: var(--space-1); align-items: center; }
.summary-strip .value { font: 600 28px/34px var(--font-display); color: var(--pine); font-variant-numeric: tabular-nums; }
.summary-strip .note { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.summary-strip .is-warn .value { color: var(--danger); } .summary-strip .is-good .value { color: var(--success); }
.help { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ridge); color: var(--ink-muted); font: 700 12px/1 var(--font-sans); cursor: help; position: relative; flex: none; }
.help:hover, .help:focus-visible { background: var(--sky); color: var(--pine); }
.help::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--pine); color: var(--on-pine); font: 400 14px/20px var(--font-sans); text-transform: none; letter-spacing: 0; text-align: left; box-shadow: var(--shadow-lg); z-index: 20; display: none; white-space: normal; }
.help:hover::after, .help:focus-visible::after { display: block; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.toolbar .field { min-width: 150px; } .toolbar .field.grow { flex: 1 1 240px; } .toolbar .spacer { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chip { display: inline-flex; gap: var(--space-2); align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.chip:hover { border-color: var(--ink); } .chip[aria-current="true"] { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }
.chip .n { color: var(--ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .chip[aria-current="true"] .n { color: var(--on-pine); }
.chip-label { font-size: 14px; color: var(--ink-muted); font-weight: 600; margin-right: var(--space-1); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-bottom: var(--space-3); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 14px; color: var(--ink-muted); margin-bottom: var(--space-3); }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.pager .pages { display: flex; gap: var(--space-1); flex-wrap: wrap; } .pager a, .pager span.cur { min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; padding: 0 var(--space-2); border-radius: var(--radius-md); text-decoration: none; font-weight: 600; color: var(--ink); border: 1px solid transparent; }
.pager a:hover { border-color: var(--ridge); } .pager span.cur { background: var(--pine); color: var(--on-pine); } .pager .gap { align-self: center; }
.list-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.list-card > .list-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: baseline; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-sunk); }
.list-card > .list-head h2 { font-size: 16px; margin: 0; }
.group-head { padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); font: 600 13px/20px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); display: flex; justify-content: space-between; gap: var(--space-3); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- phase 2 components: progressive disclosure rows (findings, priorities) ---- */
details.drow { border-bottom: 1px solid var(--line); }
details.drow:last-child { border-bottom: 0; }
details.drow > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 20px minmax(0, 1fr) var(--drow-cols, 200px 180px); gap: var(--space-1) var(--space-4); align-items: start; padding: 10px var(--space-4); color: var(--ink); font-weight: 400; font-size: 16px; margin: 0; }
details.drow > summary::-webkit-details-marker { display: none; }
details.drow > summary::before { content: "▸"; color: var(--ridge); font-size: 14px; line-height: 24px; transition: none; }
details.drow[open] > summary::before { content: "▾"; }
details.drow > summary:hover { background: var(--surface-sunk); } details.drow[open] > summary { background: var(--surface-sunk); margin: 0; }
details.drow .d-main { min-width: 0; display: grid; gap: var(--space-1); } details.drow .d-main .d-title { font-weight: 500; }
details.drow .d-cell { min-width: 0; display: grid; gap: var(--space-1); align-content: start; font-size: 14px; line-height: 20px; }
details.drow .d-cell .k { color: var(--ink-muted); font-size: 13px; }
details.drow .d-body { padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 20px + var(--space-4)); display: grid; gap: var(--space-3); background: var(--surface-sunk); border-top: 1px solid var(--line); }
.d-body .d-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.d-body h4 { font: 600 13px/20px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-1); }
.cols-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) var(--drow-cols, 200px 180px); gap: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--surface-sunk); border-bottom: 1px solid var(--line); font: 600 13px/18px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.drow-priorities, .cols-priorities { --drow-cols: 250px 110px 120px; }
details.drow .d-cell .vq-badge { white-space: normal; height: auto; min-height: 24px; padding-top: 2px; padding-bottom: 2px; line-height: 18px; }
.drow-single { --drow-cols: 130px; }
.drow-findings, .cols-findings { --drow-cols: 220px 270px; } .drow-by-buyer, .cols-by-buyer { --drow-cols: 290px; }
details.drow .d-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); align-content: start; }

/* review decision rows: the decision stays visible, the detail is optional */
.review-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-1) var(--space-6); padding: 10px var(--space-4); border-bottom: 1px solid var(--line); align-items: start; }
.review-row:last-child { border-bottom: 0; }
.review-row .rv-main { display: grid; gap: var(--space-2); min-width: 0; } .review-row .rv-subject { font-weight: 600; }
.review-row .rv-actions { display: grid; gap: var(--space-2); }
.review-row .rv-actions .btn-row .vq-btn { flex: 1; }
.review-row .rv-actions details { font-size: 14px; }
.btn-accept { border-color: var(--success); color: var(--success); } .btn-accept:hover { background: var(--success-soft); border-color: var(--success); }
.btn-reject { border-color: var(--danger); color: var(--danger); } .btn-reject:hover { background: var(--danger-soft); border-color: var(--danger); }
.source-line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; font-size: 14px; color: var(--ink-muted); }

/* evidence quality bar: drawn as inline SVG (attributes, not style) so the CSP stays strict */
.qbar { display: block; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-sunk); }
.qbar rect.q-confirmed { fill: var(--success); } .qbar rect.q-partial { fill: var(--glacier); } .qbar rect.q-secondary { fill: #b8862b; } .qbar rect.q-retailer { fill: #d6a54d; } .qbar rect.q-hypothesis { fill: var(--ridge); } .qbar rect.q-unverified { fill: var(--danger); }
.qlegend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: 14px; color: var(--ink-muted); list-style: none; padding: 0; }
.qlegend li { display: inline-flex; gap: var(--space-2); align-items: center; } .qlegend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.qlegend .sw-confirmed { background: var(--success); } .qlegend .sw-partial { background: var(--glacier); } .qlegend .sw-secondary { background: #b8862b; } .qlegend .sw-retailer { background: #d6a54d; } .qlegend .sw-hypothesis { background: var(--ridge); } .qlegend .sw-unverified { background: var(--danger); }
.qlegend strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* guidance */
.next-step { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; border: 1px solid var(--line); border-left: 4px solid var(--glacier); background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.next-step p { margin: 0; max-width: 80ch; }
.empty-compact { padding: var(--space-3) var(--space-4); color: var(--ink-muted); }
.kv-compact { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-4); margin: 0; font-size: 14px; line-height: 20px; } .kv-compact dt { color: var(--ink-muted); } .kv-compact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---- utilities (replace every inline style) ---- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.list { margin: var(--space-1) 0 0; padding-left: 20px; } .list-flush { margin: 0; padding-left: 20px; } .list-plain { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.between { justify-content: space-between; } .nowrap { white-space: nowrap; } .pre-wrap { white-space: pre-wrap; } .text-center { text-align: center; }
.text-ink { color: var(--ink); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-success { color: var(--success); }
.text-lg { font-size: 18px; } .text-xl { font-size: 24px; } .dim { opacity: .7; } .dimmer { opacity: .6; }
.w-120 { max-width: 120px; } .w-150 { max-width: 150px; } .w-200 { max-width: 200px; } .w-230 { max-width: 230px; } .w-260 { max-width: 260px; } .w-420 { max-width: 420px; }
.pad-flush { padding: var(--space-3) var(--space-4) 0; } .pad-flush-lg { padding: var(--space-3) var(--space-6) 0; } .pad-bottom-lg { padding: 0 var(--space-6) var(--space-4); }
.m-flush { margin: var(--space-3) var(--space-6); } .w-full { width: 100%; } .hidden { display: none; }

/* ---- responsive ---- */
@media (max-width: 1200px) { .cols-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cols-main, .cols-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { details.drow > summary, .cols-head { grid-template-columns: 20px minmax(0, 1fr); } .cols-head { display: none; } details.drow > summary .d-cell { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); } .review-row { grid-template-columns: minmax(0, 1fr); } details.drow .d-body { padding-left: var(--space-4); } }
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .sidebar .brand img { width: 120px; } .sidebar .brand .eyebrow { display: none; }
  .nav { display: flex; overflow-x: auto; width: 100%; order: 3; } .nav a { white-space: nowrap; padding: 8px var(--space-3); }
  .sidebar .who { margin: 0 0 0 auto; border: 0; padding: 0; grid-auto-flow: column; align-items: center; } .sidebar .who .who-name { display: none; }
  .main { padding: var(--space-4) var(--space-4) var(--space-12); }
  .subnav, .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .cols-2, .cols-4, .cols-5, .cols-3 { grid-template-columns: minmax(0, 1fr); } .kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .kv dd { margin-bottom: var(--space-2); } .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-3) var(--space-4) var(--space-4); }
  .row-list > li { grid-template-columns: minmax(0, 1fr); } .row-list .row-side { justify-content: flex-start; }
  .page-head { align-items: flex-start; }
  .filters .field { flex: 1 1 140px; }
  .stat .value { font-size: 24px; line-height: 30px; }
}
.help:focus-visible { box-shadow: var(--focus-ring); }

/* workflow stepper */
.steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-4); counter-reset: none; }
.steps li { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--ink-muted); font-size: 14px; font-weight: 600; }
.steps .dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ridge); font-size: 13px; background: var(--surface-raised); }
.steps .is-done { color: var(--success); } .steps .is-done .dot { background: var(--success-soft); border-color: transparent; color: var(--success); }
.steps .is-current { color: var(--ink); } .steps .is-current .dot { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }

/* collapsible panel used for forms that are not needed on every visit */
details.disclose { padding: 0; } details.disclose > summary { padding: var(--space-3) var(--space-4); font-size: 16px; color: var(--ink); list-style: none; display: flex; align-items: center; gap: var(--space-2); margin: 0; }
details.disclose > summary::-webkit-details-marker { display: none; } details.disclose > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pine); color: var(--on-pine); font-weight: 700; }
details.disclose[open] > summary::before { content: "–"; } details.disclose[open] > summary { border-bottom: 1px solid var(--line); margin: 0; }
details.disclose .disclose-body { padding: var(--space-4); }
.form-grid .field select[multiple] { min-height: 120px; }

/* directory rows: the whole row opens the buyer (the name link stretches over it), other links stay above */
table.data tr.row-link { position: relative; } table.data tr.row-link td:first-child a::after { content: ""; position: absolute; inset: 0; }
table.data tr.row-link td a:not(:first-child) { position: relative; z-index: 1; }
table.data td.col-action { width: 26%; min-width: 13rem; }

/* dashboard: pipeline funnel and stage bar */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.funnel li { position: relative; } .funnel li:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--ridge); font-size: 22px; z-index: 1; }
.funnel a { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; color: inherit; height: 100%; align-content: start; }
.funnel a:hover { border-color: var(--glacier); background: var(--sky); }
.funnel .label { color: var(--ink-muted); font-size: 14px; display: flex; gap: var(--space-1); align-items: center; } .funnel .value { font: 600 32px/38px var(--font-display); color: var(--pine); font-variant-numeric: tabular-nums; } .funnel .note { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.qbar rect.g-prospect { fill: var(--ridge); } .qbar rect.g-qualified { fill: var(--glacier); } .qbar rect.g-active { fill: var(--success); } .qbar rect.g-closed { fill: var(--line); }
.qlegend .sw-g-prospect { background: var(--ridge); } .qlegend .sw-g-qualified { background: var(--glacier); } .qlegend .sw-g-active { background: var(--success); } .qlegend .sw-g-closed { background: var(--line); }
@media (max-width: 1100px) { .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .funnel li::after { display: none; } }
.buyer-pager { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.lane-more { margin-top: var(--space-1); } .lane-more > summary { padding: var(--space-1) 0; } .lane-more[open] { display: grid; gap: var(--space-2); } .lane .opp .source-line { font-size: 13px; gap: 2px var(--space-2); }

/* economics inputs */
.econ-head, .econ-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(100px, .7fr) minmax(170px, 1.1fr); gap: var(--space-2) var(--space-3); align-items: center; }
.econ-head { padding: var(--space-2) 0; color: var(--ink-muted); font: 600 13px/18px var(--font-display); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.econ-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); } .econ-row:last-child { border-bottom: 0; }
.econ-label { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: center; } .econ-label label { font-weight: 600; } .econ-label .small { flex-basis: 100%; }
table.data tr.row-part th, table.data tr.row-part td { font-size: 14px; color: var(--ink-muted); padding-top: 4px; padding-bottom: 4px; } table.data tr.row-part th { padding-left: var(--space-6); font-weight: 400; text-transform: none; letter-spacing: 0; background: transparent; }
table.data tr.row-total th, table.data tr.row-total td, table.data tbody tr.row-total th[scope="row"] { background: var(--surface-sunk); }
table.data tbody th[scope="row"] { text-align: left; font: 600 14px/20px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; padding: 10px var(--space-4); white-space: nowrap; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .econ-head { display: none; } .econ-row { grid-template-columns: minmax(0, 1fr); } }

.grid-start { align-items: start; }

.card a, .disclose-body a, .list-card a, .finding a { overflow-wrap: anywhere; }
.card-tight .qbar { margin: 0; }

/* narrow screens: long unbroken text and badges wrap instead of widening the page */
.empty span, .prose, .prose code, .kv-compact dd, .notice { overflow-wrap: anywhere; }
.kv-compact .vq-badge { white-space: normal; height: auto; min-height: 24px; padding-top: 2px; padding-bottom: 2px; line-height: 18px; }
.prose pre { overflow-x: auto; max-width: 100%; }
@media (max-width: 860px) { .kv-compact { grid-template-columns: minmax(0, 1fr); gap: 0; } .kv-compact dd { margin-bottom: var(--space-2); } }

/* phase 3: the three dimensions, products, qualification */
.assess-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.assess-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.assess-card h3 { display: flex; gap: var(--space-2); align-items: center; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-family: var(--font-display); }
.assess-card .big { font: 600 30px/36px var(--font-display); color: var(--pine); font-variant-numeric: tabular-nums; } .assess-card .big small { font: 400 15px/20px var(--font-sans); color: var(--ink-muted); }
.assess-card .limit { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.checklist .mark-bad { background: var(--danger-soft); color: var(--danger); }
.crit { display: flex; gap: var(--space-2); align-items: flex-start; } .crit .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-sunk); color: var(--ink-muted); margin-top: 2px; }
.crit .mark-ok { background: var(--success-soft); color: var(--success); } .crit .mark-no { background: var(--warning-soft); color: var(--warning); } .crit .mark-bad { background: var(--danger-soft); color: var(--danger); }
ul.crits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.product { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.product.is-priority { border-color: var(--glacier); }
.product-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .product-head h3 { margin-right: auto; }
.product .warn-line { background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-sm); padding: 6px var(--space-3); font-size: 14px; }
.ev-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; border-top: 1px solid var(--line); padding: var(--space-2) 0; }
.ev-link:first-child { border-top: 0; }
.suggest { background: var(--sky); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.next-card { border-left: 4px solid var(--glacier); }
.why { background: var(--surface-sunk); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: 14px; }
.decision-opt { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--line); } .decision-opt:first-of-type { border-top: 0; }
.snap { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.gate-list { margin: var(--space-1) 0 0; padding-left: 20px; }
@media (max-width: 1100px) { .assess-grid { grid-template-columns: minmax(0, 1fr); } }
ul.crits-compact { gap: var(--space-2); font-size: 14px; line-height: 20px; } ul.crits-compact .crit { align-items: center; } ul.crits-compact .mark { margin-top: 0; }
#assessment, #nextstep, #products { margin-bottom: var(--space-4); }

.ev-link .vq-badge, .suggest .vq-badge, .product .vq-badge { white-space: normal; height: auto; min-height: 24px; padding-top: 2px; padding-bottom: 2px; line-height: 18px; }

/* Commercial objectives: a candidate's summary line carries several badges; let them wrap instead of widening the page. */
details.disclose > summary.summary-wrap { flex-wrap: wrap; row-gap: var(--space-1); }
details.disclose > summary.summary-wrap > .cand-name { flex: 1 1 100%; }

/* ---- Commercial workspace v2 ------------------------------------------------------------------------------------ */
.ws-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.ws-overview a, .ws-overview div { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.ws-overview a:hover { border-color: var(--ridge); }
.ws-overview .label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.ws-overview .value { font-size: 26px; font-weight: 700; line-height: 1.1; } .ws-overview .note { font-size: 12px; color: var(--ink-muted); }
.ws-overview .is-active { border-color: var(--ridge); box-shadow: inset 0 0 0 1px var(--ridge); }
table.ws-table td, table.ws-table th { vertical-align: top; }
table.ws-table .w-co { min-width: 210px; } table.ws-table .w-act { min-width: 220px; max-width: 320px; }
.ws-pri { display: inline-block; min-width: 1.6em; text-align: center; font-weight: 700; border-radius: var(--radius-sm); padding: 1px 6px; background: var(--surface-sunk); }
.ws-pri-A { background: var(--success-soft, #d7efe3); color: var(--success, #14663f); } .ws-pri-B { background: var(--sky); } .ws-pri-C { background: var(--surface-sunk); color: var(--ink-muted); }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.ws-head h1 { margin: 0; } .ws-head .ws-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 14px; color: var(--ink-muted); align-items: center; }
.ws-head .ws-next { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-2) var(--space-3); background: var(--sky); border-radius: var(--radius-md); font-size: 15px; }
.ws-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 980px) { .ws-cols { grid-template-columns: minmax(0, 1fr); } }
.ws-cols > .stack { display: grid; gap: var(--space-4); }
.channel { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); align-items: center; }
.channel:first-of-type { border-top: 0; }
.channel .what { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.channel .val { font-weight: 600; overflow-wrap: anywhere; } .channel .sub { font-size: 12px; color: var(--ink-muted); }
.channel .vq-btn { white-space: nowrap; }
.ws-note { font-size: 13px; color: var(--ink-muted); }
.ws-list { margin: var(--space-2) 0 0; padding-left: 1.1em; } .ws-list li { margin: 2px 0; }
.ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: 14px; }
.ev-row:first-child { border-top: 0; } .ev-row .t { font-weight: 600; } .ev-row .m { font-size: 12px; color: var(--ink-muted); }
.prod-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.prod-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface-raised); }
.prod-card.is-primary { border-color: var(--ridge); } .prod-card h3 { margin: 0 0 var(--space-1); font-size: 15px; }
.act-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0; }
.entry-collapsed summary { cursor: pointer; font-weight: 600; } .entry-collapsed .preview { font-size: 13px; color: var(--ink-muted); margin: 2px 0 0; }
.next-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.next-controls details { flex: 1 1 260px; } .next-controls summary { cursor: pointer; }

.market-switch{margin:.5rem 0 .75rem}.market-switch select{width:100%;padding:.35rem .5rem;font:inherit}

/* ---- KPI cards: the heading gets a fixed-height area so every number and its description line up across a row ---- */
.ws-overview, .summary-strip { align-items: stretch; }
.ws-overview > a, .ws-overview > div { align-content: start; gap: var(--space-1); min-width: 0; }
.ws-overview .label { line-height: 16px; min-height: calc(3 * 16px); overflow-wrap: anywhere; }       /* room for three lines of heading */
.ws-overview .value { line-height: 32px; font-variant-numeric: tabular-nums; }
.ws-overview .note { line-height: 16px; overflow-wrap: anywhere; }
.summary-strip .label { line-height: 20px; min-height: calc(2 * 20px); align-items: flex-start; overflow-wrap: anywhere; }
.summary-strip .note { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .ws-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip > * { border-top: 1px solid var(--line); } .summary-strip > *:nth-child(-n+2) { border-top: 0; }
  .summary-strip > *:nth-child(odd) { border-left: 0; }
}

/* ---- compact desktop (about 80% density) ----
   Desktop only (wider than the tablet breakpoint). Real sizes are reduced; nothing is zoomed or transformed, so browser zoom still works.
   Spacing tokens are scaled once here and every rule that uses them follows; type sizes are set below in one place. */
@media (min-width: 1101px) {
  :root {
    --space-1: 3px; --space-2: 6px; --space-3: 10px; --space-4: 13px; --space-6: 19px; --space-8: 26px; --space-12: 38px; --space-16: 51px;
    --radius-lg: 10px;
    --side-w: 200px;
  }
  body { font-size: 13px; line-height: 19px; }
  h1 { font-size: 22px; line-height: 28px; } h2 { font-size: 15px; line-height: 21px; } h3 { font-size: 13px; line-height: 19px; }
  .small, .stat .note, .stat .label, .meta, .source-line, .qlegend, .kv-compact, .result-count, .active-filters, .crumbs, .ws-head .ws-meta,
  .field label, .field .hint, .chip-label, details > summary, details.drow .d-cell, .why, .product .warn-line, ul.crits-compact, .summary-strip .note,
  .summary-strip .label, .funnel .label, .review-row .rv-actions details, .steps li { font-size: 12px; line-height: 17px; }
  .eyebrow { font-size: 10px; line-height: 14px; }
  .mono { font-size: 11px; }
  .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .sidebar { padding: var(--space-4) var(--space-3); gap: var(--space-4); }
  .sidebar .brand img { width: 124px; }
  .nav a { padding: 7px var(--space-3); font-size: 13px; }
  .nav .count, .subnav .count { font-size: 10.5px; padding: 0 6px; min-width: 17px; }
  .sidebar .who { font-size: 12px; } .sidebar .who button { padding: 4px 10px; }
  .nav-search input { min-height: 30px; font-size: 12px; }
  .main { padding: var(--space-4) var(--space-6) var(--space-12); max-width: 1900px; }
  .subnav { margin-bottom: var(--space-4); } .subnav a, .tabs a { padding: 7px var(--space-3); font-size: 12.5px; }
  .page-head { margin-bottom: var(--space-3); }
  .card { padding: var(--space-3) var(--space-4) var(--space-4); }
  .card-flush > h2 { padding: var(--space-3) var(--space-4) 0; }
  .vq-btn { min-height: 30px; padding: 0 var(--space-3); font-size: 12.5px; } .vq-btn-sm { min-height: 26px; font-size: 12px; }
  .vq-badge { height: 20px; font-size: 11px; }
  .input, select.input { min-height: 31px; padding: 4px var(--space-2); font-size: 12.5px; }
  .chip { min-height: 26px; font-size: 12px; }
  table.data { font-size: 12.5px; } table.data th { font-size: 11px; line-height: 14px; padding: 7px var(--space-3); } table.data td { padding: 7px var(--space-3); }
  table.data tr.row-part th, table.data tr.row-part td, table.data tbody th[scope="row"] { font-size: 12px; }
  .stat .value { font-size: 22px; line-height: 28px; } .summary-strip .value { font-size: 22px; line-height: 28px; } .funnel .value { font-size: 26px; line-height: 32px; }
  .assess-card .big { font-size: 24px; line-height: 30px; }
  .prose h2 { font-size: 16px; } .prose table, .prose code { font-size: 12px; }

  /* KPI cards: eight in a row when the width allows, wrapping naturally below that. Heading area is fixed so numbers and notes line up. */
  .ws-overview { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--space-2); }
  .ws-overview > a, .ws-overview > div { padding: var(--space-2) var(--space-3); gap: 2px; }
  .ws-overview .label { font-size: 10.5px; line-height: 14px; min-height: calc(3 * 14px); letter-spacing: .04em; }
  .ws-overview .value { font-size: 22px; line-height: 28px; }
  .ws-overview .note { font-size: 11px; line-height: 14px; }
  .summary-strip { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .summary-strip > * { padding: var(--space-2) var(--space-3); }
  .summary-strip .label { min-height: calc(2 * 17px); }
}