/* ─────────────────────────────────────────────────────────────────────────────
   Manyfesto — Main stylesheet
   Design: Warm editorial. Civic but approachable. Evidence, wit, kindness.
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ─── Tokens ─────────────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --ink:          #1a1814;
  --ink-muted:    #4a4742;
  --ink-faint:    #8a8784;
  --paper:        #faf9f7;
  --paper-warm:   #f3f0eb;
  --paper-card:   #ffffff;
  --border:       #e2ddd8;
  --border-strong:#c8c3bc;

  /* Brand */
  --manyfesto-red:    #c8321e;
  --manyfesto-red-dk: #a02616;
  --gold:             #b8851a;
  --gold-light:       #fdf3dc;
  --silver:           #6b7a8d;
  --silver-light:     #edf1f5;
  --success:          #1d6b44;
  --success-light:    #e8f5ee;
  --danger:           #b42b1a;
  --danger-light:     #fdecea;
  --info:             #18508a;
  --info-light:       #e8f0fa;
  --warning:          #8a5c10;
  --warning-light:    #fdf3dc;

  /* Tiers */
  --tier-fringe:    #6b6966;
  --tier-local:     #185FA5;
  --tier-regional:  #534AB7;
  --tier-national:  #BA7517;
  --tier-global:    #C8321E;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout */
  --max-width: 1100px;
  --content-width: 720px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(26,24,20,0.08);
  --shadow-md: 0 4px 12px rgba(26,24,20,0.10);
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--manyfesto-red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* ─── Typography ─────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { max-width: 68ch; }
p + p { margin-top: var(--space-4); }

.lead {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ─── Layout ─────────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.wrap--narrow {
  max-width: var(--content-width);
}

main {
  flex: 1;
  padding: 0 0 var(--space-7) 0;
}

.page-header {
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-7);
}

/* ─── Site header ─────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--ink);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--manyfesto-red);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 60px;
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--paper);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__logo:hover {
  text-decoration: none !important;
  color: var(--paper);
}

.site-header__logo span {
  color: var(--manyfesto-red);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
}

.site-header__nav a {
  color: rgba(250,249,247,0.75);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.15s;
}

.site-header__nav a:hover,
.site-header__nav a.active {
  color: var(--paper);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.site-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--paper);
  font-size: 0.9rem;
}

.site-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--manyfesto-red);
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.site-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--paper);
  padding: var(--space-2);
}

/* ─── Site footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: rgba(250,249,247,0.6);
  font-size: 0.85rem;
  padding: var(--space-6) 0;
  margin-top: auto;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-footer a {
  color: rgba(250,249,247,0.7);
}

.site-footer__notice {
  font-style: italic;
  color: rgba(250,249,247,0.45);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--manyfesto-red);
  color: white;
  border-color: var(--manyfesto-red);
}
.btn--primary:hover {
  background: var(--manyfesto-red-dk);
  border-color: var(--manyfesto-red-dk);
  text-decoration: none;
  color: white;
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--paper-warm);
  border-color: var(--ink-muted);
  text-decoration: none;
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250,249,247,0.3);
}
.btn--ghost:hover {
  background: rgba(250,249,247,0.1);
  border-color: rgba(250,249,247,0.6);
  text-decoration: none;
  color: var(--paper);
}

.btn--sm {
  padding: 6px var(--space-4);
  font-size: 0.8rem;
}

.btn--google {
  background: white;
  color: #3c4043;
  border-color: #dadce0;
  font-weight: 600;
}
.btn--google:hover {
  background: #f8f9fa;
  border-color: #c6c7ca;
  text-decoration: none;
  color: #3c4043;
}

.btn--google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--reddit {
  background: #FF4500;
  color: white;
  border-color: #FF4500;
}
.btn--reddit:hover {
  background: #d63a00;
  border-color: #d63a00;
  text-decoration: none;
  color: white;
}
.btn--reddit svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--facebook {
  background: #1877F2;
  color: white;
  border-color: #1877F2;
}
.btn--facebook:hover {
  background: #0e5fbe;
  border-color: #0e5fbe;
  text-decoration: none;
  color: white;
}
.btn--facebook svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--block {
  width: 100%;
  justify-content: center;
}

/* ─── Forms ──────────────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: var(--space-1);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px var(--space-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--paper-card);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--manyfesto-red);
  box-shadow: 0 0 0 3px rgba(200,50,30,0.12);
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-input.has-error,
.form-textarea.has-error { border-color: var(--danger); }

.char-count {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: right;
  margin-top: var(--space-1);
}

.char-count.near-limit { color: var(--warning); }
.char-count.at-limit   { color: var(--danger);  }

/* ─── Alerts & flash messages ────────────────────────────────────────────────── */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  border-left: 4px solid currentColor;
  margin-bottom: var(--space-5);
}

