/* Kan News brand (SimplerPro, Kan orange, Kan grays) with a US-election layer: flag navy and red, stars and stripes.
   Data colours stay D blue / R red; Kan orange marks the brand and "live", never a party. */
@font-face { font-family: "SimplerPro"; src: url("brand/fonts/SimplerPro-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SimplerPro"; src: url("brand/fonts/SimplerPro-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SimplerPro"; src: url("brand/fonts/SimplerPro-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
:root {
  --kan: #ff3300; --kan-text: #d92b00; --navy: #0a1f44; --flag-red: #b31942;
  --paper: #f4f4f4; --card: #ffffff; --ink: #000000; --ink-2: #404040; --ink-3: #6b6b6b; --rule: #dedede;
  --dem: #1d4fc4; --dem-soft: #e4ebfa; --dem-pale: #a8bde9;
  --rep: #c8102e; --rep-soft: #fae3e6; --rep-pale: #eba6b0;
  --ind: #6b6680; --ind-soft: #ecebf2;
  --open: #d9d9d9; --now: #ff3300; --now-soft: #ffe9e2; --yes: #16794a; --yes-soft: #e0f2e8;
  --f-ui: "SimplerPro", "Arial Hebrew", Arial, sans-serif;
  --f-num: "SimplerPro", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1424; --card: #141c2e; --ink: #f4f4f4; --ink-2: #c4c8d2; --ink-3: #8d94a5; --rule: #283247;
    --dem: #6f9bf0; --dem-soft: #1a2a4d; --dem-pale: #33508a; --rep: #f0697d; --rep-soft: #3d1a22; --rep-pale: #7d3343;
    --ind: #aaa5c6; --ind-soft: #2a2838; --open: #344057; --now: #ff5a2e; --now-soft: #3a1d14; --yes: #4cc98a; --yes-soft: #12301f; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1424; --card: #141c2e; --ink: #f4f4f4; --ink-2: #c4c8d2; --ink-3: #8d94a5; --rule: #283247;
  --dem: #6f9bf0; --dem-soft: #1a2a4d; --dem-pale: #33508a; --rep: #f0697d; --rep-soft: #3d1a22; --rep-pale: #7d3343;
  --ind: #aaa5c6; --ind-soft: #2a2838; --open: #344057; --now: #ff5a2e; --now-soft: #3a1d14; --yes: #4cc98a; --yes-soft: #12301f; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 16px; line-height: 1.55; direction: rtl; -webkit-text-size-adjust: 100%; }
body.embed { background: transparent; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 22px; font-weight: 900; line-height: 1.2; letter-spacing: -.005em; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 700; }
a { color: inherit; text-underline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; color: var(--ink-3); }

/* ---------- block shell ---------- */
.block { container-type: inline-size; position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 18px 12px; display: grid; gap: 12px; }
/* Stripes along the top edge: flag red and white, with a navy canton on the start side. */
.block::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(to left, var(--navy) 0 64px, transparent 64px), repeating-linear-gradient(to bottom, var(--flag-red) 0 2px, #fff 2px 4px); }
.eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--kan-text); letter-spacing: .02em; margin-bottom: -6px; }
.eyebrow .stars { color: var(--navy); letter-spacing: 2px; font-size: 10px; }
:root[data-theme="dark"] .eyebrow .stars { color: var(--ink-2); }
body.embed .block { border-radius: 10px; }
.bhead { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.stamp { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 8px; }
.stamp img { height: 18px; width: auto; flex: none; }
.need { font-size: 15px; }
.need b { font-weight: 700; }
.lede { font-size: 15px; color: var(--ink-2); }
.kicker { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }

.chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--paper); color: var(--ink-2); }
.chip.live { background: var(--now-soft); color: var(--kan-text); }
.chip.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--now); margin-inline-end: 6px; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) { .chip.live::before { animation: pulse 1.6s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .25; } }
.chip.wait { background: var(--paper); color: var(--ink-2); }
.chip.win { color: #fff; font-weight: 700; }
.chip.win.d { background: var(--dem); } .chip.win.r { background: var(--rep); } .chip.win.i { background: var(--ind); }
.chip.win.y { background: var(--yes); } .chip.win.n { background: var(--ink-2); color: var(--card); }
.chip.win.auto { background: var(--card); border: 2px solid; padding: 1px 8px; }
.chip.win.auto.d { color: var(--dem); } .chip.win.auto.r { color: var(--rep); } .chip.win.auto.i { color: var(--ind); }
.chip.win.auto .picon { color: currentColor; }

/* ---------- tallies ---------- */
.tally { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 12px; }
.block > * { min-width: 0; }
.tentline { font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--paper); border-radius: 6px; padding: 4px 8px; }
.notcalled { color: var(--ink); }
.deskok { background: var(--yes); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.dot.tent { border-style: dashed; border-color: var(--ink); }
.side { display: flex; align-items: baseline; gap: 8px; }
.side strong { font-family: var(--f-num); font-size: 52px; font-weight: 900; line-height: .85; letter-spacing: -.02em; }
.side span { font-size: 14px; color: var(--ink-2); }
.side.d strong { color: var(--dem); } .side.r strong { color: var(--rep); } .side.i strong { color: var(--ind); font-size: 30px; }

/* 100 seats: 5 rows x 20 on phones, 2 x 50 when there is room. Column-major, so the middle column is seat 50. */
.seats { position: relative; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-top: 18px; }
@container (min-width: 600px) { .seats { grid-template-rows: repeat(2, auto); grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 2px; } }
.seats i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--open); }
.seats i.d, .legend i.d { background: var(--dem); }
.seats i.dn, .legend i.dn { background: var(--dem-pale); }
.seats i.r { background: var(--rep); }
.seats i.rn { background: var(--rep-pale); }
.seats i.i { background: var(--ind); }
/* Automatic calls (one outside source so far): striped, not solid. */
.seats i.auto, .legend i.auto { background: repeating-linear-gradient(135deg, var(--dem) 0 2px, var(--dem-pale) 2px 4px); }
.seats i.r.auto { background: repeating-linear-gradient(135deg, var(--rep) 0 2px, var(--rep-pale) 2px 4px); }
.seats i.i.auto { background: repeating-linear-gradient(135deg, var(--ind) 0 2px, var(--ind-soft) 2px 4px); }
.legend i.o { background: var(--open); }
.legend i.rn { background: var(--rep-pale); }
@media (prefers-reduced-motion: no-preference) { .seats i { transition: background-color .4s ease; } }
.line51 { position: absolute; top: -18px; bottom: -4px; right: 50%; width: 0; border-right: 2px solid var(--ink); }
.line51 span { position: absolute; top: -2px; right: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.hbar { position: relative; display: flex; height: 22px; border-radius: 4px; background: var(--open); margin-top: 18px; }
.hbar i { display: block; height: 100%; }
.hbar i.d { background: var(--dem); border-radius: 0 4px 4px 0; }
.hbar i.r { background: var(--rep); margin-right: auto; border-radius: 4px 0 0 4px; }
.hbar .line51 { right: 50.1%; }
@media (prefers-reduced-motion: no-preference) { .hbar i { transition: width .5s ease; } }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; }

