:root {
  color-scheme: dark;
  --black: #050505;
  --paper: #f4efe5;
  --muted: #c9c0b5;
  --red: #e11919;
  --deep-red: #7a0b0b;
  --line: rgba(244, 239, 229, 0.18);
  --max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 8%, rgba(225, 25, 25, 0.22), transparent 26rem),
    linear-gradient(180deg, #0a0a0a 0%, #050505 42%, #100707 100%);
  color: var(--paper);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(244,239,229,0.035) 1px, transparent 1px);
  background-size: 100% 14px;
  mix-blend-mode: screen;
  opacity: 0.55;
}

main { position: relative; z-index: 1; }
.hero { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px;
}
.page-topbar { border-bottom: 1px solid var(--line); }
.wordmark {
  font-weight: 950;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  text-transform: uppercase;
}
nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
nav a {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 750;
  font-size: 0.9rem;
}
nav a:hover { color: var(--paper); border-color: var(--paper); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  font-family: inherit;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 150ms ease, margin 200ms ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:hover { border-color: var(--paper); }
.nav-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.poster-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 34px;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 42px;
}
.chair-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  isolation: isolate;
}
.chair-stage::before {
  content: "";
  position: absolute;
  width: min(56vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(244,239,229,0.12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,25,25,0.16), transparent 58%);
  z-index: -3;
}
.empty-chair {
  width: min(78vw, 420px);
  filter: drop-shadow(0 36px 55px rgba(0,0,0,0.85));
  transform: rotate(-2deg);
}
.chair-back, .chair-seat, .chair-leg {
  fill: transparent;
  stroke: var(--paper);
  stroke-width: 18;
  stroke-linejoin: round;
}
.chair-cross {
  fill: none;
  stroke: var(--red);
  stroke-width: 18;
  stroke-linecap: round;
}
.red-shadow {
  position: absolute;
  bottom: 64px;
  width: 58%;
  height: 34px;
  background: rgba(225,25,25,0.7);
  filter: blur(24px);
  z-index: -1;
}

.people-empty {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  padding: 28px 26px;
  border: 2px dashed var(--line);
  background:
    radial-gradient(circle at 18% 50%, rgba(225, 25, 25, 0.10), transparent 55%),
    rgba(244, 239, 229, 0.025);
}
.people-empty-chair {
  width: 100%;
  max-width: 132px;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55));
  transform: rotate(-2deg);
}
.people-empty-chair .chair-back,
.people-empty-chair .chair-seat,
.people-empty-chair .chair-leg {
  fill: transparent;
  stroke: var(--paper);
  stroke-width: 22;
  stroke-linejoin: round;
}
.people-empty-chair .chair-cross {
  fill: none;
  stroke: var(--red);
  stroke-width: 22;
  stroke-linecap: round;
}
.people-empty-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.people-empty-copy .kicker { margin: 0; }
.people-empty-copy h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  line-height: 1.04;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.012em;
}
.people-empty-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 520px;
}
.people-empty-copy .button {
  justify-self: start;
  margin-top: 6px;
}