.alert--success { background: var(--success-light); color: var(--success);  }
.alert--error   { background: var(--danger-light);  color: var(--danger);   }
.alert--info    { background: var(--info-light);    color: var(--info);     }
.alert--warning { background: var(--warning-light); color: var(--warning);  }

.error-list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--danger);
  font-size: 0.9rem;
}

/* ─── Form helpers (small, reusable bits inside forms) ───────────────────── */

/* Red asterisk after a required label */
.form-required { color: var(--manyfesto-red); }

/* Light-weight "(optional)" tag inside a label */
.form-optional { font-weight: 400; color: var(--ink-faint); font-size: 0.85em; }

/* Vertical stacked form layout — replaces inline display:flex flex-direction:column gap */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Visually-hidden honeypot field for bot-trapping */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Callout box (warm panel with accent left border) ───────────────────── */

.callout {
  padding: var(--space-4);
  background: var(--paper-warm);
  border-left: 3px solid var(--manyfesto-red);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.callout p {
  font-size: 0.88rem;
  color: var(--ink);
  max-width: none;
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.callout p:last-child { margin-bottom: 0; }

/* ─── Field set (grouped panel of related inputs/checkboxes) ─────────────── */

.field-set {
  padding: var(--space-4);
  background: var(--paper-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.field-set__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.field-set__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Choice cards (pill-style radios + block-style checkboxes) ──────────── */

/* Pill: horizontal label wrapping a radio (e.g. feedback categories) */
.choice-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.88rem;
  background: var(--paper-card);
  transition: all 0.15s;
}
.choice-card:hover { border-color: var(--ink-muted); }
.choice-card input { accent-color: var(--manyfesto-red); cursor: pointer; }

/* Block: full-width checkbox-with-label row (e.g. signup agreements) */
.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.5;
}
.choice-row input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--manyfesto-red);
  flex-shrink: 0;
  cursor: pointer;
}

/* ─── Captcha display (used on feedback form) ────────────────────────────── */

.captcha-row { display: flex; align-items: center; gap: 12px; }
.captcha-equation {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  padding: 10px var(--space-4);
  background: var(--paper-warm);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  min-width: 110px;
  text-align: center;
}
.captcha-row .form-input { width: 100px; }

/* ─── Wrap modifier for narrow form pages ────────────────────────────────── */

.wrap--form { max-width: 680px; }

/* ─── Two-column page grid (form + sidebar) ──────────────────────────────── */

.page-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
  align-items: start;
}
.page-grid__side {
  position: sticky;
  top: 80px;
}
@media (max-width: 768px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-grid__side { position: static; }
}

