:root{
  /* Layout-only tokens (do not override theme colors from vars.css) */
  --space-xs:8px; --space-sm:12px; --space-md:18px; --space-lg:28px; --space-xl:44px;
  --radius:12px;
  --max-width:1200px;
  --flow-gap:clamp(12px, 2.2vw, 28px);
}

/* Fluid typography */
html{font-size:16px}
@media (min-width:1200px){html{font-size:17px}}
@media (max-width:420px){html{font-size:15px}}
body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

/* Container system */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md)}

/* Topbar improvements */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card-bg);border-bottom:1px solid rgba(0,0,0,0.06);position:sticky;top:0;z-index:60}
.topbar .topbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.topbar .flag{width:26px;height:18px;border-radius:4px;object-fit:cover;box-shadow:0 2px 8px rgba(2,6,23,0.12)}
.topbar .topbar-wordmark{font-weight:700;letter-spacing:0.06em}
.topbar-nav{display:flex;gap:12px;align-items:center}
.topbar-nav a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600}
.topbar-nav a.active{background:var(--glass);color:var(--text)}
.nav-toggle{display:none;border:none;background:transparent;padding:8px}

/* Mobile nav overlay */
@media (max-width:880px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .topbar-nav{position:fixed;left:0;right:0;top:64px;background:var(--card-bg);flex-direction:column;padding:16px;gap:6px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  .topbar-nav.open{opacity:1;pointer-events:auto;transform:none;box-shadow:0 12px 40px rgba(2,6,23,0.08)}
  .topbar{padding:10px 12px}
}

/* Dark-mode borders for the mobile overlay */
.theme-dark .topbar,
body[data-scheme="dark"] .topbar{
  border-bottom-color: rgba(255,255,255,0.10);
}

/* Grid utilities */
.grid-2{display:grid;grid-template-columns:1fr 360px;gap:var(--flow-gap)}
@media (max-width:980px){.grid-2{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--card-bg);border-radius:var(--radius);padding:var(--space-md);box-shadow:0 6px 20px rgba(2,6,23,0.04)}

/* Poll component tweaks */
.vote-shell{display:grid;grid-template-columns:1fr 360px;gap:var(--flow-gap);max-width:var(--max-width);margin:22px auto;padding:0 var(--space-md)}
@media (max-width:980px){.vote-shell{grid-template-columns:1fr;padding:0 12px}}
.vote-panel{padding:18px}
.vote-choices{display:flex;gap:12px;flex-wrap:wrap}
.vote-btn{min-width:0;flex:1 1 220px;padding:14px;border-radius:12px;text-align:left;min-height:60px}
@media (max-width:768px){.vote-btn{flex:1 1 100%;padding:16px;font-size:16px;min-height:64px}}
.vote-btn .vote-btn-text{display:block}
.vote-btn .vote-btn-icon{font-size:20px;display:inline-block;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;display:flex}
.vote-btn[aria-pressed="true"]{box-shadow:0 8px 30px rgba(14,165,164,0.08);transform:translateY(-2px)}

/* Results area */
.results-area .result-row{display:flex;flex-direction:column;gap:8px}
.result-row .bar{height:14px;background:linear-gradient(90deg,rgba(2,6,23,0.04),rgba(2,6,23,0.02));border-radius:8px;overflow:hidden}
.bar-fill{height:100%;display:block;border-radius:8px}
.bar-fill.yes{background:linear-gradient(90deg,var(--accent-success),#34d399)}
.bar-fill.neutral{background:linear-gradient(90deg,var(--accent),#22c1c3)}
.bar-fill.no{background:linear-gradient(90deg,var(--accent-danger),#fb7185)}

/* Comments area */
.comments-section{padding:14px}
.comment{padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(2,6,23,0.02),transparent)}

/* Confirm box modal-like behavior */
#confirmBox{position:relative;transition:opacity .18s ease,transform .18s ease}
#confirmBox.hidden{opacity:0;height:0;overflow:hidden}
#confirmBox:not(.hidden){opacity:1;margin-top:12px}
#confirmBox .confirm-actions{display:flex;gap:8px;margin-top:12px}

/* Results area live region */
#resultsArea{min-height:80px}
#resultsArea[aria-live]{outline: none}

/* Pills / chips */
.context-chip,.topbar-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--glass);color:var(--muted);font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.btn.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(0,0,0,0.10)}
.theme-dark .btn.btn-ghost,
body[data-scheme="dark"] .btn.btn-ghost{border-color:rgba(255,255,255,0.18);color:var(--text)}
.btn.btn-sm{padding:6px 10px;font-size:14px}

/* Accessibility focus */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(14,165,164,0.12);outline-offset:2px}

/* Utility helpers */
.hidden{display:none}

/* Smooth transitions */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}

a,button,input,textarea,select,.card,.topbar,.topbar-nav{
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}

/* ----------------------------------------------------------
   Poll page (Vote) — layout polish
   ---------------------------------------------------------- */
body.page-poll .vote-shell{
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  padding: 28px 22px 0;
  gap: 28px;
  grid-template-columns: 1.3fr 0.9fr;
  align-items: start;
}
body.page-poll .vote-panel{ padding: clamp(20px, 2.6vw, 30px); }
body.page-poll .vote-head{ margin-bottom: 18px; }
body.page-poll .vote-status-strip{ margin-bottom: 14px; }
@media (max-width: 1000px){
  body.page-poll .vote-shell{ grid-template-columns: 1fr; padding: 18px 12px 0; }
}

/* Keep the 3 vote buttons in one row (no wrap). If the viewport
   is too narrow, allow horizontal scroll rather than stacking. */
body.page-poll .vote-choices{
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 12px;
  overflow: hidden;
  padding-bottom: 0;
}
body.page-poll .vote-choices::-webkit-scrollbar{ display:none; }
body.page-poll .pill.vote-btn{
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border-radius: 999px;
  border: none;
  box-shadow: var(--v2-shadow-1);
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 12px 10px;
}
body.page-poll .vote-btn .vote-btn-icon,
body.page-poll .vote-btn .vote-btn-sub{ display: none; }
body.page-poll .vote-btn .vote-btn-label{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
body.page-poll .btn-yes{ background: #0bb36d; color: #fff; }
body.page-poll .btn-neutral{ background: #f3c500; color: #1b1b1b; }
body.page-poll .btn-no{ background: #ff1e7a; color: #fff; }
body.page-poll .vote-btn:hover{ transform: translateY(-1px); box-shadow: var(--v2-shadow-2); }
body.page-poll .vote-btn[aria-pressed="true"]{ box-shadow: 0 12px 28px rgba(0,0,0,.18); transform: translateY(-1px); }
@media (max-width: 520px){
  body.page-poll .vote-choices{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-poll .vote-btn .vote-btn-label{ font-size: 14px; }
}

/* Results: make each row read like a modern card, and ensure
   the bar + label alignment is consistent across themes. */
body.page-poll .results-area .result-row{
  margin-bottom: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--v2-bg-alt);
  border: 1px solid var(--v2-border-soft);
  box-shadow: var(--v2-shadow-1);
}
body.page-poll .results-area .result-meta{
  margin-bottom: 10px;
  color: var(--v2-text-muted);
  font-size: 13px;
}
body.page-poll .results-area .result-meta .choice{
  font-weight: 800;
  color: var(--v2-text);
}
body.page-poll .results-area .bar{
  height: 14px;
  border-radius: 999px;
  background: rgba(10,13,12,.08);
  overflow: hidden;
}
body.theme-dark.page-poll .results-area .bar{
  background: rgba(255,255,255,.10);
}
body.page-poll .results-area .bar-fill{
  height: 100%;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* Small safety for the flag — keep it compact and non-disruptive */
.topbar .flag{ width:28px; height:18px; max-width:28px; border-radius:6px; margin-left:0 }

/* Gate minimalization tweaks (more whitespace, pillified chips, two-column on narrow screens) */
.gate-panel{ padding:18px; border-radius:14px }
.age-row{ display:flex; gap:10px; flex-wrap:wrap }
.age-chip{ padding:10px 12px; border-radius:999px; border:1px solid var(--v2-border-soft); background:var(--card-bg); font-weight:700 }
.region-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:360px; overflow:auto }
@media (max-width:740px){ .region-grid{ grid-template-columns:repeat(2,1fr); } }
.region-chip{ padding:10px 12px; border-radius:999px; text-align:center; border:1px solid var(--v2-border-soft); background:var(--glass); font-weight:600 }
.location-tabs .loc-tab{ border-radius:999px; padding:8px 12px; font-weight:700 }
.gate-fab{ position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(2,6,23,0.12); background:var(--accent); color:#fff; border:none; transform:translateY(8px); transition:transform .18s ease, opacity .18s ease; opacity:0; pointer-events:none; z-index:120 }
.gate-fab.is-visible{ opacity:1; pointer-events:auto; transform:none }

/* Inline poll editor styling */
.poll-inline-editor{ margin-top:12px; border-top:1px solid var(--v2-border-soft); padding-top:12px }
.poll-edit-form .form-row{ margin-bottom:10px }
.poll-edit-form textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid var(--v2-border-soft) }
.poll-edit-form input{ width:100%; padding:8px; border-radius:8px; border:1px solid var(--v2-border-soft) }
.poll-edit-form .form-actions{ display:flex; gap:8px; justify-content:flex-end }