.hero-copy { max-width: 720px; }
.kicker {
  margin: 0 0 16px;
  color: var(--red);
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
h1 {
  margin: 0;
  font-size: clamp(3.8rem, 9vw, 7.7rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.subtitle {
  max-width: 760px;
  margin: 30px 0 0;
  font-size: clamp(1.65rem, 3.5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 950;
  color: var(--red);
  text-transform: uppercase;
}
.line {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.45vw, 1.25rem);
  line-height: 1.6;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.compact-actions { margin-top: 20px; }
.centered-actions { justify-content: center; }
.button, form button, .share-section button, .choice-grid button, .voice-card button, .home-actions button, .vote-grid button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 0;
  border: 2px solid var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.primary, form button, .share-section button, .voice-card button, .home-actions button { background: var(--paper); color: var(--black); }
.full-button { width: 100%; }
.secondary, .choice-grid button { background: transparent; color: var(--paper); }
.button:hover, form button:hover, .share-section button:hover, .choice-grid button:hover, .voice-card button:hover, .home-actions button:hover, .vote-grid button:hover { transform: translateY(-2px); }

.ticker {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--red);
  color: var(--paper);
  overflow: hidden;
}
.ticker span {
  flex: 1 0 auto;
  padding: 16px 24px;
  border-right: 1px solid rgba(244,239,229,0.38);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.proof-section, .pledge-section, .demands-section, .choice-section, .voices-section, .transparency-section, .share-section,
.page-hero, .home-actions, .form-page-grid, .detail-list-section, .choice-page-section, .status-page-section, .vote-preview-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 92px 24px;
  border-bottom: 1px solid var(--line);
}
.proof-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: 34px;
  align-items: stretch;
}
.counter-card {
  border: 2px solid var(--paper);
  padding: 24px;
  display: grid;
  align-content: center;
  min-height: 260px;
  background: rgba(225,25,25,0.08);
}
.counter-card strong {
  display: block;
  font-size: clamp(5.5rem, 10vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--red);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.counter-card span {
  margin-top: 16px;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.25rem;
}
.signature-counter {
  border: 2px solid var(--paper);
  padding: 28px;
  display: grid;
  align-content: center;
  /* min-height was 280px paired with a 7–11rem number — on wide
     viewports the digits overflowed the left grid column ("604"
     bled past the right border of the dark box). Tightening the
     clamp + letting the box size to its content keeps the visual
     heavyweight while staying inside its column. */
  min-height: 220px;
  background: rgba(225,25,25,0.08);
}
.signature-counter strong {
  display: block;
  color: var(--red);
  /* Base size sized for ≤3 digit counts. Scales down progressively
     via the .is-stat-* classes below as the campaign grows past 1k,
     10k, 100k so the number doesn't overflow the bordered card. JS
     applies the class on each /api/public-stats fetch. */
  font-size: clamp(3.6rem, 7.5vw, 6.4rem);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.signature-counter strong.is-stat-thousands {
  font-size: clamp(3rem, 6vw, 5rem);     /* 1,000 – 9,999 */
}
.signature-counter strong.is-stat-ten-thousands {
  font-size: clamp(2.5rem, 4.8vw, 4rem);  /* 10,000 – 99,999 */
}
.signature-counter strong.is-stat-hundred-thousands {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem); /* 100,000+ */
}
.signature-counter span {
  display: block;
  margin-top: 16px;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
}
.inline-stat {
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.035);
  padding: 16px;
  margin: 4px 0 6px;
}
.inline-stat strong {
  display: block;
  color: var(--red);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 0.95;
  font-weight: 950;
}
.inline-stat span {
  display: block;
  margin-top: 8px;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.proof-copy {
  display: grid;
  align-content: center;
}
.proof-copy p, .choice-heading p, .voice-card p, .voice-card small, .status-grid p, .page-hero p, .explain-card p, .explain-card li, .detail-list p, .narrow-section p, .home-actions p, .legal-note {
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.58;
}
.legal-note {
  color: var(--paper);
  border-left: 4px solid var(--red);
  padding-left: 14px;
  font-weight: 850;
}

.page-hero { padding-top: 76px; padding-bottom: 64px; }
.page-hero h1 { font-size: clamp(3.4rem, 8vw, 8rem); max-width: 1040px; }
.page-hero p { max-width: 820px; margin: 28px 0 0; }
.thanks-hero h1 { max-width: 1120px; }

.home-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.home-actions article {
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.03);
  padding: 24px;
  min-height: 300px;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: hidden;
}
.home-actions span {
  color: var(--red);
  font-weight: 950;
  font-size: 1.35rem;
}
.home-actions h2 { font-size: clamp(1.9rem, 2.4vw, 2.55rem); line-height: 1.02; letter-spacing: -0.01em; overflow-wrap: normal; }
.home-actions p { margin: 0; }
.home-actions a {
  align-self: end;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
}
.home-actions button { align-self: end; }

.vote-preview-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.vote-heading p {
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.58;
}
.vote-grid {
  min-width: 0;
}
.choice-grid.topic-board-wrap,
.topic-board-wrap {
  display: block;
  grid-template-columns: none;
}
.topic-board {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.topic-podium {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vote-preview-section .topic-list {
  grid-template-columns: 1fr;
}
.topic-card,
.topic-pill,
.vote-grid button {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--paper);
  background: rgba(244,239,229,0.025);
  color: var(--paper);
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.topic-board .topic-card {
  position: relative;
  min-height: 86px;
  padding: 14px 108px 14px 18px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: start;
  gap: 4px;
  text-align: left;
}
.topic-board .topic-card-1 {
  background: linear-gradient(135deg, rgba(225,25,25,0.22), rgba(244,239,229,0.025));
  border-color: var(--red);
}
.topic-card small,
.topic-pill em {
  color: var(--red);
  font-weight: 950;
  letter-spacing: 0.08em;
  font-style: normal;
}
.topic-card small {
  display: block;
  font-size: 0.72rem;
  line-height: 1;
}
.topic-card span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: clamp(1.15rem, 1.9vw, 1.85rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: 950;
}
.topic-board .topic-pill {
  position: relative;
  min-height: 66px;
  padding: 14px 86px 14px 16px;
  display: flex;
  align-items: center;
  text-align: left;
}
.topic-pill span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 950;
  line-height: 1.05;
  font-size: clamp(0.78rem, 0.98vw, 0.94rem);
  letter-spacing: -0.015em;
  max-width: calc(100% - 4px);
}
.vote-badge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 6px 10px;
  border-left: 2px solid var(--line);
  color: var(--paper);
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
}
.vote-badge b {
  display: block;
  /* Was clamp(1.35rem, 2vw, 1.9rem) — at max 30px, a 4-digit
     count with sq-AL grouping ("1.441" = 5 chars) overshot the
     82px badge width. Tighter clamp + tabular-nums + negative
     letter-spacing keeps 4-digit counts inside the badge without
     touching its width (which is reserved by the card paddings
     in many places). */
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.03em;
}
.vote-badge small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}
.vote-action {
  border-left-color: var(--red);
  color: var(--red);
  font-size: 0.88rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.topic-card:hover,
.topic-pill:hover,
.topic-card.is-voted,
.topic-pill.is-voted,
.topic-card.is-selected,
.topic-pill.is-selected { background: var(--red); border-color: var(--red); color: var(--paper); }
.topic-card:hover small,
.topic-card:hover .vote-badge,
.topic-card:hover .vote-badge small,
.topic-pill:hover .vote-badge,
.topic-pill:hover .vote-badge small,
.topic-card.is-voted small,
.topic-card.is-voted .vote-badge,
.topic-card.is-voted .vote-badge small,
.topic-pill.is-voted .vote-badge,
.topic-pill.is-voted .vote-badge small,
.topic-card.is-selected small,
.topic-card.is-selected .vote-badge,
.topic-card.is-selected .vote-badge small,
.topic-pill.is-selected .vote-badge,
.topic-pill.is-selected .vote-badge small { color: var(--paper); border-left-color: rgba(244,239,229,0.55); }
.small-proof {
  grid-column: 2;
  margin: -8px 0 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.45;
}
.small-proof span {
  color: var(--red);
  font-weight: 950;
}
.topic-inline-form,
.mini-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.03);
}
.topic-inline-form {
  margin-top: 22px;
}
.topic-inline-form .kicker { margin-bottom: 0; }
.topic-inline-form button,
.mini-form button,
.vote-confirm-panel button {
  min-height: 50px;
  border: 2px solid var(--paper);
  background: var(--paper);
  color: var(--black);
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}
.vote-confirm-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.035);
}
.vote-confirm-panel[hidden] { display: none; }
.vote-confirm-panel p { margin: 0; color: var(--muted); line-height: 1.45; font-weight: 850; }
.vote-confirm-panel [data-selected-copy] { color: var(--paper); }
.people-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.people-list .topic-board { width: 100%; }
.people-list .topic-card,
.people-list .topic-pill {
  border: 2px solid var(--paper);
  background: rgba(244,239,229,0.025);
}
.people-list .topic-card:hover,
.people-list .topic-pill:hover,
.people-list .topic-card.is-selected,
.people-list .topic-pill.is-selected,
.people-list .topic-card.is-current-vote,
.people-list .topic-pill.is-current-vote,
.topic-card.is-current-vote,
.topic-pill.is-current-vote {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}
.people-list .topic-card { padding: 16px 132px 16px 18px; }
.people-list .topic-pill { padding: 14px 86px 14px 16px; }
.people-list .topic-card small {
  display: block;
  color: var(--red);
  font-weight: 950;
  letter-spacing: 0.08em;
  margin: 0;
}
.people-list .topic-card span,
.people-list .topic-pill span {
  margin: 0;
  color: var(--paper);
}
.people-list .topic-card:hover span,
.people-list .topic-pill:hover span,
.people-list .topic-card:hover .vote-badge,
.people-list .topic-pill:hover .vote-badge,
.people-list .topic-card.is-selected span,
.people-list .topic-pill.is-selected span,
.people-list .topic-card.is-selected .vote-badge,
.people-list .topic-pill.is-selected .vote-badge,
.people-list .topic-card.is-current-vote span,
.people-list .topic-pill.is-current-vote span,
.people-list .topic-card.is-current-vote .vote-badge,
.people-list .topic-pill.is-current-vote .vote-badge,
.topic-card.is-current-vote .vote-badge,
.topic-pill.is-current-vote .vote-badge {
  color: var(--paper);
  border-left-color: rgba(244,239,229,0.55);
}
.people-list .topic-card span {
  font-size: clamp(1.28rem, 2.05vw, 2rem);
  line-height: 1.02;
}
.people-list .topic-pill span {
  font-size: clamp(0.78rem, 0.98vw, 0.94rem);
  line-height: 1.05;
}

/* Small "Votuar" pill that sits under the name on the voted card so the
   real vote count stays visible in the badge slot. Only rendered by
   personVoteBadge when person.id === clientVotes.personId, i.e. only on
   .is-current-vote cards. */
.voted-pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  font-style: normal;
}
/* Override .people-list .topic-card small { color: var(--red) } (specificity
   0,2,1) so the pill reads paper against the red is-current-vote background.
   Using small.voted-pill bumps us to 0,3,1 and wins regardless of source order. */
.people-list .topic-card small.voted-pill,
.people-list .topic-pill small.voted-pill,
.topic-card small.voted-pill,
.topic-pill small.voted-pill {
  color: var(--paper);
}
/* Topic-pills (positions 4+) are display: flex with the name and pill as
   siblings. Without help, the pill would render inline next to the name OR
   stretch full-width if we force-wrap it. We want it on its own row UNDER
   the name AT content-width. Trick:
     1. Allow the pill row to wrap.
     2. When a pill exists, push the name span to full row 1 (via :has()).
     3. The pill then drops to row 2 at its own inline-block width. */
.topic-pill { flex-wrap: wrap; }
.topic-pill:has(small.voted-pill) > span {
  width: 100%;
}
.topic-pill small.voted-pill,
.people-list .topic-pill small.voted-pill {
  align-self: flex-start;
  margin-top: 4px;
}
/* Topic-list alignment — universal across surfaces.
   Two layered guarantees:
     1. Every card/pill inside a NON-voice .topic-board reads as a
        left-aligned stack — voted or not. This is the
        /rezultatet topic-vote-column (Korrupsioni / Shëndetësia /
        Ekonomia / Zgjedhjet …): admin asked for the position 4+
        rows to match the voted card's left alignment.
     2. Any card/pill carrying .is-current-vote (regardless of
        surface, including voice-board) is also pinned left, so
        the ✓ Votuar pill below the name and the name above always
        share the same left edge. This covers /index voices and
        /rezultatet voices side without disturbing the default
        centered name treatment on non-voted voice cards. */
