/*
 * Hand-written page layout — NOT generated. app.css (built from tokens.ts by
 * tokens-to-css.ts) supplies every color/radius/gradient/shadow value used
 * below as a CSS custom property or class; this file only arranges them into
 * a page. Keeping the split matters: a color changes by editing tokens.ts
 * and rebuilding, never by hand-editing a hex value in here.
 *
 * The --v3-* tokens below are the one deliberate exception: website-only
 * refinements from the Meta UI/UX handoff (2Sides-Complete-Handoff.md),
 * layered on top of app.css rather than added to the shared tokens.ts —
 * the mobile app's design is locked, and these values (a richer sample-data
 * tint, deeper shadows) are a website-specific choice, not something that
 * should also silently change the app's SampleDataBadge color.
 */

:root {
  --v3-sample-bg: #F9E8E0;
  --v3-sample-text: #8B5E4A;
  --v3-sample-border: #E8D5C5;
  --v3-shadow-card: 0 16px 40px rgba(16, 16, 26, 0.1);
  --v3-shadow-large: 0 24px 64px rgba(15, 15, 22, 0.12);
  --v3-shadow-small: 0 8px 24px rgba(16, 16, 26, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-regular), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
/* The feed is the one page allowed to run a little wider, for the 2-column
   grid — the topic/result pages stay at 720px, an editorial reading width,
   not a dashboard width. */
.wrap.wrap-feed {
  max-width: 1280px;
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--c-track);
  margin-bottom: 24px;
}
.site-header a {
  font-family: var(--f-serif);
  font-size: 24px;
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
/* "India votes • All channels, one tally" — the multi-channel promise
   stated plainly on every page, not just claimed in marketing copy. */
.site-header .tagline {
  font-family: var(--f-semibold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
@media (max-width: 640px) {
  .site-header .tagline { display: none; } /* no room at phone width; the logo alone is enough wayfinding */
}

.card {
  background: var(--c-paper-pure);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  padding: 24px;
  margin-bottom: 16px;
}
.card.shadow-card { box-shadow: var(--v3-shadow-card); }

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-semibold);
  font-size: 13px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  /* Default track color, but every template sets an inline background from
     category-accents.ts's per-category pastel — this is just the fallback
     for a category id that isn't in that table. */
  background: var(--c-track);
  color: var(--c-ink-secondary);
  margin-bottom: 12px;
}

/* Question sits in a relative-positioned wrapper so the category watermark
   (a large, near-invisible category emoji) can sit behind it without
   pushing any text — see .question-wrap / .category-watermark below. */
.question-wrap { position: relative; }

h1.question {
  font-family: var(--f-serif);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 16px;
  position: relative; /* sits above the watermark */
}
@media (max-width: 640px) {
  h1.question { font-size: 28px; line-height: 1.1; }
}

/* One large, low-opacity category icon behind the question — "Jobs has a
   subtle briefcase watermark 120px 6% opacity behind the question" per the
   handoff spec. Purely decorative (aria-hidden), never the only place a
   category is communicated — the category pill above still carries that. */
.category-watermark {
  position: absolute;
  top: -20px;
  right: -8px;
  font-size: 120px;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 640px) {
  .category-watermark { font-size: 80px; top: -10px; right: -4px; }
}

p.context {
  font-family: var(--f-regular);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-secondary);
  margin: 0 0 20px;
  position: relative;
}

/* Split bar — the aggregate, shown openly before voting (see the plan's
   "Show openly, personal view is the reward" decision). */
.split {
  margin-bottom: 20px;
}
.split-track {
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--c-track);
  overflow: hidden;
  display: flex;
  position: relative;
}
.split-fill-yes, .split-fill-no {
  /* Smooths any width change — the initial server-rendered width on load,
     and vote.ts's post-vote refresh — into a real animated fill rather than
     a hard jump cut. */
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.split-fill-yes {
  background: var(--gradient-navy);
  height: 100%;
}
.split-fill-no {
  background: var(--gradient-terracotta-right);
  height: 100%;
}
/* A single light sweep across the bar once a vote is cast — celebratory,
   not a fake-activity ticker (it plays once, doesn't imply new votes are
   arriving). CSS-only, no JS timer to manage. */
@keyframes split-shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
.wrap.is-voted .split-track::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: split-shimmer 1100ms ease-out 300ms 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wrap.is-voted .split-track::after { animation: none; }
  .split-fill-yes, .split-fill-no { transition: none; }
}
/* Cold start (trap T1): both fills render at width:0, so the track already
   shows as plain --c-track with no color — visually distinct from an actual
   50/50 tie, which shows two colored halves. This dashed border is a small
   extra signal that "empty" is a state, not a rendering glitch. */
