/* FPR Research in Data — report page */
body.research { overflow: auto; background: var(--color-bg); }
/* ?embed=1: no topbar or table of contents when the page sits inside another site */
body.research.embed .topbar, body.research.embed .toc, body.research.embed .skip { display: none; }
body.research.embed .page { padding-top: 16px; }
body.research.embed { --topbar-height: 0px; }
body.research .topbar .btn { text-decoration: none; height: 34px; }
.toc { position: fixed; top: var(--topbar-height); left: 0; right: 0; height: 40px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--color-border); display: flex; gap: 2px; padding: 0 12px; overflow-x: auto; z-index: 1000; align-items: center; }
.toc a { text-decoration: none; color: var(--color-text-muted); font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 14px; white-space: nowrap; }
/* the Knowledge Area's areas (Housing, and the ones to come) lead the bar; the page's own sections follow the divider */
.toc .ka-tabs { display: flex; gap: 2px; flex: none; }
.toc a.ka-tab { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary-dark); font-weight: 700; }
.toc a.ka-tab .ms-icon { font-size: 16px; }
/* the way back to the area's topic on the map, first in the bar (js/core/knowledge.js topicLink, navigation plan PR 6) */
.toc a.ka-topic { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary-dark); font-weight: 700; border: 1px solid var(--color-border); margin-right: 6px; }
.toc a.ka-topic .ms-icon { font-size: 16px; }
.toc a.ka-tab[aria-current="page"] { background: var(--color-primary-strong); color: #fff; }
.toc .ka-sep { flex: none; width: 1px; align-self: stretch; margin: 8px 6px; background: var(--color-border); }
/* an area in review (js/core/knowledge.js): its tab carries a small marker, and its page only the in-review message */
/* the tab of an area in review looks exactly like the others (size, weight, colour, spacing, and the active style on its own page); only the badge inside it differs */
.ka-mark { display: inline-block; font-size: 10px; line-height: 14px; font-weight: 600; background: var(--tint-yellow-bg); color: var(--tint-yellow-fg); border-radius: 8px; padding: 0 6px; margin-left: 2px; white-space: nowrap; }
/* the header of an area page (Knowledge plan PR 2): Knowledge › its topic on the map, the "All areas" menu, its status and date; the page's sections follow the divider */
.toc .ka-tabs { align-items: center; gap: 4px; }
.toc a.ka-home { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary-dark); font-weight: 700; }
.toc a.ka-home .ms-icon, .toc a.ka-topic .ms-icon { font-size: 16px; }
.toc .ka-tabs a.ka-topic { margin-right: 0; }
.toc .ka-crumb { color: var(--color-text-muted); font-size: 12px; }
.toc .ka-status { margin-left: 4px; }
.toc .ka-upd { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; padding: 0 4px; }
.ka-menu { flex: none; }
.ka-menu > summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--color-primary-dark); padding: 6px 10px; border-radius: 14px; border: 1px solid var(--color-border); white-space: nowrap; }
.ka-menu > summary::-webkit-details-marker { display: none; }
.ka-menu > summary::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.ka-menu[open] > summary { background: var(--color-primary-strong); color: #fff; border-color: var(--color-primary-strong); }
.ka-menu > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(51, 140, 179, .35); }
.ka-menu-panel { position: fixed; top: calc(var(--topbar-height) + 40px); left: 12px; z-index: 1001; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - var(--topbar-height) - 56px); overflow-y: auto; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md, 0 8px 24px rgba(42,46,46,.16)); padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.ka-menu-group { display: flex; flex-direction: column; gap: 2px; }
.ka-menu-group b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin: 2px 0 2px; }
.toc .ka-menu-panel a { display: flex; align-items: center; gap: 6px; color: var(--color-text); font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 8px; white-space: normal; }
.toc .ka-menu-panel a .ms-icon { font-size: 18px; color: var(--color-primary); }
.toc .ka-menu-panel a:hover { background: var(--color-bg); }
.toc .ka-menu-panel a[aria-current="page"] { background: var(--color-primary-strong); color: #fff; }
.toc .ka-menu-panel a[aria-current="page"] .ms-icon { color: #fff; }
.toc .ka-menu-panel a.ka-menu-all { grid-column: 1 / -1; justify-content: center; font-weight: 700; color: var(--color-primary-dark); border-top: 1px solid var(--color-border); border-radius: 0; margin-top: 2px; }
/* the foot of an area page: related areas and the datasets it uses */
.ka-foot-h { font-size: 13px; font-weight: 700; margin: 10px 0 4px; }
.ka-foot-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.ka-foot-list a { display: inline-flex; align-items: center; gap: 6px; }
.ka-foot-list .ms-icon { font-size: 18px; }
.ka-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 600; margin: 12px 0 0; }
.ka-review-page h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ka-review-page h1 .ka-mark { font-size: 12px; line-height: 18px; padding: 2px 10px; margin-left: 0; }
.ka-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.ka-links .btn { text-decoration: none; }
.toc a:hover, .toc a.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.page { max-width: 1180px; margin: 0 auto; padding: calc(var(--topbar-height) + 56px) 20px 80px; }
.hero { background: var(--color-surface); border-radius: var(--radius-lg); padding: 34px 36px; box-shadow: var(--shadow-sm); margin-bottom: 24px; border-top: 6px solid var(--color-primary); }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary-dark); font-weight: 700; margin-bottom: 8px; }
.hero h1 { margin: 0 0 10px; font-size: 32px; color: var(--color-primary-dark); line-height: 1.15; }
.lede { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); max-width: 860px; margin: 0 0 20px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi-row .kpi { background: var(--color-bg); border-radius: var(--radius-md); padding: 14px 16px; }
.kpi-row .kpi .v { font-size: 26px; font-weight: 700; color: var(--color-primary-dark); }
.kpi-row .kpi .l { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.kpi-row .kpi .s { font-size: 10.5px; color: var(--color-text-light); margin-top: 6px; }
.legend-note { font-size: 12px; color: var(--color-text-muted); margin-top: 16px; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 10px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; }
.tag.paper { background: var(--tint-yellow-bg); color: var(--tint-yellow-fg); }
.tag.live { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.block { margin-bottom: 36px; }
.block h2 { font-size: 22px; color: var(--color-primary-dark); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.block h2 .ms-icon { font-size: 24px; color: var(--color-primary); }
.block > p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); max-width: 900px; margin: 0 0 16px; }
.card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.card-head .stats { font-size: 11.5px; color: var(--color-text-muted); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.viz { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 16px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.viz .viz-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.viz .viz-head h3 { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.viz .viz-head .stats { font-size: 11.5px; color: var(--color-text-muted); }
.viz .viz-head .stats b { color: var(--color-text); font-weight: 500; }
.viz.compact { grid-template-columns: 1fr; margin-bottom: 0; }
.mini-map { height: 300px; border-radius: var(--radius-md); background: #dde9f0; }
.mini-map.tall { height: 360px; }
.chart-wrap { height: 300px; position: relative; }
.viz .ramp-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--color-text-muted); }
.viz .ramp-row .ramp { flex: 1; margin: 0; }
.help { cursor: pointer; color: var(--color-text-light); font-size: 16px; }
.help:hover { color: var(--color-primary-dark); }
.paper-table { margin-bottom: 16px; }
table.pt { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
table.pt th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-light); padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
table.pt td { padding: 9px 12px; border-bottom: 1px solid var(--color-border-light); }
table.pt td.num, table.pt th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.pt tr.total td { font-weight: 700; background: var(--tint-blue-bg); }
table.pt caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; padding: 10px 12px; background: var(--color-surface); }
.tbl-wrap { overflow-x: auto; }
.pos { color: var(--tint-green-fg); } .neg { color: var(--color-danger); }
.profile-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.profile-pick select { height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; padding: 0 8px; background: #fff; min-width: 220px; }
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile .card h3 { margin: 0 0 10px; font-size: 18px; color: var(--color-primary-dark); }
.profile .card h3 small { display: block; font-size: 12px; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }
/* five columns shared by every row of both cards: label and rank · value · margin of error · trend · years (a figure with no margin or trend leaves those empty) */
.kv { display: grid; grid-template-columns: minmax(0, 1fr) 5.9em 5.7em 78px 4.6em; gap: 7px 10px; font-size: 13px; line-height: 1.35; align-items: start; }   /* fixed widths: the columns line up across both cards; every cell starts on the label's first line */
.kv .kv-l { text-align: left; min-width: 0; }
.kv .kv-v { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv .kv-m { text-align: left; font-size: 11px; line-height: 1.6; }   /* 11px on a 13px line: the same first line as the value */
.kv .kv-m .yr-note-inline { margin-left: 0; }
.kv .kv-s { line-height: 0; }
.kv .kv-c { text-align: left; font-size: 10.5px; line-height: 1.65; }
.kv .rank { white-space: nowrap; }
.kv .sec { grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light); margin-top: 8px; font-weight: 700; }
.kv .rank { color: var(--color-text-light); font-weight: 400; font-size: 11px; }
.src-list .src { font-size: 12px; }
@media (max-width: 860px) { .viz, .two, .profile { grid-template-columns: 1fr; } .hero { padding: 22px; } .hero h1 { font-size: 24px; } .topbar .brand span { display: none; } }

/* ── QA pass 2026-10-01 ─────────────────────────────────────────────────── */
/* in-page links land below the fixed topbar and the table-of-contents bar */
html { scroll-padding-top: calc(var(--topbar-height) + 56px); }
.block, .hero { scroll-margin-top: calc(var(--topbar-height) + 56px); }
.toc { scrollbar-width: thin; }
.toc a[aria-current="location"] { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
/* the map stays in view while its long ranked chart scrolls past */
.viz { align-items: start; }
.viz .mini-col { position: sticky; top: calc(var(--topbar-height) + 52px); align-self: start; }
.viz .readout { font-size: 12px; color: var(--color-text-muted); min-height: 18px; margin-top: 6px; }
.viz .readout b { color: var(--color-text); font-weight: 500; }
.viz.compact .mini-col { position: static; }
.viz .ramp-row { display: block; font-size: 11.5px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legend-row .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend-row .lg i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.legend-row .lg small { color: var(--color-text-muted); }
.legend-note-sm { margin-top: 4px; color: var(--color-text-muted); }
.note.caution { background: var(--tint-yellow-bg); color: var(--tint-yellow-fg); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px; }
.note.caution b { color: inherit; }
/* the one "In review" notice of a Knowledge Area page that keeps the marker, written by core/knowledge.js (render, notice) in the same words on every such page */
.review-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.review-note .ms-icon { font-size: 20px; flex: none; line-height: 1.1; }
.review-note:empty { display: none; }
.pick-hint { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.tag.paper { color: #5A3500; }
.tag.live { color: #2E3808; }
.tbl-wrap table.pt { min-width: 560px; }
body.research .page a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) {
  .viz .mini-col { position: static; }
  .viz .chart-wrap { order: 3; }
  .profile-pick { flex-wrap: wrap; }
  .pick-hint { white-space: normal; }
  .toc { padding: 0 6px; }
}
@media print {
  .topbar, .toc, .skip, .help-btn, .help-pop { display: none !important; }
  body.research { background: #fff; }
  .page { padding-top: 0; max-width: none; }
  .hero, .card, .viz, table.pt { box-shadow: none; break-inside: avoid; }
  .viz { grid-template-columns: 1fr; }
  .mini-col { position: static !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; word-break: break-all; }
}

.chart-scroll { max-height: 560px; overflow-y: auto; border-radius: var(--radius-sm); }
.chart-scroll:focus-visible { outline: 3px solid var(--color-primary-dark); }
.viz .mini-col { padding-bottom: 10px; }
.viz .ramp-row { padding-top: 8px; border-top: 1px solid var(--color-border-light); }

/* grid items may shrink below their content width, so wide tables scroll inside their card instead of widening the page */
.two > *, .viz > *, .profile > * { min-width: 0; }
.mini-map { width: 100%; }

/* The map column is sticky while the long ranked chart scrolls. It sits in its own grid, so it can only slide to the bottom of the chart
   and never over the legend below. (As a direct child of .viz it could slide down into the legend row.) */
.viz .viz-body { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; min-width: 0; }
.viz .viz-body > * { min-width: 0; }
.viz.compact .viz-body { grid-template-columns: 1fr; }
@media (max-width: 860px) { .viz .viz-body { grid-template-columns: 1fr; } }
@media print { .viz .viz-body { grid-template-columns: 1fr; } }

/* ── Year bar, full-data dialogs and catalog (2026-10) ───────────────────── */
:root { --yearbar-h: 46px; }
.yearbar { position: fixed; top: calc(var(--topbar-height) + 40px); left: 0; right: 0; height: var(--yearbar-h); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; padding: 0 16px; z-index: 990; font-size: 12px; box-shadow: var(--shadow-sm); }
.yearbar select { height: 30px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; padding: 0 6px; background: #fff; }
.yearbar input[type=range] { width: min(300px, 26vw); accent-color: var(--color-primary); }
.yearbar .yb-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--color-primary-dark); }
.yearbar .yb-label .ms-icon { font-size: 18px; }
.yearbar .yb-base { margin-left: 10px; color: var(--color-text-muted); }
.yearbar .yb-note { flex: 1; min-width: 0; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px; }
body.research.embed .yearbar { top: 0; }
.page { padding-top: calc(var(--topbar-height) + 40px + var(--yearbar-h) + 18px); }
body.research.embed .page { padding-top: calc(var(--yearbar-h) + 18px); }
html { scroll-padding-top: calc(var(--topbar-height) + 40px + var(--yearbar-h) + 10px); }
.block, .hero { scroll-margin-top: calc(var(--topbar-height) + 40px + var(--yearbar-h) + 10px); }
.viz .mini-col { top: calc(var(--topbar-height) + 40px + var(--yearbar-h) + 10px); }
.btn.small { padding: 4px 10px; font-size: 11.5px; }
.btn.small .ms-icon { font-size: 15px; }
.viz .viz-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viz .viz-head h3 .chip { display: inline-flex; align-items: center; gap: 2px; }
.yr-note-inline { font-size: 10.5px; color: var(--color-text-muted); font-weight: 400; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.kpi-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light); margin: 22px 0 8px; font-weight: 700; }
.kpi-h .kpi-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.kpi-row .kpi-btn { border: 0; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.kpi-row .kpi-btn:hover { background: var(--tint-blue-bg); }
.kpi-row .kpi-btn:focus-visible { outline: 3px solid var(--color-primary-dark); }
.t2-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: var(--color-text-muted); }
.t2-controls select { height: 30px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; padding: 0 6px; background: #fff; }
.t2-controls .btn { margin-left: auto; }
.cellnote { display: block; font-size: 10px; color: var(--color-text-light); font-weight: 400; }
.moe { font-size: 10.5px; color: var(--color-text-muted); font-weight: 400; white-space: nowrap; }
.spark { display: block; }
.spark-cap { font-size: 10.5px; color: var(--color-text-muted); }
@media (max-width: 1100px) { .profile { grid-template-columns: 1fr; } }   /* side by side the cards would leave the labels a word wide */
.kv .kv-cs, .kv .kv-vm { display: none; }
@media (max-width: 520px) {   /* a phone: three columns; the margin of error (or note) under the value, the years (and the few-values warning) under the line */
  .kv { grid-template-columns: minmax(0, 1fr) auto 52px; gap: 8px 10px; }
  .kv .kv-m, .kv .kv-c { display: none; }
  .kv .kv-s svg { width: 52px; }
  .kv .kv-cs, .kv .kv-vm { display: block; line-height: 1.25; margin-top: 2px; font-size: 10.5px; font-weight: 400; white-space: normal; }
}
.kv .linklike { text-align: left; padding: 0; line-height: inherit; }
.paper-table .note { margin: 6px 0 12px; }
.note.live { margin-top: 8px; }

/* the full-data dialog */
dialog.data-dlg { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(1120px, 96vw); max-height: 92vh; box-shadow: var(--shadow-lg); color: var(--color-text); }
dialog.data-dlg::backdrop { background: rgba(20, 30, 40, .55); }
dialog.data-dlg[open] { display: flex; flex-direction: column; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: #fff; }
.dlg-head h2 { margin: 0; font-size: 17px; color: var(--color-primary-dark); line-height: 1.25; }
.dlg-body { overflow: auto; padding: 14px 18px 18px; }
.ds-tags { margin-bottom: 4px; }
.ds-tags .tag { margin: 0 6px 0 0; }
.ds-def { font-size: 13.5px; line-height: 1.55; margin: 6px 0 8px; max-width: 900px; }
.ds-meta { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 10px; }
.ds-meta div { margin: 2px 0; }
.ds-meta b { color: var(--color-text); font-weight: 500; }
.ds-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-size: 12.5px; }
.ds-find input { height: 32px; border: 1px solid var(--color-border); border-radius: 16px; padding: 0 12px; font: inherit; margin-left: 6px; min-width: 190px; }
.ds-check { display: inline-flex; align-items: center; gap: 6px; }
.ds-count { color: var(--color-text-muted); font-size: 12px; margin-left: auto; }
.ds-chart { height: 240px; margin: 6px 0 4px; position: relative; }
.ds-chart[hidden] { display: none; }
.ds-hint { font-size: 11.5px; color: var(--color-text-muted); margin: 4px 0 6px; }
.ds-table { max-height: 52vh; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ds-table:focus-visible { outline: 3px solid var(--color-primary-dark); }
table.pt.ds { box-shadow: none; border-radius: 0; font-size: 12.5px; }
table.pt.ds thead th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
table.pt.ds th[scope=row] { text-align: left; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--color-text); background: #fff; position: sticky; left: 36px; z-index: 1; padding: 6px 10px; border-bottom: 1px solid var(--color-border-light); white-space: nowrap; }
table.pt.ds th.pick, table.pt.ds td.pick { width: 36px; text-align: center; position: sticky; left: 0; background: #fff; z-index: 1; padding: 4px; }
table.pt.ds thead th.pick, table.pt.ds thead th:nth-child(2) { z-index: 3; }
table.pt.ds td { padding: 6px 10px; white-space: nowrap; }
table.pt.ds td.cur, table.pt.ds th.cur { background: var(--tint-blue-bg); }
table.pt.ds td.na { color: var(--color-text-light); }
table.pt.ds td.unrel { font-style: italic; color: var(--color-text-muted); }
table.pt.ds tr.total th[scope=row], table.pt.ds tr.total td.pick { background: var(--tint-blue-bg); }
table.pt.ds tr.me th[scope=row] { box-shadow: inset 3px 0 0 var(--fpr-red); }
table.pt.ds .sortbtn2 { border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; font-weight: 700; text-align: inherit; }
table.pt.ds th small { display: block; font-size: 9.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-light); }
.chart-box { height: 230px; position: relative; }

/* the data catalog */
.cat-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.cat-tools input { height: 34px; border: 1px solid var(--color-border); border-radius: 17px; padding: 0 14px; font: inherit; min-width: 260px; background: #fff; }
.cat-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light); margin: 18px 0 6px; font-weight: 700; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 18px; }
.cat-item { background: var(--color-surface); border-radius: var(--radius-md); padding: 9px 12px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; }
.cat-item[hidden] { display: none; }
.cat-item .linklike { font-size: 13px; font-weight: 500; }
.cat-src { font-size: 11px; color: var(--color-text-muted); }

@media (max-width: 860px) {
  :root { --yearbar-h: 78px; }
  .yearbar { flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px; align-content: center; }
  .yearbar input[type=range] { order: 5; flex: 1 1 100px; width: auto; }
  .yearbar .yb-note { display: none; }
  .yearbar .yb-base { margin-left: 0; }
  .viz .viz-actions { width: 100%; }
  .t2-controls .btn { margin-left: 0; }
  dialog.data-dlg { width: 100vw; max-height: 100vh; border-radius: 0; height: 100vh; }
  .ds-table { max-height: 46vh; }
  .cat-grid { grid-template-columns: 1fr; }
}
@media print { .yearbar, dialog.data-dlg { display: none !important; } .page { padding-top: 0; } }

.kv div.sec { text-align: left; }