.topic-board:not(.voice-board) .topic-card,
.topic-board:not(.voice-board) .topic-pill,
.topic-card.is-current-vote,
.topic-pill.is-current-vote {
  text-align: left;
  justify-content: flex-start;
}
.topic-board:not(.voice-board) .topic-card > span,
.topic-board:not(.voice-board) .topic-pill > span,
.topic-card.is-current-vote > span,
.topic-pill.is-current-vote > span {
  text-align: left;
  justify-self: start;
}
.topic-card.is-current-vote small.voted-pill,
.topic-pill.is-current-vote small.voted-pill {
  align-self: flex-start;
  justify-self: start;
}
.voice-board .topic-card,
.voice-board .topic-pill {
  cursor: pointer;
}
.voice-board .topic-card {
  grid-template-columns: minmax(0, 1fr);
  min-height: 66px;
  padding: 14px 86px 14px 16px;
}
.voice-board .topic-card span,
.voice-board .topic-pill span {
  text-align: center;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  line-height: 1.05;
}
/* Override the surface center default to left-align in two cases —
   placed AFTER the rule above so equal-specificity selectors win on
   cascade order without needing a specificity bump:
     1. Every .topic-pill (positions 4+) — admin asked for a left
        stack on all 4+ voice rows so the column reads consistently
        whether they're voted or not.
     2. Any voted .topic-card (positions 1-3 podium) — so the name
        above ✓ Votuar lines up with the pill below. Non-voted
        podium cards stay centered as the visual headline. */
.voice-board .topic-pill > span,
.voice-board .topic-card.is-current-vote > span {
  text-align: left;
}
.voice-board .vote-badge small { display: none; }
.voice-count b {
  /* Mirrors .vote-badge b — same 82px-wide badge, same need to
     fit 4-digit person-vote counts. */
  font-size: clamp(1rem, 1.4vw, 1.4rem);
}
.more-list {
  margin-top: 14px;
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.025);
}
.more-list summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
}
.more-list .topic-list {
  padding: 0 14px 14px;
}
.people-vote-section .actions { margin-top: 0; }
.muted { color: var(--muted); }
.admin-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 54px 24px;
  border-bottom: 1px solid var(--line);
}
.admin-grid {
  display: grid;
  /* Fixed 2 rows × 4 columns on desktop so the 8 stats lay out as a
     clean rectangle (was auto-fit which collapsed/stretched depending
     on viewport — 7 cards would land in one tall row on wide
     screens, 4-digit values would overflow on narrow ones). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-card, .admin-row {
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.035);
  padding: 20px 18px;
}
.admin-card strong {
  display: block;
  color: var(--red);
  /* Shrunk from clamp(2.4rem, 5vw, 4.2rem) — at 4.2rem max, "1.234"
     (sq-AL grouping) ran ~290px wide and overflowed a 4-col card on
     a 1200px dashboard. New max ~3.2rem fits 4 digits + the grouping
     dot comfortably while keeping the "headline" weight. */
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.admin-card span, .admin-row p, .admin-row small {
  color: var(--muted);
}
.admin-list { display: grid; gap: 10px; margin-top: 24px; }
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Allow wrapping so the actions cluster drops below the content
     when the row can't fit the two side-by-side on narrow viewports.
     Without this the buttons stretched the row beyond the viewport
     and broke the page layout on mobile. */
  flex-wrap: wrap;
}
.admin-row > div:first-child {
  /* Left content gets to grow but can also shrink past its intrinsic
     min-content (which would otherwise be the longest button label,
     keeping the row too wide on tiny screens). overflow-wrap +
     word-break catch any long unbroken token (e.g. a URL in a
     proposal reason or a very long topic slug) that would otherwise
     refuse to wrap. */
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-row strong { font-size: 1.35rem; }
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* On stacked rows (mobile), let the actions cluster span full width
     so the buttons can wrap naturally instead of squeezing into a
     narrow remainder. */
  flex: 0 1 auto;
  justify-content: flex-end;
}
.admin-actions button {
  min-height: 44px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}
.admin-error { color: var(--red); padding: 24px; white-space: pre-wrap; }

/* Per-list search input rendered above each paginated admin list.
   Diacritic + case insensitive filter applied client-side BEFORE
   pagination; resets that list to page 1 on input. */
.admin-list-search {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: var(--paper);
  font: inherit;
  font-size: 0.92rem;
}
.admin-list-search:focus {
  outline: none;
  border-color: var(--red);
}
.admin-list-search::placeholder { color: var(--muted); }

/* Pagination chrome rendered right after each long admin list
   (pending / approved / rejected / active topics). Hidden when the
   list fits on one page (helper checks totalPages === 1 and skips
   rendering). Per-page <select> sets a SHARED preference across
   every list so admin configures it once. */
.admin-pagination {
  margin: 10px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.03);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-pagination-info {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.admin-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.admin-pagination-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-pagination-page-size select {
  min-height: 32px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: var(--paper);
  font: inherit;
  font-weight: 950;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.admin-pagination-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.admin-pagination-btn:hover:not(:disabled) { background: var(--paper); color: var(--black); }
.admin-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-pagination-page {
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0 6px;
}

.admin-row-error {
  /* Sibling of .admin-row inside .admin-list (display: grid, single col).
     No grid-column override needed — it naturally takes its own row. */
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--red);
  background: rgba(225, 25, 25, 0.10);
  color: var(--paper);
  font-size: 0.9rem;
  line-height: 1.4;
}

.admin-card-with-link { display: grid; gap: 4px; }
.admin-card-link {
  margin-top: 8px;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  width: fit-content;
}
.admin-card-link:hover { color: var(--paper); }

.admin-row-person-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dotted transparent;
  transition: border-color 150ms ease;
}
.admin-row-person-link:hover { border-bottom-color: var(--red); }
.admin-row-detail-link {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
}
.admin-row-detail-link:hover { color: var(--paper); }

/* CTA row directly under the stats grid — quick jump to /admin/analytics
   and /admin/aktiviteti so admin doesn't have to dig in the nav. Sits
   in its own row inside .admin-section, separated from the grid by a
   subtle top margin. */
.admin-stats-cta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.admin-stats-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--paper);
  font-weight: 950;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}
.admin-stats-cta-btn:hover {
  background: var(--paper);
  color: var(--red);
  transform: translateY(-1px);
}
.admin-stats-cta-btn-secondary {
  background: transparent;
  border-color: var(--paper);
}
.admin-stats-cta-btn-secondary:hover {
  background: var(--paper);
  color: var(--black);
  border-color: var(--paper);
}
.admin-stats-cta-icon { font-size: 1.05rem; }
.admin-stats-cta-arrow { font-size: 1.05rem; }

.admin-card-link-btn {
  border: 0;
  background: transparent;
  margin-top: 6px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0 0 1px;
}

/* Geo modal city table — fixed-layout so long city names ellipsize
   rather than push the bar column off-screen, and the bar column
   fills the remaining width as a horizontal usage indicator. */
