/* Frågvis — formulär på en sida, i utseendet från mallen Oderland-verktyg:
   röd/svart/benvit palett och JetBrains Mono. Tokens: ljust i :root, mörkt
   via systemet eller data-tema. Admin styr typsnitt och textstorlek med
   data-typsnitt / data-storlek på <body>, fältlängd med data-langd på varje
   .fraga och sidindelning med data-per-sida på <form>. */
:root{--red:#cc2027;--red-deep:#9f191e;--red-dark:#8a1319;--ink:#1a1a1a;--ink-2:#3a3a3a;--muted:#6b6b6b;--line:#e8e4e0;--bg:#faf7f5;--card:#ffffff;--ok:#2f8a4a;--warn:#b8853a;--yta:#faf7f5;--yta-2:#ffffff;--yta-3:#e8e4e0;--text:#1a1a1a;--text-2:#6b6b6b;--linje:rgba(26,26,26,0.14);--linje-stark:rgba(26,26,26,0.42);--accent:#cc2027;--pa-accent:#ffffff;--accent-text:#cc2027;--accent-mjuk:#f9e8e7;--fel:#cc2027;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--red:#ff8577;--red-deep:#ff8577;--red-dark:#ff8577;--yta:#141312;--yta-2:#1c1b1a;--yta-3:#262422;--text:#f2eee8;--text-2:#a8a29b;--linje:rgba(242,238,232,0.14);--linje-stark:rgba(242,238,232,0.44);--accent:#ff8577;--pa-accent:#141312;--accent-text:#ff8577;--accent-mjuk:#3a211f;--fel:#ff8f86;color-scheme:dark}}
:root[data-tema="ljus"]{--yta:#faf7f5;--yta-2:#ffffff;--yta-3:#e8e4e0;--text:#1a1a1a;--text-2:#6b6b6b;--linje:rgba(26,26,26,0.14);--linje-stark:rgba(26,26,26,0.42);--accent:#cc2027;--pa-accent:#ffffff;--accent-text:#cc2027;--accent-mjuk:#f9e8e7;--fel:#cc2027;color-scheme:light}
:root[data-tema="mork"]{--red:#ff8577;--red-deep:#ff8577;--red-dark:#ff8577;--yta:#141312;--yta-2:#1c1b1a;--yta-3:#262422;--text:#f2eee8;--text-2:#a8a29b;--linje:rgba(242,238,232,0.14);--linje-stark:rgba(242,238,232,0.44);--accent:#ff8577;--pa-accent:#141312;--accent-text:#ff8577;--accent-mjuk:#3a211f;--fel:#ff8f86;color-scheme:dark}

/* Typsnitt: JetBrains Mono som standard, ägarens val i admin ändrar. */
body{--f:"JetBrains Mono",system-ui,sans-serif;--bas:16px}
body[data-typsnitt="manrope"]{--f:"Manrope",system-ui,sans-serif}
body[data-typsnitt="serif"]{--f:"Source Serif 4",Georgia,serif}
body[data-typsnitt="lasbar"]{--f:"Atkinson Hyperlegible",system-ui,sans-serif}
body[data-typsnitt="mono"]{--f:"JetBrains Mono",ui-monospace,monospace}
body[data-storlek="s"]{--bas:14px}
body[data-storlek="l"]{--bas:18px}
body[data-storlek="xl"]{--bas:20px}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
body{margin:0;background:var(--yta);color:var(--text);font:400 var(--bas)/1.6 var(--f);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
h1{margin:0;font-weight:800;font-size:clamp(2.1rem,1.5rem + 3vw,4rem);line-height:1.05;letter-spacing:-0.03em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
p,li,dd,dt,td,th,a,label,blockquote{overflow-wrap:break-word}
:where(body) :where(*){min-width:0}
input,select,textarea{max-width:100%}
p{margin:0;max-width:62ch;text-wrap:pretty}
a{color:var(--accent-text);text-underline-offset:.18em}
a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
small{font-size:.85em}
section{scroll-margin-top:96px}

/* Rammen: bred som mallens sidhuvud och sidfot, innehållet håller sig i en
   vänsterställd kolumn i mallen Oderland-verktygs stil. */
.ram{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

.topp{border-bottom:1px solid var(--linje)}
.topp-rad{display:flex;align-items:center;gap:16px;padding-block:18px}
.brand{display:inline-flex;align-items:baseline;gap:3px;margin-right:auto;min-width:0;font-weight:800;font-size:1.35rem;letter-spacing:-0.02em;line-height:1.2;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.brand::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;position:relative;top:2px}
.brand:has(.brand-logga)::after{display:none}
.verktyg{display:flex;align-items:center;gap:8px;flex:none}
.sprak-knapp,.tema{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:0 12px;border:1px solid var(--linje);border-radius:8px;background:var(--card);color:var(--text);font:600 .82rem/1 var(--f);letter-spacing:.04em;cursor:pointer;transition:border-color 150ms}
.sprak-knapp:hover,.tema:hover{border-color:var(--text)}
.tema-input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tema:has(.tema-input:focus-visible){outline:3px solid var(--accent-text);outline-offset:2px}
.tema-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tema-sol{display:block}
.tema-mane{display:none}
@media (prefers-color-scheme:dark){:root:not([data-tema]) .tema-sol{display:none}:root:not([data-tema]) .tema-mane{display:block}}
:root[data-tema="ljus"] .tema-sol{display:block}
:root[data-tema="ljus"] .tema-mane{display:none}
:root[data-tema="mork"] .tema-sol{display:none}
:root[data-tema="mork"] .tema-mane{display:block}
@media (prefers-color-scheme:light){:root:not([data-tema]):has(.tema-input:checked){--red:#ff8577;--red-deep:#ff8577;--red-dark:#ff8577;--yta:#141312;--yta-2:#1c1b1a;--yta-3:#262422;--text:#f2eee8;--text-2:#a8a29b;--linje:rgba(242,238,232,0.14);--linje-stark:rgba(242,238,232,0.44);--accent:#ff8577;--pa-accent:#141312;--accent-text:#ff8577;--accent-mjuk:#3a211f;--fel:#ff8f86;color-scheme:dark}}

.enkat{display:grid;gap:32px;padding-block:clamp(20px,4vw,40px) clamp(48px,8vw,80px)}
.enkat-huvud{display:grid;gap:12px;max-width:min(58rem,100%)}
.etikett{display:inline-flex;align-items:center;gap:8px;margin:0 0 2px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.etikett::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
.ingress{font-size:1.05em;line-height:1.55;color:var(--text-2);max-width:640px}

.formular{display:grid;gap:28px;padding:clamp(22px,4vw,34px);background:var(--card);border:1px solid var(--line);border-radius:14px;min-width:0;width:100%;max-width:min(58rem,100%)}
.steg{display:none;gap:10px}
.js .steg{display:grid}
.steg-text{font-size:.85rem;font-weight:600;color:var(--text-2)}
.steg-stapel{display:flex;gap:6px}
.steg-del{flex:1;height:6px;border-radius:3px;background:var(--yta-3)}
.steg-del.klar{background:var(--accent)}

.fragor{display:grid;gap:26px}
.fraga{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.fraga-etikett{display:block;padding:0;font-weight:700;font-size:1em;line-height:1.4}
.krav{color:var(--fel)}
.valfri{font-weight:400;color:var(--text-2)}
.fraga-hjalp{display:block;font-size:.9em;color:var(--text-2)}
.falt{width:100%;max-width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--linje-stark);border-radius:8px;background:var(--yta);color:var(--text);font:inherit;transition:border-color 150ms}
.falt:hover{border-color:var(--text-2)}
.falt:focus-visible{border-color:var(--accent-text)}
textarea.falt{min-height:140px;resize:vertical}
.fraga[data-langd="kort"] .falt{max-width:min(14rem,100%)}
.fraga[data-langd="mellan"] .falt{max-width:min(28rem,100%)}

.val-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:8px}
.val{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1.5px solid var(--linje-stark);border-radius:8px;background:var(--yta);cursor:pointer;min-width:0;transition:border-color 150ms}
.val input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent-text)}
.val:hover{border-color:var(--text-2)}
.val:has(input:checked){border-color:var(--accent-text);background:var(--accent-mjuk)}
.val:has(input:focus-visible){outline:3px solid var(--accent-text);outline-offset:2px}

.skala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:26rem}
.skala-steg{position:relative;display:grid;place-items:center;min-height:48px;border:1.5px solid var(--linje-stark);border-radius:8px;font-weight:700;cursor:pointer;transition:border-color 150ms}
.skala-steg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.skala-steg:hover{border-color:var(--text-2)}
.skala-steg:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--pa-accent)}
.skala-steg:has(input:focus-visible){outline:3px solid var(--accent-text);outline-offset:2px}

.knapp-rad{display:flex;flex-wrap:wrap;gap:10px}
.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:8px;background:var(--ink);color:#fff;font:700 .95rem/1.2 var(--f);cursor:pointer;transition:all 150ms}
.knapp:hover{background:#000;border-color:#000}
.knapp-sek{background:transparent;color:var(--text);border-color:var(--linje-stark)}
.knapp-sek:hover{background:var(--yta-3);border-color:var(--text);color:var(--text)}
.knapp-skicka{margin-left:auto}
.knapp-tillbaka,.knapp-nasta{display:none}
.js .knapp-tillbaka,.js .knapp-nasta{display:inline-flex}
.form-not{font-size:.85rem;color:var(--text-2)}

.fot{margin-top:clamp(32px,6vw,64px);border-top:1px solid var(--linje);font-size:.85rem;color:var(--text-2)}
.fot-nav{display:flex;gap:16px}
.fot-rad{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:24px 40px}
.fot a{text-decoration:none;color:var(--text-2)}
.fot a:hover{color:var(--red)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.etikett::before{animation:none}}

/* --- Tillägg för appen (finns inte i mallens skiss) ----------------------
   Loggan i sidhuvudet, felrutan när ett svar inte höll, och rutan som visas
   när formuläret är stängt. */
.brand-logga{display:block;max-height:44px;max-width:min(220px,100%);width:auto;height:auto}
.form-fel{display:grid;gap:8px;padding:14px 16px;border:1.5px solid var(--fel);border-radius:8px;background:var(--accent-mjuk);color:var(--text)}
.form-fel strong{color:var(--fel)}
.form-fel ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
.stangt{gap:12px}