/* ===========================================================================
   Arodus — shared app stylesheet for full-page (expanded) screens.
   Same tokens + components as the dashboard; pages render at full density.
   =========================================================================== */
/* Custom scrollbars — slim, theme-matched, hover-brightening */
* { scrollbar-width: thin; scrollbar-color: #33455c transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2f4056; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #44597450; background: #455974; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
:root {
  --canvas: #0D1521;
  --surface: #15202F;
  --surface-2: #1B2838;
  --border: #29384B;
  --border-strong: #3A4C63;
  --text: #ECF1F7;
  --text-body: #C2CCD8;
  --text-muted: #8C99A9;
  --accent: #3D72D6;
  --accent-hover: #5B8DEF;
  --link: #8AB0F5;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.26);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.5);
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* dimension hues (Okabe-Ito) */
  --dim-operational: #0072B2;
  --dim-cyber: #56B4E9;
  --dim-financial: #009E73;
  --dim-compliance: #E69F00;
  --dim-reputational: #CC79A7;
  --dim-strategic: #D55E00;
  --dim-supply: #D55E00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--canvas); color: var(--text-body);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------------- App shell ---------------- */
.app { display: grid; grid-template-columns: 80px 1fr; height: 100vh; }
.rail { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 8px; }
.rail-mark { width: 40px; height: 40px; border-radius: var(--r-md); background: #163262; border: 1px solid #2A4576; display: grid; place-items: center; margin-bottom: 7px; box-shadow: var(--shadow); }
.rail-mark img { height: 24px; width: auto; display: block; }
.rail-name { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: -.01em; color: var(--text); margin-bottom: 16px; }
.nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; flex: 1; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 60px; padding: 9px 0; border-radius: var(--r-md); color: var(--text-muted); text-decoration: none; font-size: 10.5px; font-weight: 500; transition: background .12s, color .12s; }
.nav a svg { width: 20px; height: 20px; display: block; }
.nav a { width: 74px; font-size: 10px; white-space: nowrap; letter-spacing: -.01em; }
.nav a:hover { color: var(--text-body); background: var(--surface-2); }
.nav a.active { color: var(--text); background: var(--surface-2); }
.nav a.active svg { color: var(--accent); }
.nav-settings { margin-top: auto; }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

/* ---------------- Top chrome ---------------- */
.chrome { display: flex; align-items: center; gap: 14px; padding: 12px 28px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--canvas) 70%, transparent); backdrop-filter: blur(6px); flex: none; }
.back { display: inline-flex; align-items: center; gap: 7px; color: var(--link); font-size: 13px; text-decoration: none; font-weight: 500; white-space: nowrap; }
.back:hover { color: var(--accent-hover); }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.page-sub { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
/* page count line — lives WITH the content it describes, never in the header identity zone */
.feed-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.chrome-spacer { flex: 1; }
.search { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; min-width: 0; }
.search.grow { flex: 1 1 auto; max-width: 360px; }
.search svg { flex: none; }
.search input { background: none; border: 0; outline: none; color: var(--text-body); font-family: var(--font-ui); font-size: 13.5px; width: 100%; }
.search input::placeholder { color: var(--text-muted); }
.feed-empty { padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* universal Share button (injected on feed surfaces by app-header.js) */
.report-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm); padding: 7px 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.report-btn:hover { background: var(--accent-hover); }
.report-btn svg { display: block; }
/* shared Save view control — styles live in app-header.css (loaded on every surface) */

/* shared vendor combobox (rail/popup) — matches the Spend rail styling */
.feed-page { display: flex; gap: 20px; align-items: flex-start; max-width: 1120px; }
.feed-rail { width: 240px; flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 12px 14px; position: sticky; top: 0; align-self: flex-start; }
.feed-rail-h { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); padding: 2px 4px 8px; }
.feed-main { flex: 1 1 auto; min-width: 560px; }
.feed-rail .rail-sec { padding: 8px 0; border-top: 1px solid var(--border); }
.feed-rail .rail-sec:first-of-type { border-top: 0; }
.feed-rail .bc-title, .feed-rail .fh { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 2px 8px 7px; }
.feed-rail .rail-cb { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; color: var(--text-body); cursor: pointer; }
.feed-rail .rail-cb input { accent-color: var(--accent); }
.feed-rail .bc-sec, .feed-rail #evCatFacet, .feed-rail .fp-sec { border-top: 1px solid var(--border); padding: 6px 0 0; margin-top: 2px; }
.feed-rail #evCatFacet label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; color: var(--text-body); cursor: pointer; }
.feed-rail #evCatFacet input { accent-color: var(--accent); }
/* uniform checkbox look: Event state + Category match the bounded-checklist row exactly
   (same padding/gap/hover/radius + label left, accent box + check right) */