.geo-list { min-height: 80px; }
.geo-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.92rem;
}
.geo-table thead th {
  text-align: left;
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 950;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}
.geo-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(244, 239, 229, 0.06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.geo-table tbody tr:last-child td { border-bottom: 0; }
.geo-table th:nth-child(1), .geo-table td:nth-child(1) { width: 38%; }
.geo-table th:nth-child(2), .geo-table td:nth-child(2) { width: 14%; }
.geo-table th:nth-child(3), .geo-table td:nth-child(3) { width: 14%; text-align: right; }
.geo-table th:nth-child(4), .geo-table td:nth-child(4) { width: 34%; }
.geo-num { font-variant-numeric: tabular-nums; font-weight: 950; }
.geo-bar-col { padding: 0 10px; }
.geo-bar {
  display: block;
  height: 8px;
  background: var(--red);
  border-radius: 0;
  min-width: 4px;
}
.geo-table code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- /admin/analytics page ---- */
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.analytics-summary-card {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.035);
  padding: 16px 18px;
  display: grid;
  gap: 4px;
}
.analytics-summary-card .kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.analytics-summary-total {
  margin: 4px 0 2px;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.analytics-summary-geo {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.analytics-summary-coverage {
  font-weight: 950;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.analytics-summary-coverage[data-coverage="0"] { color: var(--red); }

.analytics-table-wrap {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  overflow-x: auto;
}

/* Info button next to a settings card title — small inline circle
   that opens an explainer modal. Sized so it doesn't disrupt the
   h2 baseline and stays clickable on mobile. */
.settings-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-left: 8px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 0.6em;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
.settings-info-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Info modal — read-only explainer; same chrome family as the
   confirm-modal, but longer-form body content and only a close action. */
.info-modal {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 640px;
  width: calc(100vw - 32px);
}
.info-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.info-modal-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px 30px 24px;
  max-height: 80vh;
  overflow-y: auto;
}
.info-modal-card .kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 950;
}
.info-modal-card h3 {
  margin: 0 0 18px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.info-modal-body p {
  margin: 0 0 14px;
  font-size: 0.93rem;
  line-height: 1.55;
}
.info-modal-body p:last-child {
  margin-bottom: 0;
}
.info-modal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.info-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Export-to-CSV button — small outlined pill that floats to the right
   above each analytics section's table. Sits between the section
   note and the data so it's always reachable but never dominant. */
.csv-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
}
.csv-export-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Daily trends section — 5 SVG bar charts in a responsive grid.
   Each chart card has a header (title + total + today/delta callout),
   the bars SVG that scales to card width, and a footer with the
   date range labels at the X-axis ends. */
.daily-trends-section .trends-window-picker {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.trends-window-btn {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.trends-window-btn:hover { color: var(--ink); }
.trends-window-btn.is-active {
  background: var(--red);
  color: #fff;
}
.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.trend-chart {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.03);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trend-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.trend-chart-title { display: flex; flex-direction: column; gap: 2px; }
.trend-chart-title strong { font-size: 0.95rem; font-weight: 900; }
.trend-chart-total { font-size: 0.74rem; color: var(--muted); }
.trend-chart-callout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.trend-today { font-size: 0.8rem; color: var(--muted); }
.trend-today strong { color: var(--ink); font-weight: 900; }
.trend-delta { font-size: 0.78rem; font-weight: 800; }
.trend-delta-up { color: #1f9d3d; }
.trend-delta-down { color: var(--red); }
.trend-delta-neutral { color: var(--muted); font-weight: 400; }
.trend-chart-svg {
  width: 100%;
  height: 70px;
  display: block;
}
.trend-bar {
  fill: var(--red);
  transition: opacity 0.12s;
}
.trend-bar:hover { opacity: 0.7; }
.trend-chart-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Bottom-of-page disclaimer for the analytics city rankings.
   Two rows (unknown-city / no-geo), each with 3 chips: signatures,
   person votes, topic votes. Stacks vertically on mobile. */
.analytics-disclaimer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.disclaimer-row-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.disclaimer-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.disclaimer-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.04);
  font-size: 0.85rem;
}
.disclaimer-chip-label { color: var(--muted); }
.disclaimer-chip strong {
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Top 3 cities podium — 3 stat cards rendered side-by-side.
   Rank 1 gets a red accent border + larger digits to read as the
   "winner". Cards stack on narrow screens (handled by minmax). */
.analytics-podium-section h2 {
  /* -2px from the global h2 clamp; calc() shifts the whole range
     down so the title stays slightly smaller at every viewport. */
  font-size: clamp(calc(2.15rem - 2px), 4.25vw, calc(4.55rem - 2px));
}
.analytics-podium {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.podium-card {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.04);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.podium-card.podium-rank-1 {
  border-color: var(--red);
  background: rgba(204, 35, 35, 0.07);
}
.podium-rank {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.podium-card.podium-rank-1 .podium-rank { color: var(--red); }
.podium-city {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.podium-card.podium-rank-1 .podium-city { font-size: 1.7rem; }
.podium-country {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.podium-votes {
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}
.podium-votes strong {
  font-size: 1.6rem;
  font-weight: 900;
}
.podium-card.podium-rank-1 .podium-votes strong { font-size: 2rem; }
.podium-votes span {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 4px;
}
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.analytics-table thead th {
  text-align: left;
  padding: 12px 14px;
  color: var(--muted);
  font-weight: 950;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
}
.analytics-table thead th.geo-num { text-align: right; }
.analytics-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(244, 239, 229, 0.06);
}
.analytics-table tbody td.geo-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}
.analytics-table tbody tr:last-child td { border-bottom: 0; }
.analytics-table tbody tr:hover { background: rgba(225, 25, 25, 0.06); }
.analytics-table .is-clickable {
  cursor: pointer;
  font-weight: 950;
}
.analytics-table .is-clickable:hover { color: var(--red); }
.analytics-table .geo-bar-col {
  width: 26%;
  padding: 0 14px;
}
.analytics-table code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.78rem;
  color: var(--muted);
}
.analytics-subhead {
  margin: 28px 0 8px;
  font-size: 1rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- /admin/person/:id ---- */
.internal-mode-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: var(--paper);
  padding: 10px 20px;
  text-align: center;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.internal-mode-banner button {
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  padding: 4px 12px;
  cursor: pointer;
  font-weight: 950;
  text-transform: uppercase;
  font-family: inherit;
  letter-spacing: 0.04em;
}
.internal-mode-banner button:hover { background: var(--paper); color: var(--red); }

/* Internal-only fields hidden by default; revealed when body has
   the .is-internal-mode class. Special-case table cells which need
   table-cell display to keep column alignment. */
.internal-only { display: none; }
body.is-internal-mode .internal-only { display: revert; }
body.is-internal-mode td.internal-only,
body.is-internal-mode th.internal-only { display: table-cell; }

.person-public-note {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--red);
  background: rgba(225, 25, 25, 0.06);
  color: var(--paper);
  font-size: 0.95rem;
}
.person-status-approved { color: var(--red); font-weight: 950; letter-spacing: 0.04em; }
.person-status-pending  { color: var(--paper); font-weight: 950; letter-spacing: 0.04em; }
.person-status-rejected { color: var(--muted); font-weight: 950; letter-spacing: 0.04em; }

.person-timeline {
  display: grid;
  gap: 8px;
}
.person-timeline-row {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.person-timeline-row strong {
  min-width: 220px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.person-timeline-row small { font-size: 0.82rem; }

.person-geo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 920px) {
  .person-geo-grid { grid-template-columns: 1fr; }
}
.person-geo-grid h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.person-source-mix {
  display: grid;
  gap: 14px;
}
.person-source-bar {
  display: flex;
  height: 28px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
}
.person-source-fill {
  display: block;
  height: 100%;
}
.person-source-fill.person-source-real { background: var(--red); }
.person-source-fill.person-source-backfill { background: rgba(225, 25, 25, 0.4); }
.person-source-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
}
.person-source-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.person-source-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.person-source-dot.person-source-real { background: var(--red); }
.person-source-dot.person-source-backfill { background: rgba(225, 25, 25, 0.4); }

.person-variants-table tbody tr:hover { background: rgba(225, 25, 25, 0.06); }
/* Row pre-flagged as unapprovable (would fail server validation if
   admin clicked Mirato). Soft red background + warn chip after the
   name + the Mirato button is disabled with a hint. Admin needs to
   Ndrysho emrin first. */
.person-variants-table tbody tr.variant-row-warn { background: rgba(225, 25, 25, 0.07); }
.person-variants-table .variant-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.person-variants-table .person-variant-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.person-variants-table .person-variant-actions { white-space: nowrap; }
.person-variants-table .person-variant-actions button {
  margin-right: 4px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}
.person-variants-table .person-variant-actions button:hover { background: var(--paper); color: var(--black); }
.person-variants-table .person-variant-actions .admin-btn-delete { border-color: var(--red); color: var(--red); }
.person-variants-table .person-variant-actions .admin-btn-delete:hover { background: var(--red); color: var(--paper); }

.person-recent-feed {
  display: grid;
  gap: 6px;
}
.person-vote-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  font-size: 0.92rem;
  align-items: baseline;
}
.person-vote-when { font-size: 0.84rem; }
.person-vote-source { font-size: 0.78rem; }

.internal-toggle-card {
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
}
.internal-toggle-label {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  cursor: pointer;
}
.internal-toggle-label input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--red);
}
.internal-toggle-label strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}
.internal-toggle-label small {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* ---- /admin/settings ---- */
.settings-block {
  display: grid;
  gap: 14px;
}
.settings-card {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  padding: 14px 16px;
}
.settings-card h3 {
  margin: 0 0 8px;
  font-size: 0.96rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
}
.settings-list code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.84rem;
}
.settings-list.is-pending li {
  color: var(--red);
}
.settings-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  font-size: 0.92rem;
}
.settings-table th {
  text-align: left;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-weight: 950;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.settings-table th.geo-num { text-align: right; }
.settings-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(244, 239, 229, 0.06);
}
.settings-table td.geo-num { text-align: right; font-variant-numeric: tabular-nums; }
.settings-table tr:last-child td { border-bottom: 0; }
.settings-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.settings-action-btn {
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.settings-action-btn:hover:not(:disabled) { background: var(--paper); color: var(--red); }
.settings-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-status { margin: 0; font-size: 0.9rem; }
.settings-status.is-error { color: var(--red); }

/* Vote caps card — two side-by-side groups (persons + topics) each
   with 2 dropdowns. Wraps to single column on narrow screens. */
.settings-vote-caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 720px) {
  .settings-vote-caps { grid-template-columns: 1fr; }
}
.settings-vote-caps-group {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}
.settings-vote-caps-group h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
}
.settings-vote-caps-group label {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}
.settings-vote-caps-group label em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.settings-vote-caps-group select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: var(--paper);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}
.settings-vote-caps > .settings-actions {
  grid-column: 1 / -1;
}

