/* 2028 presidential election pages (us_site/president_2028.py) and the
   candidate pages (us_site/candidates.py). Prefix p28-, tokens only.
   Party colours are the US party tokens; in dark mode they are lifted towards
   the text colour so the blue and red read on the slate ground. */
body.ps-site {
    --p28-rep: var(--pc-party-rep);
    --p28-dem: var(--pc-party-dem);
    --p28-ind: var(--pc-party-usind);
}
body.ps-site.dark-mode {
    --p28-rep: color-mix(in srgb, var(--pc-party-rep) 72%, var(--pc-text));
    --p28-dem: color-mix(in srgb, var(--pc-party-dem) 58%, var(--pc-text));
    --p28-ind: color-mix(in srgb, var(--pc-party-usind) 72%, var(--pc-text));
}
.p28-masthead { margin-bottom: 20px; }
.p28-masthead .pc-masthead-headline { text-wrap: balance; }
.p28-masthead .pc-masthead-subtitle { max-width: 680px; }

/* ---- Party swatch: the only place party colour appears beside text ---- */
.p28-sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sw, var(--pc-text-meta)); margin-right: 6px; vertical-align: 0.08em; flex: 0 0 auto; }
.p28-sw--rep, .p28-m--r .p28-sw { --sw: var(--p28-rep); }
.p28-sw--dem, .p28-m--d .p28-sw { --sw: var(--p28-dem); }

/* ---- Margin label: R+2 / D+1 / Tied, in ink ---- */
.p28-m { font-family: var(--pc-sans); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pc-text); }
.p28-m .p28-sw { width: 7px; height: 7px; margin-right: 5px; }
.p28-m--t { color: var(--pc-text-secondary); }

/* ---- Index: every pairing on one axis (dot plot), rows link to the pairing ---- */
.pc-wrap a.p28-db-row, .pc-wrap a.p28-db-row:hover, .pc-wrap a.p28-card, .pc-wrap a.p28-card:hover, .pc-wrap .p28-clist a, .pc-wrap .p28-clist a:hover { text-decoration: none; }
.p28-db-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin: 4px 0 10px; }
.p28-db-gap { display: inline-block; width: 16px; }
.p28-sw--hollow { background: var(--pc-surface); box-shadow: inset 0 0 0 1.5px var(--pc-text-meta); }
.p28-db { font-family: var(--pc-sans); }
.p28-db-axis, .p28-db-row { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) 64px; column-gap: 16px; align-items: center; }
.p28-db-axis { border-bottom: 2px solid var(--pc-text); padding-bottom: 6px; }
.p28-db-ticks { position: relative; height: 16px; }
.p28-db-tick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--pc-text-meta); font-variant-numeric: tabular-nums; }
.p28-db-row { padding: 8px 0; border-bottom: 1px solid var(--pc-border-light); color: var(--pc-text); }
.p28-db-row:hover { background: var(--pc-hover-bg); }
.p28-db-pair { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p28-db-pts { display: flex; flex: 0 0 auto; }
.p28-db-pts .us-pt + .us-pt { margin-left: -6px; box-shadow: 0 0 0 2px var(--pc-surface); }
.p28-db-names { font-size: 14px; font-weight: 600; line-height: 1.25; min-width: 0; }
.p28-db-sub { display: block; font-size: 12px; font-weight: 400; color: var(--pc-text-meta); }
.p28-db-plot { position: relative; height: 30px;
    background: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--tick, 20%) - 1px), var(--pc-border-light) calc(var(--tick, 20%) - 1px), var(--pc-border-light) var(--tick, 20%)); }
.p28-db-bar { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--pc-text-meta); }
.p28-db-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pc-surface); }
.p28-db-dot--rep { background: var(--p28-rep); }
.p28-db-dot--dem { background: var(--p28-dem); }
.p28-db-row.is-poll .p28-db-dot { background: var(--pc-surface); box-shadow: inset 0 0 0 2px var(--p28-rep); }
.p28-db-row.is-poll .p28-db-dot--dem { box-shadow: inset 0 0 0 2px var(--p28-dem); }
.p28-db-row.is-poll .p28-db-bar { background: var(--pc-border); }
.p28-db-lab { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pc-text); white-space: nowrap; }
.p28-db-lab--lo { margin-left: -12px; transform: translate(-100%, -50%); }
.p28-db-lab--hi { margin-left: 12px; }
.p28-db-m { text-align: right; font-size: 14px; }