.split-track-empty {
  border: 1px dashed var(--c-border-strong);
}
.split-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-semibold);
  font-size: 13px;
  margin-top: 8px;
  color: var(--c-ink-muted);
}
.split-total {
  font-size: 12px;
  color: var(--c-ink-faint);
  margin-top: 4px;
}

/* The "Early Voter FOMO Banner" from the handoff — a dashed, warm-tinted
   box, not an error/warning color, so a low vote count reads as "be part of
   the beginning" rather than "something's wrong." Turns a low vote count
   into an invitation rather than a reason to skip this topic — see
   vote-widget-logic.ts's preVoteTeaserCopy. */
.vote-teaser {
  display: block;
  font-size: 13px;
  font-family: var(--f-semibold);
  color: var(--v3-sample-text);
  background: var(--v3-sample-bg);
  border: 1px dashed var(--v3-sample-border);
  border-radius: var(--r-button-small);
  padding: 10px 14px;
  margin: 12px 0 0;
}

.vote-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 640px) {
  .vote-buttons { flex-direction: column; }
}
.vote-btn {
  flex: 1;
  min-height: 48px;
  padding: 18px 16px;
  border-radius: var(--r-button);
  border: none;
  font-family: var(--f-bold);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.vote-btn.yes { background: var(--gradient-navy); box-shadow: 0 8px 24px rgba(10, 26, 61, 0.3); }
.vote-btn.no { background: var(--gradient-terracotta); box-shadow: 0 8px 20px rgba(168, 74, 40, 0.3); }
.vote-btn:active:not(:disabled) { transform: scale(0.98); }
.vote-btn:disabled { opacity: 0.6; cursor: default; }

/* Post-vote personal framing — hidden until vote.ts adds .is-voted to .wrap. */
.personal-result { display: none; }
.wrap.is-voted .vote-buttons { display: none; }
.wrap.is-voted .personal-result { display: block; }

/* "You're with 59% of India" — the personal-vs-aggregate moment, the whole
   point of this screen. Given real visual weight (large serif number)
   rather than reading as just another small pill among several. */
.personal-badge {
  display: block;
  font-family: var(--f-semibold);
  font-size: 16px;
  line-height: 1.3;
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: var(--c-verified-bg);
  color: var(--c-verified-text);
  margin-bottom: 10px;
}
.personal-badge.no-side {
  background: var(--c-no-badge-bg);
  color: var(--c-terracotta-to);
}
.personal-badge strong {
  font-family: var(--f-serif);
  font-size: 30px;
  font-weight: 600;
  font-style: normal;
}

/* The "Early Voter" framing — same dashed FOMO treatment as .vote-teaser
   (one visual language for "this is early, and that's exciting" wherever
   it shows up), plus a light dot pattern standing in for confetti: subtle,
   celebratory, not an actual animation or a real photo of confetti. Empty
   (established tier — nothing more to say, see personalMilestoneCopy) takes
   no space at all, rather than leaving a gap where a sentence used to be. */
.milestone-note {
  display: block;
  font-size: 13px;
  font-family: var(--f-medium);
  color: var(--v3-sample-text);
  background:
    radial-gradient(circle at 12px 8px, rgba(194, 106, 69, 0.18) 1.5px, transparent 1.5px),
    radial-gradient(circle at 32px 20px, rgba(10, 26, 61, 0.14) 1.5px, transparent 1.5px),
    radial-gradient(circle at 52px 6px, rgba(194, 106, 69, 0.14) 1.5px, transparent 1.5px),
    var(--v3-sample-bg);
  background-size: 64px 28px;
  border: 1px dashed var(--v3-sample-border);
  border-radius: var(--r-button-small);
  padding: 10px 14px;
  margin: 0 0 10px;
}
.milestone-note:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
}

