/* MaineElectionNight.com — public page styles. Square corners everywhere. */
:root {
  --page: #2a2d33;
  --panel: #ffffff;
  --ink: #111827;
  --mut: #5b6475;
  --line: #d5d9e1;
  --soft: #f3f4f7;
  --D: #1f5fd6;
  --R: #d7263d;
  --U: #d08a12;
  --Dt: #1a52bd;   /* party text colors on white (AA contrast) */
  --Rt: #c21f35;
  --Ut: #8a5700;
  --ocean: #a3aab4;
  --land: #bfc4cc;
  --display: Saira, 'Arial Narrow', sans-serif;
  --body: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.4; }
button { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }

.wrap { max-width: 1600px; margin: 0 auto; padding: 16px 20px 32px; }
.pn { background: var(--panel); padding: 16px; min-width: 0; }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); }
.cD { color: var(--Dt); } .cR { color: var(--Rt); } .cU { color: var(--Ut); }
.seg { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; }
.seg[aria-pressed="true"], .seg[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg:focus-visible, .tile:focus-visible, .chname:focus-visible { outline: 3px solid #f5c84c; outline-offset: 2px; }
.dot { width: 8px; height: 8px; flex: none; }

/* ---------- header ---------- */
.hdr { position: relative; display: flex; align-items: center; min-height: 170px; margin-bottom: 10px; overflow: hidden; }
.hdr-title { flex: none; position: relative; z-index: 1; }
.hdr h1 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 5.4vw, 80px); line-height: .92; letter-spacing: -.005em; color: #f3f4f6; }
.hdr-sub { margin-top: 8px; color: #b7bec9; }
.hdr-light { flex: 0 1 560px; min-width: 0; height: 280px; object-fit: cover; object-position: 30% 30%;
  margin: -60px 0 -50px -70px; pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
.hdr-time { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 10px; padding-left: 16px; position: relative; z-index: 1; color: #f3f4f6; }
.hdr-time .num { font-size: 32px; font-weight: 700; line-height: 1; }
.hdr-dot { width: 10px; height: 10px; background: #ff4d5e; }
.hdr-dot.paused { background: #f5c84c; }
.hdr-dot.pre { background: #9aa3b2; }
.hdr-tz { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #b7bec9; }

/* ---------- staleness banner ---------- */
.stale { background: #f5c84c; color: #1d1a10; padding: 12px 16px; margin-bottom: 14px; font-weight: 700; font-size: 17px;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stale small { font-weight: 500; font-size: 14px; }

.loading { padding: 48px; text-align: center; }

/* ---------- layout ---------- */
main { display: flex; flex-direction: column; gap: 14px; }
.top { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "map races" "map chambers"; grid-template-rows: 1fr auto; }
.mapcard { grid-area: map; display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.racegrid { grid-area: races; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.chambers { grid-area: chambers; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.trend { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1380px) { .trend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- tabs + map ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mapbody { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.mapcol { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rescol { flex: 1 1 280px; min-width: 0; }
.mapbox { position: relative; }
#map { width: 100%; height: auto; display: block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#map .shape { cursor: pointer; }
#map .shape.off { pointer-events: none; }
.hv { position: absolute; left: 0; top: 0; width: 46%; min-width: 150px; max-width: 260px; padding: 10px 12px; background: rgba(255,255,255,.95); border: 1px solid #e1e4ea; }
.hv-name { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.15; }
.hv-where { font-size: 12px; margin-bottom: 6px; }
.hv-row { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; padding: 2px 0; }
.hv-row b { text-align: right; }
.hv-note { font-size: 12px; margin-top: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #3b4352; }
.legend i { width: 12px; height: 12px; border: 1px solid var(--line); display: inline-block; }
.modes { display: flex; gap: 6px; flex-wrap: wrap; }
.modes .seg { min-height: 32px; padding: 4px 10px; font-size: 12px; }

/* ---------- results column ---------- */
.rc { display: flex; flex-direction: column; gap: 14px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-name { font-family: var(--display); font-size: 34px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.05; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 4px 8px; white-space: nowrap; }
.chip-early { background: #eceef2; color: #3b4352; }
.chip-tossup { background: #ebe6f7; color: #4b3a7a; }
.chip-pre { background: #eceef2; color: #3b4352; }
.chip-leans.pD { background: #dbe7fb; color: #123f94; }
.chip-leans.pR { background: #fbdde1; color: #8c1424; }
.chip-leans.pU { background: #fbecd0; color: #6b4300; }
.chip-called.pD { background: var(--D); color: #fff; }
.chip-called.pR { background: var(--R); color: #fff; }
.chip-called.pU { background: var(--U); color: #111827; }
.cand { display: flex; gap: 12px; align-items: center; }
.ph { width: 60px; height: 60px; object-fit: cover; flex: none; background: #eceef2; }
.ph-block { width: 60px; height: 60px; flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; }
.ph-block small { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; margin-top: 3px; text-transform: uppercase; }
.bgD { background: var(--D); } .bgR { background: var(--R); } .bgU { background: var(--U); color: #111827 !important; }
.cand-main { flex: 1; min-width: 0; }
.cand-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cand-name { font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cand-pct { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 10px; background: #eceef2; margin: 4px 0 3px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; }
.bar .half { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #111827; opacity: .35; }
.cand-sub { font-size: 13px; }
.check { display: inline-flex; width: 16px; height: 16px; background: #111827; color: #fff; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.proj { padding: 12px; background: #f6f7f9; }
.proj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.proj-big { font-family: var(--display); font-size: 26px; font-weight: 700; }
.rng { position: relative; height: 24px; margin-top: 4px; }
.rng .ax { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: #e1e4ea; }
.rng .ci { position: absolute; top: 5px; height: 14px; opacity: .3; }
.rng .zero { position: absolute; top: 0; height: 24px; border-left: 1px dashed #5b6475; }
.rng .zero-l { position: absolute; top: -2px; font-size: 10px; font-family: var(--mono); color: var(--mut); transform: translateX(3px); }
.rng .pt { position: absolute; top: 2px; height: 20px; width: 4px; margin-left: -2px; background: #111827; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.stats3 .num { font-size: 22px; font-weight: 700; }
.stats3 .mut { font-size: 12px; }
.rc-note { font-size: 14px; }
.seats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.seats3 .num { font-size: 44px; font-weight: 700; line-height: 1; }
.ctl { display: flex; height: 28px; overflow: hidden; font-size: 13px; font-weight: 700; }
.ctl > div { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.ctl .cD { background: var(--D); color: #fff; padding-left: 8px; }
.ctl .cN { background: var(--line); color: var(--ink); justify-content: center; }
.ctl .cR { background: var(--R); color: #fff; justify-content: flex-end; padding-right: 8px; }

/* regions table */
.regions summary { cursor: pointer; padding: 6px 0; }
.regions table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.regions th, .regions td { padding: 4px 6px; text-align: right; border-bottom: 1px solid #eceef2; white-space: nowrap; }
.regions th:first-child, .regions td:first-child { text-align: left; white-space: normal; }
.regions th { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.regions .tw { overflow-x: auto; }

/* ---------- race tiles ---------- */
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 14px 16px; text-align: left; cursor: pointer; border: 0; min-width: 0; }
.tile.tD { background: #eaf1fd; color: #123f94; } .tile.tR { background: #fdecee; color: #8c1424; } .tile.tU { background: #fdf3e1; color: #6b4300; }
.tile.tD.on { background: #d4e3fb; } .tile.tR.on { background: #fbd5da; } .tile.tU.on { background: #f8e3bd; }
.tile.tN { background: #eef0f3; color: #1f2937; }
.tile.called.tD { background: var(--D); color: #fff; } .tile.called.tR { background: var(--R); color: #fff; } .tile.called.tU { background: var(--U); color: #111827; }
.tile.on { box-shadow: inset 0 -5px 0 currentColor; }
.tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.tile-top .lbl { color: inherit; }
.tile-chip { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 3px 7px; white-space: nowrap; border: 1px solid currentColor; }
.tile.called .tile-chip { background: #fff; border-color: #fff; }
.tile.called.tD .tile-chip { color: #123f94; } .tile.called.tR .tile-chip { color: #8c1424; }
.tile-mid { display: flex; align-items: center; gap: 14px; }
.tile .ph, .tile .ph-block { width: 72px; height: 72px; }
.tile-winner { font-family: var(--display); font-size: 30px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1; overflow-wrap: anywhere; }
.tile-by { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; margin-top: 4px; }
.tile-by .verb { font-size: 15px; font-weight: 600; }
.tile-by .nw { white-space: nowrap; }
.tile-by .num { font-size: 30px; font-weight: 700; line-height: 1; }
.tile-sub { font-size: 13px; }
.tile-trend { font-size: 13px; font-weight: 700; }
.spark { display: block; width: 100%; height: 26px; margin-top: 2px; }

/* ---------- chamber tiles ---------- */
.chamber { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px 16px; }
.chname { padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--display); font-size: 24px; font-weight: 800; font-style: italic; text-transform: uppercase; }
.arc { width: 100%; height: auto; display: block; }
.seatline { display: flex; justify-content: center; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.seatline .num { font-size: 24px; font-weight: 600; }
.small { font-size: 12px; }

/* ---------- trend tiles ---------- */
.tt { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.tt-big { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tt-big.tt-long { font-size: 22px; overflow-wrap: break-word; }
.tt-bar { position: relative; height: 8px; background: #eceef2; margin: 2px 0; }
.tt-bar .band { position: absolute; top: 0; bottom: 0; }
.tt-bar .mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: #111827; }
.tt-text { font-size: 13px; line-height: 1.35; }

.foot { margin-top: 18px; font-size: 12px; color: #c3c9d2; }
.foot p { margin: 0 0 6px; max-width: 900px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "races" "map" "chambers"; grid-template-rows: auto; }
}
@media (max-width: 900px) {
  .wrap { padding: 10px 12px 24px; }
  .hdr { min-height: 0; padding: 14px 0 12px; align-items: flex-start; }
  .hdr-light { position: absolute; right: 0; top: -30px; height: 190px; width: 380px; margin: 0; opacity: .8; }
  .hdr-time { align-self: flex-start; }
  .hdr-time .num { font-size: 22px; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .hdr { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hdr-time { margin-left: 0; padding-left: 0; }
  .hdr-light { left: 120px; right: auto; top: -24px; width: 320px; height: 170px; }
  .racegrid, .chambers { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tabs .seg { padding: 6px 9px; font-size: 12px; }
  .hv { position: static; width: auto; max-width: none; min-width: 0; margin-top: 6px; }
  .rc-name { font-size: 28px; }
  .tile-winner { font-size: 26px; }
  .trend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tt { padding: 12px; }
  .tt-big { font-size: 24px; }
  .stale { font-size: 15px; }
}
@media (max-width: 360px) {
  .trend { grid-template-columns: minmax(0, 1fr); }
}