/* Frenza 2.0: gemensamt designspråk för startsidan, CV, Jobb, planer och admin. Lönekollen behåller sin egen stil.
   Lila som går över i rosa. All text på toningarna är vit och klarar WCAG AA mot varje färgstopp (minst 4,5:1). */
:root{--bg:#fafafa;--card:#fff;--ink:#18171d;--muted:#625f69;--line:#e7e3e8;--soft:#f8f5f8;--accent:#9d246c;--accent-ink:#fff;--text-accent:#8f1f61;--rosa:#B5176A;--rosa-soft:#fdeef6;
  --ai:var(--toning);--ok:#15803d;--ok-ink:#fff;--fara:#c62828;--fara-ink:#fff;--gul:#8a5200;--kant:#8a86a0;--skugga:0 1px 2px rgba(22,20,43,.05),0 10px 30px rgba(91,75,216,.08);
  --toning:linear-gradient(135deg,#9a246b 0%,#ad2d76 68%,#7b4ab0 100%);--toning-farg:#9a246b;--toning-mjuk:linear-gradient(135deg,#fff 0%,#fff8fb 70%,#faf7fc 100%);
  --cv:#5B4BD8;--jobb:#0f766e;--lon:#B5176A;--radie:18px;color-scheme:light}
body.dark{--bg:#141416;--card:#202023;--ink:#f4f2f4;--muted:#c3bec4;--line:#39363b;--soft:#29262b;--accent:#f08bbb;--accent-ink:#19161a;--text-accent:#f2a0c6;--rosa:#F7A8CF;--rosa-soft:#3a2430;
  --ai:var(--toning);--ok:#4ade80;--ok-ink:#0f0b1f;--fara:#d23a3a;--fara-ink:#fff;--gul:#fbbf24;--kant:#8f8aa8;--skugga:none;
  --toning:linear-gradient(135deg,#8f245f 0%,#9e316e 68%,#654481 100%);--toning-farg:#8f245f;--toning-mjuk:linear-gradient(135deg,#1d1c1f 0%,#242023 70%,#211e24 100%);
  --cv:#A29BFE;--jobb:#5eead4;--lon:#f9a8d4;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%}
/* Tryck: ingen fördröjning på iOS och synlig respons direkt (klassen sätts av skal.js i samma stund som fingret når knappen). */
html,body,a,button,input,select,textarea,label,summary,[role=button]{touch-action:manipulation}
.fz-tryckt{opacity:.7;transform:scale(.97);transition:none!important}
html.fz-lamnar::before{content:"";position:fixed;z-index:2147483647;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:fz-lamnar 1.4s ease-out .1s forwards}
@keyframes fz-lamnar{to{transform:scaleX(.9)}}
/* Byten mellan delarna: gamla vyn står kvar tills den nya är ritad. Menyerna ligger stilla, bara innehållet tonar över. */
@view-transition{navigation:auto}
.fz-mobilhuvud{view-transition-name:fz-huvud}.fz-botten{view-transition-name:fz-botten}.fz-sida{view-transition-name:fz-sida}
::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation-duration:.1s}
::view-transition-old(fz-huvud),::view-transition-new(fz-huvud),::view-transition-old(fz-botten),::view-transition-new(fz-botten),::view-transition-old(fz-sida),::view-transition-new(fz-sida){animation:none}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.fz-lamnar::before{animation:none}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;min-height:100dvh}
a{color:var(--text-accent)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}h1{font-size:1.95rem;letter-spacing:-.02em}h2{font-size:1.35rem}h3{font-size:1.1rem}
p{margin:0 0 .75rem}small,.dampad{color:var(--muted)}
.fz-forhand{background:#3b2f8f;color:#fff;text-align:center;font-size:.85rem;padding:6px 12px;font-weight:600}
.fz-skal{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 32px)}.fz-skal>*{min-width:0}
.fz-sida{background:var(--card);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
.fz-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none;margin:0 6px 14px;min-height:44px}
.fz-logo i{width:34px;height:34px;border-radius:10px;background:var(--toning);background-color:var(--toning-farg);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900}
.fz-meny a,.fz-undermeny a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;min-height:44px}
.fz-meny a svg{width:20px;height:20px;flex:none;color:var(--text-accent)}
.fz-meny a[aria-current=page],.fz-undermeny a[aria-current=page]{background:var(--soft);color:var(--text-accent)}
.fz-undermeny{margin:4px 0 10px 14px;border-left:2px solid var(--line);padding-left:8px}.fz-undermeny a{font-weight:500;min-height:40px}
.fz-sida .fz-konto{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;font-size:.9rem;overflow-wrap:anywhere}
.fz-kontorad{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;color:var(--ink);text-decoration:none;min-height:56px}.fz-kontorad:hover,.fz-kontorad[aria-current=page]{background:var(--soft)}
.fz-kontorad b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fz-kontorad small{display:block;color:var(--muted);overflow-wrap:anywhere;font-size:.82rem}.fz-kontorad>span:last-child{min-width:0}
/* Den runda profilikonen: leder till den gemensamma profilen. */
.fz-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:inline-grid;place-items:center;background:var(--toning);background-color:var(--toning-farg);color:#fff;font-weight:800;font-size:1.05rem;text-decoration:none;border:2px solid transparent}
.fz-avatar svg{width:22px;height:22px}.fz-avatar[aria-current=page]{border-color:var(--ink)}.fz-avatar-dator{margin-left:auto;display:inline-flex}.fz-hoger{display:flex;align-items:center;gap:8px}
.fz-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#16142b;color:#fff;padding:10px 16px;border-radius:12px;z-index:50;max-width:90vw;font-weight:600}
.h3{font-size:1.1rem}
.fz-huvud{padding:22px clamp(16px,4vw,44px) 96px;max-width:1160px;width:100%;min-width:0}
.fz-topp{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.fz-tillbaka,.fz-oversikt{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--kant);color:var(--ink);border-radius:12px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:44px;text-decoration:none}
.fz-oversikt svg,.fz-tillbaka svg{width:18px;height:18px}
.fz-kort{background:var(--card);border:1px solid var(--line);border-radius:var(--radie);padding:22px;box-shadow:var(--skugga);margin-bottom:16px}
.fz-rutnat{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.fz-produkt{display:flex;flex-direction:column;gap:10px;min-height:250px;position:relative;overflow:hidden}
.fz-produkt:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--toning);background-color:var(--toning-farg)}
.fz-produkt .ikon,.ikon-ruta{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--toning);background-color:var(--toning-farg)}
.fz-produkt .ikon svg,.ikon-ruta svg{width:28px;height:28px}
.fz-produkt p{flex:1}
.fz-produkt .bricka{align-self:flex-start;min-height:26px}
.fz-produkt .knapp{margin-top:0;width:100%}
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;padding:11px 18px;min-height:46px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;border:0}
.knapp.primar{background:var(--toning);background-color:var(--toning-farg);color:#fff}.knapp.primar:hover{filter:brightness(1.06)}
body.dark .knapp.primar{color:#fff}
.knapp.sekundar{background:var(--card);color:var(--ink);border:1.5px solid var(--kant)}
.knapp.action{background:var(--toning);background-color:var(--toning-farg);color:#fff;border:1.5px solid transparent}.knapp.action:hover{filter:brightness(1.06)}
.knapp.ai{background:var(--ai);color:#fff;border:1.5px solid transparent}.knapp.ai:hover{filter:brightness(1.06)}
.knapp.ok{background:var(--ok);color:var(--ok-ink)}.knapp.fara{background:var(--fara);color:var(--fara-ink)}.knapp:disabled{opacity:.55;cursor:not-allowed}
.knapp.snart{background:#fef3c7;color:#92400e;border:1.5px dashed #b45309;cursor:default}body.dark .knapp.snart{background:#3a2c0b;color:#fcd34d;border-color:#b45309}
.knapp.liten{min-height:44px;padding:8px 14px;font-size:.95rem}.knappar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.falt{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.falt label{font-weight:600}
input[type=checkbox],input[type=radio],progress{accent-color:var(--toning-farg)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--kant);border-radius:12px;padding:10px 12px;min-height:44px;width:100%}
textarea{min-height:120px;resize:vertical}
.bricka{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:.82rem;font-weight:700;background:var(--soft);color:var(--text-accent)}
/* Märkenas färger är fasta så att texten klarar WCAG AA (minst 4,5:1) i båda lägena. */
.bricka.ok{background:#dcfce7;color:#166534}.bricka.fara{background:#fee2e2;color:#991b1b}body.dark .bricka.ok{background:#0f2e1c;color:#86efac}body.dark .bricka.fara{background:#3b1212;color:#fca5a5}
/* Kommer snart: gul/bärnsten (kontrast 6,4:1 i ljust och 9:1 i mörkt läge). Öppen: grön. Rött bara för fel och radering. */
.bricka.gul,.fz-hjalte .bricka.gul{background:#fef3c7;color:#92400e}body.dark .bricka.gul,body.dark .fz-hjalte .bricka.gul{background:#3a2c0b;color:#fcd34d}
.bricka.rosa{background:var(--rosa-soft);color:var(--rosa)}
.notis{border-radius:14px;padding:12px 14px;background:var(--soft);border:1px solid var(--line);margin-bottom:12px}
.rad{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.rad:last-child{border-bottom:0}
.statistik{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.statistik div{background:var(--soft);border-radius:14px;padding:14px}.statistik b{display:block;font-size:1.6rem;font-weight:800}
/* Sidhuvud med toning: stark rubrik och kort nytta. */
.fz-hjalte{background:var(--toning);background-color:var(--toning-farg);color:#fff;border-radius:24px;padding:clamp(22px,4vw,40px);margin-bottom:20px;position:relative;overflow:hidden}
.fz-hjalte h1{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;max-width:20ch}
.fz-hjalte p{color:#fff;font-size:1.05rem;max-width:56ch;margin-bottom:16px}
.fz-hjalte .knapp.sekundar{background:#fff;color:#8f1f61;border-color:#fff}
.fz-hjalte .knapp.primar,body.dark .fz-hjalte .knapp.primar{background:#fff;color:#8f1f61}
.fz-hjalte:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.fz-hjalte .bricka{background:rgba(255,255,255,.18);color:#fff}
/* Steg 1, 2, 3. */
.fz-steg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px;padding:0;list-style:none;counter-reset:steg}
.fz-steg li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px 16px 60px;position:relative;box-shadow:var(--skugga);counter-increment:steg}
.fz-steg li:before{content:counter(steg);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--toning);background-color:var(--toning-farg);color:#fff;display:grid;place-items:center;font-weight:800}
.fz-steg b{display:block}
/* Illustrativa kort. */
.fz-funktioner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.fz-funktion{background:var(--toning-mjuk);border:1px solid var(--line);border-radius:16px;padding:16px}
.fz-funktion .ikon-ruta{width:42px;height:42px;border-radius:12px;margin-bottom:10px}.fz-funktion .ikon-ruta svg{width:22px;height:22px}
.fz-funktion h3{font-size:1.02rem}.fz-funktion p{margin:0;color:var(--muted);font-size:.95rem}
/* Exempelbilder på CV-mallar (påhittat namn, ingen riktig person). */
.fz-mallar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.fz-mall{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:10px;text-align:center}
.fz-mall .papper{background:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.12);aspect-ratio:1/1.3;padding:10px;text-align:left;overflow:hidden}
.fz-mall .papper i{display:block;height:5px;border-radius:3px;background:#d9d6e5;margin:5px 0}
.fz-mall .papper i.t{height:9px;width:62%;background:#5B4BD8}.fz-mall .papper i.k{width:40%;background:#B5176A}
.fz-mall.klassisk .papper i.t{margin:0 auto;background:#333;width:55%}.fz-mall.ats .papper i.t,.fz-mall.ats .papper i.k{background:#222}
.fz-mall.kompakt .papper i{height:4px;margin:3px 0}.fz-mall.kompakt .papper i.k{background:#7E3BC4}
.fz-mall b{display:block;margin-top:8px;font-size:.92rem}
/* Rekommendation med rött kryss (vitt X): stänger bara rutan. */
.fz-forslag{position:relative;padding-right:64px}
.fz-kryss{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:12px;border:0;background:#c62828;color:#fff;display:grid;place-items:center;cursor:pointer}
.fz-kryss svg{width:20px;height:20px}
/* Dialog med kryss i en klistrig verktygsrad. */
.fz-dialog{border:0;border-radius:20px;padding:0;max-width:640px;width:calc(100% - 24px);background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.fz-dialog::backdrop{background:rgba(15,11,31,.55)}
.fz-dialog .verktyg{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 12px 20px;background:var(--card);border-bottom:1px solid var(--line);z-index:1}
.fz-dialog .verktyg .fz-kryss{position:static}.fz-dialog .innehall{padding:18px 20px 22px;max-height:70vh;overflow:auto}
/* Produktväxlaren på mobil: en lista med stora knappar i ett ark nedifrån. */
.fz-vaxlare{display:grid;gap:10px}
.fz-vaxlare a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;min-height:64px}
.fz-vaxlare a[aria-current=page]{border-color:var(--accent);background:var(--soft)}
.fz-vaxlare a .ikon-ruta{width:40px;height:40px;border-radius:12px;flex:none}.fz-vaxlare a .ikon-ruta svg{width:22px;height:22px}
.fz-vaxlare a small{display:block;font-weight:500}
.fz-botten{display:none}
.fz-mobilhuvud{display:none;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);gap:10px}
.fz-delvaxlare{display:none;min-width:0;max-width:46vw;min-height:44px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);font:inherit;font-size:.88rem;font-weight:750;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.fz-delvaxlare span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fz-delvaxlare i{font-style:normal;font-size:1rem;line-height:1}
@media (max-width:820px){.fz-skal{grid-template-columns:1fr}.fz-sida{display:none}
  .fz-botten{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:6px 6px max(6px,env(safe-area-inset-bottom));z-index:40;min-height:calc(69px + env(safe-area-inset-bottom));transform:translateZ(0)}
  .fz-botten a,.fz-botten button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--muted);text-decoration:none;font:inherit;font-size:.76rem;font-weight:600;min-height:56px;justify-content:center;text-align:center;background:none;border:0;border-radius:12px;cursor:pointer}
  .fz-botten svg{width:22px;height:22px}
  .fz-botten a[aria-current=page]{color:var(--text-accent);background:var(--soft)}
  .fz-huvud{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .fz-mobilhuvud{display:flex!important;position:relative;z-index:45;padding-top:max(10px,env(safe-area-inset-top))}.fz-mobilhuvud .fz-logo{margin:0;flex:0 1 auto}.fz-mobilhuvud .fz-logo span{display:none}.fz-mobilhuvud .fz-hoger .knapp{display:none}.fz-delvaxlare{display:inline-flex;flex:1}.fz-avatar-dator,.fz-topp.bara-dator{display:none}
  body.fz-tangentbord .fz-botten{display:none}body.fz-tangentbord .fz-huvud{padding-bottom:28px}
  body.fz-tangentbord .fz-dialog .innehall{max-height:calc(100dvh - 150px)}
  .fz-dialog{z-index:80}
  .fz-steg{grid-template-columns:1fr}.fz-mallar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fz-dialog.ark{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0}}
@media (min-width:390px) and (max-width:820px){.fz-mobilhuvud .fz-logo span{display:inline}}
.tabell{width:100%;border-collapse:collapse}.tabell th,.tabell td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.dold{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fz-underhall{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--toning-mjuk);text-align:center}
.fz-underhall section{width:min(620px,100%);padding:clamp(28px,6vw,56px);border:1px solid var(--line);border-radius:28px;background:var(--card);box-shadow:var(--skugga)}
.fz-underhall .fz-logo{justify-content:center;margin:0 auto 30px}.fz-underhall h1{font-size:clamp(2rem,5vw,3.25rem);margin-bottom:14px;color:var(--text-accent)}
.fz-underhall p{font-size:clamp(1.05rem,2.5vw,1.25rem);margin:8px auto;max-width:36ch}.fz-underhall .knapp{margin-top:24px}
.fz-admin-underhall{position:sticky;top:0;z-index:1000;padding:9px 16px;text-align:center;background:#fff3bf;color:#3f3200;font-weight:750;border-bottom:1px solid #e2c75a}body.dark .fz-admin-underhall{background:#3b3216;color:#fff1ad;border-bottom-color:#756523}
/* Kommer snart: mjuk toning och ett diskret fält för ägarens lösenord. */
.fz-snart{max-width:760px;margin:0 auto}
.fz-snart .diskret{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
.fz-snart .diskret summary{cursor:pointer;color:var(--muted);font-size:.9rem;min-height:44px;display:flex;align-items:center}
.fz-topp .fz-oversikt{margin-right:auto}.fz-topp .fz-tillbaka+.fz-oversikt{margin-left:0}
.knapp svg{width:20px;height:20px;flex:none}
.fz-mall .papper{max-height:190px;aspect-ratio:auto;height:150px}