/* The 2026 Cheesecake Index: Roll Call newsroom style (navy masthead, Georgia headlines,
   tabular figures) with a cheesecake twist (cream + graham-cracker accents). */
:root {
  --ink: #1b1f24;
  --ink-secondary: #4a525c;
  --ink-muted: #6b737d;
  --rule: #dcdad5;
  --surface: #fcfbf7;
  --surface-raised: #ffffff;
  --masthead: #0f1f36;
  --accent: #0f1f36;
  --cream: #f6efe0;
  --cream-deep: #efe3c8;
  --graham: #c8a165;
  --graham-dark: #8a6a3a;
  --dem: #2a5fa8;
  --gop: #c4363b;
  --ind: #8a8f96;
  --oth: #c9a227;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 15px/1.45 var(--sans); }
a { color: var(--dem); }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font-family: inherit; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--graham); outline-offset: 2px; }

/* Masthead */
.masthead { background: var(--masthead); color: #e8edf4; border-bottom: 4px solid var(--graham); }
.masthead-inner { max-width: 1280px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.masthead-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.masthead-logo img { display: block; width: auto; }
.masthead-logo-primary { height: 26px; }
/* Factba.se mark sits 35% smaller than the Roll Call mark. */
.masthead-logo-secondary { height: 16.9px; }
.masthead-title { font: 600 18px/1.2 var(--serif); padding-left: 18px; border-left: 1px solid rgba(232, 237, 244, .3); }
.masthead-status { margin-left: auto; font-size: 13px; color: #b9c3d1; }
.masthead-status a { color: #e8edf4; }

/* Hero */
.hero { background: var(--cream); border-bottom: 1px solid var(--cream-deep);
  background-image: linear-gradient(180deg, var(--cream) 0%, var(--cream) 88%, var(--cream-deep) 100%); }
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 22px 20px 18px; display: flex; align-items: center; gap: 24px; }
/* Cheesecake Factory logo reads as the last word of the subhead: sized to the text, sitting on the baseline. */
.hero-subtitle-nowrap { white-space: nowrap; }
.hero-subtitle-logo { height: 1.45em; width: auto; vertical-align: -0.38em; margin-left: 2px; }
.hero-title { font: 700 40px/1.1 var(--serif); margin: 0 0 6px; letter-spacing: -.01em; }
.hero-subtitle { font: italic 18px/1.35 var(--serif); margin: 0 0 8px; color: var(--ink-secondary); }
.hero-byline { margin: 0; font: 600 14px/1.4 var(--sans); color: var(--ink); }
.hero-dyad { margin: 0 0 8px; font: 13px/1.4 var(--sans); color: var(--ink-secondary); }
.hero-meta { margin: 0; font-size: 13px; color: var(--graham-dark); font-variant-numeric: tabular-nums; }
.hero-headline { margin: 8px 0 0; font: 600 15px/1.4 var(--serif); }

.page { max-width: 1280px; margin: 0 auto; padding: 16px 20px 32px; }
.section-heading { font: 700 20px/1.2 var(--serif); margin: 0 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.side-heading { font: 700 16px/1.2 var(--serif); margin: 0 0 6px; }

/* Index bars */
.index-section { margin-bottom: 14px; }
.index-bars { display: flex; flex-direction: column; gap: 4px; }
.index-row { display: grid; grid-template-columns: 88px 58px 1fr 58px 64px 220px; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 6px;
  cursor: pointer; text-align: left; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.index-row:hover { border-color: var(--graham); background: #fffdf8; }
.index-row.is-active { border-color: var(--graham); background: var(--cream); box-shadow: inset 4px 0 0 var(--graham); }
.index-row-label { font: 700 15px var(--serif); }
.index-row-votes { font-weight: 600; font-size: 13px; }
.index-row-votes.party-text-R { text-align: left; }
.index-row-votes.party-text-D { text-align: right; }
.party-text-D { color: var(--dem); }
.party-text-R { color: var(--gop); }
.index-bar { position: relative; display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: #ecebe8; }
.index-bar-segment { height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; min-width: 0; }
.index-bar-segment.party-I, .index-bar-segment.party-O { color: transparent; }
.index-bar-midline { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .55; transform: translateX(-1px); }
.index-bar-empty { font-size: 12px; color: var(--ink-muted); padding: 2px 8px; }
.index-row-margin { font-weight: 700; text-align: center; }
.index-row-margin.lean-D { color: var(--dem); }
.index-row-margin.lean-R { color: var(--gop); }
.index-row-meta { font-size: 12px; color: var(--ink-muted); }
.index-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-secondary); padding: 4px 2px 0; flex-wrap: wrap; }
.index-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* View tabs */
.view-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; flex-wrap: wrap; }
.view-tab { font: 600 16px var(--serif); background: none; border: 0; padding: 12px 16px 10px; color: var(--ink-secondary);
  cursor: pointer; border-bottom: 3px solid transparent; }
.view-tab:hover { color: var(--ink); }
/* Methodology: styled like a tab, but a link to a separate page (arrow = opens new page). */
.view-tab-link { font: 600 16px var(--serif); padding: 12px 16px 10px; color: var(--ink-secondary); text-decoration: none;
  border-bottom: 3px solid transparent; }
.view-tab-link:hover { color: var(--ink); }
.view-tab-link-arrow { font-size: .85em; color: var(--graham-dark); }
.view-tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--graham); }
.view-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.location-picker { font: 14px var(--sans); padding: 6px 8px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; max-width: 240px; }
.clear-selection { font-size: 13px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--cream); cursor: pointer; }

/* Main grid */
.main-grid { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 20px; align-items: start; }
.map-panel { position: relative; aspect-ratio: 8 / 5; min-height: 0; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.map-panel svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-panel .map-fallback { position: absolute; inset: 0; overflow-y: auto; }
.drilldown-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--rule); border-top: 4px solid var(--graham); border-radius: 6px; padding: 14px 16px; }
.drilldown-panel h3 { font: 700 18px/1.2 var(--serif); margin: 0 0 8px; }

