/* Plenarprotokolle Browser - plain compact layout, no framework. */
* { box-sizing: border-box; }
body {
  font: 14px/1.4 system-ui, sans-serif;
  margin: 0; color: #1a1a1a; background: #f6f7f8;
}
header { background: #2a3b4d; color: #fff; padding: 12px 16px; }
header h1 { font-size: 18px; margin: 0 0 2px; }
.meta { font-size: 12px; opacity: .8; margin: 0 0 8px; }
nav button {
  background: #3d5168; color: #fff; border: 0; padding: 6px 14px;
  margin-right: 6px; border-radius: 4px; cursor: pointer;
}
nav button.active { background: #6c8cb0; }

.tab { display: none; padding: 16px; }
.tab.active { display: block; }

.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
#search { flex: 1; min-width: 240px; padding: 7px 10px; border: 1px solid #bbb; border-radius: 4px; }
.muted { color: #777; font-size: 12px; }

.split { display: flex; gap: 16px; align-items: flex-start; }
.list-col { flex: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.list { flex: 2; max-height: 75vh; overflow: auto; background: #fff; border: 1px solid #ddd; border-radius: 6px; }
.list-col .list { flex: none; }
.pagination { display: flex; align-items: center; gap: 8px; }
.pagination button { padding: 3px 10px; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; background: #fff; font-size: 16px; line-height: 1; }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination .pg-info { font-size: 12px; color: #777; }
.detail { flex: 1; position: sticky; top: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; max-height: 75vh; overflow: auto; }

.row { display: grid; grid-template-columns: 1fr 60px 90px; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.row:hover { background: #eef4fb; }
.row .nm { font-weight: 600; }
.row .sub { color: #777; font-size: 12px; }
.row .cnt { text-align: right; color: #333; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.badge.ok { background: #d6f0d6; color: #1c641c; }
.badge.no { background: #fde2c0; color: #8a4b00; }
.badge.miss { background: #e6e6e6; color: #555; }
.badge.absence-excused { background: #d6f0d6; color: #1c641c; }
.badge.absence-leave { background: #d8e6f5; color: #1c4a78; }
.badge.absence-absent_unexcused { background: #fbe0e0; color: #9a2222; }
.badge.absence-retracted { background: #e6e6e6; color: #555; text-decoration: line-through; }
.badge.absence-unknown { background: #fde2c0; color: #8a4b00; }
.status-evidence { margin: 2px 0 4px; }

.detail h3 { margin: 0 0 6px; font-size: 15px; }
.detail .src { font-size: 12px; margin: 4px 0; }
.detail .variants { font-size: 12px; color: #555; line-height: 1.5; }
.detail a { color: #2a6; }
.detail button { margin-top: 8px; padding: 5px 10px; cursor: pointer; }
.report { width: 100%; height: 90px; margin-top: 6px; font: 12px monospace; }

.chart { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; margin-bottom: 16px; }
.chart h3 { margin: 0 0 10px; font-size: 14px; }
.bar { display: grid; grid-template-columns: 140px 1fr 60px; gap: 8px; align-items: center; margin: 2px 0; }
.bar .label { font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .track { background: #eef; border-radius: 3px; height: 14px; overflow: hidden; }
.bar .fill { display: block; background: #6c8cb0; height: 14px; border-radius: 3px; }

.toc-session { border-bottom: 1px solid #eee; padding: 8px 10px; }
.toc-session summary { cursor: pointer; }
.toc-tops { margin: 8px 0 4px 14px; }
.toc-top { margin: 8px 0; padding-left: 10px; border-left: 3px solid #dde6f0; }
.toc-title { font-weight: 600; font-size: 13px; }
.toc-speakers { margin: 4px 0 0 8px; }
.toc-speaker { font-size: 12px; margin: 2px 0; }
.toc-speaker a, .toc-title a { color: #2a6; }

.un-row { grid-template-columns: 1fr 90px; }
.row.hl { background: #fff6d6; outline: 2px solid #e0c24a; }
.un-row .sub a { color: #2a6; margin-left: 6px; }
.badge.cat-other { background: #fde2c0; color: #8a4b00; }
.badge.cat-ocr_junk { background: #f3d6f0; color: #7a2270; }
.badge.cat-toc { background: #d8e6f5; color: #1c4a78; }
.badge.cat-furniture { background: #e6e6e6; color: #555; }
.bar .val { font-size: 12px; color: #555; }

/* --- STRUCTURED (Zwischenrufe kind distribution) --- */
.ij-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.ij-kind { font-size: 12px; background: #eef; color: #334; padding: 2px 8px; border-radius: 8px; }
.ij-sample { padding: 6px 0; border-bottom: 1px solid #eee; }
.ij-sample-raw { font-size: 13px; }

/* --- GLOBAL SEARCH (unified, all item types) --- */
.global-search { position: relative; max-width: 680px; }
.global-search > input { width: 100%; padding: 7px 10px; border: 1px solid #5a6b7d; border-radius: 4px; }
.gs-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; color: #1a1a1a; border: 1px solid #ccc; border-radius: 6px;
  max-height: 60vh; overflow: auto; display: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.gs-results.open { display: block; }
.gs-head { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #2a6;
  background: #f1f5fa; padding: 4px 10px; position: sticky; top: 0; }
.gs-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.gs-item:hover { background: #eef4fb; }
.gs-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sub { color: #888; font-size: 12px; flex: none; }

/* --- SELECTION (row checkbox, absolute so any row layout works) + FEEDBACK BAR --- */
.row:has(.sel), .toc-wrap { position: relative; padding-left: 28px; }
.toc-wrap { border-bottom: 1px solid #eee; }
.sel { position: absolute; left: 7px; top: 8px; cursor: pointer; z-index: 2; }
.selbar { position: fixed; left: 16px; right: 16px; bottom: -100px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; background: #2a3b4d; color: #fff; padding: 10px 14px;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: bottom .2s; z-index: 40; }
.selbar.open { bottom: 16px; }
.selbar select, .selbar input { padding: 5px 8px; border-radius: 4px; border: 1px solid #557; }
.selbar #sel-note { flex: 1; min-width: 160px; }
.selbar button { padding: 6px 12px; border: 0; border-radius: 4px; cursor: pointer; }
#sel-export { background: #6c8cb0; color: #fff; }
#sel-clear { background: #557; color: #fff; }

/* --- WAHLPERIODE GROUPS (collapsible, TOC + Abstimmungen) --- */
.wp-group { border-bottom: 2px solid #cdd9e6; }
.wp-group > summary { cursor: pointer; padding: 9px 12px; background: #e9eff6; font-size: 14px;
  position: sticky; top: 0; z-index: 1; }
.wp-group > summary:hover { background: #dde7f1; }
.wp-group > .toc-session, .wp-group > .row, .wp-group > .toc-wrap { margin-left: 12px; }

/* --- VERTICAL BAR CHARTS --- */
.vchart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.vchart-row .chart { margin-bottom: 0; }
.vchart .vscroll { overflow-x: auto; }
.vchart .vbars { display: flex; align-items: stretch; gap: 3px; height: 260px; padding: 0 2px 0; }
.vbar { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 22px; }
.vbar-plot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-height: 0; }
.vbar .vval { font-size: 10px; color: #555; line-height: 1.2; margin-bottom: 2px; }
.vbar .vfill { background: #6c8cb0; width: 80%; border-radius: 2px 2px 0 0; min-height: 2px; }
.vbar .vlabel { font-size: 10px; color: #777; margin-top: 4px; writing-mode: vertical-rl; transform: rotate(180deg); overflow: hidden; height: 80px; flex-shrink: 0; white-space: nowrap; cursor: default; }

/* --- SESSION TABLE (per-session stats in the Statistik tab) --- */
.session-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.session-table th, .session-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid #eee; white-space: nowrap; }
.session-table .td-left { text-align: left; }
.session-table thead th { background: #f1f5fa; font-size: 11px; }
.session-table tbody tr:hover { background: #eef4fb; }
.session-table tr.s-warn { background: #fff8e0; }
.session-table tr.s-danger { background: #fde0e0; }

/* --- WAHLPERIODEN OVERVIEW (per-period cards + drill-down) --- */
.wp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.wp-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px; }
.wp-card h3 { margin: 0 0 8px; font-size: 15px; color: #2a3b4d; }
.wp-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.wp-stat { font-size: 12px; color: #555; }
.wp-stat b { color: #1a1a1a; font-size: 14px; }
.wp-actions { display: flex; gap: 6px; }
.wp-actions button { background: #6c8cb0; color: #fff; border: 0; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.wp-actions button:hover { background: #5a7aa0; }

/* --- OFFENE SPRECHER (unresolved speakers A/A2/B/C/X) --- */
.badge.cat-C { background: #fde2c0; color: #8a4b00; }
.badge.cat-B { background: #d8e6f5; color: #1c4a78; }
.badge.cat-A { background: #e6dcc0; color: #6a5320; }
.badge.cat-A2 { background: #e6e6e6; color: #555; }
.badge.cat-X { background: #fbe0e0; color: #9a2222; }

.ur-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.ur-card { border: 1px solid #e2e2e2; border-radius: 6px; padding: 8px 10px; background: #fafafa; }
.ur-card-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ur-card-n { font-size: 12px; color: #333; font-weight: 600; }
.ur-card-d { font-size: 12px; color: #666; margin-top: 4px; line-height: 1.35; }

.ur-chart { margin: 10px 0 4px; }
.ur-bars { display: flex; flex-direction: column; gap: 5px; }
.ur-bar-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; }
.ur-bar-track { background: #eee; border-radius: 4px; height: 16px; overflow: hidden; }
.ur-bar-fill { display: block; height: 100%; border-radius: 4px; }
.ur-bar-fill.cat-C { background: #e8a35a; }
.ur-bar-fill.cat-B { background: #6c8cb0; }
.ur-bar-fill.cat-A { background: #bba76a; }
.ur-bar-fill.cat-A2 { background: #b8b8b8; }
.ur-bar-fill.cat-X { background: #d98a8a; }
.ur-bar-val { font-size: 12px; color: #555; white-space: nowrap; }

.ur-row { display: flex; align-items: center; gap: 8px; cursor: default; }
.ur-row-main { flex: 1; min-width: 0; }
.ur-toggle, .ur-copy { background: #6c8cb0; color: #fff; border: 0; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.ur-toggle:hover, .ur-copy:hover { background: #5a7aa0; }
.ur-detail { padding: 8px 10px 12px 28px; background: #f7f9fc; border-bottom: 1px solid #eee; }
.ur-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ur-detail h4 { margin: 6px 0 4px; font-size: 12px; color: #444; text-transform: uppercase; letter-spacing: .03em; }
.ur-cands { margin: 0; padding-left: 18px; font-size: 13px; }
.ur-cands code { background: #eef; padding: 0 4px; border-radius: 3px; }
.ur-line { font-size: 12px; color: #555; margin-bottom: 3px; border-left: 2px solid #ccd; padding-left: 6px; }
.ur-sources { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.ur-src { font-size: 12px; color: #555; }
.ur-copy { margin-top: 6px; }
@media (max-width: 640px) { .ur-detail-grid { grid-template-columns: 1fr; } }
/* --- RESULTS BROWSER REDESIGN --- */
:root {
  --app-header-height: 104px;
  --tab-toolbar-height: 48px;
  --overview-jump-height: 46px;
  --overview-period-height: 45px;
}
.site-header {
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 10px rgba(21, 42, 62, .22);
}
.site-title-row { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; }
.site-title-row .global-search { display: none; }
.site-header nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.site-header nav button { flex: 0 0 auto; margin-right: 0; }
.tab-intro { max-width: 88ch; margin-bottom: 12px; }
.tab-intro h2 { margin: 0 0 4px; }
.tab-intro p { margin: 0; }

/* Every result tab keeps its filters in one compact, horizontal sticky row.
   Explanations and diagnostics deliberately follow below instead of competing
   with the navigation at the top of the view. */
.tab-toolbar {
  position: sticky; top: var(--app-header-height); z-index: 35;
  flex-wrap: nowrap; min-height: var(--tab-toolbar-height); overflow-x: auto;
  margin: -16px -16px 14px; padding: 7px 16px;
  background: #f7fbff; border-bottom: 1px solid #c8d7e5;
  box-shadow: 0 3px 7px rgba(29, 60, 88, .12);
}
.tab-toolbar > * { flex: 0 0 auto; white-space: nowrap; }
.tab-toolbar label { display: inline-flex; align-items: center; gap: 5px; }
.tab-toolbar input, .tab-toolbar select { max-width: 260px; padding: 5px 7px; }
.tab-toolbar .search-control input { min-width: 210px; }
.tab-toolbar .muted { margin-left: auto; align-self: center; }
.tab-context { margin: 0 0 14px; }
.tab-context .summary-chips:last-child { margin-bottom: 0; }
.party-intro { max-width: 88ch; }
.party-intro h2 { margin: 0 0 4px; }
.party-intro p { margin: 0; }
.party-list { max-width: 880px; max-height: none; }
.party-row { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.party-row .cnt { min-width: 150px; }

.master-detail { min-height: 420px; }
.master-detail .master-pane { flex: 1.25; min-width: min(500px, 100%); }
.master-detail .detail { flex: 1; top: calc(var(--app-header-height) + var(--tab-toolbar-height) + 12px); }
.result-row {
  width: 100%; border: 0; border-radius: 0; background: #fff; color: inherit;
  font: inherit; text-align: left; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; cursor: pointer;
}
.result-row:hover, .row.selected { background: #e7f0fb; }
.row.selected { box-shadow: inset 3px 0 #356b9d; }
.result-row .sub { overflow-wrap: anywhere; }
.legacy-list, .legacy-detail { display: none !important; }
.quote, blockquote {
  margin: 8px 0; padding: 8px 10px; border-left: 3px solid #91aac3;
  background: #f5f8fb; white-space: pre-wrap;
}
.detail h4 { margin: 16px 0 6px; }
.detail ul { margin: 6px 0; padding-left: 20px; }
.detail button, .filter-chip, .tree-period {
  border: 1px solid #9aafc4; background: #f7fbff; color: #254b6d;
  border-radius: 5px; padding: 6px 9px; font: inherit; cursor: pointer;
}
.detail button:hover, .filter-chip:hover, .tree-period:hover { background: #e2eef9; }
.detail-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.detail-metric { display: flex; justify-content: space-between; gap: 8px; background: #f4f7fa; padding: 6px 8px; border-radius: 4px; }
.summary-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
.filter-chip.active { color: #fff; background: #356b9d; border-color: #356b9d; }

.tree-period {
  display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px;
  text-align: left; border: 0; border-bottom: 1px solid #e5eaf0; border-radius: 0;
  padding: 12px; background: #fff;
}
.tree-session { align-items: center; }
.tree-children { margin: 7px 0 0; padding-left: 18px; color: #657482; font-size: 12px; }
.toc-detail-top { border-top: 1px solid #e5eaf0; padding: 10px 0; }
.toc-detail-top h4 { margin: 0 0 4px; }
.toc-detail-top ul { margin: 4px 0; }

.overview { max-width: 1280px; margin: 0 auto; }
.overview-about, .overview-chart-card, .overview-topic {
  background: #fff; border: 1px solid #dce4eb; border-radius: 9px; padding: 14px; margin-bottom: 14px;
}
.overview-about h2, .overview-chart-card h2 { margin: 0 0 8px; font-size: 18px; color: #213d58; }
.overview-about p { max-width: 96ch; margin: 0 0 10px; }
.overview-exceptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.overview-exceptions h3 { margin: 0 0 5px; font-size: 14px; }
.overview-exceptions ul { margin: 0; padding-left: 19px; }
.overview-warning { margin-top: 12px; padding: 8px 10px; border-left: 4px solid #c98925; background: #fff8e8; }
.overview-warning ul { margin: 4px 0 0; padding-left: 18px; }

.overview-chart-card { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(300px, 1.2fr); gap: 16px; }
.overview-bars { display: flex; align-items: end; gap: 5px; min-height: 150px; overflow-x: auto; padding: 8px 2px 0; }
.overview-bar {
  display: grid; grid-template-rows: 115px auto; gap: 4px; min-width: 34px; flex: 1;
  align-items: end; border: 0; background: transparent; color: #516271; font: 11px system-ui; cursor: pointer;
}
.overview-bar-plot { position: relative; display: block; width: 100%; height: 115px; }
.overview-bar-fill { position: absolute; right: 0; bottom: 0; left: 0; display: block; background: #5c86ad; border-radius: 3px 3px 0 0; }
.overview-bar-value {
  position: absolute; top: 2px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 1px 2px;
  border-radius: 2px; background: rgb(255 255 255 / .84); color: #294966; font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.overview-bar:hover .overview-bar-fill { background: #2b668f; }

.overview-quick-jump {
  position: sticky; top: var(--app-header-height); z-index: 20; height: var(--overview-jump-height);
  box-sizing: border-box; display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; padding: 6px 10px;
  border: 1px solid #c8d7e5; border-radius: 7px; background: #f7fbff; box-shadow: 0 3px 8px rgba(29, 60, 88, .12);
}
.overview-quick-jump-label { flex: 0 0 auto; color: #365b79; font-size: 12px; font-weight: 700; }
.overview-quick-jump-items { display: flex; min-width: 0; gap: 5px; overflow-x: auto; padding: 1px; }
.overview-quick-jump-button {
  flex: 0 0 auto; min-width: 30px; border: 1px solid #9aafc4; border-radius: 4px; padding: 4px 8px;
  background: #fff; color: #254b6d; font: 12px system-ui; font-weight: 600; cursor: pointer;
}
.overview-quick-jump-button:hover { background: #e2eef9; }
.overview-quick-jump-button.active { border-color: #356b9d; background: #356b9d; color: #fff; }
.overview-quick-jump-button:focus-visible { outline: 3px solid #e0a339; outline-offset: 2px; }

.overview-period {
  position: relative; margin: 20px 0 26px;
  scroll-margin-top: calc(var(--app-header-height) + var(--overview-jump-height) + 12px);
}
.overview-level-1 {
  position: sticky; z-index: 10; top: calc(var(--app-header-height) + var(--overview-jump-height));
  margin: 0 0 8px; padding: 9px 12px; color: #fff; background: #2f526f;
  border-radius: 7px; font-size: 18px;
}
.overview-level-2 {
  position: sticky; z-index: 8;
  top: calc(var(--app-header-height) + var(--overview-jump-height) + var(--overview-period-height));
  margin: -2px -2px 8px; padding: 8px 10px; background: #edf4fa;
  border-bottom: 1px solid #c9d8e6; color: #294966; font-size: 15px;
}
.overview-status { margin: 0 0 8px; }
.overview-topic { scroll-margin-top: calc(var(--app-header-height) + 50px); }
.overview-scorecard {
  margin: 0 0 14px; padding: 14px; border: 1px solid #b9cee2; border-radius: 9px; background: #f4f8fc;
}
.overview-scorecard-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.overview-scorecard-head h3 { margin: 0 0 4px; color: #213d58; font-size: 16px; }
.overview-scorecard-head p { max-width: 76ch; margin: 0; color: #536b80; font-size: 12px; }
.overview-data-format {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid #c9d9e8; border-radius: 7px; background: #fff;
}
.overview-data-format-marker {
  display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%;
  background: #dcecf9; color: #24577e; font: 700 9px/1 system-ui; letter-spacing: .04em;
}
.overview-data-format h4 { margin: 0 0 3px; color: #294966; font-size: 13px; }
.overview-data-format p { max-width: 86ch; margin: 0; color: #485f73; font-size: 12px; line-height: 1.45; }
.overview-data-format code { padding: 1px 3px; border-radius: 3px; background: #edf3f8; color: #294966; font-size: .94em; }
.overview-data-format-detail { margin-top: 4px !important; }
.overview-data-format-sources { margin-top: 5px !important; font-size: 11px !important; }
.overview-data-format-sources a { color: #2b668f; font-weight: 650; }
.info-button {
  display: inline-grid; width: 17px; height: 17px; margin-left: 3px; padding: 0; place-items: center; vertical-align: text-bottom;
  border: 1px solid #7893ad; border-radius: 50%; background: #fff; color: #2b5b85; font: 700 11px/1 system-ui; cursor: pointer;
}
.info-button:hover, .info-button:focus-visible { border-color: #2b668f; background: #eaf3fb; color: #173f62; outline: none; }
.overview-help-modal { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid #b9cee2; border-radius: 10px; box-shadow: 0 16px 42px rgb(31 57 82 / .28); color: #2a3d4d; }
.overview-help-modal::backdrop { background: rgb(23 45 65 / .42); }
.overview-help-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 10px; border-bottom: 1px solid #dce4eb; }
.overview-help-modal h2 { margin: 0; color: #213d58; font-size: 16px; }
.overview-help-modal p { margin: 0; padding: 14px 16px 16px; line-height: 1.5; }
.overview-help-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #496174; font: 24px/1 system-ui; cursor: pointer; }
.overview-help-close:hover, .overview-help-close:focus-visible { background: #eaf3fb; color: #173f62; outline: none; }
.overview-build-state { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px 14px; margin: 0; font-size: 11px; }
.overview-build-state div { white-space: nowrap; }
.overview-build-state dt { color: #657482; }
.overview-build-state dd { margin: 1px 0 0; color: #2b4c68; font-weight: 650; }
.overview-build-state .build-state-ok dd { color: #1c6532; }
.overview-build-state .build-state-warning dd { color: #8a5d00; }
.overview-score-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.overview-score-group { min-width: 0; padding: 10px; border: 1px solid #d6e2ed; border-radius: 7px; background: #fff; }
.overview-score-group h4 { margin: 0 0 8px; color: #294966; font-size: 13px; }
.overview-score-group .metric-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.overview-score-group .metric-card { min-height: 65px; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.metric-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  min-height: 72px; padding: 9px; border: 1px solid #dbe4ed; border-radius: 6px; background: #fbfcfe; color: #273747; text-align: left; font: inherit;
}
.metric-card strong { font-size: 18px; color: #193f60; }
.metric-card small { grid-column: 1 / -1; color: #677482; }
.metric-label { font-size: 12px; }
.drill-card { cursor: pointer; }
.drill-card:hover { border-color: #5d88b0; background: #edf5fd; }
.availability { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 99px; vertical-align: middle; }
.availability-available { background: #dff1e2; color: #1c6532; }
.availability-partial { background: #fff0c8; color: #7a5200; }
.availability-unavailable { background: #f8dfdf; color: #963230; }
.availability-unknown { background: #e5e8ec; color: #53606b; }
.availability-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 0 0 12px; color: #465866; font-size: 12px;
}
.availability-legend strong { color: #294966; }
.metric-note { display: block; font-size: 11px; color: #64717c; font-weight: normal; margin-top: 3px; }

.interjection-types { margin: 4px 0 12px; padding: 10px 0; border-bottom: 1px solid #dbe3ea; }
.interjection-audit {
  margin: 0 0 14px; padding: 11px 13px; border: 1px solid #dce4eb;
  border-radius: 7px; background: #fbfcfe;
}
.interjection-audit-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.interjection-audit h3 { margin: 0; color: #213d58; font-size: 15px; }
.interjection-audit-head .muted { margin: 0; }
.interjection-audit-grid { margin-top: 9px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.interjection-audit-grid .metric-card { min-height: 58px; background: #fff; }
.interjection-audit-meta { margin: 9px 0 0; color: #566a79; font-size: 11px; line-height: 1.45; }
.interjection-types h2 { font-size: 15px; margin: 0 0 4px; }
.ij-type-examples {
  max-width: 88ch; margin: 0 0 14px; padding: 11px 13px;
  background: #fff; border: 1px solid #dce4eb; border-radius: 7px;
}
.ij-type-examples h3 { margin: 0 0 4px; font-size: 15px; color: #213d58; }
.ij-type-examples > .muted { margin: 0 0 7px; }
.ij-type-sample-list .ij-sample:last-child { border-bottom: 0; }
.ij-kinds { margin: 6px 0; }
.compact-row { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }

@media (max-width: 820px) {
  .site-title-row { display: block; }
  .split, .master-detail { flex-direction: column; }
  .master-detail .master-pane, .master-detail .detail { width: 100%; min-width: 0; }
  .master-detail .detail { position: static; max-height: none; }
  .list { max-height: 56vh; }
  .overview-quick-jump, .overview-level-1, .overview-level-2 { position: static; }
  .overview-period, .overview-topic { scroll-margin-top: 12px; }
  .overview-chart-card, .overview-exceptions, .overview-score-groups { grid-template-columns: 1fr; }
  .overview-scorecard-head { display: block; }
  .overview-data-format { grid-template-columns: 1fr; }
  .overview-data-format-marker { display: none; }
  .overview-build-state { grid-template-columns: repeat(3, max-content); margin-top: 10px; }
  .tab-toolbar { margin-left: -16px; margin-right: -16px; }
}