/* SZN Ansök — page styles for ansok.html (card 670).
 *
 * ONE JOB: give the /ansok form the quiz's EXACT base design system + the few
 * ansok-only additions. The token/type/button/progress/motion blocks below are
 * copied faithfully from index.html's inline <style> (which is not a shared
 * file — provenance: index.html, cards 90/99/101), so typography and motion are
 * identical to the funnel. quiz-shell.css + quiz-standalone.css load AFTER this
 * file, exactly like the quiz page. If index.html's base tokens change, mirror
 * them here (drift is findable via this comment).
 */

/* ---- base tokens + page (from index.html) ---- */
:root{
  --paper:#F5F5F0; --paper-2:#ffffff; --ink:#111112; --lime:#AEF02E;
  --amber:#fdc656; --muted:#6b6b66; --line:rgba(17,17,18,.12);
  --r-card:16px; --r-pill:999px; --s1:8px; --s2:16px; --s3:24px; --s4:40px;
  --cta-bg:var(--ink); --cta-ink:var(--paper); --result-cta-bg:var(--lime); --result-cta-ink:var(--ink);
  --body-ink:#33332f; --btn-radius:var(--r-pill);
  --serif:"Druk","Arial Narrow",sans-serif;
  --wide:"Druk Wide","Druk","Arial Narrow",sans-serif;
  --sans:"NewBlackTypeface",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  min-height:100dvh; display:flex; flex-direction:column;
  transition:background .3s ease, color .3s ease;
  font-synthesis:none;
  line-height:1.5;
}

/* ---- progress (from index.html) ---- */
#progress{
  position:fixed; top:0; left:0; right:0; z-index:20; padding:14px 20px 0;
  display:flex; align-items:center; gap:12px; transition:opacity .3s ease;
}
.progress-track{ flex:1; height:4px; background:#cdd6e3; border-radius:var(--r-pill); overflow:hidden; }
.progress-fill{ height:100%; width:0; background:var(--lime); border-radius:var(--r-pill);
  transition:width .3s cubic-bezier(.2,.8,.2,1); }
.progress-label{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:54px; text-align:right; }

/* ---- layout + type (from index.html) ---- */
main{ flex:1; display:flex; align-items:center; justify-content:center; padding:64px 20px 40px; }
.card{ width:100%; max-width:560px; position:relative; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2); }
.display{ font-family:var(--wide); font-weight:500; font-size:clamp(28px,5vw,44px); line-height:1.05; letter-spacing:-.01em; text-transform:var(--heading-transform, uppercase); }
.h2{ font-family:var(--wide); font-weight:500; font-size:26px; line-height:1.18; letter-spacing:-.01em; text-transform:var(--heading-transform, none); }
.balance{ text-wrap:balance; }
.lede{ font-size:clamp(16px,2.4vw,19px); line-height:1.5; color:var(--body-ink); margin-top:var(--s3); max-width:46ch; }
.note{ font-size:16px; line-height:1.5; color:var(--muted); margin-top:var(--s1); }
.fineprint{ font-size:13px; color:var(--muted); margin-top:var(--s3); }

/* ---- buttons (from index.html) ---- */
.btn{ font-family:var(--sans); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  border:none; cursor:pointer; border-radius:var(--btn-radius); padding:16px 30px;
  transition:transform .14s ease, background .2s ease; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--cta-bg); color:var(--cta-ink); }
.btn-primary:disabled{ background:rgba(10,10,10,.18); color:rgba(245,245,240,.85); cursor:not-allowed; }
.btn-back{ background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer;
  padding:8px 4px; transition:color .18s ease, opacity .18s ease, transform .12s ease; }
.btn-back:hover{ color:var(--ink); }
.btn-back:active{ transform:translateX(-2px); opacity:.7; }

/* ---- input (from index.html's .gate-form) ---- */
.gate-form{ display:flex; flex-direction:column; gap:12px; margin-top:var(--s3); }
.gate-form input{ font-family:var(--sans); font-size:16px; padding:18px 20px;
  border:none; border-radius:var(--r-card); background:var(--paper-2);
  box-shadow:0 1px 2px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  transition:box-shadow .18s ease; }
.gate-form input::placeholder{ color:var(--muted); }
.gate-form input:focus{ outline:none; box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.1); }

/* ---- motion (from index.html: fade-up + the .aic stagger system) ---- */
.fade-up{ animation:fadeUp .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.aic{ animation:szn-in .55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(min(var(--i,0), 14) * 60ms); }
@keyframes szn-in{
  from{ opacity:0; transform:translateY(14px); filter:blur(10px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@media(prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .aic{ opacity:1!important; filter:none!important; transform:none!important; }
}
@media(hover:none),(pointer:coarse){
  .aic{ animation:none!important; opacity:1!important; filter:none!important; transform:none!important; }
}

/* ---- ansok-only additions ---- */
/* The raw field name sits as the input label (spec §3). */
.field-label{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-align:left; }
/* Calm inline error — never an alert. Empty = collapses to nothing. */
.field-error{ font-size:14px; line-height:1.4; color:#b3402a; text-align:left; min-height:0; margin:0; }
.field-error:empty{ display:none; }
.gate-form input.is-invalid{ box-shadow:0 0 0 1px #b3402a, 0 1px 3px rgba(0,0,0,.1); }
/* Honeypot: visually gone, still in the DOM for bots (spec §5). */
.hp-field{ position:absolute!important; left:-9999px!important; width:1px; height:1px;
  opacity:0; pointer-events:none; }
/* "Hoppa över" row under the Hemsida input (gate skip style). */
.intro .apply-start{ display:flex; justify-content:center; margin:28px 0 4px; }
.intro .apply-start .btn{ min-width:200px; }
.apply-underrow{ display:flex; align-items:flex-start; margin-top:10px; }
/* Left-aligned single-field screens read better than the quiz's centered gate. */
.apply-step{ text-align:left; }
.apply-step .h2{ margin-bottom:var(--s2); }
.success-mail{ color:var(--ink); font-weight:600; text-decoration:underline; }

/* ---- grouped steps (2026-07-22): one screen can hold several fields ----
 * .field stacks label+input+error; the address step's postnummer + ort share
 * a .field-row side by side (postnummer keeps a natural narrow width, ort
 * grows). Collapses back to stacked on narrow phones. ---- */
.gate-form .field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field-row{ display:flex; gap:12px; }
.field-row .field:first-child{ flex:0 1 150px; }
.field-row .field:last-child{ flex:1 1 auto; }
@media (max-width:420px){
  .field-row{ flex-direction:column; gap:12px; }
  .field-row .field{ flex:1 1 auto; }
}