/* The 2028 primaries: the US front's band (Views/Usa/_PrimariesBand.cshtml), the hub (PrimariesHub.cshtml), the calendar
   (PrimaryCalendar.cshtml) and each party's forecast (Primary.cshtml). Owner, 2 Nov 2026. */

/* ---- the band on the US front, and the race cards on the hub ---- */
.prb__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 28px; align-items: end; margin-bottom: 12px; }
.prb__title { margin: 2px 0 0; font: var(--head-weight, 700) clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--font-head); }
.prb__title a { color: var(--ink); text-decoration: none; }
.prb__title a:hover { text-decoration: underline; }
.prb__sub { margin: 0; color: var(--muted); font-size: .95rem; }
.prb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prb__card { border: 1px solid var(--hair); border-top: 4px solid var(--pc); padding: 12px 16px 14px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 8px; }
.prb__ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prb__ch h2, .prb__ch h3 { margin: 0; font: 700 1.1rem/1.2 var(--font-ui); }
.prb__ch a { color: var(--pc); text-decoration: none; }
.prb__ch a:hover { text-decoration: underline; }
.prb__when { font: 500 .85rem/1.2 var(--font-ui); color: var(--muted); }
.prb__when b { color: var(--ink); font-variant-numeric: tabular-nums; }
.prb__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prb__rows li { display: grid; grid-template-columns: 34px minmax(0, 1.3fr) minmax(40px, 1fr) 3.2em; align-items: center; gap: 10px; }
.prb__face .avatar { width: 34px; height: 34px; }
.prb__name { font: 600 .95rem/1.2 var(--font-ui); min-width: 0; }
.prb__name a { color: var(--ink); }
.prb__name small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.prb__bar { height: 10px; background: color-mix(in srgb, var(--pc) 12%, transparent); border-radius: 5px; overflow: hidden; }
.prb__bar i { display: block; height: 100%; background: var(--pc); border-radius: 5px; }
.prb__pct { font: 800 1.05rem/1 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }
.prb__ifs, .prb__meta { margin: 0; font-size: .85rem; color: var(--muted); }
.prb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prb__chips a { flex: 1 1 180px; border: 1px solid var(--hair); border-radius: 8px; padding: 6px 10px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.prb__chips a:hover { border-color: var(--pc); }
.prb__chips small { display: block; color: var(--muted); font-size: .75rem; }
.prb__chips b { color: var(--pc); }
.prb__trend { margin: 2px 0 0; }
.prb__trend figcaption { font: 600 .78rem/1.2 var(--font-ui); color: var(--muted); margin-bottom: 2px; }
.prb__go { margin: auto 0 0; }
.prb__btn { display: inline-block; padding: 7px 12px; border-radius: 8px; background: var(--pc); color: #fff !important; font: 600 .88rem/1 var(--font-ui); text-decoration: none; }
.prb__btn:hover { filter: brightness(1.08); }
.prb__links { margin: 10px 0 0; font-size: .9rem; }
.prb--hub { margin: 14px 0 18px; }

/* ---- the trend chart ---- */
.prt { width: 100%; height: auto; display: block; overflow: visible; }
.prt--phone { display: none; }
.prt__grid { stroke: var(--hair); stroke-width: 1; }
.prt__lab { font: 11px var(--font-ui); fill: var(--muted); }
.prt__line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.prt__dot { opacity: .22; }
.prt__end { font: 600 12px var(--font-ui); }
.prt__v { font-weight: 800; }

/* ---- the hub ---- */
.prh-count { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 6px 0 4px; }
.prh-count__i { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hair); padding: 8px 12px; background: var(--surface, #fff); }
.prh-count__i b { font: 800 1.6rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.prh-count__i span { font-size: .85rem; line-height: 1.25; color: var(--muted); }
.prh-count__i--d b { color: #2E6DB4; } .prh-count__i--r b { color: #C8312F; }
.prh-sec .sec-h { margin-bottom: 2px; }
.prh-sub { margin: 0 0 10px; color: var(--muted); font-size: .92rem; max-width: none; }
.prh-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.prh-two--map { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.prh-fig { margin: 0; }
.prh-fig figcaption { font: 600 .9rem/1.2 var(--font-ui); margin-bottom: 6px; }
.prh-more { margin: 10px 0 0; font-size: .92rem; }
.prh-h3 { margin: 14px 0 8px; font: 700 1rem/1.2 var(--font-ui); }

/* the tile map */
.prmap { width: 100%; max-width: 420px; height: auto; display: block; }
.prmap rect { stroke: var(--surface, #fff); stroke-width: 1; }
.prmap a:hover rect { stroke: var(--ink); stroke-width: 2; }
.prmap__none { fill: var(--hair); }
.prmap__t { font: 700 10px var(--font-ui); fill: #2b2340; pointer-events: none; }
.prmap__t.is-dark { fill: #fff; }
.prmap-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 10px 0 0; font-size: .85rem; }
.prmap-key i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--hair); }
.prmap-key small { display: block; margin-left: 19px; color: var(--muted); }
.prmap-key--col { flex-direction: column; gap: 8px; }

/* the road to the nominations */
.prroad { margin: 12px 0 16px; }
.prroad h3 { margin: 0 0 6px; font: 700 1rem/1.25 var(--font-ui); color: var(--pc); }
.prroad h3 small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }
.prroad__bar { position: relative; display: flex; height: 16px; background: var(--hair); border-radius: 8px; overflow: hidden; }
.prroad__seg { display: block; height: 100%; background: var(--pc); border-right: 2px solid var(--surface, #fff); }
.prroad__seg:nth-child(1) { opacity: 1; } .prroad__seg:nth-child(2) { opacity: .8; } .prroad__seg:nth-child(3) { opacity: .6; } .prroad__seg:nth-child(4) { opacity: .45; } .prroad__seg:nth-child(5) { opacity: .3; }
.prroad__need { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.prroad__marks { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.prroad__marks b { display: block; color: var(--ink); font: 800 1rem/1.1 var(--font-ui); }

/* everyone in the polls */
.prwho { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0; margin: 0; }
.prwho li, .prwho a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; color: var(--ink); text-decoration: none; }
.prwho li { border: 1px solid var(--hair); padding: 10px 6px; }
.prwho b { font: 600 .88rem/1.2 var(--font-ui); }
.prwho span { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- the calendar table ---- */
.prcal td, .prcal th { vertical-align: middle; }
.prcal tr.is-early td:first-child { box-shadow: inset 4px 0 0 #3b2a6b; }
.prcal__d { color: #2E6DB4; } .prcal__r { color: #C8312F; }
.prcal__lead { font-size: .85rem; color: var(--muted); }
.prcal tr:target td { background: color-mix(in srgb, #7b52c7 12%, transparent); }

/* ---- a party's forecast: the leaders at a glance ---- */
.prpod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 12px; margin: 14px 0 6px; }
.prpod__i { border: 1px solid var(--hair); padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--surface, #fff); }
.prpod__i.is-first { border-top: 4px solid var(--pc); }
.prpod__face .avatar { width: 72px; height: 72px; }
.prpod__pct { font: 800 1.9rem/1 var(--font-ui); color: var(--pc); font-variant-numeric: tabular-nums; }
.prpod__name { font: 700 1rem/1.2 var(--font-ui); }
.prpod__name a { color: var(--ink); }
.prpod__i small { color: var(--muted); font-size: .8rem; }
.prpod__i--facts { align-items: stretch; text-align: left; justify-content: center; gap: 6px; }
.prpod__i--facts span { font-size: .88rem; color: var(--muted); }
.prpod__i--facts b { color: var(--ink); font: 800 1.05rem/1 var(--font-ui); margin-right: 4px; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .prb__head { grid-template-columns: 1fr; }
  .prb, .prh-two, .prh-two--map { grid-template-columns: 1fr; }
  .prpod { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .prpod__i { padding: 8px 4px; }
  .prpod__face .avatar { width: 48px; height: 48px; }
  .prpod__pct { font-size: 1.4rem; }
  .prpod__name { font-size: .85rem; }
  .prpod__i--facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; padding: 8px 10px; }
  .prroad__marks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prt--wide { display: none; }
  .prt--phone { display: block; }
  .prb__rows li { grid-template-columns: 30px minmax(0, 1fr) 56px 2.8em; gap: 8px; }
  .prb__face .avatar { width: 30px; height: 30px; }
}