/* ---- Index: one card per matchup, 2-up desktop, 1-up phones ---- */
.p28-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 8px; }
.p28-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 0 16px; border-top: 2px solid var(--pc-text); color: var(--pc-text); font-family: var(--pc-sans); }
.p28-card:hover { background: var(--pc-hover-bg); }
.p28-card-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.p28-card-side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.p28-card-name { font-size: 14px; font-weight: 600; }
.p28-card-val { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.p28-card-m { font-size: 15px; }
.p28-card-viz { display: block; }
.p28-spark { display: block; width: 100%; height: 80px; }
.p28-spark path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.p28-spark-rep { stroke: var(--p28-rep); }
.p28-spark-dem { stroke: var(--p28-dem); }
.p28-ps { position: relative; display: block; height: 80px; border-bottom: 1px solid var(--pc-border-light); }
.p28-ps-mid { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--pc-text-meta); }
.p28-ps-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0.75; box-shadow: 0 0 0 1.5px var(--pc-surface); }
.p28-ps-dot--rep { background: var(--p28-rep); }
.p28-ps-dot--dem { background: var(--p28-dem); }
.p28-ps-dot--tie { background: var(--pc-text-meta); }
.p28-ps-dot:hover { opacity: 1; transform: scale(1.3); }
.p28-viz-cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--pc-text-meta); margin-top: 4px; font-variant-numeric: tabular-nums; }
.p28-card-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--pc-text-meta); }
.p28-card-go { color: var(--pc-text-secondary); font-weight: 600; white-space: nowrap; }
.p28-links { font-family: var(--pc-sans); font-size: 14px; margin: 28px 0 0; color: var(--pc-text-meta); }
.p28-links a { color: var(--pc-text-secondary); text-underline-offset: 2px; }

.p28-sponsor { display: block; font-size: 12px; font-weight: 400; color: var(--pc-text-meta); white-space: normal; }

/* ---- Pairing header: two portraits, name, party, share ---- */
.p28-faces { display: flex; gap: 40px; margin: 4px 0 18px; }
.p28-face { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--pc-sans); min-width: 0; }
.p28-face--rep { --party-color: var(--p28-rep); }
.p28-face--dem { --party-color: var(--p28-dem); }
.p28-face-pt { display: block; line-height: 0; }
.p28-face-pt { margin-bottom: 10px; }
.p28-face-name { font-family: var(--pc-serif); font-size: 18px; font-weight: 700; color: var(--pc-text); text-decoration: none; line-height: 1.2; }
.p28-face-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.p28-face-party { font-size: 13px; color: var(--pc-text-meta); margin-top: 2px; }
.p28-face-val { font-size: 32px; font-weight: 700; color: var(--pc-text); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 6px; }
.p28-topline {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--pc-sans);
    border-top: 2px solid var(--pc-text); border-bottom: 1px solid var(--pc-border); padding: 10px 0;
}
.p28-topline-lab { font-size: 13px; font-weight: 600; color: var(--pc-text-secondary); }
.p28-topline .p28-m { font-size: 22px; }
.p28-topline-v { font-size: 16px; font-weight: 600; color: var(--pc-text); font-variant-numeric: tabular-nums; }
.p28-topline-n { font-size: 13px; color: var(--pc-text-meta); }
.p28-cta { margin: 28px 0 0; flex-wrap: wrap; row-gap: 4px; }
.p28-chart-head { display: flex; justify-content: flex-end; margin: -4px 0 10px; }

/* ---- Poll table ---- */
.p28-poll-table td, .p28-poll-table th { font-variant-numeric: tabular-nums; }
.pc-table.p28-poll-table td:nth-child(2), .pc-table.p28-poll-table th:nth-child(2) { text-align: left; }
.pc-table.p28-poll-table td:first-child, .pc-table.p28-poll-table th:first-child { text-align: left; white-space: nowrap; }
.p28-avg-row td { font-weight: 700; border-bottom: 2px solid var(--pc-text); }
.p28-pmeta { display: none; }

