/* Party pages. Builds on style.css (the quiz's frame, cards, buttons, chips, dials and party colours); only what the party pages add lives here. */

/* The site header and the party tab row stay stuck to the top of a party page */
.pbody .site-header { position: sticky; top: 0; z-index: 50; background: var(--page); }
.pswitch-wrap { position: sticky; top: var(--hdrh, 62px); z-index: 40; background: var(--page); margin: 0 0 2px; }
@media (min-width: 760px) { .pswitch-wrap { top: var(--hdrh, 74px); } }

/* Party switcher: a tab row, sideways-scrolling on small screens, with edge fades that show there is more */
.pswitch { display: flex; gap: 22px; padding: 4px 2px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.pswitch::-webkit-scrollbar { display: none; }
.pswitch a { flex: 0 0 auto; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 10px 2px 11px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; min-height: 44px; display: inline-flex; align-items: center; }
.pswitch a:hover { color: var(--ink); }
.pswitch a.cur { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.pswitch-wrap::before, .pswitch-wrap::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 42px; pointer-events: none; transition: opacity 0.15s; }
.pswitch-wrap::before { left: 0; background: linear-gradient(to right, var(--page) 20%, transparent); opacity: 0; }
.pswitch-wrap::after { right: 0; background: linear-gradient(to left, var(--page) 20%, transparent); opacity: 1; }
.pswitch-wrap.at-l::before { opacity: 0; }
.pswitch-wrap.off-l::before { opacity: 1; }
.pswitch-wrap.at-r::after { opacity: 0; }

/* Header: a split card with a party-colour left border; the left panel is a neutral tint, the right is paper. */
.party .phero { position: relative; overflow: hidden; padding: 0; display: grid; grid-template-columns: 1fr; border-left: 5px solid var(--pc); }
.ph-left { padding: 28px 20px 24px; border-bottom: 1px solid var(--line); }
.party .phero h1 { margin: 0; font-size: 46px; line-height: 1; }
.party .fullname { margin: 6px 0 0; color: var(--ink-2); font-size: 17px; }
.party .leaderline { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.party .leaderline .ic { width: 30px; height: 30px; border-color: var(--line-strong); color: var(--muted); }
.party .leaderline .ic svg { width: 16px; height: 16px; }
.leadwrap { display: flex; flex-direction: column; }
.leadrole { font-size: 13px; color: var(--muted); line-height: 1.3; }
.leadname { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ph-right { padding: 0; background: var(--page); }

.stats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; margin: 0; position: relative; }
.stats li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 16px 14px; }
.stats::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.stats::after { content: ""; position: absolute; top: 50%; left: 12px; right: 12px; height: 1px; background: var(--line); }
.ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); border-color: color-mix(in srgb, var(--pc, var(--violet)) 55%, var(--line-strong)); color: var(--ptc, var(--violet)); display: inline-flex; align-items: center; justify-content: center; }
.ic svg { width: 21px; height: 21px; }
.stats .v { display: block; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
.stats .v .of { font-size: 13px; font-weight: 600; color: var(--muted); }
.stats .l { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.25; }
@media (min-width: 700px) {
  .party .phero { grid-template-columns: 5fr 7fr; }
  .ph-left { border-bottom: 0; border-right: 1px solid var(--line); padding: 30px 24px; display: flex; flex-direction: column; justify-content: center; }
  .ph-right { display: flex; align-items: center; }
  .stats { grid-template-columns: 1fr 1fr; width: 100%; }
  .stats li { padding: 22px 16px; }
}

/* Segmented toggles (national/local, public funding/donations): two equal halves */
.seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 380px; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 3px; margin: 4px 0 12px; background: var(--paper); }
.seg button { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: none; border: none; border-radius: 999px; padding: 7px 10px; min-height: 38px; cursor: pointer; }
.seg button.sel { background: var(--ink); color: var(--paper); }
.tabwrap .pane[hidden] { display: none; }

