/* 2028 primaries pages (us_site/primaries.py). Prefix pr-, tokens only.

   Party colour: each party's leader, and every ranked bar, uses the party
   token (--pc-party-rep / --pc-party-dem; a lighter color-mix in dark mode,
   as on the 2028 pages). Names, numbers and change figures stay in ink
   (change figures are pc-change: green / red by direction).

   Chart lines: every candidate in a primary shares a party, so the trend
   chart needs a categorical set to tell the lines apart. It is defined once
   here, slot 1 (the national leader) is the party token, slots 2-8 are
   Okabe-Ito-based (orange, green, purple, brown, pink, greys; sky blue on the
   Democratic side), assigned by rank in the party's national average, so a
   candidate keeps one line colour on the national and state pages. The
   Republican set has no blue and the Democratic set no red. */
/* Layout follows UK gb-polls / favourability: one-line ranked rows with
   round portraits, hairlines between rows, no bordered cards. */
:root {
    --pr-r1: var(--pc-party-rep);
    --pr-r2: #E69F00;   /* orange */
    --pr-r3: #009E73;   /* green */
    --pr-r4: #7E57C2;   /* purple */
    --pr-r5: #8C6D31;   /* brown */
    --pr-r6: #CC79A7;   /* pink */
    --pr-r7: #4D4D4D;   /* dark grey */
    --pr-r8: #8A8A8A;   /* grey */
    --pr-d1: var(--pc-party-dem);
    --pr-d2: #E69F00;   /* orange */
    --pr-d3: #009E73;   /* green */
    --pr-d4: #A23B97;   /* magenta */
    --pr-d5: #56B4E9;   /* sky blue */
    --pr-d6: #8C6D31;   /* brown */
    --pr-d7: #E58FB8;   /* pink */
    --pr-d8: #6B6B6B;   /* grey */
}
body.dark-mode {
    --pr-r1: color-mix(in srgb, var(--pc-party-rep) 72%, var(--pc-text));
    --pr-d1: color-mix(in srgb, var(--pc-party-dem) 58%, var(--pc-text));
    --pr-r2: #F2B53A; --pr-r3: #2EC495; --pr-r4: #A98BE0;
    --pr-r5: #A47E5A; --pr-r6: #F0A6CF; --pr-r7: #E0E0E0; --pr-r8: #8F8F8F;
    --pr-d2: #F2B53A; --pr-d3: #2EC495; --pr-d4: #D17BC4;
    --pr-d5: #9EE0FF; --pr-d6: #A47E5A; --pr-d7: #F7B6D2; --pr-d8: #A3A3A3;
}

.pr-masthead { margin-bottom: 20px; }
.pr-masthead .pc-masthead-headline { text-wrap: balance; }

/* Change figure in the rows: pc-change (direction colour) */

.pr-cta { margin: 10px 0 36px; flex-wrap: wrap; row-gap: 4px; }

/* ---- Ranked candidate rows (favourability ranking, one line each) ---- */
.pr-ranks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--pc-text); }
.pr-ranks--more { border-top: 0; }
.pr-rank {
    display: grid; grid-template-columns: 32px minmax(120px, 200px) minmax(0, 1fr) 52px 44px;
    align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--pc-border-light);
    font-family: var(--pc-sans); font-variant-numeric: tabular-nums;
}
.pr-rank-name { font-size: 14px; font-weight: 600; color: var(--pc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-rank-track { height: 14px; background: var(--pc-tint); position: relative; overflow: hidden; }
.pr-rank-fill { display: block; height: 100%; background: var(--party-color, var(--pc-text-meta)); opacity: 0.85; }
.pr-rank-val { font-size: 14px; font-weight: 700; color: var(--pc-text); text-align: right; }
.pr-rank .pr-chg { font-size: 12px; text-align: right; }
.pr-ranks--lead .pr-rank { grid-template-columns: 44px minmax(120px, 200px) minmax(0, 1fr) 52px 44px; }
.pr-ranks--lead .pr-rank > .us-pt { justify-self: center; }
.pr-rank--lead { padding: 8px 0; }
.pr-rank--lead .pr-rank-name { font-size: 15px; }
.pr-rank--lead .pr-rank-val { font-size: 18px; }
.pr-more-btn { margin-top: 12px; }

/* ---- Hub: both parties side by side ---- */
.pr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 8px; }
.pr-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.pr-col-title { font-family: var(--pc-serif); font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.pc-wrap .pr-col-title a { color: var(--pc-text); text-decoration: none; }
.pc-wrap .pr-col-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pr-col-sub { font-family: var(--pc-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pc-text-meta); }
.pr-col .pr-cta { margin-bottom: 0; }
.pr-states { font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-body); margin: 0 0 6px; }
.pr-states a { color: var(--pc-text-body); text-decoration: underline; text-underline-offset: 2px; }
.pr-dot { color: var(--pc-text-meta); margin: 0 6px; }

/* ---- Hub: state list (state, polls in the window, leader) ---- */
.pr-sl-pair { margin-top: 0; }
.pr-sl-head, .pr-sl li { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pr-sl-head { font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-meta); padding-bottom: 4px; border-bottom: 2px solid var(--pc-text); }
.pr-sl-head span:nth-child(2), .pr-sl-n { text-align: right; }
.pr-sl { list-style: none; margin: 0 0 6px; padding: 0; font-family: var(--pc-sans); font-size: 14px; font-variant-numeric: tabular-nums; }
.pr-sl li { padding: 9px 0; border-bottom: 1px solid var(--pc-border-light); }
.pc-wrap .pr-sl a { color: var(--pc-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pc-border); text-underline-offset: 2px; }
.pc-wrap .pr-sl a:hover { text-decoration-color: currentColor; }
.pr-sl-n { color: var(--pc-text-body); }
.pr-sl-lead { color: var(--pc-text-secondary); }

/* ---- State switcher (national and state pages): a plain inline link row.
   The markup is pc-pill links (primaries.py); here they lose the box: state
   name in ink, the active one bold, the poll count in grey after it. Each
   link is a 40px tap target. ---- */
.pr-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0 0 14px; font-family: var(--pc-sans); font-size: 14px; }
.pr-switch .pc-pill {
    display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 5px;
    min-height: 40px; padding: 0; background: none; border: 0; color: var(--pc-text);
}
.pr-switch .pc-pill:hover { background: none; color: var(--pc-text); }
.pr-switch .pc-pill.is-active { background: none; border: 0; color: var(--pc-text); }
.pr-switch .pc-pill-label { font-size: 14px; font-weight: 400; line-height: 40px; }
.pr-switch .pc-pill.is-active .pc-pill-label { font-weight: 700; }
.pr-switch .pc-pill-sub { font-size: 12px; font-weight: 400; color: var(--pc-text-meta); line-height: 40px; }
.pr-switch .pc-pill.is-active .pc-pill-sub { color: var(--pc-text-meta); opacity: 1; }
.pc-wrap .pr-switch .pc-pill { text-decoration: none; }
.pc-wrap .pr-switch .pc-pill:hover .pc-pill-label { text-decoration: underline; text-underline-offset: 2px; }
.pr-switch-old { margin: -8px 0 0; }
.pc-help.pr-switch-old { font-size: 13px; }
/* tap targets: buttons at least 40px tall */
.pr-more-btn, .pr-cols-btn, [data-pr-range], .pr-section .pc-btn { min-height: 40px; }
.pr-switch-title {
    font-family: var(--pc-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--pc-text-meta); margin: 14px 0 6px;
}