/* Off-map + chips */
.off-map { margin-top: 12px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--cream-deep); border-radius: 6px; }
.off-map p { margin: 0 0 8px; }
.chip { display: inline-block; margin: 2px 2px; padding: 3px 9px; font-size: 13px; border: 1px solid var(--graham); border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer; }
.chip:hover, .chip.is-active { background: var(--graham); color: #fff; }
.chip-small { font-size: 12px; padding: 1px 7px; }
.link-button { background: none; border: 0; padding: 0; color: var(--dem); cursor: pointer; font: inherit; text-align: left; }
.link-button:hover { text-decoration: underline; }

/* Fallbacks (only shown if map/drilldown modules are missing) */
.map-fallback { padding: 14px; }
.map-fallback-state { margin: 4px 0; }
.map-fallback-state strong { display: inline-block; width: 32px; font-family: var(--serif); }
.superlative-list { list-style: none; margin: 0; padding: 0; }
.superlative-list li { padding: 8px 0; border-bottom: 1px dashed var(--rule); }

/* Data Kitchen Notes */
.audit-notes { margin-top: 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface-raised); }
.audit-notes details > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.audit-notes details > summary::-webkit-details-marker { display: none; }
.audit-notes details > summary .section-heading { margin: 0; }
.audit-notes details > summary .section-heading::before { content: '\25B8'; color: var(--graham); margin-right: 8px; }
.audit-notes details[open] > summary .section-heading::before { content: '\25BE'; }
.audit-list { list-style: none; margin: 0; padding: 0 16px 14px; }
.audit-item { padding: 7px 0; border-top: 1px solid #eeece7; font-size: 14px; }
.audit-type { font-weight: 600; text-transform: capitalize; margin-right: 4px; }
.severity { display: inline-block; min-width: 58px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; margin-right: 6px; }
.severity-high { background: #fde8e6; color: #7a1f1a; }
.severity-medium { background: #fff2c2; color: #5c4400; }
.severity-low { background: #e7eef8; color: #1d3f72; }
.severity-info { background: #efefec; color: var(--ink-secondary); }

/* Disclaimer */
.disclaimer { margin-top: 24px; padding: 16px 18px; background: var(--cream); border: 1px dashed var(--graham); border-radius: 6px;
  font-size: 13px; color: var(--ink-secondary); }
.disclaimer p { margin: 0 0 8px; }
.disclaimer p:last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 1100px) {
  .index-row { grid-template-columns: 80px 52px 1fr 52px 60px; }
  .index-row-meta { grid-column: 1 / -1; padding-left: 2px; }
}
@media (max-width: 900px) {
  .main-grid { grid-template-columns: 1fr; }
  .drilldown-panel { position: static; max-height: none; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-title { font-size: 30px; }
  .view-tools { margin-left: 0; width: 100%; }
  .location-picker { flex: 1; max-width: none; }
  .map-panel { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .index-row { grid-template-columns: 78px 1fr 56px; gap: 8px; }
  .index-row-votes { display: none; }
  .view-tab, .view-tab-link { padding: 10px 8px 8px; font-size: 14px; }
  .masthead-status { margin-left: 0; }
}