/* politics — page styles for the politics hub, the party pages and the government view (also a tab
   of the country page). Layout only; tokens and shared components (see docs/DESIGN.md). */
@layer pages {
  /* ── Shared ── */
  .politics-page .table-wrap { overflow-x: auto; }
  .politics-page .only-phone { display: none; }
  .politics-page .row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
  /* Names link like the shared text links (button.link): underlined, brand on hover. The government
     view is also a tab of the country page. */
  :is(.politics-page, .country-page) a.who { font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
    transition: text-decoration-color var(--t-fast), color var(--t-fast); }
  :is(.politics-page, .country-page) a.who:hover { color: var(--text); text-decoration-color: var(--brand); }

  /* A share of the votes or seats: name · bar · count. */
  .share-row { display: grid; grid-template-columns: minmax(5.5rem, 32%) minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--sp-3); font-size: var(--fs-ui); }
  .share-row.bare { grid-template-columns: minmax(0, 1fr) 8.5rem; }
  .share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
  .share-count { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; text-align: right; }
  .seat-list { display: flex; flex-direction: column; gap: var(--sp-2); }

  /* Hemicycle (politics::hemicycle): a seat per dot, parties in blocks. The five party slots are
     the dataviz skill's validated categorical order, stepped per theme and checked on these cards'
     surfaces (adjacent CVD ΔE ≥ 8.4, normal vision ≥ 19). In light mode three slots sit under 3:1,
     so the legend names every colour and the result table stays beside the chart. */
  .hemicycle { --party-1: #2a78d6; --party-2: #eb6834; --party-3: #1baf7a; --party-4: #eda100; --party-5: #e87ba4;
    --party-other: #898781; --seat-empty: var(--surface-sunken);
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr); align-items: center; gap: var(--sp-3) var(--sp-6); margin: 0; }
  [data-theme="dark"] .hemicycle { --party-1: #3987e5; --party-2: #d95926; --party-3: #199e70; --party-4: #c98500; --party-5: #d55181; }
  .hemicycle-chart { position: relative; grid-row: span 2; }
  .hemicycle svg { display: block; width: 100%; height: auto; overflow: visible; }
  .hemicycle .seat { stroke: var(--surface-1); stroke-width: .012; transition: opacity var(--t-fast), r var(--t-fast); cursor: default; }
  .hemicycle .seat.s1 { fill: var(--party-1); } .hemicycle .seat.s2 { fill: var(--party-2); }
  .hemicycle .seat.s3 { fill: var(--party-3); } .hemicycle .seat.s4 { fill: var(--party-4); }
  .hemicycle .seat.s5 { fill: var(--party-5); } .hemicycle .seat.s0 { fill: var(--party-other); }
  .hemicycle .seat.vacant { fill: var(--seat-empty); stroke: var(--border-strong); }
  .hemicycle svg.focused .seat:not(.lit) { opacity: .28; }
  .hemicycle-count { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1; pointer-events: none; }
  .hemicycle-count b { font: var(--fw-bold) clamp(1.75rem, 5cqw, 2.75rem) / 1 var(--font-display); color: var(--text); }
  .hemicycle-count small { margin-top: 4px; font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
  .hemicycle-chart { container-type: inline-size; }
  .hemicycle-readout { grid-column: 1; min-height: 1.4em; margin: 0; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }
  .hemicycle-legend { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .hemicycle-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.5rem; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--r-sm);
    font-size: var(--fs-ui); color: var(--text); transition: background-color var(--t-fast); }
  .hemicycle-legend li:hover, .hemicycle-legend li.lit { background: var(--surface-3); }
  .hemicycle-legend small { color: var(--text-3); text-align: right; }
  .hemicycle-legend li.vacant { color: var(--text-3); }
  .hemicycle .swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--border-subtle); }
  .hemicycle .swatch.s1 { background: var(--party-1); } .hemicycle .swatch.s2 { background: var(--party-2); }
  .hemicycle .swatch.s3 { background: var(--party-3); } .hemicycle .swatch.s4 { background: var(--party-4); }
  .hemicycle .swatch.s5 { background: var(--party-5); } .hemicycle .swatch.s0 { background: var(--party-other); }
  .hemicycle .swatch.vacant { background: var(--seat-empty); }
  /* A phone: the legend goes under the chart. */
  @media (max-width: 720px) {
    .hemicycle { grid-template-columns: minmax(0, 1fr); }
    .hemicycle-chart { grid-row: auto; }
    .hemicycle-readout, .hemicycle-legend { grid-column: 1; grid-row: auto; }
  }

  /* ── Overview ── */
  .politics-page .join-card { display: flex; align-items: center; gap: var(--sp-4); }
  .politics-page .join-card .hint { margin-top: 2px; }
  .politics-page .invite-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .politics-page .invite-text { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .politics-page .invite-text .icon { color: var(--brand-text); }
  .election-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
  .election-card { display: flex; flex-direction: column; gap: var(--sp-5); }
  .election-card .card-foot { margin-top: auto; }
  .election-title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .election-title .hint { margin-top: 2px; }
  .election-card.selected .stat-ico { color: var(--brand-text); background: var(--brand-soft); }
  .election-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
  .election-count .pill { margin-left: auto; align-self: center; }

  /* ── Elections ── */
  .election-panel > .stack, .election-panel .candidates { min-width: 0; }
  /* The ballot: one row per candidate, columns shared by every row (subgrid) so the bars line up. */
  .candidates { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) minmax(min-content, max-content); gap: var(--sp-2) 0; }
  .candidates:has(.party-ballot) { grid-template-columns: minmax(150px, 1fr) minmax(140px, 1.2fr) minmax(200px, 1.8fr) minmax(min-content, max-content); }
  .candidate { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
  .candidate-act { grid-column: -2 / -1; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
  /* Before the vote there are no bars: the candidates sit side by side as tiles. */
  .candidates:not(:has(.share-row)) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
  .candidates:not(:has(.share-row)) .candidate { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; }
  .candidate .chips a.chip:hover { border-color: var(--border-strong); color: var(--text); }
  /* A narrow election card (the party page puts it beside About) cannot fit name · bar · Vote on
     one line: the name and the Vote button share the first line, the bar (and a congress
     ballot's candidates) get a full line each below. */
  .election-panel { container-type: inline-size; }
  @container (max-width: 640px) {
    .candidates, .candidates:has(.party-ballot) { grid-template-columns: minmax(0, 1fr); }
    .candidate { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-3); }
    .candidate > .who-cell { grid-area: 1 / 1; min-width: 0; }
    .candidate-act { grid-area: 1 / 2; }
    .candidate > :is(.share-row, .chips) { grid-column: 1 / -1; }
    .candidate > .share-row.bare { grid-template-columns: minmax(0, 1fr) auto; }
  }
  .person-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .person-act { display: inline-flex; align-items: center; gap: var(--sp-2); }

  /* ── Laws ── */
  .politics-page .field-wide { grid-column: 1 / -1; }
  .politics-page .law-note { align-self: end; padding-bottom: var(--sp-3); }
  .law { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
  .law-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
  .law-head p { margin-top: 2px; }
  .law-votes { display: flex; flex-direction: column; gap: var(--sp-2); }
  .law-votes .share-row { grid-template-columns: 2.5rem minmax(0, 1fr) 7.5rem; }
  .law-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
  .law-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
  .law-meta .who-cell { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
  .law-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }

  /* ── Parties ── */
  .parties-table tr.mine { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
  .parties-table tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
  /* Found a party: the two orientations side by side, everything else full width. */
  .found-card .card-head { flex-wrap: wrap; }
  .found-needs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
  .found-needs .icon { width: 14px; height: 14px; }
  .found-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5) var(--sp-6); align-items: start; }
  .found-form .found-wide { grid-column: 1 / -1; }
  .found-name-hint { display: flex; justify-content: space-between; gap: var(--sp-3); }
  .found-name-hint span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .found-name-hint .num { flex: none; font-variant-numeric: tabular-nums; }
  .politics-page .found-foot { align-items: center; margin-top: 0; }
  @media (max-width: 560px) {
    .found-form { grid-template-columns: minmax(0, 1fr); }
  }
  .politics-page .join-hint { margin-top: var(--sp-3); }

  /* ── A party: laid out like a unit's page (pages/units.css, the shared .mu-* layout). ── */
  /* Two actions at the end of a row (message, and the president's menu), not the unit's one: a
     fixed actions column keeps the icons aligned down the list, with room before the rank. The
     selector outweighs units.css's .mu-members .row, which is loaded later. */
  .mu-members.party-members .row { grid-template-columns: minmax(0, 1fr) auto 88px; column-gap: var(--sp-5); }

  @media (max-width: 720px) {
    .candidates, .candidates:has(.party-ballot) { grid-template-columns: minmax(0, 1fr); }
    .candidate { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-3); }
    .candidate-act { grid-column: auto; justify-content: flex-start; }
    .candidate-act:empty { display: none; }
    .politics-page .join-card { flex-wrap: wrap; }
    .politics-page .join-card > .btn { width: 100%; }
  }
  @media (max-width: 560px) {
    .politics-page .page-head .tab { padding: 0 var(--sp-3); }
    /* The rank moves under the name, so the name keeps its room. */
    .mu-members.party-members .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
    .mu-members.party-members .mu-role { grid-row: 2; justify-self: start; margin-left: 36px; }
    .mu-members.party-members .mu-cta { grid-row: 1 / span 2; grid-column: 2; }
    .politics-page .page-head .tab .icon { display: none; }
    .politics-page .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .politics-page .facts-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .politics-page .card-head { flex-wrap: wrap; }
    .politics-page .only-phone { display: block; }
    .parties-table .col-orientation, .parties-table .col-president, .parties-table .hide-phone { display: none; }
    .politics-page .table th, .politics-page .table td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .politics-page .table th:first-child, .politics-page .table td:first-child { padding-left: 0; }
    .politics-page .table th:last-child, .politics-page .table td:last-child { padding-right: 0; }
    .share-row { grid-template-columns: minmax(4.5rem, 30%) minmax(0, 1fr) auto; gap: var(--sp-2); }
  }
}