.feed-rail .rail-cb, .feed-rail #evCatFacet label { justify-content: flex-start; gap: 10px; padding: 8px 8px; font-size: 13px; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; }
.feed-rail .rail-cb:hover, .feed-rail #evCatFacet label:hover { background: var(--surface-2); }
.feed-rail .rail-cb input[type="checkbox"], .feed-rail #evCatFacet input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; order: 2; margin: 0 0 0 auto;
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong);
  background: transparent; cursor: pointer; flex: none; display: grid; place-items: center;
}
.feed-rail .rail-cb input[type="checkbox"]:checked, .feed-rail #evCatFacet input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.feed-rail .rail-cb input[type="checkbox"]:checked::after, .feed-rail #evCatFacet input[type="checkbox"]:checked::after { content: '✓'; color: #fff; font-size: 11px; line-height: 1; }
.feed-rail .rail-scope { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding: 10px 2px 4px; }
.feed-rail .bc-head { padding-left: 0; padding-right: 0; }
.feed-rail .bc-list { max-height: none; overflow: visible; padding: 0; }
.feed-rail .scope-pill { text-align: left; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-body); border-radius: var(--pill); padding: 7px 12px; font-family: var(--font-ui); font-size: 12.5px; cursor: pointer; }
.feed-rail .scope-pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.feed-rail .preset-row { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.feed-rail .sort-wrap { position: relative; }
.feed-rail .sort-wrap .ctrl { width: 100%; justify-content: space-between; }
/* filter rail scrolls on its own when filters overflow the viewport; scrollbar hidden */
.feed-rail { max-height: calc(100vh - 72px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.feed-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (max-width: 880px) {
  .feed-page { flex-direction: column; }
  .feed-rail { width: 100%; position: static; max-height: none; overflow: visible; }
  .feed-main { min-width: 0; width: 100%; }
}

/* shared vendor combobox (rail/popup) — matches the Spend rail styling */
.sb-vblock { padding-bottom: 6px; }
.sb-vsub { font-size: 11px; color: var(--text-muted); padding: 6px 2px 2px; }
.sb-vchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.sb-vchips:empty { display: none; }
.vchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(61,114,214,.12); border: 1px solid rgba(61,114,214,.32); color: var(--link); border-radius: var(--pill); padding: 2px 6px 2px 9px; font-size: 12px; }
.vchip .x { cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.vchip .x:hover { color: var(--text); }
.sb-combo { position: relative; }
.sb-combo input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; color: var(--text); font-family: var(--font-ui); font-size: 13px; outline: none; }
.sb-combo input::placeholder { color: var(--text-muted); }
.sb-combo input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent); }
.sb-vdrop { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); padding: 6px; }
.sb-vdrop[hidden] { display: none; }
.sb-vhead { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); padding: 4px 6px 6px; }
.sb-vrows { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.sb-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 6px; border-radius: var(--r-sm); color: var(--text-body); font-family: var(--font-ui); font-size: 13px; cursor: pointer; }
.sb-item:hover { background: var(--surface); }
.sb-item .bdot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.sb-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .sb-box { margin-left: auto; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: transparent; flex: none; }
.sb-item.on .sb-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.vrow .sb-box { margin-left: 8px; }
.vrow .vl12 { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: auto; }
.sb-vmore { font-size: 11px; color: var(--text-muted); padding: 6px 6px 2px; }
.sb-only { display: block; margin: 7px 0 4px; background: none; border: 0; color: var(--link); font-size: 11.5px; cursor: pointer; font-family: var(--font-ui); padding: 0; }
.sb-only[hidden] { display: none; }
.sb-only:hover { color: var(--accent-hover); }

