/* style.css — „Vot cartonașe” (din referinta/Vot_cartonase_v0.1.0.html, fără elementele de mockup). O singură coloană de
   telefon pe fundalul navy al postărilor Ryannei; cartonașe albe care se ordonează; o singură acțiune principală pe ecran. */
:root{
  --bg:#213954; --panel:#2B4766; --line:#3A5878;
  --card:#FFFFFF; --ink:#1F3A52; --ink-soft:#5B6B7A;
  --teal:#5BAA9E; --teal-strong:#2E7A71; --teal-tint:#DCEFEA;
  --amber:#F2A541; --text:#FFFFFF; --muted:#AFC0D1;
  --f-display:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* atributul hidden câștigă și în fața display-ului din clase (în mockup, secțiunile cu display:flex rămâneau vizibile) */
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-display);font-size:16px;line-height:1.45;overflow-x:hidden}
.wrap{max-width:440px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px;display:flex;flex-direction:column;gap:22px}
button{font-family:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.top{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:900;font-size:18px;letter-spacing:.01em}.logo span{color:var(--teal)}

.col{display:flex;flex-direction:column;gap:18px}
.col14{display:flex;flex-direction:column;gap:14px}
.col12{display:flex;flex-direction:column;gap:12px}
.col20{display:flex;flex-direction:column;gap:20px}

h1{margin:0;font-size:34px;line-height:1.08;font-weight:900;text-wrap:balance;overflow-wrap:anywhere}
h1 em{font-style:normal;color:var(--teal)}
.lead{margin:0;font-size:17px;color:var(--muted)}

.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.card{background:var(--card);color:var(--ink);border-radius:16px;min-height:62px;padding:10px 12px;display:flex;align-items:center;gap:12px;font-weight:900;font-size:17px;box-shadow:0 6px 18px rgba(0,0,0,.18);user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .15s ease,background .2s ease}
.card .num{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:900;background:var(--ink);color:var(--text)}
.card .ic{flex:none;display:grid;place-items:center}
.card .lbl{flex:1;min-width:0}
.card.first{background:var(--teal-tint)}
.card.first .num{background:var(--teal-strong)}
.grab{cursor:grab}
.sortable-ghost{opacity:.35}
.sortable-chosen{transform:scale(1.02)}
.mv{background:none;border:0;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft);flex:none}
.mv:disabled{opacity:.25;cursor:default}
.handle{color:#9AA8B5;flex:none}

.tapcard{border:0;width:100%;text-align:left;touch-action:manipulation}
.tapcard .num.empty{background:transparent;border:2.5px dashed #B9C4CE;color:transparent}
.tapcard[aria-pressed="true"]{background:var(--teal-tint)}
.tapcard[aria-pressed="true"] .num{background:var(--teal-strong)}

.step-q{font-size:22px;font-weight:900;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel);border:1.5px solid var(--line);color:var(--text);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:800;display:inline-flex;gap:6px;align-items:center}
.chip b{color:var(--teal)}
.steplist .card{border:0;width:100%;text-align:left;touch-action:manipulation;animation:pop .35s cubic-bezier(.2,.7,.2,1) both}
.steplist .card:nth-child(odd){transform:rotate(-.8deg)}
.steplist .card:nth-child(even){transform:rotate(.8deg)}
.steplist .card:active{transform:scale(.97)}
@keyframes pop{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.linkbtn{background:none;border:0;color:var(--teal);font-weight:800;font-size:15px;padding:6px 0;align-self:flex-start}

.hint{font-size:14px;color:var(--muted);margin:0}
.extra{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.extra label,.extra .q{font-weight:900;font-size:16px}
.extra .opt{font-weight:700;color:var(--muted);font-size:13px}
.role{display:flex;flex-wrap:wrap;gap:8px}
.role button{background:transparent;border:1.5px solid var(--line);color:var(--text);border-radius:999px;padding:8px 14px;font-size:15px;font-weight:800}
.role button[aria-pressed="true"]{background:var(--text);color:var(--ink);border-color:var(--text)}
textarea{width:100%;min-height:70px;resize:vertical;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:15px;padding:10px 12px}
textarea::placeholder{color:var(--muted)}
.privacy{font-size:13px;color:var(--muted);margin:0}
/* câmpul-capcană: în afara ecranului, nu în tab, ignorat de cititoarele de ecran */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.cta{background:var(--teal);color:var(--ink);border:0;border-radius:999px;padding:16px 22px;font-size:17px;font-weight:900;width:100%;transition:transform .15s ease,opacity .2s}
.cta:active{transform:scale(.98)}
.cta:disabled{opacity:.4;cursor:default}
.eroare{margin:0;font-size:14px;font-weight:800;color:var(--amber)}

.done h1{font-size:30px}
.done h1:focus{outline:none} /* focusul pus din cod după trimitere (cititoarele de ecran), fără inel vizibil */
.mine{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mine li{display:flex;gap:10px;align-items:center;font-weight:800}
.mine li span{width:24px;height:24px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:13px;flex:none}
.mine li:first-child span{background:var(--teal);color:var(--ink)}
.others{display:flex;flex-direction:column;gap:12px}
.others h2{margin:0;font-size:18px;font-weight:900}
.bar{display:flex;flex-direction:column;gap:5px}
.bar .row{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.bar .track{height:10px;border-radius:999px;background:var(--panel);overflow:hidden}
.bar .fill{height:100%;border-radius:999px;background:var(--teal);width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.bar.me .fill{background:var(--amber)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 0;background:var(--text);color:var(--ink);font-weight:800;border-radius:999px;padding:10px 18px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.steplist .card{transform:none!important}}