@import url('fonts.css');
@import url('tokens.css');

/* ============================================================
   glasam.online — global design system
   Design System Contract v2 (2026-07-19), ported from
   preview-evolution.html: rem, scala 4px, container 1280px,
   radius 8px, Exo 2 (display) + Onest (testo), icone Lucide
   inline-SVG (sprite iniettato da app.js).
   NB: index.html NON carica questo file (ha stili inline propri).
   tokens.css resta condiviso con /admin: le variabili ridefinite
   qui sotto valgono solo per le pagine pubbliche.
   ============================================================ */

:root{
  --red:#D61F26; --red-dark:#B81A20; --red-soft:#FDECEC;
  --gold:#FCD116; --gold-deep:#DFA90A; --gold-soft:#FFF4CC; --gold-ink:#5A4600;
  --ink:#14161B; --muted:#4A4F5C; --faint:#8A90A0;
  --bg:#F7F7F9; --surface:#FFFFFF; --line:#E5E7EC; --line-strong:#D3D6DE;
  --surface-variant:#EDEFF3;
  --grad:linear-gradient(92deg,var(--red) 0%,#E8541F 55%,var(--gold-deep) 100%);

  --font-display:'Exo 2',sans-serif;
  --font-body:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* scala spazi 4px */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --sp-20:5rem; --sp-24:6rem;

  --radius:0.5rem;
  --radius-sm:0.375rem;
  --container:80rem;

  --e1:0 1px 2px rgba(19,23,33,.05);
  --e2:0 10px 30px rgba(19,23,33,.10);

  /* override dei token condivisi (tokens.css) per le pagine pubbliche */
  --fs-body:1.0625rem;
  --fs-label:0.9375rem;
  --fs-subtitle:1.1875rem;
  --fs-title-sm:1.25rem;
  --fs-title:1.5rem;
  --btn-h:3rem;
  --btn-radius:0.5rem;
  --section-pad:5rem;

  /* alias legacy usati da componenti esistenti */
  --primary:var(--red); --primary-dark:var(--red-dark); --on-primary:#fff;
  --primary-container:var(--red-soft); --on-primary-container:#8A1114;
  --accent:var(--gold); --accent-deep:var(--gold-deep); --accent-container:var(--gold-soft); --on-accent:var(--gold-ink);
  --outline:var(--line); --outline-strong:var(--line-strong);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:4.75rem;}
h1,h2,h3,h4{line-height:1.2;font-weight:800;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
/* a11y: visible keyboard focus (mouse clicks stay clean via :focus-visible) */
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
svg.ic,svg.ck{display:block;}
.hidden{display:none !important;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5);}
@media(min-width:641px){ .wrap{padding:0 var(--sp-8);} }
@media(min-width:1025px){ .wrap{padding:0 var(--sp-10);} }

/* ---------- icone Lucide ---------- */
.ic{width:1.5rem;height:1.5rem;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none;display:inline-block;vertical-align:middle;}
.ic-lg{width:1.75rem;height:1.75rem;}
.ic-sm{width:1.25rem;height:1.25rem;stroke-width:2.1;}
.meta .ic,.note .ic{width:1.125rem;height:1.125rem;}
.aicon{display:inline-flex;}

/* marchio di sezione: quadrato rosso + oro (dal logo) */
.mark{display:inline-block;width:.8125rem;height:.8125rem;border-radius:3px;background:var(--red);box-shadow:5px 0 0 var(--gold);}

/* ---------- top app bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);}
.topbar .wrap{height:4rem;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;}
.logo img{height:1.5rem;width:auto;display:block;}
.topbar span{display:flex;align-items:center;gap:var(--sp-2);}
.btn-install{display:inline-flex;align-items:center;gap:var(--sp-2);height:2.625rem;padding:0 var(--sp-4);border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:#fff;font-family:inherit;font-weight:700;font-size:.9375rem;cursor:pointer;transition:background .2s;}
.btn-install:hover{background:#2A2D35;}
.btn-back,.btn-help{display:inline-flex;align-items:center;gap:var(--sp-2);height:2.625rem;padding:0 var(--sp-4);border-radius:var(--radius);font-weight:700;font-size:.9375rem;color:var(--ink);border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;transition:border-color .2s, background .2s;}
@media(max-width:899px){ .btn-help{display:none;} }
.btn-back:hover,.btn-help:hover{border-color:var(--ink);}
.btn-back .ic,.btn-help .ic{width:1.125rem;height:1.125rem;}

/* ---------- bottoni ---------- */
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(214,31,38,.28);}
.btn-red:hover{background:var(--red-dark);}
.btn-gold{background:var(--gold);color:var(--gold-ink);}
.btn-gold:hover{background:#F5C90D;}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line-strong);}
.btn-line:hover{border-color:var(--ink);}

/* ---------- hero (pagine interne) ---------- */
.hero{background:linear-gradient(180deg,#FDECEC 0%,var(--bg) 100%);padding:var(--sp-12) 0 var(--sp-10);}
.hero .blob{display:none;}
.hero h1{font-family:var(--font-display);font-size:clamp(1.75rem,5vw,2.75rem);line-height:1.15;font-weight:800;letter-spacing:0;margin-bottom:var(--sp-4);}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{color:var(--muted);font-size:var(--fs-subtitle);max-width:34rem;margin-bottom:var(--sp-6);font-weight:500;}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-h);padding:0 var(--sp-8);border:none;border-radius:var(--radius);background:var(--red);color:#fff;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 6px 18px rgba(214,31,38,.28);transition:background .15s,transform .15s;}
.cta:hover{background:var(--red-dark);transform:translateY(-1px);}
.cta:active{transform:scale(.97);}
.cta .ck{width:1.25rem;height:1.25rem;}
.cta.secondary,.cta.gold{background:var(--gold);color:var(--gold-ink);box-shadow:none;}
.cta.secondary:hover,.cta.gold:hover{background:#F5C90D;}

/* ---------- section ---------- */
.section{padding-top:var(--section-pad);padding-bottom:var(--section-pad);}
.kicker{display:block;color:var(--muted);font-weight:800;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--sp-3);}
.section h2,.participation h2{font-family:var(--font-display);font-weight:800;letter-spacing:0;line-height:1.2;font-size:clamp(1.5rem,3vw,2.125rem);color:var(--ink);display:inline-block;padding-bottom:2px;margin-bottom:var(--sp-5);}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);margin-bottom:var(--sp-10);}
.sec-head h2{font-family:var(--font-display);font-size:clamp(1.75rem,1.25rem + 2vw,2.5rem);font-weight:800;letter-spacing:0;color:var(--ink);margin-bottom:0;}
.sec-head h2 .mark{margin-right:1.125rem;vertical-align:middle;transform:translateY(-2px);}
.sec-head .sub{color:var(--muted);font-size:var(--fs-body);max-width:58ch;}
.error{background:var(--red-soft);color:#8A1114;border-radius:var(--radius);padding:var(--sp-4);font-size:var(--fs-body);font-weight:500;margin:var(--sp-3) 0;}
.note{margin-top:var(--sp-4);color:var(--muted);font-size:1rem;display:flex;align-items:center;gap:var(--sp-2);}
.note .ic{color:var(--red);}
.note .ck{width:1.125rem;height:1.125rem;color:var(--red);}
.cat-section + .cat-section{margin-top:var(--sp-10);}

/* ---------- cards / grid ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5);}
.card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);box-shadow:var(--e1);overflow:hidden;transition:transform .18s, box-shadow .18s;}
.card:hover{box-shadow:var(--e2);transform:translateY(-3px);}
.card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-variant);}
.card .body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1;}
.chip{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-2);height:1.75rem;padding:0 var(--sp-3);border-radius:var(--radius-sm);font-size:.875rem;font-weight:700;margin-bottom:var(--sp-3);}
.chip .ic{width:1rem;height:1rem;}
.chip.open{background:var(--red-soft);color:#8A1114;}
.chip.open::before{content:"";width:.4375rem;height:.4375rem;border-radius:50%;background:var(--red);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(214,31,38,.45);}70%{box-shadow:0 0 0 9px rgba(214,31,38,0);}100%{box-shadow:0 0 0 0 rgba(214,31,38,0);}}
.chip.closed{background:var(--surface-variant);color:var(--muted);}
.card h3{font-size:var(--fs-subtitle);font-weight:800;line-height:1.35;margin-bottom:var(--sp-3);}
.meta{display:flex;gap:var(--sp-4);color:var(--muted);font-size:.9375rem;font-weight:600;margin-bottom:var(--sp-4);}
.meta span{display:flex;align-items:center;gap:var(--sp-2);}
.meta .ic{color:var(--faint);}
.vote-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-h);border-radius:var(--radius);background:var(--red);color:#fff;font-weight:700;transition:background .15s;}
.vote-btn:hover{background:var(--red-dark);}
.vote-btn .ck{width:1.125rem;height:1.125rem;}

/* home link row */
.linkrow{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6);}