/* Vote-count/streak pill + badge pills, as ONE flowing row instead of three
   stacked lines — found live: the post-vote card read as too tall with
   each of these as its own block. .stats-badges collapses to `display:
   contents` so its individual .stats-badge spans become direct flex items
   of .stats-row, sitting right alongside the summary pill rather than
   wrapping in a second box. Populated async (a separate GET /api/stats
   after voting) — starts empty, so nothing here reserves blank space or
   shows a loading flicker before the fetch resolves. */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.stats-summary {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-family: var(--f-semibold);
  color: #B45309;
  background: #FEF3E2;
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.stats-summary:empty {
  display: none;
  padding: 0;
}
.stats-badges {
  display: contents;
}
.stats-badge {
  font-size: 12px;
  font-family: var(--f-semibold);
  color: var(--c-navy);
  background: var(--c-track);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.share-row {
  display: flex;
  gap: 10px;
}

/* "Share your stand" label above the row — see topic-page.ts. */
.share-label {
  display: block;
  font-size: 11px;
  font-family: var(--f-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 8px;
}

/* "Next up → <the actual next question>" — a card you'd tap to keep
   reading, not a bold CTA button. Deliberately gentler than a solid-fill
   button: the handoff spec's framing is "feels like turning a page," and a
   dashed, paper-toned card reads as a natural next stop rather than a
   demand. Still clearly interactive (hover lifts it to a solid card with a
   real shadow) — the earlier fix this replaces was about the button
   existing at all, not about it being the loudest thing on the screen. */
.next-topic-card {
  display: block;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  border: 1px dashed var(--c-border-strong);
  background: var(--c-paper);
  text-decoration: none;
  transition: background 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out;
}
.next-topic-card:hover {
  background: var(--c-paper-pure);
  box-shadow: var(--v3-shadow-small);
  border-color: transparent;
}
.next-topic-card .next-label {
  display: block;
  font-size: 11px;
  font-family: var(--f-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 6px;
}
.next-topic-card .next-question {
  display: block;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--c-ink);
}

.share-btn {
  flex: 1;
  min-height: 44px;
  padding: 12px;
  border-radius: var(--r-pill);
  border: none;
  font-family: var(--f-bold);
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  color: white;
  cursor: pointer;
  transition: transform 150ms ease-out;
}
.share-btn:active { transform: scale(0.97); }
/* Brand colors — a WhatsApp share button that isn't WhatsApp-green doesn't
   read as "share to WhatsApp" at a glance, especially at the small sizes
   these render at on a phone. */
#share-whatsapp { background: #25D366; }
#share-x { background: #000000; }
#share-facebook { background: #1877F2; }
#share-native { background: var(--gradient-navy); }

/* One native share sheet instead of four buttons, where the platform offers
   one (see vote.ts's renderPostVote). The individual links stay in the DOM
   underneath — for no-JS pages and browsers without the Web Share API —
   just visually hidden once JS confirms a native sheet is available. */
.share-row.has-native-share .share-btn:not(#share-native) {
  display: none;
}

.sources h2, .sample-note-section h2 {
  font-family: var(--f-semibold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-faint);
  margin: 0 0 8px;
}
.source-link {
  display: block;
  font-size: 14px;
  color: var(--c-navy);
  text-decoration: none;
  padding: 8px 0;
  border-top: 1px solid var(--c-border-faint);
}
.source-link:first-child { border-top: none; }
.verified-tag {
  display: inline-block;
  font-size: 11px;
  font-family: var(--f-semibold);
  color: var(--c-verified-text);
  background: var(--c-verified-bg);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-left: 6px;
}

.sample-badge {
  display: inline-block;
  font-size: 12px;
  font-family: var(--f-medium);
  color: var(--v3-sample-text);
  background: var(--v3-sample-bg);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  margin-bottom: 16px;
}

/* Feed as a front page, not a list — one large hero card for the top
   topic, everything else in a grid below. */
.hero-card {
  background: var(--c-paper-pure);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--v3-shadow-card);
  padding: 32px;
  margin-bottom: 32px;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}
.hero-card .question {
  font-size: 32px;
}
@media (max-width: 640px) {
  .hero-card { padding: 20px; }
  .hero-card .question { font-size: 26px; }
}
.hero-card .split-total-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .feed-grid { grid-template-columns: 1fr; }
}
.feed-card {
  background: var(--c-paper-pure);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--v3-shadow-small);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.feed-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--v3-shadow-card);
}
.feed-card .question {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--c-ink);
}
.feed-card .split-total {
  font-family: var(--f-semibold);
  font-size: 12px;
  color: var(--c-ink-muted);
  margin: 0;
}
.feed-card .split-track {
  height: 6px;
  margin: 10px 0;
}

/* Honest — no fabricated per-channel numbers, just the list of where a vote
   can come from and the one thing they all add up to. */
.channel-pulse {
  margin-top: 32px;
  padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  background: var(--c-paper-pure);
  text-align: center;
}
.channel-pulse .channels {
  font-family: var(--f-semibold);
  font-size: 13px;
  color: var(--c-ink-secondary);
}
.channel-pulse .channels .sep { color: var(--c-ink-faint); margin: 0 6px; }
.channel-pulse .tally-line {
  font-family: var(--f-serif);
  font-size: 15px;
  color: var(--c-ink);
  margin-top: 8px;
}

footer.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--c-ink-faint);
  padding: 32px 0 0;
}
footer.site-footer a { color: var(--c-ink-muted); }