/* ---- Trend chart: poll-line-chart.css defaults to 680px (560px on phones) ---- */
.gbp-chart-container#pr-chart { height: 480px; }
@media (max-width: 600px) { .gbp-chart-container#pr-chart { height: 420px; } }

/* ---- Poll table: compact one-line rows ---- */
.pr-poll-table { font-size: 13px; }
.pr-poll-table td, .pr-poll-table th { white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.pr-tag {
    font-family: var(--pc-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--pc-text-meta); background: var(--pc-tint); padding: 1px 5px; margin-left: 6px; cursor: help;
}
/* Second line in the pollster cell (dates, sample, source): phones only.
   "All columns" toggle: phones only (primaries.js adds .is-open). */
.pr-pmeta { display: none; }
.pr-cols-btn { display: none; }

@media (max-width: 768px) {
    .pr-switch { gap: 0 14px; }
    .pr-rank { grid-template-columns: 28px minmax(84px, 116px) minmax(0, 1fr) 44px 36px; gap: 8px; }
    .pr-rank .us-pt { width: 28px !important; height: 28px !important; font-size: 10px !important; }
    .pr-ranks--lead .pr-rank { grid-template-columns: 36px minmax(84px, 116px) minmax(0, 1fr) 48px 36px; }
    .pr-rank--lead .us-pt { width: 36px !important; height: 36px !important; font-size: 12px !important; }
    .pr-rank-name, .pr-rank--lead .pr-rank-name { font-size: 13px; }
    .pr-rank-val { font-size: 13px; }
    .pr-rank--lead .pr-rank-val { font-size: 15px; }
    .pr-pair { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .pr-poll-table td:first-child { white-space: normal; min-width: 130px; max-width: 170px; }
}
/* Phones: the shared chart keeps quarterly ticks; show every other label so they never touch
   (CSS only, gb-polls-d3-chart.js is shared and left as is). */
@media (max-width: 600px) {
    #pr-chart .x-axis g.tick:nth-of-type(even) text { display: none; }
    /* Poll table on phones: pollster + top 3 candidates, so the numbers show
       without scrolling; dates / sample / source on a second line. The other
       columns (.pr-x) come back with "All columns" (then the table scrolls). */
    .pr-polls-wrap:not(.is-open) .pr-x { display: none; }
    .pr-pmeta {
        display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--pc-text-meta);
        white-space: normal; line-height: 1.35;
    }
    .pr-pmeta a { color: var(--pc-text-meta); }
    .pr-poll-table td:first-child { white-space: normal; min-width: 0; max-width: none; width: 100%; }
    .pr-polls-wrap:not(.is-open) .pr-poll-table { width: 100%; min-width: 0; }
    .pr-poll-table td, .pr-poll-table th { padding-left: 6px; padding-right: 6px; }
    .pr-poll-table td:first-child, .pr-poll-table th:first-child { padding-left: 0; }
    .pr-poll-table .pr-tag, .pr-poll-table .us-tag { display: inline-block; margin: 2px 4px 0 0; }
    .pr-cols-btn { display: inline-block; margin: 0 0 8px; }
}