/* ---------- archive CTA (banda scura, blob animati) ---------- */
.archive-cta{position:relative;overflow:hidden;background:#101218;color:#fff;padding:var(--sp-24) var(--sp-6);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);}
.archive-cta::before{content:"";position:absolute;inset:-35%;
  background:
    radial-gradient(42% 38% at 22% 30%, rgba(214,31,38,.5), transparent 62%),
    radial-gradient(36% 34% at 78% 72%, rgba(252,209,22,.28), transparent 62%),
    radial-gradient(30% 28% at 62% 18%, rgba(232,84,31,.32), transparent 62%);
  filter:blur(26px);
  animation:ctaGlow 16s ease-in-out infinite alternate;will-change:transform;}
.archive-cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.055) 50%, transparent 66%);
  background-size:220% 100%;animation:ctaSheen 9s linear infinite;}
@keyframes ctaGlow{
  0%{transform:translate3d(-4%,-3%,0) rotate(0deg) scale(1);}
  50%{transform:translate3d(3%,4%,0) rotate(6deg) scale(1.1);}
  100%{transform:translate3d(-2%,3%,0) rotate(-5deg) scale(1.03);}}
@keyframes ctaSheen{0%{background-position:130% 0;}100%{background-position:-130% 0;}}
.archive-cta > *{position:relative;z-index:1;}
.archive-cta .ic.big{width:2rem;height:2rem;stroke-width:1.7;color:var(--gold);margin-bottom:var(--sp-2);}
.archive-cta h2{font-family:var(--font-display);font-weight:700;line-height:1.35;font-size:clamp(1.375rem,1rem + 1.6vw,1.875rem);color:#fff;margin-bottom:0;}
.archive-cta p{color:rgba(255,255,255,.72);font-size:var(--fs-body);max-width:52ch;margin:2px 0 var(--sp-6);}

/* ---------- footer (condiviso, iniettato da renderFooter) ---------- */
.footer{background:#0F1116;color:#CBD0DC;padding:var(--sp-12) 0 var(--sp-8);margin-top:var(--sp-5);position:relative;text-align:left;}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);}
.footer .cols{display:grid;grid-template-columns:1fr;gap:var(--sp-8);padding-bottom:var(--sp-8);border-bottom:1px solid rgba(255,255,255,.08);}
@media(min-width:760px){ .footer .cols{grid-template-columns:1.2fr 1fr 1fr 1fr;} }
.footer .logo img{height:1.5rem;margin-bottom:var(--sp-4);}
.footer .fabout{color:#8A90A0;font-size:.9375rem;max-width:42ch;}
.footer h5{color:#fff;font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-4);}
.footer a.fl{display:block;padding:var(--sp-1) 0;font-size:1rem;color:#CBD0DC;}
.footer a.fl:hover{color:#fff;}
.footer .btn-install{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.24);}
.footer .btn-install:hover{border-color:var(--gold);background:rgba(255,255,255,.1);}
.footer .cap{font-size:.875rem;color:#8A90A0;margin-top:var(--sp-3);}
.footer .disc{font-size:.9375rem;line-height:1.6;color:#8A90A0;padding:var(--sp-6) 0 var(--sp-6);}
.footer .disc b{color:#CBD0DC;}
.footer .bottom{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;align-items:center;padding-top:var(--sp-5);font-size:.875rem;color:#6B7080;}

/* ---------- bottom navigation (mobile) ---------- */
.botnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:var(--sp-2) 0 max(var(--sp-2),env(safe-area-inset-bottom));}
.botnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;font-size:.8125rem;font-weight:700;color:var(--muted);padding:var(--sp-1) 0;}
.botnav-item .ic{width:1.375rem;height:1.375rem;}
.botnav-item.on{color:var(--red);}

/* ---------- question page ---------- */
#content{padding-top:var(--sp-5);padding-bottom:var(--sp-5);}
.thumb-hero{width:100%;object-fit:cover;border-radius:var(--radius);margin-bottom:var(--sp-4);background:var(--surface-variant);}
#question h1{font-family:var(--font-display);font-size:clamp(1.375rem,3.4vw,1.875rem);letter-spacing:0;line-height:1.25;margin-bottom:var(--sp-3);}
#question > p{color:var(--muted);margin-bottom:var(--sp-5);}
.info-strip{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-bottom:var(--sp-6);}
.info{background:var(--surface);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4);box-shadow:var(--e1);}
.info b{display:block;font-size:var(--fs-body);font-weight:800;}
.info small{font-size:.8125rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.qmain{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--e1);padding:var(--sp-5);}
.panel h2{font-size:var(--fs-subtitle);margin-bottom:var(--sp-4);}
.option{display:flex;align-items:center;gap:var(--sp-3);background:var(--surface-variant);border:2px solid transparent;border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);font-size:var(--fs-body);font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;}
.option img{width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-variant);flex:none;}
.option .rad{width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid var(--faint);margin-left:auto;flex:none;display:flex;align-items:center;justify-content:center;}
.option.on{background:var(--red-soft);border-color:var(--red);}
.option.on .rad{border-color:var(--red);}
.option.on .rad::after{content:"";width:.6875rem;height:.6875rem;border-radius:50%;background:var(--red);}
.submit{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;height:var(--btn-h);border:none;border-radius:var(--radius);background:var(--red);color:#fff;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;margin-top:var(--sp-2);box-shadow:0 6px 18px rgba(214,31,38,.28);transition:background .15s;}
.submit:hover{background:var(--red-dark);}
.submit .ck{width:1.25rem;height:1.25rem;}
.code-box{margin:var(--sp-2) 0 var(--sp-3);}
.code-box input{width:100%;height:3.5rem;font-family:inherit;font-size:1.5rem;font-weight:700;letter-spacing:8px;text-align:center;border:2px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-variant);}
.code-box input:focus{outline:none;border-color:var(--red);background:var(--surface);}

/* results (barre lineari 12px, riempimento rosso) */
.result-row{margin-bottom:var(--sp-4);}
.result-row .top{display:flex;align-items:center;gap:var(--sp-3);font-weight:500;font-size:var(--fs-body);margin-bottom:var(--sp-2);}
.result-row .top img{width:1.75rem;height:1.75rem;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-variant);flex:none;}
.result-row .top .pct{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;}
.bar{height:.75rem;background:var(--surface-variant);border-radius:99px;overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--red);transition:width 1.1s cubic-bezier(.2,.8,.2,1);}

/* share + post navigation */
.share{margin:var(--sp-6) 0 var(--sp-2);}
.share button{display:inline-flex;align-items:center;gap:var(--sp-2);height:2.75rem;padding:0 var(--sp-5);border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius);font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:border-color .2s;}
.share button:hover{border-color:var(--ink);}
.share button .ic{width:1.125rem;height:1.125rem;}

/* branded share sheet (popup desktop; i telefoni usano il native share) */
.sheet-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(10,12,18,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s;}
.sheet-backdrop.open{opacity:1;}
@media(min-width:560px){.sheet-backdrop{align-items:center;padding:var(--sp-5);}}
.sheet{width:100%;max-width:26.25rem;background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;transform:translateY(14px);transition:transform .22s;box-shadow:var(--e2);}
.sheet-backdrop.open .sheet{transform:none;}
@media(min-width:560px){.sheet{border-radius:var(--radius);}}
.sheet-bar{height:5px;background:var(--grad);}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5) var(--sp-1);}
.sheet-head h3{font-size:1.125rem;}
.sheet-close{width:2rem;height:2rem;border-radius:50%;border:none;background:var(--surface-variant);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sheet-close .ic{width:1.125rem;height:1.125rem;}
.sheet-preview{display:flex;gap:var(--sp-3);align-items:center;margin:var(--sp-3) var(--sp-5) 2px;padding:var(--sp-3);background:var(--bg);border-radius:var(--radius);}
.sheet-preview .thumb{width:2.875rem;height:2.875rem;border-radius:var(--radius-sm);flex:none;object-fit:cover;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-ink);}
.sheet-preview .thumb .ic{width:1.375rem;height:1.375rem;}
.sheet-preview .pt{font-size:.8125rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sheet-preview .pu{font-size:.75rem;color:var(--faint);margin-top:2px;}
.sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3) var(--sp-1);padding:var(--sp-4) var(--sp-3) var(--sp-2);}
.sheet-ch{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);background:none;border:none;cursor:pointer;font-family:inherit;color:var(--muted);}
.sheet-ch .ci{width:3.25rem;height:3.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s;}
.sheet-ch:hover .ci{transform:scale(1.06);}
.sheet-ch .ci svg{width:1.625rem;height:1.625rem;fill:currentColor;}
.sheet-ch .ci svg.ic{fill:none;width:1.5rem;height:1.5rem;}
.sheet-ch span{font-size:.75rem;}
.sheet-copy{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-2) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border:1px solid var(--line-strong);border-radius:99px;}
.sheet-copy .lk{flex:1;font-size:.8125rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sheet-copy button{background:var(--red);color:#fff;font-family:inherit;font-weight:700;font-size:.8125rem;border:none;padding:var(--sp-2) var(--sp-4);border-radius:99px;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap;}
.sheet-copy button .ic{width:1rem;height:1rem;}
.postnav{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin:var(--sp-4) 0 var(--sp-8);}
.postnav a{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--surface);border-radius:var(--radius);box-shadow:var(--e1);padding:var(--sp-4) var(--sp-5);min-height:5.25rem;transition:box-shadow .2s,transform .2s;}
.postnav a:hover{box-shadow:var(--e2);transform:translateY(-2px);}
.postnav .lab{font-size:.8125rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--red);}
.postnav .next{text-align:right;}
.postnav h4{font-size:var(--fs-body);font-weight:700;line-height:1.3;}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin:var(--sp-5) 0 var(--sp-6);}
.step{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--radius);box-shadow:var(--e1);padding:var(--sp-8) var(--sp-6);transition:transform .18s;}
.step:hover{transform:translateY(-3px);}
.step .n{position:absolute;top:-1rem;right:var(--sp-4);z-index:0;pointer-events:none;
  font-family:var(--font-display);font-size:6.5rem;font-weight:800;line-height:1;
  background:linear-gradient(180deg, rgba(214,31,38,.30) 0%, rgba(223,169,10,.14) 68%, rgba(223,169,10,0) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;width:auto;height:auto;border-radius:0;margin:0;display:block;opacity:1;}
.step h4,.step p{position:relative;z-index:1;}
.step h4{font-size:var(--fs-subtitle);font-weight:800;margin-bottom:var(--sp-2);}
.step p{color:var(--muted);font-size:1rem;}

/* ---------- desktop ---------- */
@media(min-width:720px){
  .info-strip{grid-template-columns:repeat(3,1fr);}
  .qmain{grid-template-columns:1.05fr .95fr;}
  .postnav{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:641px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1025px){
  .grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:820px){
  body{padding-bottom:0;}
  .botnav{display:none;}
}
@media(min-width:900px){
  .hero{padding:var(--sp-16) 0 var(--sp-12);}
}

/* ---------- help assistant ---------- */
.assistant-fab{position:fixed;right:var(--sp-4);bottom:5.25rem;z-index:40;width:3.25rem;height:3.25rem;border:none;border-radius:50%;background:var(--red);color:#fff;box-shadow:var(--e2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.assistant-fab:hover{transform:translateY(-2px);}
.assistant-backdrop{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.32);opacity:0;visibility:hidden;transition:opacity .2s;}
.assistant-backdrop.open{opacity:1;visibility:visible;}
.assistant-panel{position:fixed;right:var(--sp-4);bottom:5.25rem;z-index:41;width:min(22.5rem,calc(100vw - 2rem));max-height:min(70vh,35rem);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--e2);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s;}
.assistant-panel.open{opacity:1;visibility:visible;transform:translateY(0);}
.assistant-head{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--line);}
.assistant-head h3{flex:1;font-size:var(--fs-subtitle);}
.assistant-back,.assistant-close{width:2.25rem;height:2.25rem;border:none;background:var(--surface-variant);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);}
.assistant-logo{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;color:var(--red);}
.assistant-list{display:flex;flex-direction:column;padding:var(--sp-2);}
.assistant-q{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);text-align:left;padding:var(--sp-4);border:none;background:transparent;border-radius:var(--radius);font-family:inherit;font-size:var(--fs-body);font-weight:600;color:var(--ink);cursor:pointer;}
.assistant-q:hover{background:var(--surface-variant);}
.assistant-q .aicon{color:var(--muted);}
.assistant-answer{padding:var(--sp-4) var(--sp-5) var(--sp-5);}
.assistant-answer h4{font-size:var(--fs-body);margin-bottom:var(--sp-3);}
.assistant-answer p{font-size:var(--fs-body);color:var(--ink);line-height:1.6;margin-bottom:var(--sp-5);}
.assistant-backlink{display:inline-flex;align-items:center;gap:var(--sp-2);height:2.5rem;padding:0 var(--sp-4);border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius);font-family:inherit;font-weight:700;font-size:var(--fs-body);color:var(--ink);cursor:pointer;}
@media(min-width:900px){
  .assistant-fab{bottom:var(--sp-6);}
  .assistant-panel{bottom:var(--sp-6);}
}