/* shared bounded checklist (Industry etc.) — header + sticky selected chips + scroll list */
.bc-sec { padding: 4px 2px 6px; }
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 7px; }
.bc-title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.bc-clear { background: none; border: 0; padding: 2px; font-family: var(--font-ui); font-size: 11.5px; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s; }
.bc-sec:hover .bc-clear, .bc-sec:focus-within .bc-clear { opacity: 1; }
.bc-clear:hover { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; }
.bc-chips.empty { display: none; }
.bc-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(61,114,214,.14); border: 1px solid rgba(61,114,214,.34); color: var(--link); border-radius: var(--pill); padding: 2px 5px 2px 9px; font-size: 12px; }
.bc-chip .x { cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.bc-chip .x:hover { color: var(--text); }
.bc-list { max-height: 232px; overflow-y: auto; overflow-x: hidden; }   /* ~8 rows, scrolls beyond (38 industries) */
.bc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 8px; border-radius: var(--r-sm); color: var(--text-body); font-family: var(--font-ui); font-size: 13px; cursor: pointer; }
.bc-item:hover { background: var(--surface-2); color: var(--text); }
.bc-item .bc-label { margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-item .bc-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: transparent; flex: none; }
.bc-item.on .bc-box { background: var(--accent); border-color: var(--accent); color: #fff; }

/* shared feed control popovers (sort dropdown + filter popup) — Events / Reviews pages */
.sort-wrap, .filter-wrap { position: relative; }
.sort-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 5px; min-width: 168px; }
.sort-pop[hidden] { display: none; }
.sort-item { display: flex; width: 100%; text-align: left; background: none; border: 0; padding: 8px 11px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-body); cursor: pointer; font-family: var(--font-ui); }
.sort-item:hover { background: var(--surface-2); }
.sort-item.on { color: var(--text); font-weight: 600; }
.sort-item.on::after { content: '\2713'; margin-left: auto; color: var(--accent); }
.filter-pop .fp-sec { padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.filter-pop .fp-sec .sb-vblock, .filter-pop .sb-vblock { padding: 4px 6px; }
.filter-pop .fh { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 6px 6px 4px; }
.chrome-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-sm); padding: 8px 14px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-body); }
.btn.ghost:hover { border-color: var(--border-strong); color: var(--text); }
.btn .pro { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--pill); padding: 0 6px; }

/* segmented toggle */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.seg button { background: transparent; border: 0; color: var(--text-muted); font-size: 12.5px; font-weight: 500; padding: 7px 14px; cursor: pointer; font-family: var(--font-ui); white-space: nowrap; }
.seg button.on { background: var(--surface-2); color: var(--text); }

/* ---------------- Board ---------------- */
.board { flex: 1; overflow-y: auto; padding: 22px 28px 80px; }
.board-inner { max-width: 1280px; margin: 0; }

/* ---------------- Control bar ---------------- */
.controlbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ctrl { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; color: var(--text-body); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ctrl:hover { border-color: var(--border-strong); }
.ctrl .k { color: var(--text-muted); }
.ctrl .v { color: var(--text); }
.ctrl.dashed { border-style: dashed; border-radius: var(--pill); }
.ctrl.dashed:hover { border-color: var(--accent); color: var(--text); }
.ctrl .plus { color: var(--accent); font-family: var(--font-mono); font-weight: 600; }
.filter-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,114,214,.12); border: 1px solid rgba(61,114,214,.32); color: var(--link); border-radius: var(--pill); padding: 4px 8px 4px 11px; font-size: 12px; font-weight: 500; }
.fchip .x { cursor: pointer; color: var(--text-muted); display: inline-flex; }
.fchip .x:hover { color: var(--text); }

