/* Capitol Hill Index — shared styles. Light theme only, white page. */
:root {
  --bg: #ffffff;
  --ink: #15181c;
  --ink2: #3b4148;
  --muted: #6a727b;
  --line: #e3e6ea;
  --soft: #f5f6f8;
  --brand: #15181c;
  --d: #1f5fbf;
  --r: #c62f2a;
  --i: #6b4ea0;
  --ok: #1d7a45;
  --warn: #9a6400;
  --bad: #b3202a;
  --safe-d: #1f5fbf; --likely-d: #5d8fd8; --lean-d: #a8c3ec;
  --tossup: #c9c9c9;
  --lean-r: #f1b1aa; --likely-r: #e16b60; --safe-r: #c62f2a;
  --font: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px }
a:hover { text-decoration-color: currentColor }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--d); outline-offset: 2px }
img { max-width: 100% }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* header */
.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 20 }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 56px }
.brand { font-weight: 800; font-size: 18px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 8px }
.brand img { display: block; flex: none }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0 }
.nav::-webkit-scrollbar { display: none }
.nav a { text-decoration: none; padding: 6px 10px; border-radius: 4px; font-size: 14.5px; font-weight: 500; color: var(--ink2); white-space: nowrap }
.nav a:hover { background: var(--soft); color: var(--ink) }
.nav a[aria-current=page] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0 }
.acct { font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; white-space: nowrap }
.acct:hover { border-color: var(--ink2) }
@media (max-width: 720px) {
  .top .wrap { flex-wrap: wrap; gap: 4px 12px; padding-block: 8px }
  .nav { order: 3; flex-basis: 100%; margin-inline: -10px }
  .acct { margin-left: auto }
}

/* page */
main { padding-block: 28px 56px }
#quiz, #game, #play { scroll-margin-top: 120px }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 }
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em }
h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em }
h3 { font-size: 17px; font-weight: 700 }
p { margin: 0 0 12px; max-width: 70ch }
.lede { font-size: 18px; color: var(--ink2); max-width: 64ch; margin-top: 8px }
.muted { color: var(--muted) }
.small { font-size: 13.5px }
.tiny { font-size: 12px }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand) }
.section { margin-top: 40px }
.section > h2 { margin-bottom: 12px }
.rule { border: 0; border-top: 1px solid var(--line); margin: 28px 0 }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px }
.stack { display: grid; gap: 12px }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center }

/* party + rating */
.D { color: var(--d) } .R { color: var(--r) } .I { color: var(--i) }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); white-space: nowrap }
.rate { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12.5px; font-weight: 700; white-space: nowrap }
.rate.safe-d { background: var(--safe-d); color: #fff } .rate.likely-d { background: var(--likely-d); color: #fff } .rate.lean-d { background: var(--lean-d); color: #10305f }
.rate.tossup { background: var(--tossup); color: #222 }
.rate.lean-r { background: var(--lean-r); color: #5f1410 } .rate.likely-r { background: var(--likely-r); color: #fff } .rate.safe-r { background: var(--safe-r); color: #fff }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor }

/* controls */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); margin: 18px 0 0 }
.filters label { display: grid; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.filters input, .filters select, .input { padding: 7px 9px; border: 1px solid #cfd4da; border-radius: 4px; background: #fff; min-width: 0; color: var(--ink) }
.filters input[type=search] { width: 220px; max-width: 100% }
.count { margin-left: auto; font-size: 14px; color: var(--muted) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 4px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none }
.btn:hover { background: #000 }
.btn.ghost { background: #fff; color: var(--ink); border-color: #cfd4da }
.btn.ghost:hover { border-color: var(--ink) }
.btn:disabled { opacity: .5; cursor: default }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; margin-top: 18px }
.tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--brand) }

/* tables */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
table.data { border-collapse: collapse; width: 100%; font-size: 14px }
table.data th, table.data td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle }
table.data th { font-size: 12.5px; font-weight: 700; color: var(--ink2); background: #fff; position: sticky; top: 0; z-index: 1 }
table.data th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer }
table.data th[aria-sort=ascending] button::after { content: " \25B2"; font-size: 9px }
table.data th[aria-sort=descending] button::after { content: " \25BC"; font-size: 9px }
table.data .n { text-align: right }
table.data tbody tr:hover td { background: var(--soft) }
table.data tr.click { cursor: pointer }
.blank { color: #a3a9b0 }

/* cards / panels */
.panel { border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; background: #fff }
.stat { display: grid; gap: 2px }
.stat b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1 }
.stat span { font-size: 12.5px; color: var(--muted); font-weight: 600 }

/* drawer */
.shade { position: fixed; inset: 0; background: rgba(15, 18, 22, .35); z-index: 40 }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #fff; z-index: 41; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) 20px;
  border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,.06) }
.drawer .close { float: right }
dl.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 14.5px }
dl.facts dt { color: var(--muted) } dl.facts dd { margin: 0; text-align: right }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 22px 32px; font-size: 13px; color: var(--muted) }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 14px }
.foot a { text-decoration: none } .foot a:hover { text-decoration: underline }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 14px; z-index: 60 }

@media (prefers-reduced-motion: no-preference) { .drawer { animation: slidein .16s ease-out } @keyframes slidein { from { transform: translateX(20px); opacity: .7 } } }

.qshort { display: none }
@media (max-width: 560px) { .qfull { display: none } .qshort { display: inline } }

/* candidate headshots */
.face { display: inline-block; flex: none; object-fit: cover; border-radius: 4px; background: #eceef1; vertical-align: middle }
.face.none { display: inline-grid; place-items: center; color: #7a828b; font-weight: 700; letter-spacing: .02em }
.who { display: inline-flex; align-items: center; gap: 8px }
.pair { display: grid; gap: 6px }
.pair > div { min-height: 32px; display: flex; align-items: center; justify-content: inherit }
td.n .pair > div { justify-content: flex-end }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px }
.duel .side { display: flex; gap: 10px; align-items: flex-start }
.duel .big { font-size: 26px; font-weight: 800; line-height: 1.1 }
.duel .credit { margin-top: 4px; overflow-wrap: anywhere }
@media (max-width: 560px) { .duel { grid-template-columns: 1fr } }