/* 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); }

  /* ── 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); }
  .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); }
  .politics-page .found-foot { align-items: center; }
  .politics-page .join-hint { margin-top: var(--sp-3); }

  /* ── A party ── */
  .party-title { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
  .party-title p { margin-top: var(--sp-1); }
  .party-emblem { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: var(--r-lg);
    font: var(--fw-bold) var(--fs-h1) / 1 var(--font-display); color: var(--brand-text);
    background: linear-gradient(180deg, var(--surface-raised), var(--surface-2)); border: 1px solid var(--brand-border); box-shadow: var(--shadow-1), var(--highlight); }
  .party-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); align-items: start; }
  .party-page .bio { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
  .party-page .debate { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
  .party-page .debate .icon { color: var(--text-3); }
  .party-page .members-table select { width: auto; min-width: 190px; }

  @media (max-width: 900px) {
    .party-grid { grid-template-columns: 1fr; }
  }
  @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); }
    .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; }
    .party-title { gap: var(--sp-3); }
    .party-emblem { width: 52px; height: 52px; font-size: var(--fs-stat); }
    .party-page .members-table select { min-width: 0; max-width: 170px; }
    .share-row { grid-template-columns: minmax(4.5rem, 30%) minmax(0, 1fr) auto; gap: var(--sp-2); }
  }
}