/* Section footers: sources and how-this-works, discoverable but secondary */
.seclinks { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.seclinks a { color: var(--muted); }
.seclinks a:hover { color: var(--violet); }

.party section.card { scroll-margin-top: 14px; }
.party .pactions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.party .cta { text-align: center; margin: 22px 0 10px; }
.party .cta .pactions { justify-content: center; margin: 0; }
.party .cta .btn { flex: 0 1 auto; min-width: 180px; }

/* What it promises */
.commitments { list-style: none; padding: 0; margin: 6px 0 4px; }
.commitments li { padding: 12px 0; border-top: 1px solid var(--line); }
.commitments li:first-child { border-top: 0; }
.c-label { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; }
.c-quote { display: block; color: var(--ink-2); font-size: 15.5px; margin-top: 3px; }

/* Where it leans */
.match { background: var(--violet-tint); border-radius: var(--radius-s); padding: 10px 12px; font-weight: 600; }
.match a { font-weight: 400; margin-left: 6px; }
.match .clear { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 6px; }
.party .dials { margin: 10px 0 14px; }
.party .radar { max-width: 420px; display: block; margin: 0 auto; }
.party .mark.you[hidden], .party .mark.cmp[hidden] { display: none; }
.dial .mark.cmp { background: var(--cc, var(--muted)); box-shadow: 0 0 0 3px var(--paper); width: 16px; height: 16px; top: 7px; margin-left: -8px; }
svg .cmp { fill: var(--cc); fill-opacity: .12; stroke: var(--cc); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 7 5; }
.cmp-chips { margin: 14px 0 2px; }
.cmp-chips .cmp-lab { display: block; margin-bottom: 6px; }
.cmp-chips .chips { margin: 0; }

/* Where it stands */
details.sec { border-top: 1px solid var(--line); padding: 4px 0; }
details.sec:last-of-type { border-bottom: 1px solid var(--line); }
details.sec > summary { cursor: pointer; display: flex; align-items: baseline; gap: 4px 12px; padding: 12px 0; list-style: none; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::after { content: "+"; color: var(--violet); font-size: 22px; line-height: 1; margin-left: auto; }
details.sec[open] > summary::after { content: "\2013"; }
details.sec > summary h3 { flex: 1 1 auto; margin: 0; font-size: 18px; }
.posn { padding: 10px 0 12px; border-top: 1px dashed var(--line); scroll-margin-top: 16px; }
.pos-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pos-badge.agree { background: var(--agree-tint); color: var(--agree); }
.pos-badge.neutral { background: var(--neutral-tint); color: var(--neutral); }
.pos-badge.disagree { background: var(--disagree-tint); color: var(--disagree); }
.pos-src { font-size: 13px; color: var(--muted); }
.pos-src:hover { color: var(--violet); }
.pos-text { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 8px 0 6px; }
.pos-just { margin-bottom: 2px; }
.absent { padding: 10px 0 8px; border-top: 1px dashed var(--line); }
.absent ul { margin: 4px 0 0; padding-left: 20px; }
.absent li { margin-bottom: 4px; }

/* Party similarity */
.agreement { list-style: none; padding: 0; margin: 6px 0 0; }
.agreement li { display: grid; grid-template-columns: 70px 1fr 56px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; }
.agreement .aname { font-weight: 700; }
.agreement .atrack { height: 10px; background: var(--page); border-radius: 999px; overflow: hidden; }
.agreement .abar { display: block; height: 100%; background: var(--pc); border-radius: 999px; }
.agreement .apct { text-align: right; white-space: nowrap; }
@media (min-width: 600px) { .agreement li { grid-template-columns: 90px 1fr 64px; } }

/* Results and offices */
.party #results h3 { margin: 30px 0 10px; font-size: 17px; }
.party #results h3:first-of-type { margin-top: 12px; }
.party #results .seatrow { margin: 28px 0 24px; }
.party svg.chart, .party-index svg.chart { width: 100%; height: auto; max-width: 100%; }
.party .votes, .party .fundchart { max-width: 480px; display: block; margin: 4px 0 6px; }
.seatrow { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
.seatrow .donut { width: 84px; height: 84px; flex: 0 0 auto; }
.seat-l { margin: 0 0 4px; font-size: 15px; }
.provbars { margin: 6px 0 4px; }
.pbar { display: grid; grid-template-columns: 104px 1fr 62px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.pbar .pb-l { color: var(--ink-2); line-height: 1.2; }
.pbar .pb-t { height: 10px; background: var(--page); border-radius: 999px; overflow: hidden; }
.pbar .pb-f { display: block; height: 100%; background: var(--pc); border-radius: 999px; }
.pbar .pb-v { text-align: right; white-space: nowrap; color: var(--ink-2); }
dl.ogrid { margin: 4px 0 8px; }
dl.ogrid > div { display: grid; grid-template-columns: 1fr; gap: 0 14px; padding: 7px 0; border-top: 1px solid var(--line); }
dl.ogrid dt { color: var(--muted); font-size: 14px; }
dl.ogrid dd { margin: 0; font-weight: 600; }
@media (min-width: 600px) { dl.ogrid > div { grid-template-columns: 250px 1fr; } .pbar { grid-template-columns: 130px 1fr 70px; font-size: 14px; } }
.none-line { margin: 2px 0 8px; }

/* Facts */
dl.facts { margin: 8px 0 4px; }
dl.facts > div { display: grid; grid-template-columns: 1fr; gap: 2px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
dl.facts dt { color: var(--muted); font-size: 14px; }
dl.facts dd { margin: 0; }
@media (min-width: 600px) { dl.facts > div { grid-template-columns: 240px 1fr; } }
.ltl { list-style: none; padding: 0; margin: 0; }
.ltl li { display: flex; gap: 12px; padding: 3px 0; }
.ltl .yrs { flex: 0 0 110px; color: var(--muted); font-size: 14px; }

/* In its own words */
.selfdesc { margin: 10px 0 4px; padding: 0; position: relative; }
.selfdesc::before { content: "\201C"; display: block; font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; color: var(--pc, var(--violet)); height: 34px; }
.selfdesc p { font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 1.35; margin: 0; }

/* Sources pages */
.party-sources h1 { margin-bottom: 8px; }
.party-sources h2 { margin: 22px 0 8px; font-size: 20px; }
.party-sources h3 { margin: 14px 0 6px; font-size: 16px; }
.srclist { padding-left: 20px; margin: 6px 0 10px; }
.srclist li { margin-bottom: 8px; font-size: 15px; }
.src { color: var(--muted); }
.src a { color: var(--muted); }

/* The index */
.party-index .pagetitle { margin: 20px 4px 4px; }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 14px 0; }
@media (min-width: 600px) { .pgrid { grid-template-columns: 1fr 1fr; } }
.pcard { position: relative; display: block; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--pc); border-radius: var(--radius); padding: 0; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: box-shadow 0.15s, transform 0.15s; }
.pcard:hover { border-color: var(--line); border-left-color: var(--pc); box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.pcard-top { display: block; padding: 20px 18px 14px; }
.pcard-short { display: block; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; }
.pcard-full { display: block; color: var(--ink-2); font-size: 15px; margin-top: 5px; }
.pcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; background: var(--page); border-radius: 0 0 15px 11px; }
.pcard-stats::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.pcard-stat { padding: 12px 18px; }
.pcard-v { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.2; }
.pcard-v .of { font-size: 12px; font-weight: 600; color: var(--muted); }
.pcard-l { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.25; }
.pcard-match[hidden] { display: none; }
.pcard-match { position: absolute; top: 16px; right: 14px; font-size: 13px; font-weight: 700; color: var(--ptc); background: color-mix(in srgb, var(--pc) 12%, transparent); padding: 4px 10px; border-radius: 999px; line-height: 1.3; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }