/* ==========================================================================
   CCHR petition site — shared styles (layout modelled on change.org)
   ========================================================================== */

:root {
  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Merriweather', Georgia, 'Times New Roman', serif;

  --text: #1a1a1a;
  --muted: #5f5f5f;
  --faint: #8a8a8a;
  --border: #e3e3e3;
  --input-border: #767676;
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --bg-blue: #eef4fd;

  --red: #e8221e;
  --brand-red: #c73a3a;
  --nav-bg: #161616;
  --blue: #1a4ee0;
  --blue-dark: #12358f;
  --yellow: #f7d54a;
  --yellow-2: #fbe37a;
  --green: #1d8a4a;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
  --page-max: 1376px;
  --nav-max: 1208px;
  --content-w: 876px;
  --sidebar-w: 350px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Every inline icon lives in a wrapper carrying data-icon. Making the wrapper an
   inline-flex box that hugs its <svg> removes the baseline gap underneath the
   glyph, so a parent that centres the wrapper really does centre the artwork. */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[data-icon] > svg { display: block; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 1000; }
.skip-link:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
/* Dark header matching cchr.co.za; the logo is white lettering on a transparent background. */
.nav { background: var(--nav-bg); border-bottom: 1px solid #2c2c2c; position: relative; z-index: 5; }
.nav-inner {
  max-width: var(--nav-max); margin: 0 auto; padding: 0 16px; height: 82px;
  display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-logo {
  height: 52px; width: auto; max-width: 360px; display: block;
  object-fit: contain; object-position: left center;
  min-width: 0;  /* without this the image cannot shrink and overlaps the links */
}
.nav-links { display: flex; align-items: center; gap: 28px; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.nav-links a { text-decoration: none; color: #fff; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 24px; font-weight: 700; flex: none; }
.nav-actions .btn {
  background: var(--brand-red); color: #fff; border-color: var(--brand-red);
  text-transform: uppercase; letter-spacing: .1em; font-size: 13px; padding: 13px 20px;
}
.nav-actions .btn:hover { background: #a82f2f; border-color: #a82f2f; }
.nav-actions .btn { border-radius: 6px; }

/* --------------------------------------------------------------------------
   Buttons, inputs, cards
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
  border: 1px solid transparent; transition: box-shadow .15s ease, transform .05s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-outline { background: #fff; color: var(--text); border-color: #4a4a4a; padding: 10px 16px; font-size: 15px; }
.btn-outline:hover { background: #f5f5f5; }
.btn-primary {
  background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow-2) 100%);
  color: var(--text); padding: 0 20px; height: 52px; font-size: 18px; width: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(247, 213, 74, .55); }
.btn-primary svg { width: 22px; height: 22px; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-block { width: 100%; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; margin-bottom: 4px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--input-border);
  border-radius: 6px; background: #fff; font-size: 16px; outline: none;
}
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 78, 224, .18); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field-error { color: #b3261e; font-size: 13px; margin-top: 4px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.35; margin: 10px 0; cursor: pointer; }
.choice input { margin: 1px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--blue); }
.choice.lg { font-size: 15px; }
.honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; }

.alert {
  border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 12px 0;
  background: #fdecec; color: #8a1b14; border: 1px solid #f4b8b3;
}
.alert.success { background: #e8f7ee; color: #145a32; border-color: #b6e3c8; }
.alert.info { background: var(--bg-blue); color: var(--blue-dark); border-color: #c7d9f8; }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}

.setup-banner {
  background: #fff4d6; color: #6b4b00; border-bottom: 1px solid #f1d58a;
  padding: 10px 16px; font-size: 14px; text-align: center;
}
.setup-banner code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Petition page — hero
   -------------------------------------------------------------------------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: 24px 32px 0; }

.hero {
  position: relative; border-radius: 16px; overflow: hidden; background: #1e1e1e;
  min-height: 685px; display: flex; align-items: flex-end;
}
.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(30,30,30,0) 52%, rgba(30,30,30,.92) 74%, #1e1e1e 100%),
    linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 55%);
}
/* Keep the title clear of the sign card, which overlaps the hero's right edge (350px + margins). */
.hero-body { position: relative; z-index: 2; padding: 40px 16px 40px 40px; max-width: calc(100% - 376px); }
.hero-accent { width: 72px; height: 12px; background: var(--red); margin-bottom: 16px; }
.hero h1 { color: #fff; font-size: 44px; line-height: 1.16; }

/* --------------------------------------------------------------------------
   Petition page — two-column layout with sticky sign card
   -------------------------------------------------------------------------- */
.layout {
  display: grid; grid-template-columns: minmax(0, var(--content-w)) var(--sidebar-w);
  column-gap: 24px; justify-content: space-between; padding: 0 26px 0 100px;
}
.content { min-width: 0; padding-top: 24px; }
.sidebar { position: relative; z-index: 3; margin-top: -637px; }
.sign-card {
  position: sticky; top: 24px;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 32px 32px 28px;
}
/* When the card is taller than the window, petition.js sets a negative `top`
   equal to the overflow. The card then scrolls up with the page until its lower
   edge — with the Sign button — sits just inside the window, and stays there. */
.sign-card.anchor-bottom { bottom: auto; }
.count-block { display: flex; flex-direction: column; align-items: center; text-align: center; }
.count-number {
  font-size: 44px; font-weight: 900; line-height: 1; display: flex; justify-content: center; align-items: flex-start; gap: 2px;
}
.count-number .badge { width: 18px; height: 18px; margin-top: -6px; color: var(--blue); }
.count-label { font-size: 16px; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; }
.count-label svg { width: 14px; height: 14px; }
.goal { margin-top: 20px; }
.goal-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.goal-title svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.progress { height: 8px; border-radius: 4px; background: #e6e8ec; margin: 10px 0 12px; overflow: hidden; }
.progress-bar {
  height: 100%; width: 0; border-radius: 4px; transition: width .6s ease;
  background: linear-gradient(90deg, #1447d1 0%, #3d8ff5 100%);
}
.goal-note { font-size: 14px; line-height: 1.45; }
.sign-card hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.sign-card h2 { font-size: 22px; margin-bottom: 12px; }
.sign-card .field { margin-bottom: 12px; }
.shared-by {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  background: var(--bg-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px;
}
.shared-by svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.shared-by strong { color: var(--text); }
.privacy { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.privacy a { color: var(--muted); }

/* thank-you state inside the sign card */
/* The confirmation panel is centred as a whole: previously the tick, heading and
   buttons sat left while the closing link was centred, which read as misaligned. */
.thanks { text-align: center; }
.thanks .thanks-icon { width: 48px; height: 48px; color: var(--green); margin: 0 auto 10px; }
.thanks h2 { font-size: 24px; }
.thanks p { font-size: 15px; margin-top: 8px; color: var(--muted); }
.thanks .share-row { margin-top: 18px; justify-content: center; }
.thanks .thanks-actions { margin-top: 20px; display: grid; gap: 10px; justify-items: center; }
.thanks .thanks-actions .btn { width: 100%; }
.link-button { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: 13px; }

/* --------------------------------------------------------------------------
   Share buttons
   -------------------------------------------------------------------------- */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.share-btn:hover { background: #f5f5f5; }
.share-btn svg { width: 18px; height: 18px; }
.share-btn.whatsapp svg { color: #25d366; }
.share-btn.facebook svg { color: #1877f2; }
.share-btn.x svg { color: #000; }
.share-btn.email svg { color: var(--muted); }
.share-btn.copy.copied { background: #e8f7ee; border-color: #b6e3c8; }

/* --------------------------------------------------------------------------
   Petition progress card + recent signers
   -------------------------------------------------------------------------- */
.progress-card { padding: 16px; }
.progress-card-top { display: flex; align-items: stretch; gap: 32px; }
.momentum {
  flex: 0 1 506px; border: 1px solid #f1dfe4; border-radius: 8px; padding: 16px 20px 20px;
  background: linear-gradient(90deg, #fde7ee 0%, #fef8dc 100%);
}
.chip {
  display: inline-block; background: #5f5f5f; color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 14px;
}
.momentum-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.momentum-title svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.stats { display: flex; gap: 48px; align-items: center; padding: 8px 8px 0 16px; }
.stat-label { font-size: 15px; }
.stat-value { font-size: 22px; font-weight: 700; margin-top: 8px; }
/* Recent signers scroll past continuously, like the row on change.org. The names
   are laid out in two identical groups and the track slides exactly one group
   width, so the loop repeats with no visible seam. Spacing comes from a margin
   on each name rather than a flex gap, otherwise the join between the two
   groups would be a different width from the gaps inside them. */
.recent {
  position: relative; overflow: hidden; margin-top: 18px; padding: 0 16px 4px;
  font-size: 13px; color: #4a4a4a; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.recent-track { display: flex; width: max-content; animation: recent-marquee 30s linear infinite; }
.recent-group { display: flex; }
.recent-group span { flex: none; margin-right: 28px; }
.recent:hover .recent-track { animation-play-state: paused; }
.recent .empty { color: var(--faint); }
@keyframes recent-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .recent-track { animation: none; }
}

/* --------------------------------------------------------------------------
   Petition body ("The Issue")
   -------------------------------------------------------------------------- */
.section-title { font-size: 44px; margin: 44px 0 28px; }
.section-title.sm { font-size: 36px; margin: 40px 0 24px; }
.issue { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--text); }
.issue p { margin: 0 0 22px; }
.issue p.lead { font-weight: 700; font-size: 17px; }
.issue ul { list-style: circle; margin: 0 0 22px; padding-left: 56px; }
.issue li { margin-bottom: 10px; }
.issue .tight p { margin-bottom: 0; }
.issue .tight { margin-bottom: 22px; }
.issue a { color: var(--blue); font-weight: 700; }
.issue .ref-link { font-weight: 400; word-break: break-all; }
.issue .indent { padding-left: 64px; }
.issue h3 { font-family: var(--serif); font-weight: 400; font-size: 17px; margin: 0 0 22px; }
.issue h3.caps { font-weight: 700; text-transform: uppercase; }
.issue .letter p { margin-bottom: 22px; }
.issue .num { display: inline-block; min-width: 34px; }

/* petition starter */
.starter { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0; margin-top: 8px; display: flex; gap: 12px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; background: #d4cfe3; color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.avatar [data-icon] { width: 58%; height: 58%; }
.avatar svg { width: 100%; height: 100%; }
.avatar.lg { width: 80px; height: 80px; }
.starter-body { flex: 1; }
.starter-name { font-size: 20px; font-weight: 700; }
.starter-role { font-size: 15px; color: var(--muted); margin: 2px 0 8px; }
.starter-desc { font-family: var(--serif); font-size: 17px; line-height: 1.65; }
.starter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }

/* decision makers */
.decision {
  margin-top: 48px; border-radius: var(--radius); padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, rgba(255,255,255,0) 2px 6px),
    linear-gradient(90deg, #fdeef1 0%, #fdfbe6 100%);
}
.decision h2 { font-size: 36px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.decision h2 svg { width: 16px; height: 16px; color: var(--muted); }
.decision-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
.decision-name { font-size: 17px; font-weight: 700; }
.decision-sub { font-size: 17px; }

/* supporter voices — full width */
.voices { max-width: var(--page-max); margin: 0 auto; padding: 0 32px; }
.voices .section-title { margin-top: 56px; }
.voice-card { background: var(--bg-blue); border-radius: var(--radius); padding: 24px; }
.voice-card .quote { width: 26px; height: 26px; color: var(--blue); margin-bottom: 8px; }
.voice-text { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; }
.voice-author { text-align: right; font-size: 15px; margin-top: 12px; }
.voice-author strong { font-weight: 700; }
.voice-actions { display: flex; gap: 32px; margin-top: 110px; color: var(--text); }
.voice-actions svg { width: 26px; height: 26px; }

/* petition updates */
.update { display: flex; gap: 16px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.update-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-dark); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.update-icon svg { width: 20px; height: 20px; }
.update-title { font-size: 17px; font-weight: 700; }
.update-time { font-size: 13px; color: var(--muted); }

/* share section */
.share-grid { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.qr-card { width: 354px; max-width: 100%; padding: 16px; }
.qr-card-top { display: flex; gap: 16px; align-items: center; }
.qr-card-top .qr { width: 84px; height: 84px; flex: none; }
.qr-card-top .qr svg { width: 100%; height: 100%; display: block; }
.qr-card-top p { font-size: 15px; line-height: 1.55; }
.qr-card .btn { margin-top: 16px; }
.share-box { flex: 1; min-width: 260px; }
.share-box p { font-size: 15px; margin-bottom: 12px; }
.share-link { display: flex; gap: 8px; margin-bottom: 14px; }
.share-link input { flex: 1; height: 40px; border: 1px solid var(--input-border); border-radius: 6px; padding: 0 12px; font-size: 14px; min-width: 0; }

.meta { margin-top: 48px; border-top: 1px solid var(--border); padding: 20px 0; font-size: 16px; }
.crumbs { border-top: 1px solid var(--border); padding: 20px 0 48px; font-size: 16px; }
.crumbs .path { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.crumbs .path a { text-decoration: underline; }
.crumbs svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 32px 40px; font-size: 14px; color: var(--muted); }
.footer-inner { max-width: var(--nav-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.footer a { color: var(--muted); }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Mobile sticky sign bar
   -------------------------------------------------------------------------- */
.sticky-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--border); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(0,0,0,.08); align-items: center; gap: 16px;
}
.sticky-bar .sticky-count { font-weight: 900; font-size: 22px; line-height: 1; }
.sticky-bar .sticky-label { font-size: 12px; color: var(--muted); }
.sticky-bar .btn-primary { height: 46px; font-size: 16px; flex: 1; }

/* --------------------------------------------------------------------------
   Generic inner pages (ambassadors, leaderboard)
   -------------------------------------------------------------------------- */
.inner { max-width: 1040px; margin: 0 auto; padding: 40px 24px 24px; }
.inner-hero { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.inner-hero .eyebrow { display: inline-block; color: var(--red); font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.inner-hero h1 { font-size: 44px; text-wrap: balance; }
.inner-hero p { font-size: 18px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.steps { display: grid; gap: 14px; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; }
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-dark); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.step h3 { font-size: 18px; font-weight: 700; }
.step p { font-size: 15px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.form-card { padding: 28px; box-shadow: var(--shadow); border: 0; }
.lookup-card { padding: 24px 28px; margin-top: 20px; background: var(--bg-soft); }
.lookup-card h2 { font-size: 20px; margin-bottom: 4px; }
.lookup-card .lede { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.lookup-card .field { margin-bottom: 10px; }
.tips { margin-top: 24px; padding: 22px 24px; }
.tips h2 { font-size: 20px; margin-bottom: 10px; }
.tips ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.tips li { margin-bottom: 8px; }
.form-card h2 { font-size: 24px; margin-bottom: 6px; }
.form-card .lede { font-size: 15px; color: var(--muted); margin-bottom: 18px; }

.dash { padding: 28px; box-shadow: var(--shadow); border: 0; }
.dash h2 { font-size: 26px; }
.dash .lede { color: var(--muted); font-size: 15px; margin-top: 6px; }
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.dash-stat { background: var(--bg-soft); border-radius: 10px; padding: 14px 16px; }
.dash-stat .v { font-size: 30px; font-weight: 900; line-height: 1; }
.dash-stat .l { font-size: 13px; color: var(--muted); margin-top: 6px; }
.dash h3 { font-size: 16px; margin: 18px 0 8px; }
.dash .qr-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.dash .qr-wrap .qr { width: 132px; height: 132px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff; }
.dash .qr-wrap .qr svg { width: 100%; height: 100%; display: block; }
.dash .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }

/* leaderboard */
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.total { padding: 20px; text-align: center; }
.total .v { font-size: 36px; font-weight: 900; line-height: 1; }
.total .l { font-size: 14px; color: var(--muted); margin-top: 8px; }
.board { overflow: hidden; }
.board-head { display: grid; grid-template-columns: 72px 1fr 140px; padding: 12px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.board-row { display: grid; grid-template-columns: 72px 1fr 140px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 16px; }
.board-row:last-child { border-bottom: 0; }
.board-row.me { background: #fff8dc; }
.board-row .rank { font-weight: 900; font-size: 18px; display: flex; align-items: center; gap: 6px; }
.board-row .medal { font-size: 22px; line-height: 1; }
.board-row .name { font-weight: 700; display: flex; align-items: center; gap: 10px; min-width: 0; }
.board-row .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .you { font-size: 11px; font-weight: 900; background: var(--blue-dark); color: #fff; border-radius: 999px; padding: 2px 8px; letter-spacing: .06em; }
.board-row .sigs { text-align: right; font-weight: 900; font-size: 20px; }
.board-row .sigs small { font-weight: 400; font-size: 12px; color: var(--muted); display: block; }
.board-row.top-1 .rank { color: #b8860b; }
.board-row.top-2 .rank { color: #7d7d7d; }
.board-row.top-3 .rank { color: #a0522d; }
.board-empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.board-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }
.cta-panel { margin-top: 36px; padding: 28px; text-align: center; background: linear-gradient(90deg, #fde7ee 0%, #fef8dc 100%); border: 1px solid #f1dfe4; }
.cta-panel h2 { font-size: 26px; }
.cta-panel p { color: var(--muted); margin: 8px 0 16px; }
.cta-panel .btn-primary { width: auto; padding: 0 28px; }

.skeleton { color: transparent !important; background: #eee; border-radius: 6px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .layout { padding: 0 8px 0 40px; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); }
  .hero h1 { font-size: 38px; }
  .section-title { font-size: 38px; }
}

@media (max-width: 1023px) {
  .page { padding: 16px 16px 0; }
  .hero { min-height: 0; display: block; }
  .hero-media { position: static; height: 240px; object-position: center; }
  .hero::before { display: none; }
  .hero-body { padding: 24px; max-width: none; }
  .hero h1 { font-size: 30px; }
  .layout { display: block; padding: 0; }
  .sidebar { margin-top: 20px; }
  .sign-card { position: static; box-shadow: 0 2px 12px rgba(0,0,0,.08); border: 1px solid var(--border); padding: 24px; }
  .content { padding-top: 8px; }
  .section-title { font-size: 32px; margin-top: 36px; }
  .section-title.sm { font-size: 28px; }
  .progress-card-top { flex-direction: column; gap: 16px; }
  .momentum { flex: none; }
  .stats { padding: 0; gap: 32px; }
  .recent { padding: 0 0 4px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); }
  .issue ul { padding-left: 28px; }
  .issue .indent { padding-left: 24px; }
  .voices { padding: 0 16px; }
  .voice-actions { margin-top: 48px; }
  .decision { padding: 18px; }
  .decision h2 { font-size: 28px; }
  .sticky-bar { display: flex; }
  .sticky-bar.hidden { display: none; }
  body.has-sticky { padding-bottom: 76px; }
  .two-col { grid-template-columns: 1fr; }
  .inner-hero h1 { font-size: 34px; }
  .totals { grid-template-columns: 1fr; }
  .board-head, .board-row { grid-template-columns: 56px 1fr 96px; padding: 12px 14px; }
  .footer { padding: 24px 16px 32px; }
}

/* Phones: logo on its own row, page links underneath, no room needed for the button. */
/* Below this width the logo, the three links and the button no longer fit on one
   line, so the header becomes two rows: logo, then the links. The "Ambassadors"
   link does the job of the button, which is hidden. */
@media (max-width: 1080px) {
  .nav-inner { flex-wrap: wrap; height: auto; padding: 14px 16px 0; gap: 10px 16px; }
  .brand { width: 100%; justify-content: center; }
  .brand-logo { height: 44px; max-width: 100%; }
  .nav-links { width: 100%; justify-content: center; gap: 26px; font-size: 14px; border-top: 1px solid #2c2c2c; padding: 12px 0 14px; }
  .nav-spacer, .nav-actions { display: none; }
}

@media (max-width: 640px) {
  .nav-inner { padding: 14px 12px 0; }
  .brand-logo { height: 40px; }
  .nav-links { gap: 22px; font-size: 13px; padding: 11px 0 13px; }
}

@media (max-width: 480px) {
  .brand-logo { height: 34px; }
  .nav-links { gap: 16px; font-size: 12px; }
  .hero h1 { font-size: 26px; }
  .count-number { font-size: 40px; }
  .stats { flex-wrap: wrap; }
  .share-btn span { display: none; }
  .share-btn { padding: 10px; }
  .share-btn.copy span { display: inline; }
  .dash-stats { grid-template-columns: 1fr; }
  .qr-card-top { flex-direction: column; align-items: flex-start; }
}

@media print {
  .nav, .sticky-bar, .sidebar, .footer, .share-section { display: none !important; }
  .layout { display: block; padding: 0; }
}


/* --------------------------------------------------------------------------
   Admin area
   -------------------------------------------------------------------------- */
.admin-wrap { max-width: 1240px; margin: 0 auto; padding: 32px 20px 48px; }
.admin-login { max-width: 420px; margin: 48px auto; padding: 32px; box-shadow: var(--shadow); border: 0; }
.admin-login h1 { font-size: 26px; margin-bottom: 6px; }
.admin-login .lede { font-size: 15px; color: var(--muted); margin-bottom: 20px; }
.admin-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-bar h1 { font-size: 28px; margin-right: auto; }
.admin-who { font-size: 14px; color: var(--muted); }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-tile { padding: 16px 18px; }
.admin-tile .v { font-size: 28px; font-weight: 900; line-height: 1; }
.admin-tile .l { font-size: 13px; color: var(--muted); margin-top: 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px;
  font-weight: 700; font-size: 15px; color: var(--muted);
}
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand-red); }
.admin-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.admin-controls input[type="search"] {
  flex: 1; min-width: 200px; height: 40px; padding: 0 12px;
  border: 1px solid var(--input-border); border-radius: 6px; font-size: 15px;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
table.admin-table th, table.admin-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.admin-table th {
  background: var(--bg-soft); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); position: sticky; top: 0; z-index: 1;
}
table.admin-table tr:last-child td { border-bottom: 0; }
table.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.admin-table .muted { color: var(--muted); }
table.admin-table a { color: var(--blue); }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eee; color: #444; }
.pill.hidden-name { background: #fde7ee; color: #8a1b3d; }
.admin-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--muted); }
.admin-foot .spacer { flex: 1; }
.danger { color: #b3261e; border-color: #e5a9a4; }
.danger:hover { background: #fdecec; }
.admin-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.offset-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.offset-row input { width: 120px; height: 38px; padding: 0 10px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 15px; }

@media (max-width: 640px) {
  .admin-wrap { padding: 20px 12px 40px; }
  .admin-bar h1 { font-size: 22px; }
}