/* Sidebar note cards (writing tips, principles reminder, etc.) */
.side-note { margin-bottom: var(--space-4); }
.side-note__heading {
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.side-note__list {
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.side-note--gold {
  border-left: 3px solid var(--gold);
  background: var(--gold-light);
}
.side-note--gold h3 { font-size: 0.9rem; color: var(--warning); margin-bottom: var(--space-3); }
.side-note--gold p  { font-size: 0.82rem; color: var(--warning); max-width: none; line-height: 1.6; }
.side-note--gold a  { font-size: 0.82rem; color: var(--gold); font-weight: 600; display: inline-block; margin-top: 8px; }
.side-note--danger {
  border-left: 3px solid var(--danger);
  background: var(--danger-light);
}
.side-note--danger p { font-size: 0.85rem; color: var(--danger); max-width: none; line-height: 1.6; }

/* ─── Form extras (actions row, narrow selects, context header) ──────────── */

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.form-select--narrow { max-width: 280px; }

.form-context {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ─── Multi-select category pills (policy create/edit/fork) ──────────────── */

.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.category-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: 1.5px solid var(--border-strong);
  background: var(--paper-card);
  color: var(--ink-muted);
  transition: all 0.15s;
}
.category-pill:hover { border-color: var(--ink-muted); }
.category-pill.is-selected {
  border-color: var(--manyfesto-red);
  background: var(--danger-light);
  color: var(--manyfesto-red);
}
.category-checkboxes { display: none; }

/* ─── Fork source attribution banner (policy fork page) ──────────────────── */

.fork-source {
  background: var(--paper-warm);
  border: 1.5px solid var(--border-strong);
  border-left: 4px solid var(--fork-colour, var(--ink-faint));
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: 0.9rem;
}
.fork-source__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.fork-source__title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.source-preview {
  font-size: 0.8rem;
  color: var(--ink-muted);
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.6;
  padding-right: 4px;
}

/* ─── Form section (card-like block with heading separator) ──────────────── */

.form-section {
  margin-bottom: var(--space-5);
}
.form-section__heading {
  font-size: 1.1rem;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* ─── Party-name wrapped input ("The ___ Party") ─────────────────────────── */

.party-name-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.party-name-input__fix {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--ink);
  flex-shrink: 0;
}
.party-name-input__field {
  flex: 1;
  margin: 0;
}

/* ─── Colour picker (native colour input + swatch row) ───────────────────── */

.colour-picker {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.colour-input {
  width: 64px;
  height: 48px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 4px;
  cursor: pointer;
  background: var(--paper-card);
}
.colour-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.colour-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.colour-swatch:hover { transform: scale(1.2); }
.colour-swatch.is-selected { border-color: var(--ink); }

/* ─── Cards ──────────────────────────────────────────────────────────────────── */

.card {
  background: var(--paper-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card--compact { padding: var(--space-5); }

/* ─── Policy card ────────────────────────────────────────────────────────────── */

.policy-card {
  background: var(--paper-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--card-accent, #888);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: box-shadow 0.15s, transform 0.15s;
}
.policy-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.policy-card__votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 48px;
  flex-shrink: 0;
  padding-top: 4px;
}

.policy-card__vote-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.15s;
  color: var(--border-strong);
}
.policy-card__vote-btn:hover {
  color: var(--ink);
  background: var(--paper-warm);
}
.policy-card__vote-btn[data-active] {
  color: var(--success);
}
.policy-card__vote-btn[data-value="-1"][data-active] {
  color: var(--danger);
}

.policy-card__score {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  min-width: 36px;
  text-align: center;
  line-height: 1.2;
}

.policy-card__body {
  flex: 1;
  min-width: 0;
}

.policy-card__category-row {
  margin-bottom: 8px;
}

.policy-card__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
@media (max-width: 768px) {
  .policy-card__byline { gap: 6px; }
}

.policy-card__author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.15s;
}
.policy-card__author:hover {
  color: var(--ink);
  text-decoration: underline;
}

.policy-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--manyfesto-red);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 1;
}
.policy-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.policy-card__time {
  color: var(--ink-faint);
}

.policy-card__title {
  margin-bottom: 8px;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 700;
}
.policy-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.policy-card__title a:hover {
  color: var(--manyfesto-red);
  text-decoration: none;
}

.policy-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.policy-card__party {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink-faint);
  font-size: inherit;
  font-weight: 600;
  transition: color 0.15s;
}
.policy-card__party:hover {
  color: var(--ink);
  text-decoration: underline;
}

.policy-card__dot {
  color: var(--border-strong);
}

.policy-card__badge {
  display: inline-flex;
  align-items: center;
  background: var(--paper-warm);
  color: var(--ink-muted);
  font-size: 0.7rem;
  font-weight: 700;
  /* Asymmetric padding compensates for uppercase cap-height —
     letters have no descender, so symmetric padding makes them
     sit optically high. More top padding pushes them down to
     visual centre. */
  padding: 5px 8px 3px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  line-height: 1;
  white-space: nowrap;
}
.policy-card__badge--category {
  background: var(--cat-colour, var(--paper-warm));
  color: white;
  border-color: var(--cat-colour, var(--border));
}

/* Category pill row — used on home and discover pages.
   Desktop: wrap onto multiple lines so every category is reachable.
   Mobile: single line, touch-scroll horizontally (scrollbar hidden
   because it would take more space than the pills themselves). */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 768px) {
  .category-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
  }
  .category-pills::-webkit-scrollbar { display: none; }
}

.policy-card__badge--scope {
  background: var(--info-light);
  color: var(--info);
}

