/* The party pages (party.html, js/party.js): the person page's tiles (css/person.css) with a few of
   their own: the party and view pickers, seat bars, the vote chart, the stance list, the party's people
   on the left–right line, the side-by-side table. */
.pp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: min(100% - 32px, 1180px); margin: 18px auto 0; }
.pp-parties[hidden] { display: none; }
.pp-parties { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 2px #e4e0fb; color: #1e1a67; font: 700 14px/1 var(--font-read, system-ui); cursor: pointer; }
.pp-pick i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.pp-pick[aria-selected="true"] { background: var(--c); box-shadow: none; color: #fff; }
.pp-pick[aria-selected="true"] i { background: #fff; }
.pp-views { display: inline-flex; margin-left: auto; padding: 3px; gap: 3px; border-radius: 999px; background: #efedfd; }
.pp-views button, .pp-tabs button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #1e1a67; font: 700 14px/1 var(--font-read, system-ui); cursor: pointer; }
.pp-views button[aria-pressed="true"], .pp-tabs button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(30, 26, 103, .18); }

.pp .pb-tile { position: relative; }
.pp .pp-note { margin: 8px 0 0; color: #6b6890; font-size: 12.5px; line-height: 1.4; }
.pp .pp-go { display: inline-block; margin-top: 10px; color: #4232d4; font-size: 13px; font-weight: 800; }

/* the hero: the party's symbol where a person's photo goes, and the level switch */
.pp-badge { display: grid; place-items: center; width: min(150px, 46%); aspect-ratio: 1; margin-bottom: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .35); font-size: clamp(56px, 7vw, 84px); line-height: 1; }
.pp .pb-hero .page-heading { font-size: clamp(26px, 2.6vw, 36px); }
.pp-up { margin: 0; color: rgba(255, 255, 255, .85); font-size: 14px; }
.pp-up a { color: #fff; }
.pp-levels { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 10px 0 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .18); }
.pp-levels button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font: 700 14px/1 var(--font-read, system-ui); cursor: pointer; }
.pp-levels button[aria-pressed="true"] { background: #fff; color: var(--hero-ink); }

/* about: the summary and where its people sit */
.pp > .pp-about { grid-column: span 2; }
.pp-about p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.pp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0 0; }
.pp-facts div { padding: 8px 10px; border-radius: 14px; background: #f5f3ff; }
.pp-facts dt { color: #6b6890; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pp-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; }

/* big-number tiles */
.pp-stat { display: flex; flex-direction: column; }
.pp-stat .pb-big { font-size: 54px; }
.pp-stat .pb-big small { font-size: 22px; font-weight: 800; opacity: .7; }
.pp-stat .pb-big-label { margin-top: 2px; }
.pp-stat .pp-note { margin-top: auto; padding-top: 10px; }
.pp-seats { background: linear-gradient(160deg, #f2efff, #e4ddff) !important; }
.pp-running { background: linear-gradient(160deg, #e3f5ec, #c9efdd) !important; color: #0a5b43; }
.pp-running .pp-note { color: #2f7a62; }

/* the chair */
.pp-chair { display: flex; flex-direction: column; }
.pp-chair-who { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.pp-chair-who:hover b { text-decoration: underline; }
.pp-face { --c: #8a2be2; flex: none; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c); background: linear-gradient(45deg, #967dfc, #c39cfa 50%, #f0b4f1); color: #1e1a67; font: 800 18px/1 system-ui, sans-serif; }
.pp-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pp-chair-who b { display: block; font-size: 16px; }
.pp-chair-who small { display: block; color: #5d5a7d; font-size: 13px; }

/* stances: one row per topic, the detail folded */
.pp > .pp-stances { grid-column: span 2; grid-row: span 2; }
.pp-planks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pp-planks details { border-radius: 14px; background: #f7f6fe; }
.pp-planks summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.pp-planks summary::-webkit-details-marker { display: none; }
.pp-planks summary::after { content: "+"; color: #8d86c2; font-weight: 800; }
.pp-planks details[open] summary::after { content: "–"; }
.pp-planks .pp-ico { font-size: 18px; line-height: 1.2; }
.pp-planks b { display: block; color: #6b6890; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.pp-planks span span { font-size: 14.5px; line-height: 1.4; }
.pp-planks .pp-more { margin: 0; padding: 0 12px 10px 52px; color: #5d5a7d; font-size: 13px; line-height: 1.45; }
.pp-local { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: #fff7df; }
.pp-local b { display: block; margin-bottom: 4px; font-size: 13px; }
.pp-local ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.pp-src { margin: 10px 0 0; color: #6b6890; font-size: 12px; }

/* seat bars */
.pp > .pp-power { grid-column: span 2; }
.pp-bars { display: grid; gap: 10px; margin: 0; }
.pp-bar { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr); align-items: center; gap: 10px; }
.pp-bar > span:first-child { font-size: 13px; font-weight: 700; line-height: 1.25; }
.pp-bar > span:first-child small { display: block; color: #6b6890; font-weight: 600; }
.pp-track { display: flex; gap: 2px; height: 22px; }
.pp-track i { display: grid; place-items: center; min-width: 4px; border-radius: 4px; background: var(--c); color: #fff; font: 800 11px/1 system-ui, sans-serif; font-style: normal; }
.pp-track i.is-dim { opacity: .35; }
.pp-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 0; color: #5d5a7d; font-size: 12px; }
.pp-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; background: var(--c); vertical-align: -1px; }

/* the vote chart */
.pp > .pp-votes { grid-column: span 2; }
.pp-chart { width: 100%; height: auto; overflow: visible; }
.pp-chart text { fill: #6b6890; font: 600 11px system-ui, sans-serif; }
.pp-chart .pp-lab { font-size: 12px; font-weight: 800; fill: #150e5e; }
.pp-chart .pp-grid { stroke: #ece9f7; stroke-width: 1; }
.pp-chart .pp-hit { fill: transparent; cursor: default; }
.pp-tip { position: fixed; z-index: 4000; padding: 8px 10px; border-radius: 10px; background: #150e5e; color: #fff; font: 600 12.5px/1.4 system-ui, sans-serif;
  pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.pp-tip b { display: block; }

/* its people on the left–right line */
.pp > .pp-line { grid-column: span 2; }
.pp-scale { position: relative; margin: 6px 0 0; }
.pp-scale-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #0022ff, #8a2be2 50%, #ff0000); }
.pp-scale-ends { display: flex; justify-content: space-between; margin-top: 4px; color: #6b6890; font-size: 11.5px; font-weight: 700; }
.pp-dots { position: relative; }
.pp-dots a { position: absolute; transform: translateX(-50%); }
.pp-dots .pp-face { width: 34px; height: 34px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); font-size: 11px; }
.pp-swarm { position: relative; margin: 6px 0 4px; }
.pp-pin { position: absolute; width: var(--d, 8px); height: var(--d, 8px); border-radius: 50%; background: var(--c); transform: translateX(-50%); }
.pp-pin::after { content: ""; position: absolute; inset: -4px; }
.pp-pin:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #150e5e; }
.pp-avg { position: absolute; top: -6px; width: 4px; height: 20px; border-radius: 2px; background: #150e5e; transform: translateX(-50%); }
.pp-avg-lab { position: absolute; top: 18px; transform: translateX(-50%); white-space: nowrap; color: #150e5e; font-size: 11.5px; font-weight: 800; }

/* its people: faces by power */
.pp > .pp-people { grid-column: span 2; }
.pp-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 8px; }
.pp-faces a { display: grid; justify-items: center; gap: 5px; color: inherit; text-align: center; text-decoration: none; }
.pp-faces a:hover b { text-decoration: underline; }
.pp-faces .pp-face { width: 58px; height: 58px; font-size: 15px; }
.pp-faces b { font-size: 12.5px; line-height: 1.2; }
.pp-faces small { color: #6b6890; font-size: 11.5px; line-height: 1.25; }
.pp-tabs { display: inline-flex; flex-wrap: wrap; gap: 3px; margin: 0 0 12px; padding: 3px; border-radius: 999px; background: #efedfd; }

/* lists: history, factions, get involved, money, controversies */
.pp-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.pp-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
.pp-list li > b:first-child { color: #4232d4; font-size: 13px; }
.pp-list.is-plain li { grid-template-columns: 26px minmax(0, 1fr); }
.pp > .pp-history, .pp > .pp-reach { grid-column: span 2; }
.pp-reach .pp-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pp-reach .pp-links a { margin: 0; }
.pp-money .pp-big2 { display: block; font-size: 30px; font-weight: 900; line-height: 1.1; }
.pp-money dl { display: grid; gap: 6px; margin: 10px 0 0; font-size: 13.5px; }
.pp-money dl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #e4e0fb; padding-bottom: 4px; }
.pp-money dd { margin: 0; font-weight: 800; }
.pp-scandal-empty { color: #6b6890; font-size: 14px; }
.pp-reach a { display: block; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #f5f3ff; color: #21167c; font-size: 14px; font-weight: 700; text-decoration: none; }

/* side by side */
.pp > .pp-wide { grid-column: 1 / -1; }
.pp-table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.pp-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.pp-table th, .pp-table td { padding: 10px 12px; border-radius: 14px; vertical-align: top; text-align: left; font-size: 13.5px; line-height: 1.4; }
.pp-table thead button { all: unset; cursor: pointer; } .pp-table thead button:hover { text-decoration: underline; }
.pp-table thead th { color: #fff; font-size: 15px; background: var(--c); }
.pp-table thead th:first-child, .pp-table tbody th { background: none; color: #150e5e; width: 140px; }
.pp-table tbody th { font-size: 13px; }
.pp-table td { background: color-mix(in srgb, var(--c) 8%, #fff); }
.pp-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pp-small div { padding: 12px; border-radius: 16px; background: #f5f3ff; font-size: 13.5px; line-height: 1.4; }
.pp-small b { display: block; margin-bottom: 2px; font-size: 14.5px; }



@media (max-width: 620px) {
  .pp-top { width: auto; margin: 14px 12px 0; }
  .pp-views { margin-left: 0; width: 100%; justify-content: space-between; }
  .pp-views button { flex: 1; padding: 6px 8px; }
  .pp > .pb-tile { grid-column: auto !important; grid-row: auto !important; }
  .pp-bar { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pp-planks .pp-more { padding-left: 12px; }
}

/* the page's own bits (not in the mockup) */
.pp .pp-empty { margin: 0; color: #6b6890; font-size: 14px; line-height: 1.45; }
.pp-planks .pp-sec { display: block; margin-top: 4px; font-size: 12.5px; }
.pp-planks .pp-sec a, .pp-src a, .pp-srclist a, .pp-note a { color: #4232d4; }
.pp-scale-ends { margin-top: 22px !important; }
.pp-srclist { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.35; word-break: break-word; }
.pp > .pp-sources { grid-column: 1 / -1; }
.pp-sources .pp-srclist { columns: 2 280px; column-gap: 28px; display: block; }
.pp-sources .pp-srclist li { break-inside: avoid; margin-bottom: 4px; }
.pp-facts .is-wide { grid-column: 1 / -1; }
/* the column beside the stances: the chair, Get involved, Your take, the news, its camps */
.pp > .pp-side { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; min-width: 0; }
.pp-side > .pb-tile { min-width: 0; margin: 0; padding: 18px; border: 0; border-radius: 28px; background: #fff; box-shadow: var(--tile-shadow);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.pp-side > .pb-tile:hover { transform: translateY(-3px); }
.pp-side > :is(.pp-take, .is-wide) { grid-column: 1 / -1; }
.pp-take .rt-person { grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* phones: nothing under 12px */
@media (max-width: 620px) {
  .pp-facts dt, .pp-planks b, .pp-key, .pp-scale-ends, .pp-avg-lab, .pp-faces small, .pp .pp-note, .pp-bar > span:first-child small { font-size: 12px; }
  .pp > .pp-sources { grid-column: auto; }
  .pp > .pp-side { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .pp-side > .pb-tile { grid-column: auto !important; }
  .pp-chart text { font-size: 12px; }
}