/* ---------- race cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.card { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; border-top: 4px solid var(--open); }
.card.called.d { border-top-color: var(--dem); } .card.called.r { border-top-color: var(--rep); } .card.called.i { border-top-color: var(--ind); }
.card.called.y { border-top-color: var(--yes); }
.card.called.auto { border-top-style: dashed; }
.callnote.auto { color: var(--ink); font-weight: 700; font-size: 14px; background: var(--paper); border-radius: 6px; padding: 4px 8px; } .card.called.n { border-top-color: var(--ink-2); }
.chead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sub { font-size: 12px; color: var(--ink-3); }
.q { font-size: 14px; color: var(--ink-2); }
.cands { display: grid; gap: 7px; }
.cand { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "tag name pct" "track track track"; column-gap: 8px; row-gap: 3px; align-items: center; font-size: 15px; }
.cand .tag { grid-area: tag; font-size: 11px; font-weight: 700; text-align: center; border-radius: 3px; padding: 1px 0; }
.cand .name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand .pct { grid-area: pct; font-weight: 500; }
.cand .track { grid-area: track; height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.cand .fill { display: block; height: 100%; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .cand .fill { transition: width .6s ease; } }
.tag.D, .fill.D { background: var(--dem-soft); color: var(--dem); } .fill.D { background: var(--dem); }
.tag.R { background: var(--rep-soft); color: var(--rep); } .fill.R { background: var(--rep); }
.tag.I { background: var(--ind-soft); color: var(--ind); } .fill.I { background: var(--ind); }
.tag.Y { background: var(--yes-soft); color: var(--yes); } .fill.Y { background: var(--yes); }
.tag.N { background: var(--paper); color: var(--ink-2); } .fill.N { background: var(--ink-3); }
.cand.won .name { font-weight: 700; }
.cand .check { color: var(--ink); font-weight: 900; }
.cand.lost { color: var(--ink-3); }
.cand.lost .fill { opacity: .45; }
.count { font-size: 13px; color: var(--ink-2); }
.callnote { font-size: 12px; color: var(--ink-3); }
.poll, .why { font-size: 14px; color: var(--ink-2); }
.il { font-size: 14px; background: var(--paper); border-radius: 6px; padding: 8px 10px; }
.block.one .card { border: 0; border-radius: 0; padding: 0; }

/* ---------- Israel meter ---------- */
.dots { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-2); }
.dot.in { background: var(--ink); border-color: var(--ink); }
.dot.out { border-style: dashed; border-color: var(--ink-3); }
.mrows { display: grid; gap: 10px; }
.mrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; }
.mrow .st { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.st.wait { background: var(--paper); color: var(--ink-2); } .st.in { background: var(--ink); color: var(--card); } .st.out { background: var(--paper); color: var(--ink-3); text-decoration: line-through; }

/* ---------- timeline ---------- */
.trows { display: grid; }
.trow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.trow:first-child { border-top: 0; }
.trow .hr { font-weight: 700; font-size: 16px; }
.trow small { display: block; font-size: 13px; color: var(--ink-3); }
.trow.now { background: var(--now-soft); margin-inline: -18px; padding-inline: 18px; }
.trow.now .hr { color: var(--now); }
.trow.past { color: var(--ink-3); }

/* ---------- other races ---------- */
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 6px; }
.mini { display: grid; gap: 1px; font-size: 14px; border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; border-inline-start: 4px solid var(--open); }
/* A called race takes its winner's colour, so the board fills in red and blue through the night. */
.mini.called { color: #fff; border-color: transparent; }
.mini.called.d { background: var(--dem); } .mini.called.r { background: var(--rep); } .mini.called.i { background: var(--ind); }
.mini.called .who, .mini.called .small { color: rgba(255, 255, 255, .85); }
.mini.called .picon { color: #fff; }
.mini.called.auto { color: var(--ink); border: 2px solid; }
.mini.called.auto.d { background: var(--dem-soft); border-color: var(--dem); } .mini.called.auto.r { background: var(--rep-soft); border-color: var(--rep); } .mini.called.auto.i { background: var(--ind-soft); border-color: var(--ind); }
.mini.called.auto .who, .mini.called.auto .small { color: var(--ink-2); }
.mini.called.auto.d .picon { color: var(--dem); } .mini.called.auto.r .picon { color: var(--rep); }
.mini .st { font-weight: 700; }
.mini .who { color: var(--ink-2); font-size: 13px; }

@media (max-width: 420px) {
  .block { padding: 14px 14px 10px; }
  .side.i { order: 3; flex-basis: 100%; }
  .side span { font-size: 12px; }
  .side strong { font-size: 36px; }
  .trow.now { margin-inline: -14px; padding-inline: 14px; }
}

/* ---------- party animals ---------- */
.picon { display: inline-block; width: 1.35em; height: 1.08em; vertical-align: -0.16em; flex: none; }
.picon.D { color: var(--dem); } .picon.R { color: var(--rep); }
.picon.big { width: 46px; height: 37px; align-self: center; }
.side { align-items: center; }
.chip.win .picon { color: #fff; margin-inline-end: 6px; }
.cand .tag .picon { width: 16px; height: 13px; vertical-align: -2px; }
.mini .who .picon { margin-inline-end: 4px; }
.cand .check { color: var(--kan); }
@media (max-width: 420px) { .picon.big { width: 36px; height: 29px; } }

/* ---------- candidate photos ---------- */
.av { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cand .tag.ph { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: none; border: 2px solid var(--open); box-sizing: border-box; }
.cand .tag.ph.D { border-color: var(--dem); } .cand .tag.ph.R { border-color: var(--rep); } .cand .tag.ph.I { border-color: var(--ind); }
.cand { grid-template-columns: 34px minmax(0, 1fr) auto; }
.cand.lost .tag.ph img { filter: grayscale(1); opacity: .6; }
.mtext { display: flex; gap: 8px; align-items: flex-start; }
.mav { width: 40px; height: 40px; flex: none; border: 2px solid var(--dem); }
.mav-icon { width: 34px; height: 28px; flex: none; color: var(--dem); }
.bav { width: 56px; height: 56px; border: 3px solid var(--open); flex: none; }
.bav.D { border-color: var(--dem); } .bav.R { border-color: var(--rep); } .bav.I { border-color: var(--ind); }
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.credits li { display: flex; gap: 8px; align-items: center; }
.credits img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- live feel ---------- */
/* A race called in the last 90 seconds pulses, so the eye finds what changed. */
@media (prefers-reduced-motion: no-preference) {
  .just { animation: justcalled 1.4s ease-in-out 4; }
}
@keyframes justcalled { 50% { box-shadow: 0 0 0 4px var(--kan); } }
.stale { position: sticky; top: 0; z-index: 50; background: var(--rep); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 14px; text-align: center; }
.block.ticker { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; }
.tnow { background: var(--kan); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; flex: none; }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.tlist li { border-inline-start: 4px solid var(--open); padding-inline-start: 8px; }
.tlist li.d { border-color: var(--dem); } .tlist li.r { border-color: var(--rep); } .tlist li.i { border-color: var(--ind); }
.tlist li.auto { border-inline-start-style: dashed; }
.tlist li .picon { margin-inline-end: 4px; }
.block.ticker::before { display: none; }

/* ---------- tile map ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 3px; max-width: 600px; margin: 4px auto 0; width: 100%; }
.tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: clamp(8px, 2.4vw, 13px); font-weight: 700; text-decoration: none; color: var(--ink-3); background: var(--paper); }
.tile.none { color: var(--rule); background: transparent; border: 1px solid var(--paper); }
.tile.open { background: var(--open); color: var(--ink-2); }
.tile.open.counting { background: var(--open); box-shadow: inset 0 -4px 0 var(--kan); }
.tile.d { background: var(--dem); color: #fff; } .tile.r { background: var(--rep); color: #fff; } .tile.i { background: var(--ind); color: #fff; }
.tile.auto.d { background: repeating-linear-gradient(135deg, var(--dem) 0 3px, var(--dem-pale) 3px 6px); }
.tile.auto.r { background: repeating-linear-gradient(135deg, var(--rep) 0 3px, var(--rep-pale) 3px 6px); }
.tile.auto.i { background: repeating-linear-gradient(135deg, var(--ind) 0 3px, var(--ind-soft) 3px 6px); }
.tile.split { background: var(--card); border: 2px dashed var(--ink-2); color: var(--ink); }
.tile.key { outline: 2px solid var(--ink); outline-offset: 1px; }
a.tile:hover { filter: brightness(1.1); }
.legend i.tile-d { background: var(--dem); } .legend i.tile-r { background: var(--rep); } .legend i.tile-open { background: var(--open); }
.legend i.tile-auto { background: repeating-linear-gradient(135deg, var(--dem) 0 2px, var(--dem-pale) 2px 4px); }
.legend i.tile-key { background: var(--open); outline: 2px solid var(--ink); }
.legend i.tile-none { background: transparent; border: 1px solid var(--rule); }

/* ---------- public radar ---------- */
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 520px; overflow-y: auto; }
.ritem { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; padding: 6px 8px; border-radius: 6px; border-inline-start: 4px solid var(--open); background: var(--paper); }
.ritem.d { border-inline-start-color: var(--dem); } .ritem.r { border-inline-start-color: var(--rep); } .ritem.i { border-inline-start-color: var(--ind); }
.ritem.maybe { border-inline-start-style: dashed; opacity: .85; }
.ritem a { margin-inline-start: auto; font-size: 12px; }

/* ---------- news feed (public block and desk page) ---------- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; }
.post { border-top: 1px solid var(--rule); padding: 8px 0; }
.post.hot .ptext { font-weight: 700; }
.post.hot { border-inline-start: 3px solid var(--kan); padding-inline-start: 8px; }
.pmeta { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.pmeta a { margin-inline-start: auto; font-size: 12px; }
.ptext { font-size: 14px; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.plink { display: block; font-size: 12px; color: var(--ink-2); text-align: left; overflow-wrap: anywhere; }
.block.feed .posts { max-height: 720px; overflow-y: auto; }