.policy-card__adapted {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.policy-card__excerpt {
  max-width: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.policy-card__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.policy-card__stat {
  font-size: 0.92rem;
  color: var(--ink-faint);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.policy-card__stat--active {
  color: var(--ink-muted);
  font-weight: 600;
}
a.policy-card__stat:hover {
  color: var(--ink);
  text-decoration: none;
}

.policy-card__adapt {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--manyfesto-red);
  text-decoration: none;
  margin-left: auto;
  transition: text-decoration 0.15s;
}
.policy-card__adapt:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .policy-card {
    padding: 14px 16px;
    gap: 12px;
  }
  .policy-card__votes {
    order: 2;
    min-width: 36px;
  }
  .policy-card__body { order: 1; }
  .policy-card__vote-btn { font-size: 1.2rem; padding: 4px 6px; }
  .policy-card__score { font-size: 1.1rem; }
  .policy-card__title { font-size: 1.1rem; }
  .policy-card__excerpt { font-size: 0.92rem; }
}

/* ─── Badges ─────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.badge--gold   { background: var(--gold-light);   color: var(--gold);   }
.badge--silver { background: var(--silver-light);  color: var(--silver); }
.badge--tier   { background: var(--paper-warm);    color: var(--ink-muted); }

/* ─── Login page ─────────────────────────────────────────────────────────────── */

.login-layout {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
}

.login-box {
  width: 100%;
  max-width: 440px;
}

.login-box__masthead {
  text-align: center;
  margin-bottom: var(--space-7);
}

.login-box__wordmark {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.login-box__wordmark span { color: var(--manyfesto-red); }

.login-box__tagline {
  font-size: 1rem;
  color: var(--ink-muted);
  font-style: italic;
}

.login-box__divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.login-box__divider::before,
.login-box__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─── Hero (home page) ───────────────────────────────────────────────────────── */

.hero {
  background: linear-gradient(0deg, #000, var(--ink));
  color: var(--paper);
  padding: var(--space-5) 0 var(--space-6);
  border-top: 7px solid var(--manyfesto-red);
  border-bottom: 10px solid var(--manyfesto-red);
}

.hero h1 {
  color: var(--paper);
  margin-bottom: var(--space-3);
}

.hero h1 span { color: var(--manyfesto-red); }

.hero .lead { color: rgba(250,249,247,0.8); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__pretitle {
  color: white;
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 2rem;
}

.hero__lead {
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(250,249,247,0.8);
  max-width: 52ch;
  margin-top: 0;
  margin-bottom: var(--space-5);
}

.btn--lg {
  font-size: 1.6rem;
  padding: 16px 40px;
}

/* ─── Page section bands ─────────────────────────────────────────────────── */
/* Horizontal full-width strips used for the weekly theme, filter bar,
   category pill row, explainer, etc. Default is paper-card background
   with a bottom border. Variants change the background. */

.section-band {
  background: var(--paper-card);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
}
.section-band--paper     { background: var(--paper); padding: 10px 0; }
.section-band--warm      { background: var(--paper-warm); }
.section-band--explainer { background: var(--paper-warm); border-top: 1px solid var(--border); border-bottom: none; padding: var(--space-8) 0; }
.section-band--theme     { background: linear-gradient(135deg, var(--paper-warm) 0%, var(--gold-light) 100%); }
.section-band--sticky    { position: sticky; top: 60px; z-index: 80; padding: 0; }

/* ─── Weekly theme banner ────────────────────────────────────────────────── */

.weekly-theme {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.weekly-theme__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: white;
  border: 3px solid var(--manyfesto-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-top: 4px;
}
.weekly-theme__content { flex: 1; min-width: 0; }
.weekly-theme__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.weekly-theme__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--manyfesto-red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.weekly-theme__countdown {
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.weekly-theme__title {
  margin: 0 0 2px;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
}
.weekly-theme__tagline {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--ink-muted);
  max-width: 56ch;
  line-height: 1.45;
}
.weekly-theme__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Feed tabs (Trending / New + country filter) ────────────────────────── */

.feed-tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tabs__tab {
  padding: 14px 20px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-muted);
  border-bottom: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}
.feed-tabs__tab.is-active {
  font-weight: 700;
  color: var(--ink);
  border-bottom-color: var(--manyfesto-red);
}
.feed-tabs__filters {
  margin-left: auto;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feed-tabs__country-link {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ─── Category pills (individual pill styling) ───────────────────────────── */

.category-pills__pill {
  padding: 5px 10px 3px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.category-pills__pill--all {
  background: var(--paper-warm);
  color: var(--ink-muted);
  border-color: var(--border);
}
.category-pills__pill--all.is-selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.category-pills__pill--category {
  background: var(--cat-colour, var(--paper-warm));
  color: white;
  border-color: var(--cat-colour);
}
.category-pills__pill--category.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.pagination__info {
  font-size: 0.88rem;
  color: var(--ink-faint);
  padding: 0 var(--space-3);
}

/* ─── Feed list + empty state ────────────────────────────────────────────── */

.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.feed-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--ink-faint);
}
.feed-empty__message {
  font-size: 1.1rem;
  max-width: none;
  margin-bottom: var(--space-4);
}

/* ─── How-it-works explainer ─────────────────────────────────────────────── */

.howitworks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.howitworks__num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--manyfesto-red);
  line-height: 1;
  margin-bottom: 12px;
}

/* ─── Party colour accent ────────────────────────────────────────────────────── */

.party-colour-strip {
  height: 4px;
  background: var(--party-colour, var(--manyfesto-red));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.party-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--party-colour, var(--ink-faint));
  flex-shrink: 0;
}

/* ─── Principles banner ──────────────────────────────────────────────────────── */

.principles-banner {
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
  padding: var(--space-3) var(--space-5);
  font-size: 0.88rem;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ─── Utilities ──────────────────────────────────────────────────────────────── */

.text-muted    { color: var(--ink-muted); }
.text-faint    { color: var(--ink-faint); }
.text-sm       { font-size: 0.875rem; }
.text-xs       { font-size: 0.78rem; }
.text-center   { text-align: center; }
.font-display  { font-family: var(--font-display); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .site-header__nav { display: none; }
  .site-header__nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--ink);
    padding: var(--space-5);
    gap: var(--space-4);
    border-bottom: 3px solid var(--manyfesto-red);
  }
  .nav-toggle { display: block; }
  .hero__actions { flex-direction: column; }
  .card { padding: var(--space-5); }
  .site-footer__inner { flex-direction: column; text-align: center; }

  /* Hide secondary header actions on mobile */
  .site-header__actions .btn--ghost:not([title="Settings"]) { display: none; }
  .site-header__user span { display: none; }
  .site-header__actions { gap: 8px; }

  /* Notification dropdown: full width on mobile */
  #notif-dropdown { width: calc(100vw - 32px) !important; right: -60px !important; max-width: 400px; }

  /* Mention dropdown: constrain to viewport */
  .mention-dropdown { max-width: calc(100vw - 32px) !important; }

  /* Comment reply indent: smaller on mobile */
  [style*="margin-left: 40px"] { margin-left: 20px !important; padding-left: 12px !important; }
}

/* ─── Effects animations (effects.js) ───────────────────────────────────────── */

@keyframes manyfesto-float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(0.9); }
}