/* ---------------- Chips & band ramp ---------------- */
:root { --vendor-grid: minmax(220px,6fr) minmax(96px,1fr) minmax(88px,1fr) minmax(80px,1fr) minmax(96px,1fr) minmax(72px,1fr) minmax(64px,1fr); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--pill); padding: 3px 9px; font-size: 12px; font-weight: 600; font-family: var(--font-ui); width: fit-content; white-space: nowrap; }
.chip .ck { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.band-healthy  { background: #10241C; color: #34D399; }
.band-warning  { background: #241D0E; color: #E8B84B; }
.band-degraded { background: #2A1A0E; color: #F0894A; }
.band-severe   { background: #2A1413; color: #F0746E; }
.band-critical { background: #2E1212; color: #FF7A7A; }
.band-inactive { background: #1A222D; color: #AEB8C6; }
.dot-healthy { background:#34D399; } .dot-warning{ background:#E8B84B; } .dot-degraded{ background:#F0894A; }
.dot-severe { background:#F0746E; } .dot-critical{ background:#FF5A5A; } .dot-inactive{ background:#9AA6B5; }
.mono { font-family: var(--font-mono); }

/* avatar / logo monogram */
.logo { border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--text-muted); flex: none; }

/* ---------------- Cards ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ---------------- Tables ---------------- */
.table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.thead, .trow { display: grid; align-items: center; gap: 14px; padding: 0 18px; }
.thead { height: 42px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.thead .sortable { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.thead .sortable:hover { color: var(--text-body); }
.thead .sortable .car { opacity: .5; }
.thead .sortable.active { color: var(--text); }
.thead .sortable.active .car { opacity: 1; color: var(--accent); }
/* one alignment convention: numeric columns right-align, header matches its column.
   Tag both the header cell and the body cells with .num — never style a numeric column
   positionally, so a new column or table can't regress the alignment. */
.thead > .num, .trow > .num,
table th.num, table td.num { text-align: right; justify-content: flex-end; justify-items: end; justify-self: end; }
.trow > .num { font-variant-numeric: tabular-nums lining-nums; }
.trow > .num .rc { display: inline-block; width: 44px; text-align: right; }
.trow { min-height: 60px; border-bottom: 1px solid var(--border); }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--surface-2); }
.num { font-family: var(--font-mono); color: var(--text-body); }
.num.score { color: var(--text); font-weight: 500; }

.vcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vcell .logo { width: 36px; height: 36px; font-size: 14px; }
.vcell .vmeta { min-width: 0; }
.vcell .vname { color: var(--text); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcell .vcat { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rating { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--font-mono); }
.rating .star { color: #E8B84B; font-family: var(--font-ui); }
.rating .rv { color: var(--text); }
.rating .rc { color: var(--text-muted); font-size: 11px; }

.scorecell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.scorecell .sv { order: 1; font-family: var(--font-mono); font-size: 18px; color: #ECF1F7; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.scorecell .sv .den { color: #8C99A9; font-size: 11px; }
.scorecell .track { order: 2; width: 64px; flex: none; height: 3px; border-radius: 999px; background: #29384B; overflow: hidden; }
.scorecell .fill { height: 100%; border-radius: 999px; }
.src-chip { font-size: 11.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill); padding: 2px 10px; white-space: nowrap; width: fit-content; }

/* ---------------- Pagination ---------------- */
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--text-muted); font-size: 12.5px; }
.pager .pages { display: inline-flex; align-items: center; gap: 6px; }
.pager .pages button { min-width: 32px; height: 32px; padding: 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-body); font-family: var(--font-mono); font-size: 12.5px; cursor: pointer; }
.pager .pages button:hover { border-color: var(--border-strong); }
.pager .pages button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager .pages button.gap { border: 0; background: transparent; cursor: default; }

.section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.section-label .count { color: var(--text-body); }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------------- Layout with secondary side panel ---------------- */
.with-side { display: grid; grid-template-columns: 224px 1fr; gap: 22px; align-items: start; }
.side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; position: sticky; top: 0; }
.side .sh { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 10px 12px 8px; }
.side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-body); text-decoration: none; font-size: 13px; }
.side a:hover { background: var(--surface-2); }
.side a.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.side a .dd { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.side a .c { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.side .div { height: 1px; background: var(--border); margin: 6px 8px; }

/* ---------------- Shared primitives: unverified / attribution / paywall ---------------- */
/* Unverified chip — neutral treatment, no severity color. One component, two labels:
   "Reported — Unverified" and "Reported — Forecast". */
.chip.unverified { background: transparent; border: 1px solid rgba(255,255,255,.08); color: var(--text-muted); font-weight: 500; white-space: nowrap; }

/* Hollow status glyph (◌) — replaces the filled dot (●) on any reported item */
.ck.hollow { background: transparent; border: 1.5px solid currentColor; box-sizing: border-box; }

/* Source attribution footer — one component, text is the only prop.
   e.g. <div class="src-footer">Breach data: Have I Been Pwned</div> */
.src-footer { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding: 10px 18px; border-top: 1px solid var(--border); }

/* Lock glyph — small SVG prefix (never emoji) for paywalled outbound links.
   <svg class="lock-ico" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
     <rect x="4" y="10" width="16" height="11" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></svg> */
.lock-ico { display: inline-flex; color: var(--text-muted); flex: none; vertical-align: -1px; }

.rail-home { display: flex; flex-direction: column; align-items: center; text-decoration: none; }