/* ---------- voter login modal ---------- */
.login-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:var(--sp-4);}
.login-backdrop.open{display:flex;}
.login-panel{position:relative;width:min(25rem,100%);background:var(--surface);border-radius:var(--radius);box-shadow:var(--e2);padding:var(--sp-6) var(--sp-5) var(--sp-5);}
.login-panel h3{font-size:var(--fs-subtitle);margin-bottom:var(--sp-4);padding-right:1.5rem;}
.login-input{width:100%;height:3rem;padding:0 var(--sp-4);border:1.5px solid var(--line-strong);border-radius:var(--radius);font-family:inherit;font-size:var(--fs-body);margin-bottom:var(--sp-3);}
.login-input:focus{outline:none;border-color:var(--red);}
.login-panel .submit{width:100%;height:var(--btn-h);border:none;border-radius:var(--radius);background:var(--red);color:#fff;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;}
.login-err{background:var(--red-soft);color:#8A1114;border-radius:var(--radius);padding:var(--sp-3);font-size:var(--fs-body);font-weight:500;margin-bottom:var(--sp-3);}
.login-close{position:absolute;top:var(--sp-4);right:var(--sp-4);width:2.125rem;height:2.125rem;border:none;background:var(--surface-variant);border-radius:50%;font-size:1rem;cursor:pointer;color:var(--ink);}
.login-privacy{margin-top:var(--sp-4);font-size:.875rem;color:var(--muted);text-align:center;}
.login-privacy a{color:var(--red);font-weight:600;}

/* voted / not-voted badges in question lists */
.chip-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);flex-wrap:wrap;}
.chip-row .chip{margin-bottom:0;}
.chip.voted{background:#E3F3E4;color:#1C6B2A;}
.chip.notvoted{background:var(--surface-variant);color:var(--muted);}
.chip.cat-referendum{background:var(--red-soft);color:#8A1114;}
.chip.cat-sondazh{background:var(--gold-soft);color:#8A5A00;}

/* participation map */
.participation{padding:var(--sp-6) 0 var(--sp-2);}
.pcount{display:flex;flex-direction:column;align-items:center;text-align:center;margin:var(--sp-2) 0 var(--sp-5);}
.pcount b{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,2.5rem);font-weight:900;line-height:1;color:var(--red);font-variant-numeric:tabular-nums;}
.pcount span{font-size:var(--fs-body);color:var(--muted);font-weight:600;margin-top:var(--sp-2);}
.world-map{width:100%;max-width:64rem;margin:0 auto;height:21.25rem;}
.pcountry-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));gap:var(--sp-2);margin-top:var(--sp-4);max-width:64rem;margin-left:auto;margin-right:auto;}
.pcountry{display:flex;justify-content:space-between;background:var(--surface);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);box-shadow:var(--e1);}
.pcountry b{font-family:var(--font-display);color:var(--ink);}
@media(min-width:900px){ .world-map{height:28.75rem;} }