@keyframes manyfesto-wobble {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6px) rotate(-2deg); }
  30%  { transform: translateX(5px) rotate(1.5deg); }
  45%  { transform: translateX(-4px) rotate(-1deg); }
  60%  { transform: translateX(3px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes manyfesto-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.8); }
  60%  { transform: scale(1.25); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes manyfesto-badge-in {
  0%   { opacity: 0; transform: translateX(120%) scale(0.9); }
  60%  { transform: translateX(-8%) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes manyfesto-badge-out {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(120%); }
}

@keyframes manyfesto-badge-timer {
  0%   { width: 100%; }
  100% { width: 0%; }
}

@keyframes manyfesto-shine {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  50%  { transform: translateX(200%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

@keyframes manyfesto-tier-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  60%  { transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes manyfesto-spin-in {
  0%   { transform: rotate(-180deg) scale(0); opacity: 0; }
  60%  { transform: rotate(15deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes manyfesto-toast-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes manyfesto-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes manyfesto-comment-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.98); }
  60%  { transform: translateY(-3px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Vote button active state */
.vote-btn:active { transform: scale(0.85); }
.vote-btn { transition: color 0.15s, transform 0.1s; }

/* Score pulse when it changes */
.vote-score-pulse {
  animation: manyfesto-score-pulse 0.4s ease;
}
@keyframes manyfesto-score-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* Humour button active bounce */
.humour-btn:active { transform: scale(0.85); }
.humour-btn { transition: all 0.15s; }

/* Gold CSS variable if not already defined */
:root {
  --gold: #BA7517;
  --gold-light: #FDF6E3;
  --info: #185FA5;
  --info-light: #EEF4FC;
}