/* Auto-approve duplicates toggle — single big checkbox row above the
   Save button. Status text below reflects the saved value, not the
   current checkbox value, so admin can see whether their edit is
   pending vs persisted. */
.settings-autoapprove { display: grid; gap: 14px; }
.settings-toggle {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
  cursor: pointer;
}
.settings-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--red);
}
.settings-toggle-label { display: grid; gap: 4px; }
.settings-toggle-label strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.settings-toggle-label small {
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* ---- activity feed (/admin/aktiviteti) ---- */
.activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* margin lives on the toolbar now */
  margin: 0;
}
.activity-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.activity-page-size select {
  min-height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: var(--paper);
  font: inherit;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.activity-shown {
  margin: 0 0 10px;
  font-size: 0.85rem;
  text-align: center;
}
.activity-filter {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 950;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  cursor: pointer;
}
.activity-filter:hover { color: var(--paper); border-color: var(--paper); }
.activity-filter.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.activity-feed { display: grid; gap: 8px; }
.activity-row { display: block; }
.activity-kicker {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.activity-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--paper);
}
.activity-line strong { font-weight: 950; }
.activity-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Optional tone tints — colored left border per event family. */
.activity-tone-sign { border-left: 3px solid var(--paper); }
.activity-tone-confirm { border-left: 3px solid var(--paper); opacity: 0.95; }
.activity-tone-propose { border-left: 3px solid var(--red); }
.activity-tone-vote { border-left: 3px solid rgba(225, 25, 25, 0.55); }
.activity-tone-mod-ok { border-left: 3px solid rgba(244, 239, 229, 0.55); }
.activity-tone-mod-no { border-left: 3px solid var(--red); background: rgba(225, 25, 25, 0.05); }
.activity-tone-other { border-left: 3px solid var(--line); }

.activity-load-more-wrap {
  display: grid;
  justify-content: center;
  margin-top: 22px;
}
#activity-load-more {
  padding: 12px 22px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
#activity-load-more:hover { background: var(--paper); color: var(--black); }
#activity-load-more:disabled { opacity: 0.6; cursor: not-allowed; }
#activity-end { margin: 0; font-size: 0.85rem; text-align: center; }

.activity-revert {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-weight: 950;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}
.activity-revert:hover { background: var(--paper); color: var(--black); }
.activity-revert:disabled { opacity: 0.6; cursor: not-allowed; }

.activity-row.is-reverted {
  opacity: 0.35;
  transition: opacity 600ms ease;
}