/* ---------- cookie consent banner ---------- */
.cookiebar{position:fixed;left:0;right:0;bottom:4.125rem;z-index:50;background:#0F1116;color:#CBD0DC;box-shadow:0 -8px 24px rgba(0,0,0,.18);transform:translateY(120%);transition:transform .3s ease;}
.cookiebar.show{transform:translateY(0);}
.cookiebar-inner{max-width:var(--container);margin:0 auto;padding:var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);}
.cookiebar-ic{color:var(--gold);flex:none;}
.cookiebar p{flex:1 1 16rem;min-width:0;font-size:.9375rem;line-height:1.5;color:#CBD0DC;}
.cookiebar p a{color:#fff;text-decoration:underline;font-weight:700;}
.cookiebar-actions{display:flex;gap:var(--sp-3);flex:none;margin-left:auto;}
.cookiebar-reject,.cookiebar-accept{height:2.375rem;padding:0 var(--sp-4);border-radius:var(--radius);border:none;font-family:inherit;font-weight:700;font-size:.9375rem;cursor:pointer;white-space:nowrap;}
.cookiebar-reject{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;}
.cookiebar-reject:hover{border-color:#fff;}
.cookiebar-accept{background:var(--red);color:#fff;}
.cookiebar-accept:hover{background:var(--red-dark);}
@media(max-width:640px){
  .cookiebar-inner{flex-direction:column;align-items:stretch;text-align:left;gap:var(--sp-3);}
  .cookiebar-ic{display:none;}
  .cookiebar p{flex:none;}
  .cookiebar-actions{margin-left:0;}
  .cookiebar-reject,.cookiebar-accept{flex:1;}
}
@media(min-width:820px){.cookiebar{bottom:0;}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .chip.open::before,.archive-cta::before,.archive-cta::after{animation:none;}
  .card,.step,.postnav a{transition:none;}
}