@media (max-width: 600px) {
    .p28-cards { grid-template-columns: minmax(0, 1fr); }
    .p28-db-axis, .p28-db-row { grid-template-columns: minmax(0, 1fr) 52px; row-gap: 6px; }
    .p28-db-axis > span:first-child, .p28-db-axis > span:last-child { display: none; }
    .p28-db-axis .p28-db-ticks { grid-column: 1 / -1; }
    .p28-db-plot { grid-column: 1 / -1; grid-row: 2; }
    .p28-db-m { grid-column: 2; grid-row: 1; }
    .p28-faces { gap: 24px; }
    .p28-face .us-pt { width: 72px !important; height: 72px !important; }
    .p28-face-name { font-size: 16px; }
    .p28-face-val { font-size: 26px; }
    .p28-x { display: none; }
    .p28-pmeta { display: block; font-size: 12px; font-weight: 400; color: var(--pc-text-meta); margin-top: 2px; white-space: normal; }
    .p28-pmeta a { color: var(--pc-text-secondary); }
}

/* ---- Candidate pages (us_site/candidates.py) ---- */
.p28-cand-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; margin: 4px 0 8px; }
.p28-cand-photo { line-height: 0; }
.p28-cand-text .pc-masthead-headline { margin: 0; }
.p28-cand-meta { font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-secondary); margin: 6px 0 10px; }
.p28-cand-text .pc-masthead-subtitle { margin: 0; }
.p28-stand { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--pc-text); }
.p28-stand li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
    padding: 10px 0; border-bottom: 1px solid var(--pc-border-light); font-family: var(--pc-sans); font-size: 14px;
}
.p28-stand-lab a { color: var(--pc-text); text-underline-offset: 2px; }
.p28-stand-sub { display: block; font-size: 12px; color: var(--pc-text-meta); }
.p28-stand-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pc-text); text-align: right; }
/* Head-to-head polls: a small pc-table (opponent, the two shares, margin), one number size */
.p28-cand-h2h td, .p28-cand-h2h th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p28-cand-h2h td:first-child { white-space: normal; }
.p28-cand-h2h .p28-cand-h2h-opp a { color: var(--pc-text); font-weight: 600; text-underline-offset: 2px; }
.p28-cand-h2h-sub { display: block; font-size: 12px; font-weight: 400; color: var(--pc-text-meta); margin-top: 2px; }
.p28-cand-h2h .p28-cand-h2h-m .p28-m { min-width: 0; }
.p28-cand-h2h + .pc-footnote { margin-top: 8px; }
.p28-cgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.p28-clist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--pc-text); }
.p28-clist li { border-bottom: 1px solid var(--pc-border-light); }
.p28-clist a {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 8px 0; color: var(--pc-text); text-decoration: none; font-family: var(--pc-sans);
}
.p28-clist a:hover { background: var(--pc-hover-bg); }
.p28-clist-name { font-size: 15px; font-weight: 600; min-width: 0; }
.p28-clist-sub { display: block; font-size: 12px; font-weight: 400; color: var(--pc-text-meta); }
.p28-clist-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p28-cgroup-title { font-family: var(--pc-serif); font-size: 18px; margin: 0 0 8px; color: var(--pc-text); }
@media (max-width: 600px) {
    .p28-cgroups { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
    .p28-cand-head { gap: 14px; }
    .p28-cand-photo .us-pt { width: 72px !important; height: 72px !important; }
    .p28-cand-h2h td, .p28-cand-h2h th { padding-left: 6px; padding-right: 6px; }
    .p28-cand-h2h td:first-child, .p28-cand-h2h th:first-child { padding-left: 0; }
    .p28-cand-h2h td:last-child, .p28-cand-h2h th:last-child { padding-right: 0; }
}

/* ---- Pairing chart: poll-line-chart.css is light-only, restate its chrome on tokens ---- */
#p28-chart .grid-line { stroke: var(--pc-border-grid); }
#p28-chart .axis text { fill: var(--pc-text-meta); }
#p28-chart .crosshair { stroke: var(--pc-border); }
#p28-chart .gbp-tooltip { background: var(--pc-surface); border-color: var(--pc-border); }
#p28-chart .gbp-tooltip-date, #p28-chart .gbp-tooltip-party { color: var(--pc-text-body); }
#p28-chart .gbp-tooltip-val { color: var(--pc-text); }