.names-propose-section { padding-top: 64px; padding-bottom: 64px; }
.names-propose-left {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.names-propose-left .vote-heading { margin: 0; }
.names-propose-left .pledge-form { padding: 22px; gap: 12px; }
.names-propose-list-col {
  min-width: 0;
  margin-top: 58px;   /* push down so the list aligns with the h2, not the kicker */
}
/* Force the "Vota" sub-label inside every badge to be the same muted color
   regardless of which card sits behind it (the red gradient on topic-card-1
   was making the muted grey read as a different shade). */
.names-propose-list-col .topic-board .vote-badge small {
  color: var(--muted);
}
.names-propose-list-col .topic-board .topic-card.is-current-vote .vote-badge small,
.names-propose-list-col .topic-board .topic-pill.is-current-vote .vote-badge small {
  color: var(--paper);
}

/* voiceMarkup() outputs <div class="topic-board voice-board"> which would
   normally hand control to voice-board overrides (shorter cards, smaller
   centered text, hidden Vota sub-label). Inside the propose-mode list on
   rezultatet, we want the topic-board look to win — match the preview file
   pixel-for-pixel. These overrides have specificity 0,3,0 vs the voice-board
   rules' 0,2,0 so they take precedence here only. */
.names-propose-list-col .voice-board .topic-card {
  grid-template-columns: 1fr;
  min-height: 86px;
  padding: 14px 108px 14px 18px;
  text-align: left;
}
.names-propose-list-col .voice-board .topic-pill {
  min-height: 66px;
  padding: 14px 86px 14px 16px;
  text-align: left;
}
.names-propose-list-col .voice-board .topic-card span {
  text-align: left;
  font-size: clamp(1.15rem, 1.9vw, 1.85rem);
  line-height: 1.04;
}
.names-propose-list-col .voice-board .topic-pill span {
  text-align: left;
  font-size: clamp(0.78rem, 0.98vw, 0.94rem);
  line-height: 1.05;
}
.names-propose-list-col .voice-board .vote-badge small {
  display: block;
}
/* Pending badge text "Në shqyrtim" doesn't fit the fixed 82px vote-badge slot
   at the default 0.88rem; clip + shrink so it stays on one line inside the
   badge instead of overflowing past the card's right edge. */
.vote-badge.is-pending-text {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}

.admin-logout-btn {
  padding: 10px 16px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  border-radius: 999px;
  font-weight: 950;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}
.admin-logout-btn:hover {
  background: var(--red);
  color: var(--paper);
}
.admin-logout-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.admin-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  display: grid;
  gap: 6px;
}
.admin-footer p { margin: 0; }
.admin-footer strong { color: var(--paper); font-weight: 950; letter-spacing: 0.02em; text-transform: uppercase; }
.admin-footer a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.admin-footer a:hover { color: var(--red); }
.admin-footer nav {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
}
.admin-footer nav a {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.admin-footer nav a:hover { color: var(--paper); border: 0; }
@media (max-width: 560px) {
  .admin-footer { padding: 18px 16px 26px; font-size: 0.82rem; }
  /* On phones: stack the row content above the actions cluster.
     Without this, even with flex-wrap the row keeps two columns and
     the actions cluster squeezes itself into ~50% of viewport width,
     stretching button labels and overflowing the screen. */
  .admin-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-row > div:first-child { flex: 1 1 auto; }
  .admin-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .admin-actions button,
  .admin-actions a {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.admin-info {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 5% 0%, rgba(225, 25, 25, 0.10), transparent 45%),
    rgba(244, 239, 229, 0.025);
}
.admin-info h2 { margin-bottom: 18px; }
.admin-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.admin-info-list li {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-left: 3px solid var(--red);
  background: rgba(244, 239, 229, 0.04);
}
.admin-info-list strong {
  display: block;
  color: var(--paper);
  font-weight: 950;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.admin-info-list span {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.admin-info-list em {
  color: var(--paper);
  font-style: normal;
  font-weight: 850;
}

/* CTA block under the admin-info-list — surfaces the "Kontrollo emrat"
   workflow as a sibling to the moderation explanation. */
.admin-info-cta {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(225, 25, 25, 0.06);
  display: grid;
  gap: 10px;
}
.admin-info-cta p { margin: 0; line-height: 1.5; font-size: 0.95rem; }
.admin-info-cta-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--paper);
  background: var(--red);
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.admin-info-cta-btn:hover { background: var(--paper); color: var(--red); }
.admin-info-cta-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border: 1px solid currentColor;
  font-size: 0.82rem;
  font-weight: 950;
  text-align: center;
}

/* Kontrollo emrat modal — wider than the standard confirm-modal
   because it lists multiple variants per group and may scroll a long
   list. The base .confirm-modal pins the <dialog> itself to
   max-width: 480px — without overriding THAT, an oversized inner
   card just overflows the dialog and the intro paragraph bleeds
   past the right border. So widen the dialog AND let the card fill
   it, instead of setting a separate card max-width. */
.check-names-modal {
  max-width: 540px;
  width: calc(100% - 32px);
}
.check-names-modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.check-names-card {
  width: 100%;
  max-height: 88vh;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}
.check-names-card > p {
  overflow-wrap: break-word;
  word-break: break-word;
}
.check-names-groups {
  display: grid;
  gap: 18px;
}
.check-names-empty {
  padding: 20px;
  border: 1px dashed var(--line);
  background: rgba(244, 239, 229, 0.03);
}
.check-names-group {
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.03);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.check-names-group.is-unified {
  border-color: rgba(64, 200, 64, 0.4);
  background: rgba(64, 200, 64, 0.06);
  opacity: 0.85;
}
.check-names-group-head {
  display: grid;
  gap: 2px;
}
.check-names-group-head strong {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.check-names-group-head small {
  color: var(--muted);
  font-size: 0.82rem;
}
.check-names-variants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.check-names-variant {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  cursor: pointer;
}
.check-names-variant input[type="radio"] {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--red);
}
.check-names-variant-main {
  display: grid;
  gap: 2px;
}
.check-names-variant-main strong {
  font-size: 0.98rem;
  text-transform: none;
}
.check-names-variant-main small {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.check-names-variant:has(input[type="radio"]:checked) {
  border-color: var(--red);
  background: rgba(225, 25, 25, 0.10);
}
.check-names-variant-custom .check-names-custom-input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: var(--paper);
  font: inherit;
}
.check-names-group-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.check-names-unify {
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid var(--paper);
  background: var(--paper);
  color: var(--black);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.check-names-unify:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--paper); }
.check-names-unify:disabled { opacity: 0.55; cursor: not-allowed; }
.check-names-status { margin: 0; font-size: 0.88rem; }
.check-names-status.is-error { color: var(--red); }
.admin-note {
  margin: 10px 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--line);
  background: rgba(244, 239, 229, 0.03);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.admin-note strong { color: var(--paper); font-weight: 950; }

.admin-rejected-details {
  margin-top: 16px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.025);
}
.admin-rejected-details > summary {
  padding: 14px 18px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 950;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  list-style: none;
}
.admin-rejected-details > summary::-webkit-details-marker { display: none; }
.admin-rejected-details > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 10px;
  color: var(--red);
  transition: transform 150ms ease;
}
.admin-rejected-details[open] > summary::before { transform: rotate(90deg); }
.admin-rejected-details > summary:hover { color: var(--paper); }
.admin-rejected-details > summary span[data-rejected-count] {
  color: var(--red);
  margin-left: 4px;
}
.admin-rejected-details > .admin-list {
  margin: 0;
  padding: 0 14px 14px;
}

.admin-btn-delete {
  border-color: var(--red);
  color: var(--red);
}
.admin-btn-delete:hover {
  background: var(--red);
  color: var(--paper);
}

.confirm-modal {
  border: 2px solid var(--red);
  background: #0a0606;
  color: var(--paper);
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  border-radius: 0;
}
.confirm-modal::backdrop {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(2px);
}
.confirm-modal-card {
  padding: 26px 26px 22px;
  display: grid;
  gap: 12px;
}
.confirm-modal-card h3 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.confirm-modal-card p { margin: 0; line-height: 1.5; }
.confirm-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.confirm-modal-actions button {
  min-height: 46px;
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.confirm-modal-actions .confirm-cancel:hover {
  background: var(--paper);
  color: var(--black);
}
.confirm-modal-actions .confirm-destroy {
  border-color: var(--red);
  background: var(--red);
  color: var(--paper);
}
.confirm-modal-actions .confirm-destroy:hover {
  background: var(--deep-red);
  border-color: var(--deep-red);
}
.confirm-modal-actions .confirm-destroy:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.confirm-modal-actions .confirm-save {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--black);
}
.confirm-modal-actions .confirm-save:hover {
  background: transparent;
  color: var(--paper);
}
.text-input-modal { max-width: 540px; }
.text-input-modal-label {
  display: grid;
  gap: 6px;
  margin: 4px 0 4px;
}
.text-input-modal-label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.text-input-modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.04);
  color: var(--paper);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 64px;
}
.text-input-modal textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.text-input-modal select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.04);
  color: var(--paper);
  font: inherit;
  line-height: 1.45;
  appearance: none;
}
.text-input-modal select:focus { outline: 2px solid var(--red); outline-offset: 1px; }

.admin-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-row-meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  word-break: break-word;
}
.admin-row-meta a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.admin-row-meta a:hover { color: var(--red); }
.admin-row-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--paper);
}

.admin-dup-badge {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-proposal-count {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(244, 239, 229, 0.04);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-split-hint {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--paper);
  color: var(--paper);
  background: rgba(244, 239, 229, 0.10);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-row.is-duplicate { border-left: 3px solid var(--red); }

.admin-public-note {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border-left: 2px solid var(--red);
  background: rgba(225, 25, 25, 0.06);
  color: var(--paper);
  font-style: normal;
}

.admin-topic-row.is-inactive { opacity: 0.62; }
.admin-topic-state {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-topic-row:not(.is-inactive) .admin-topic-state {
  border-color: var(--red);
  color: var(--red);
}
.admin-topic-actions {
  flex-wrap: wrap;
}
.admin-topic-actions button[data-direction] { min-width: 38px; padding: 0 10px; }
.admin-topic-actions button:disabled { opacity: 0.35; cursor: not-allowed; }

.topic-create-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px dashed var(--line);
  background: rgba(244, 239, 229, 0.025);
}
.topic-create-form label {
  display: grid;
  gap: 4px;
}
.topic-create-form label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.topic-create-form input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(244, 239, 229, 0.04);
  color: var(--paper);
}
.topic-create-form input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.topic-create-form button[type="submit"] {
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid var(--paper);
  background: var(--paper);
  color: var(--black);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.topic-create-form button[type="submit"]:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.topic-create-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}
.topic-create-status[data-state="success"] { border-color: var(--red); color: var(--paper); background: rgba(225, 25, 25, 0.08); }
.topic-create-status[data-state="error"] { border-color: var(--red); color: var(--red); background: rgba(225, 25, 25, 0.08); }

@media (max-width: 560px) {
  .topic-create-form { grid-template-columns: 1fr; }
  .topic-create-form button[type="submit"] { width: 100%; }
  .admin-topic-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .admin-topic-actions button[data-direction] { grid-column: span 1; }
  .admin-topic-actions .admin-btn-delete { grid-column: 1 / -1; }
}

.pledge-section, .demands-section, .choice-section, .voices-section, .form-page-grid, .choice-page-section {
  display: grid;
  grid-template-columns: 86px minmax(0, 0.85fr) minmax(330px, 0.75fr);
  gap: 34px;
  align-items: start;
}
.form-page-grid, .choice-page-section { grid-template-columns: minmax(360px, 1.1fr) minmax(300px, 0.9fr); }
.topics-page-section {
  grid-template-columns: minmax(380px, 0.72fr) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  padding-top: 36px;
}
.topics-page-section .topic-submit-card {
  width: 100%;
  justify-self: stretch;
  position: sticky;
  top: 18px;
  padding: 18px 18px 18px 20px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--red);
  background: rgba(244,239,229,0.025);
  gap: 10px;
}
.topics-page-section .topic-submit-card h2 {
  font-size: clamp(1.9rem, 2.6vw, 3.2rem);
  margin: 0;
}
.topics-page-section .topic-submit-card p { margin: 0; }
.topics-page-section .mini-form { padding: 0; border: 0; background: transparent; gap: 10px; }
.topics-page-section .mini-form input { min-height: 48px; }
.topics-page-section .mini-form button { min-height: 54px; }
.topic-vote-column { min-width: 0; display: grid; gap: 14px; }
.section-number {
  color: var(--red);
  font-size: 1.7rem;
  font-weight: 950;
}
h2 {
  margin: 0;
  font-size: clamp(2.15rem, 4.25vw, 4.55rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.pledge-form {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 2px solid var(--paper);
  background: rgba(244,239,229,0.04);
}
.big-form { padding: 28px; }
label { display: block; color: var(--muted); font-weight: 850; }
label input { margin-top: 8px; }
fieldset {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
}
legend {
  padding: 0 8px;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.visibility-choice {
  display: grid;
  gap: 10px;
}
input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #0d0d0d;
  color: var(--paper);
}
.checkbox-label { display: flex; align-items: flex-start; gap: 12px; }
.checkbox-label input { width: 22px; min-height: 22px; margin-top: 3px; accent-color: var(--red); }
.pledge-form p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

/* Typeahead popover under the "Emri i personit të propozuar" input.
   JS adds .propose-name-label to the wrapping <label> so we can
   position the suggest box absolutely below the input. */
.propose-name-label { position: relative; }
.propose-name-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--paper);
  background: #0a0a0a;
  box-shadow: 0 18px 38px rgba(0,0,0,0.55);
}
.propose-name-suggest[hidden] { display: none; }
/* Bare button so the global "form button" rule (inline-flex +
   justify-content: center + min-height 54 + uppercase + paper bg)
   doesn't take over. Every property the cascade was pushing onto our
   suggestion buttons is reset here, then we add only the typeahead
   look we actually want: full-width row, single line of name, left-
   aligned, normal case. */
.propose-name-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 229, 0.08);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.propose-name-suggest-item small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.propose-name-suggest-item:last-child { border-bottom: 0; }
.propose-name-suggest-item.is-approved { color: var(--red); }
.propose-name-suggest-item:hover,
.propose-name-suggest-item:hover.is-approved,
.propose-name-suggest-item.is-active,
.propose-name-suggest-item.is-active.is-approved {
  background: rgba(225, 25, 25, 0.18);
  color: var(--paper);
  /* form button :hover rule applies transform: translateY(-2px) —
     looks broken on a row inside a popover, so cancel it. */
  transform: none;
}
.required-note {
  color: var(--muted) !important;
  font-size: 0.86rem !important;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.required-note span,
.required-mark {
  color: var(--paper);
  background: rgba(225,25,25,0.28);
  border: 1px solid rgba(225,25,25,0.7);
  padding: 2px 7px;
  margin-left: 6px;
  font-size: 0.72em;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.optional-mark {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-form-status],
[data-vote-status] {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.04);
  color: var(--paper) !important;
  font-weight: 850;
  line-height: 1.45;
}
[data-form-status][hidden],
[data-vote-status][hidden] { display: none; }
[data-form-status][data-status-kind="success"],
[data-vote-status][data-status-kind="success"] {
  border-color: rgba(244,239,229,0.55);
  background: rgba(244,239,229,0.08);
}
[data-form-status][data-status-kind="error"],
[data-vote-status][data-status-kind="error"] {
  border-color: rgba(225,25,25,0.75);
  background: rgba(225,25,25,0.12);
}
.turnstile-placeholder,
.turnstile-box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px dashed rgba(244,239,229,0.42);
  background: rgba(244,239,229,0.03);
}
.turnstile-box {
  min-height: 66px;
  padding: 10px;
  overflow: hidden;
}
.vote-turnstile {
  max-width: 340px;
  justify-self: end;
}
.turnstile-missing {
  color: var(--muted);
  font-weight: 850;
  line-height: 1.35;
}
.turnstile-placeholder span {
  width: 24px;
  height: 24px;
  border: 2px solid var(--paper);
  box-shadow: inset 0 0 0 5px var(--black);
  background: var(--red);
}
.turnstile-placeholder p { font-weight: 900; text-transform: uppercase; color: var(--paper); }
.explain-card {
  border-left: 6px solid var(--red);
  padding: 22px 0 22px 22px;
  display: grid;
  gap: 18px;
}
.explain-card ol { margin: 0; padding-left: 24px; }
.explain-card h2 { font-size: clamp(2.6rem, 6vw, 6rem); }

.demands-section { grid-template-columns: 86px 0.7fr 1.3fr; }
.demands-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: demand;
  border-top: 1px solid var(--line);
}
.demands-list li {
  counter-increment: demand;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-size: clamp(1.05rem, 1.8vw, 1.6rem);
  line-height: 1.25;
  font-weight: 850;
}
.demands-list li::before {
  content: counter(demand, decimal-leading-zero);
  color: var(--red);
  font-weight: 950;
}
.detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: detail;
}
.detail-list li {
  counter-increment: detail;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.detail-list li::before {
  content: counter(detail, decimal-leading-zero);
  color: var(--red);
  font-weight: 950;
  font-size: 1.6rem;
}
.detail-list strong { font-size: clamp(1.35rem, 2.3vw, 2.2rem); line-height: 1.1; }
.detail-list p { grid-column: 2; margin: 8px 0 0; }

.choice-section { grid-template-columns: 86px 0.78fr 1.22fr; }
.choice-heading p { margin: 22px 0 0; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.large-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid button {
  min-height: 64px;
  justify-content: flex-start;
  text-align: left;
  background: rgba(244,239,229,0.02);
}
.choice-grid button:hover { background: var(--red); border-color: var(--red); }

.voice-card {
  display: grid;
  gap: 18px;
  border-left: 6px solid var(--red);
  padding: 22px 0 22px 22px;
}
.voice-card p, .voice-card small { margin: 0; }
.voice-card small { font-size: 0.94rem; }
.voice-card button { justify-self: start; }

.transparency-section {
  display: grid;
  gap: 24px;
}
.status-grid, .status-page-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.status-grid article, .status-page-section article {
  border: 1px solid var(--line);
  padding: 20px;
  background: rgba(244,239,229,0.03);
}
.status-grid strong, .status-page-section strong {
  color: var(--red);
  display: block;
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-transform: uppercase;
}
.status-grid p, .status-page-section p { margin: 0; font-size: 1rem; color: var(--muted); line-height: 1.55; }
.narrow-section { max-width: 900px; }
.narrow-section h2 { margin-bottom: 20px; }
.results-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 92px 24px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
  gap: 34px;
}
.results-heading p {
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.58;
}
.result-list { display: grid; gap: 14px; }
.result-counter-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.result-card {
  border: 1px solid var(--line);
  background: rgba(244,239,229,0.035);
  padding: 22px;
  display: grid;
  gap: 14px;
}
.result-card strong {
  display: block;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.result-card span { color: var(--red); font-weight: 950; text-transform: uppercase; }
.result-card p, .result-card footer { color: var(--muted); margin: 0; line-height: 1.5; }
.result-card footer b { color: var(--paper); }
.result-meter { height: 12px; border: 1px solid var(--line); background: #0d0d0d; }
.result-meter span { display: block; height: 100%; width: var(--value); background: var(--red); }
.result-counter-card {
  border: 2px solid var(--paper);
  background: rgba(225,25,25,0.08);
  padding: 24px;
  min-height: 240px;
  display: grid;
  /* Was `112px auto 1fr` paired with a 5.4–8.8rem number — on wide
     viewports the digits ballooned past the column width and the three
     cards' numbers ran into each other (read as "551260057" instead of
     "550 / 260 / 57"). Auto-sized row + a tighter clamp keeps the
     "big number" visual without overflowing. */
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  gap: 14px;
}
.result-counter-card strong {
  display: block;
  color: var(--red);
  /* Base size for ≤3-digit values. Same dynamic scaling as the
     signature counter (.is-stat-* classes set by the JS that
     writes the value). */
  font-size: clamp(3rem, 4.5vw, 4.6rem);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  align-self: start;
}
.result-counter-card strong.is-stat-thousands {
  font-size: clamp(2.5rem, 3.7vw, 3.6rem);  /* 1,000+ */
}
.result-counter-card strong.is-stat-ten-thousands {
  font-size: clamp(2.1rem, 3vw, 3rem);      /* 10,000+ */
}
.result-counter-card strong.is-stat-hundred-thousands {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);  /* 100,000+ */
}
.result-counter-card span {
  display: block;
  color: var(--paper);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}
.result-counter-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.muted-result-card { opacity: 0.78; }
.locked-card { border-color: rgba(225,25,25,0.45); }
.gated-results .result-card strong { color: var(--paper); }
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 42px 24px 54px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.site-footer strong {
  color: var(--paper);
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-size: 1.35rem;
}
.site-footer p { max-width: 780px; margin: 0; line-height: 1.55; }
.site-footer nav { justify-content: flex-start; }
.site-footer nav a { border-radius: 0; }

.share-section {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.share-section h2 { max-width: 850px; }
.share-section p:not(.kicker):not(.share-status) {
  margin: 22px 0 28px;
  color: var(--red);
  font-size: clamp(1.35rem, 2.7vw, 2.65rem);
  line-height: 1.08;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.share-status {
  margin: 14px 0 0;
  padding: 10px 16px;
  display: inline-block;
  border: 1px solid currentColor;
  color: var(--paper);
  background: rgba(244, 239, 229, 0.05);
  font-weight: 850;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.4;
}
.share-status[data-state="success"] { color: var(--paper); background: rgba(225, 25, 25, 0.18); border-color: var(--red); }
.share-status[data-state="error"] { color: var(--red); border-color: var(--red); }
@media (max-width: 1040px) {
  nav { max-width: 560px; }
  .home-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  nav { display: none; }
  .poster-grid, .proof-section, .pledge-section, .demands-section, .choice-section, .voices-section, .form-page-grid, .choice-page-section, .status-page-section, .results-section, .vote-preview-section { grid-template-columns: 1fr; }
  .topics-page-section { grid-template-columns: 1fr; }
  .topics-page-section .topic-submit-card { order: 2; }
  .topics-page-section .topic-vote-column { order: 1; }
  .topic-podium, .topic-list { grid-template-columns: 1fr; }
  .topic-board .topic-card { padding-right: 104px; }
  .topic-board .topic-pill { padding-right: 96px; }
  .vote-badge { width: 84px; }
  .small-proof, .topic-inline-form { grid-column: 1; }
  .chair-stage { min-height: 380px; }
  .empty-chair { width: min(82vw, 320px); }
  .ticker { overflow-x: auto; }
  .status-grid { grid-template-columns: 1fr; }
  .admin-section { padding: 40px 20px; }
  /* Below 920px (tablet/phone), 4 narrow columns squeeze the digit
     past readable size. Drop to 2 cols × 4 rows so each card has
     ~50% width and a 4-digit value renders comfortably. */
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-card strong { font-size: clamp(2rem, 5.5vw, 2.8rem); }
  .admin-row strong { font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .topbar, .poster-grid, .proof-section, .pledge-section, .demands-section, .choice-section, .voices-section, .transparency-section, .share-section, .page-hero, .home-actions, .form-page-grid, .detail-list-section, .choice-page-section, .status-page-section, .results-section, .site-footer, .vote-preview-section { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 3.25rem; letter-spacing: -0.005em; line-height: 1.02; }
  h2 { letter-spacing: 0; overflow-wrap: normal; }
  .page-hero h1 { font-size: 2.85rem; }
  .home-actions h2 { font-size: 2rem; letter-spacing: 0; }
  .counter-card strong { font-size: 5rem; }
  .subtitle { font-size: 1.8rem; }
  .actions { display: grid; }
  .button { width: 100%; }
  .choice-grid, .home-actions, .vote-grid, .result-counter-list { grid-template-columns: 1fr; }
  .people-empty { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px; text-align: left; }
  .people-empty-chair { max-width: 96px; }
  .people-empty-copy .button { justify-self: stretch; width: 100%; }
  .detail-list li { grid-template-columns: 1fr; }
  .detail-list p { grid-column: 1; }
  .topic-board .topic-card { min-height: 78px; padding: 12px 88px 12px 14px; }
  .topic-board .topic-card span { font-size: 1.15rem; line-height: 1.05; }
  .topic-board .topic-card small { font-size: 0.68rem; }
  .topic-board .topic-pill { padding: 12px 84px 12px 14px; }
  /* On phones the "e detyrueshme" / "opsional" badges next to form labels
     get clipped because they sit inline with the label text. Drop them to
     their own line and pin to the start. */
  .required-mark, .optional-mark {
    display: inline-block;
    margin-left: 0;
    margin-top: 4px;
    width: fit-content;
  }
  label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  /* Hamburger drop-down nav: replaces the hidden header nav on phones. */
  .topbar { position: relative; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .topbar > nav {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    background: var(--black);
    border: 1px solid var(--line);
    padding: 14px;
    gap: 8px;
    min-width: 200px;
    z-index: 20;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
  }
  .topbar > nav.is-open { display: flex; }
  .topbar > nav a {
    padding: 12px 16px;
    border-radius: 0;
    text-align: left;
    width: 100%;
  }
  .admin-section { padding: 32px 16px; }
  .admin-grid { gap: 10px; }
  .admin-card { padding: 14px; }
  .admin-card strong { font-size: 1.9rem; line-height: 1; }
  .admin-card span { font-size: 0.78rem; }
  .admin-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
  }
  .admin-row strong { font-size: 1.1rem; }
  .admin-row p, .admin-row small { font-size: 0.92rem; line-height: 1.4; }
  .admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-actions button { width: 100%; min-height: 46px; }
  .admin-actions .admin-btn-delete { grid-column: 1 / -1; }
  .topic-board .topic-pill span { font-size: 0.85rem; }
  .vote-badge { width: 72px; font-size: 0.78rem; }
  .vote-action { font-size: 0.78rem; }
}