/* Svarad: designsystemet. En fil för alla nio sidor.
   Sidorna länkar den efter fontlänken och FÖRE sitt eget style-block, så
   sidans kvarvarande regler fortsätter vinna på kaskaden. Innehållet är
   unionen av dagens nio style-block plus steg.css, med dagens klassnamn
   behållna. Där två sidor skiljer sig ligger grundregeln här och
   skillnaden som modifierare, aldrig som medelvärde.

   Avsiktliga uttrycksändringar (kontraktets avsnitt 1):
   knappfyllningen är --green-deep med hover --green-dark, och det finns
   en enda --line och en enda --line-strong. */

/* ===== 1. TOKENS ===== */

:root {
  /* Typsnitt. Kundsidorna kör Inter. Admin och testlinjen laddar ingen
     Inter i dag och behåller därför Segoe UI via --font-intern. */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-intern: "Segoe UI", system-ui, sans-serif;

  /* Ytor */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --field: #ffffff;
  --inner: #fafbfd;
  --yta-sval: #f2f5f9;
  --yta-kall: #f2f6fb;

  /* Text */
  --text: #0f1f38;
  --muted: #55657a;
  --faint: #8494a7;
  --faint-kall: #64748b;
  --label: #3b4a60;
  --djup: #33445c;
  --placeholder: #9fadbe;
  --pa-gron: #fff;

  /* Grönt. --green-deep är knappfyllningen, --green-dark hovern.
     --green är accent: kanter, bockar, prickar, ringar, progress. */
  --green: #059669;
  --green-deep: #047857;
  --green-dark: #065f46;
  --green-soft: #e9f7f1;
  --green-mist: #f2faf6;
  --green-line: #bfe6d6;
  --green-ljus: #bfe8d4;

  /* Linjer. En linjefärg och en stark, båda startsidans värden. */
  --line: #e3e9f0;
  --line-strong: #cbd7e4;
  --line-tunn: #c4cedb;

  /* Fel och fara */
  --err: #dc2626;
  --err-soft: #fdecec;
  --err-bleek: #fdf2f2;
  --fara: #b23c3c;
  --fara-stark: #d64545;
  --fara-line: #e3c3c3;
  --fara-yta: #fdf6f6;

  /* Varning */
  --amber: #b45309;
  --amber-soft: #fdf3e3;
  --amber-soft-varm: #fff7e6;
  --amber-line: #f2d98c;
  --amber-text: #9a6b1f;

  /* Radie. Bara de fyra som återkommer. Övriga radier (9, 10, 14, 16,
     20, 30 px) står som literaler i sina komponenter, som i dag. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Skuggor. --shadow hette samma sak på fem sidor men bar två värden,
     därför två namn här: --skugga-kort och --skugga-kort-hog. */
  --skugga-sm: 0 1px 2px rgba(15,31,56,.05), 0 4px 12px rgba(15,31,56,.06);
  --skugga-md: 0 2px 4px rgba(15,31,56,.06), 0 14px 34px rgba(15,31,56,.10);
  --skugga-lg: 0 4px 10px rgba(15,31,56,.07), 0 28px 60px rgba(15,31,56,.14);
  --skugga-kort: 0 1px 2px rgba(15,31,56,.05), 0 8px 24px rgba(15,31,56,.06);
  --skugga-kort-hog: 0 1px 2px rgba(15,31,56,.05), 0 12px 32px rgba(15,31,56,.07);
  --skugga-knapp: 0 1px 2px rgba(5,150,105,.25);
  --skugga-knapp-lyft: 0 6px 18px rgba(5,150,105,.25);

  /* Ringar */
  --ring-gron: 0 0 0 3px rgba(5,150,105,.12);
  --ring-gron-13: 0 0 0 3px rgba(5,150,105,.13);
  --ring-rod: 0 0 0 3px rgba(220,38,38,.12);

  /* Typstorlekar. Namn på de storlekar som återkommer, för sidbyggarnas
     bruk. Komponenterna nedan skriver storleken som literal så att varje
     regel går att jämföra tecken för tecken mot sin källa. */
  --t-11: 11px;
  --t-12: 12px;
  --t-12_5: 12.5px;
  --t-13: 13px;
  --t-13_5: 13.5px;
  --t-14: 14px;
  --t-14_5: 14.5px;
  --t-15: 15px;
  --t-16: 16px;
  --t-19: 19px;
  --t-21: 21px;
}

/* ===== 2. BAS (reset, body, a, rubriker, [hidden]) ===== */

* { box-sizing: border-box; }

/* Sidorna nollar dessutom marginal och utfyllnad på egen hand:
   registreringen, din sida, plansidan, admin och testlinjen med
   "margin: 0; padding: 0", villkor och integritet med "margin: 0".
   Den delen står kvar på sidan, en global variant skulle ändra
   startsidan och felsidan som saknar den i dag. */

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Radhöjd, grundstorlek och utfyllnad skiljer sig per sida och står
   kvar där: startsidan och felsidan 16 px och 1.6, registreringen 14 px
   och 1.5, din sida och plansidan 14 px och 1.55, villkor och
   integritet 1.65 med vit botten, admin och testlinjen --font-intern. */

a { color: inherit; }

h1, h2, h3 { margin: 0; }

[hidden] { display: none !important; }

/* ===== 3. KOMPONENTER (knappar, fält, kort, val, tips, laddläge) ===== */

/* ---------- Knappar ---------- */

/* Primärknappen. Fyllningen är --green-deep (beslut 9), hovern
   --green-dark. Grunden är portalens .btn, registreringens och
   plansidans avvikelser ligger som modifierare nedan. */
.btn {
  background: var(--green-deep);
  color: var(--pa-gron);
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, box-shadow .15s;
  box-shadow: var(--skugga-knapp);
}
.btn:hover { background: var(--green-dark); }
.btn[disabled], .btn:disabled { opacity: .6; cursor: default; }
/* Primärknappen som länk (redan registrerad-kortet, Till din sida). */
a.btn { display: inline-block; text-decoration: none; text-align: center; }

/* Registreringens knapprad: större yta, lyftskugga och nedtryck.
   Grunden ovan har portalens tätare padding och plana skugga. */
.btn.next { padding: 12px 24px; box-shadow: var(--skugga-knapp-lyft); transition: background .15s, transform .1s, border-color .15s; }
.btn.next:active, .btn.back:active, .btn.add:active { transform: translateY(1px); }
.btn.back {
  background: transparent; color: var(--muted); border: 1.5px solid var(--line-strong);
  box-shadow: none; transition: background .15s, transform .1s, border-color .15s;
}
.btn.back:hover { color: var(--text); border-color: var(--faint); }
.btn.add {
  background: transparent; color: var(--green-deep); border: 1.5px dashed var(--line-strong);
  width: 100%; margin-top: 2px; padding: 12px; box-shadow: none;
  transition: background .15s, transform .1s, border-color .15s;
}
.btn.add:hover { border-color: var(--green); background: var(--green-soft); }
/* Registreringen dämpar avstängda knappar mer än portalen gör. */
.btn.next:disabled, .btn.back:disabled, .btn.add:disabled, .andra:disabled { opacity: .5; cursor: default; }

/* Plansidans enda knapp går i full bredd och är en aning större.
   Modifieraren "bred" sätts av plansidan, som i dag har den formen
   direkt på .btn. */
.btn.bred {
  display: block; width: 100%; text-align: center; padding: 13px;
  font-size: 15px; text-decoration: none; transition: background .15s;
}
.btn.bred:disabled { opacity: .7; }

/* Portalens lilla knapp. */
.btn-st {
  display: inline-block; margin-top: 10px; background: var(--green-deep); color: var(--pa-gron);
  border: 0; border-radius: 9px; padding: 8px 15px; font-size: 13px; font-weight: 650;
  text-decoration: none; cursor: pointer; font-family: inherit; transition: background .15s;
}
.btn-st:hover { background: var(--green-dark); }
.btn-st.sec { background: var(--surface); color: var(--green-deep); border: 1.5px solid var(--line-strong); }
.btn-st.sec:hover { background: var(--surface); border-color: var(--green); }
.btn-st.fara { background: var(--surface); color: var(--fara); border: 1.5px solid var(--fara-line); }
.btn-st.fara:hover { background: var(--fara-yta); border-color: var(--fara-stark); }

/* Lägg till-knappen. */
.btn-add {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
  padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; box-shadow: 0 1px 2px rgba(15,31,56,.05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.btn-add::before { content: "+"; color: var(--green); font-weight: 650; font-size: 17px; line-height: 1; }
.btn-add:hover { border-color: var(--green); box-shadow: 0 3px 10px rgba(15,31,56,.10); transform: translateY(-1px); }
.btn-add.primar { background: var(--green-deep); border-color: var(--green-deep); color: var(--pa-gron); box-shadow: 0 2px 8px rgba(5,150,105,.30); }
.btn-add.primar::before { color: var(--pa-gron); }
.btn-add.primar:hover { background: var(--green-dark); border-color: var(--green-dark); }

/* Snabbknappen (förslagen ovanför frågelistorna). */
.qknappar { display: flex; gap: 8px; margin: 2px 0 4px; flex-wrap: wrap; }
.qbtn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 6px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 2px rgba(15,31,56,.04); transition: border-color .15s, box-shadow .15s;
}
.qbtn:hover { border-color: var(--green); box-shadow: 0 2px 6px rgba(15,31,56,.08); }
.qbtn[disabled] { opacity: .6; cursor: default; }
.qbtn.addq::before { content: "+"; color: var(--green); font-weight: 650; font-size: 14px; line-height: 1; }

/* Textknappar. Fyra namn med var sin form i dag, alla behållna. */
.link-btn { background: none; border: 0; color: var(--green-deep); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 2px 0; }
.link-btn:hover { text-decoration: underline; }
.lank { border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--green-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lank:hover { color: var(--green); }
.btn-lank { border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 650; color: var(--green-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.btn-lank:hover { color: var(--green); }
/* Visa och dölj lösenordet, inne i fältet. */
.visa {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--green-deep); cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.visa:hover { background: var(--green-soft); }
.senare { text-align: center; margin-top: 14px; }

/* Knapprad under formulären. Registreringen har 26 px luft och en egen
   mobilordning och behåller därför sin .nav-regel. */
.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 10px; }

/* ---------- Fält ---------- */

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--label); margin: 16px 0 6px; }

/* 16 px i alla fält: under det zoomar iPhone in vid fokus och sidan
   hamnar snett. Padding är registreringens 10px 12px, portalen kör
   tätare och behåller en rad med samma selektorlista. */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=time], input[type=password], select, textarea {
  width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 10px 12px; font-size: 16px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); box-shadow: var(--ring-gron);
}
textarea { resize: vertical; min-height: 58px; }

/* Fältfel: röd kant på fältet även utan fokus. :is(...) lyfter regeln
   över fältregeln input[type=...] ovan, annars syns kanten bara medan
   fältet har fokus. Regeln hör ihop med fältregeln och får aldrig
   flyttas ensam. */
.invalid, .invalid:focus, :is(input, select, textarea).invalid, :is(input, select, textarea).invalid:focus { border-color: var(--err); box-shadow: var(--ring-rod); }
.felrad { color: var(--err); font-size: 13px; margin-top: 6px; line-height: 1.4; }
.hint { font-size: 12.5px; color: var(--faint); margin-top: 4px; line-height: 1.45; }
.hint a { color: var(--green-deep); }
/* Den samlade felraden under knappen. Grunden är portalens. */
.error { color: var(--err); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 10px; }
/* Registreringen har större och ovikad text och mer luft. */
.error.mjuk { font-size: 13.5px; font-weight: 400; margin-top: 14px; }
/* Plansidan tar ingen plats alls när raden är tom. */
.error.luft { min-height: 16px; margin-top: 8px; }
.error.luft:empty { display: none; }

/* Lösenordsfältet med Visa och Dölj i samma rad. */
.faltrad { position: relative; }
.faltrad input { padding-right: 64px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* Brytpunkten för när raderna staplas skiljer sig (560 px i portalen,
   520 px i registreringen) och står kvar på sidan. */

/* Drop-zonen för registreringsbeviset. Grunden är portalens; klassen
   "stor" ger registreringens luftigare zon. */
.dropzon {
  position: relative; margin-top: 6px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 18px 16px; text-align: center; background: var(--surface); color: var(--muted);
  font-size: 13.5px; line-height: 1.5; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.dropzon:hover { border-color: var(--green); }
.dropzon:focus-visible { outline: none; border-color: var(--green); box-shadow: var(--ring-gron); }
.dropzon.over { border-color: var(--green); background: var(--green-soft); }
.dropzon.har-fil { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.dropzon.invalid { border-color: var(--err); }
.dropzon b { color: var(--green-deep); }
.dropzon input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.dropzon .krav { display: block; font-size: 12.5px; color: var(--faint); margin-top: 3px; }
.dropzon .krav[hidden] { display: none; }
.dropzon .fil-namn { display: block; font-weight: 600; color: var(--text); word-break: break-word; }
.dropzon .byt { display: inline-block; margin-top: 4px; background: none; border: 0; padding: 0; color: var(--green-deep); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dropzon .byt:hover { text-decoration: underline; }
.dropzon.stor { display: block; width: 100%; padding: 22px 16px; background: var(--inner); font-size: 14px; }
.dropzon.stor .dz-text b { font-weight: 650; }
.dropzon.stor .krav { font-size: 12px; margin-top: 4px; }
.dropzon.stor .byt { margin-top: 6px; }

/* ---------- Kort och ytor ---------- */

/* Plansidans plankort: enda kortet med grön kant. */
.kort { background: var(--surface); border: 2px solid var(--green); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--skugga-kort); }

.panelkort { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--skugga-kort); }

/* Inloggningen, glömt- och återställningskortet delar samma skal.
   Bredden räknas ur skärmen, aldrig max-width: på mobil får kortet luft
   på båda sidor i stället för att gå kant i kant. */
.kort-liten { width: min(380px, calc(100% - 36px)); margin: 10vh auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--skugga-kort); }
.kort-liten h1 { font-size: 19px; font-weight: 650; margin-bottom: 4px; }
.kort-liten .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.kort-liten .logo { display: block; padding: 0 0 14px; color: var(--text); }
.kort-liten .btn { width: 100%; margin-top: 16px; }
.kort-liten form .error { min-height: 0; margin-top: 6px; }
.kort-liten form .error:empty { display: none; }

/* Registreringens kort: större radie och djupare skugga. */
.stepbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px 26px; box-shadow: var(--skugga-kort-hog); flex: 1; min-width: 0;
}
@media (max-width: 520px) { .stepbox { padding: 22px 18px 20px; } }
.stepbox h1 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 6px; }
.stepbox .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

/* Inre ytor utan skugga. */
.job { background: var(--inner); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px 14px; margin-bottom: 10px; position: relative; }
.st-panel { margin-top: 12px; font-size: 13.5px; background: var(--inner); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.summary { background: var(--inner); border: 1px solid var(--line); border-radius: 14px; padding: 6px 16px; font-size: 14px; margin-top: 20px; }
.summary div { padding: 9px 0; display: flex; justify-content: space-between; gap: 14px; }
.summary div + div { border-top: 1px solid var(--line); }
.summary span:first-child { color: var(--muted); flex: none; }
.summary span:last-child { text-align: right; font-weight: 600; }
.sparad { color: var(--green-deep); font-size: 13px; font-weight: 600; }

/* Samtalsvyns sektioner och kort. Testlinjen har tätare utfyllnad och
   behåller sin egen uppsättning. */
.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; box-shadow: var(--skugga-kort); }
.section h3 { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 650; color: var(--faint-kall); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.section h3::before { content: ""; width: 18px; height: 2px; background: var(--green); }
.card { background: var(--inner); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 6px; font-size: 13px; line-height: 1.45; }
.card.alert { border-left: 4px solid var(--err); background: var(--err-bleek); }
.card .meta { color: var(--faint); font-size: 11px; margin-top: 3px; }
.badge { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 650; }
.badge.akut { background: var(--err); color: var(--pa-gron); }
.badge.hög { background: #f59e0b; color: #451a03; }
.badge.normal { background: #e6ebf1; color: var(--djup); }
.empty { color: var(--placeholder); font-size: 12px; font-style: italic; }

/* ---------- Tips och förhandsvisning ---------- */

/* Rubriken sätts med --tip-rubrik, så registreringens "Tips" och
   portalens "Så tänker du" delar samma regel. */
.tip {
  background: #f6faf8; border: 1px solid #ddeee6; border-radius: 10px;
  padding: 12px 14px; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.55;
}
.tip::before {
  content: var(--tip-rubrik, "Så tänker du"); display: block; color: var(--green-deep); font-size: 11px;
  font-weight: 650; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px;
}
.tip.exempel::before { content: "Exempel"; }
.tip b { color: var(--text); }

.preview { background: var(--yta-kall); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.preview::before { content: "Så säger receptionisten"; display: block; color: var(--djup); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.preview i { font-style: italic; color: var(--text); }

/* ---------- Val ---------- */

/* Valkort (yrke, jour): tydligt markerat val med bock. */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr; } }
.choice {
  position: relative; background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: 14px; padding: 15px 16px; padding-right: 40px; cursor: pointer;
  text-align: left; font-family: inherit; color: var(--text);
  transition: border-color .15s, transform .1s, background .15s;
}
.choice:hover { border-color: var(--faint); transform: translateY(-1px); }
.choice.sel { border-color: var(--green); background: var(--green-soft); }
.choice.sel::after {
  content: "✓"; position: absolute; top: 12px; right: 12px;
  width: 21px; height: 21px; border-radius: 50%; background: var(--green);
  color: var(--pa-gron); font-size: 13px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.choice .t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.choice .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
/* Radioval: ett val i taget, staplat. Etiketten är själva kortet, så
   den globala label-regeln nollas här. */
.choices.stapel { grid-template-columns: 1fr; gap: 8px; }
label.choice { display: block; margin: 0; padding: 12px 40px 12px 16px; font-size: 14px; font-weight: 500; color: var(--text); }
.choice input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice:focus-within { border-color: var(--green); box-shadow: var(--ring-gron); }
/* Radiokorten är etiketter: de ska inte hoppa som knappkorten gör. */
label.choice:hover { transform: none; }
/* Valens behållare har ingen egen kant: en ram runt korten i stället. */
.choices.invalid { box-shadow: none; outline: 2px solid var(--err); outline-offset: 6px; border-radius: 14px; }
.choices.invalid + .felrad { margin-top: 14px; }

/* Kryssrutan. */
label.kryss { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; line-height: 1.45; }
.kryss input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--green); }
label.kryss.invalid { color: var(--err); }

/* Segmentval och veckodagar. */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.segknapp { flex: 1; min-width: 130px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.segknapp:hover { border-color: var(--faint); }
.segknapp.sel { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.day { flex: 1; min-width: 44px; text-align: center; padding: 9px 0; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.day.sel { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }

/* Klickbara statusrader (Klart, Påbörjad, Inte ifylld). */
.krad { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px; font-family: inherit; font-size: 14px; color: var(--text); cursor: pointer; transition: background .12s; }
.krad:hover { background: var(--bg); }
.k-ikon { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: 11.5px; font-weight: 650; display: flex; align-items: center; justify-content: center; color: var(--faint); background: var(--surface); }
.krad.klar .k-ikon { background: var(--green); border-color: var(--green); color: var(--pa-gron); }
.krad.delvis .k-ikon { border-color: #e8b23d; color: var(--amber); }
.krad.valfri .k-ikon { border-style: dashed; }
.krad.borja .k-ikon { border-color: var(--green); color: var(--green-deep); }
.k-titel { font-weight: 600; flex: 1; min-width: 0; }
.k-sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.k-sub:empty { display: none; }
.k-status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--faint); }
.krad.klar .k-status { color: var(--green-deep); }
.krad.delvis .k-status { color: var(--amber); }
.krad.borja .k-status { color: var(--green-deep); }
.k-pil { color: var(--green); font-weight: 650; }

/* ---------- Laddläge ---------- */

.spinner { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 5px; border: 2px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; animation: snurr .7s linear infinite; }
.spinner-stor { width: 22px; height: 22px; margin: 0; }
@keyframes snurr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Knapp som arbetar. Skriptet byter texten, sätter klassen "laddar" och
   aria-busy="true". Minsta bredden hindrar att knappen hoppar när
   texten byts, pekaren stängs av och en snurra ritas före texten.
   Snurran ärver knappens textfärg och syns därför både på grön och vit
   knapp. */
.btn.laddar, .btn-st.laddar, .btn-add.laddar, .qbtn.laddar, .link-btn.laddar,
.btn[aria-busy="true"], .btn-st[aria-busy="true"], .btn-add[aria-busy="true"], .qbtn[aria-busy="true"], .link-btn[aria-busy="true"] {
  min-width: 14ch;
  pointer-events: none;
  opacity: .85;
}
.btn.laddar::before, .btn-st.laddar::before, .btn-add.laddar::before, .qbtn.laddar::before, .link-btn.laddar::before,
.btn[aria-busy="true"]::before, .btn-st[aria-busy="true"]::before, .btn-add[aria-busy="true"]::before, .qbtn[aria-busy="true"]::before, .link-btn[aria-busy="true"]::before {
  content: ""; display: inline-block; width: 12px; height: 12px; vertical-align: -2px;
  margin-right: 5px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: snurr .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn.laddar::before, .btn-st.laddar::before, .btn-add.laddar::before, .qbtn.laddar::before, .link-btn.laddar::before,
  .btn[aria-busy="true"]::before, .btn-st[aria-busy="true"]::before, .btn-add[aria-busy="true"]::before, .qbtn[aria-busy="true"]::before, .link-btn[aria-busy="true"]::before { animation: none; }
}

/* ---------- Fokus ---------- */

/* En regel för allt klickbart. :where() ger specificitet noll, så varje
   sidas egen fokusregel vinner tills den tas bort. Fälten behåller sin
   ring i stället för outline (regeln input:focus ovan). */
:where(a, button, .btn, .btn-st, .btn-add, .qbtn, .link-btn, .segknapp, .day, .choice, .krad, .m-item, .t-sub, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ===== 4. SKAL (sidhuvud, logga, sidfot, wrap) ===== */

/* Innehållsbredden skiljer sig per sida (1140, 940, 880, 720 px) och
   står kvar där. Här ligger bara centreringen. */
.wrap { margin: 0 auto; }

/* Startsidans och felsidans sidhuvud, ordagrant lika på båda i dag. */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(246,248,251,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.topnav { display: flex; align-items: center; gap: 26px; }
.topnav a { font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.topnav a:hover { color: var(--text); }
.topnav .pill {
  color: var(--pa-gron); background: var(--green-deep); padding: 9px 18px; border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(5,150,105,.28); transition: background .15s;
}
.topnav .pill:hover { background: var(--green-dark); color: var(--pa-gron); }
/* Mobil: loggan och registreraknappen ryms fint när knappen är
   sidhuvudets enda handling. */
@media (max-width: 640px) {
  .topbar .wrap { padding-left: 20px; padding-right: 20px; }
  .topnav { gap: 16px; }
  .topnav .pill { padding: 8px 15px; font-size: 13.5px; }
}
@media (max-width: 400px) { .topnav .nav-pris { display: none; } }

/* Det enkla sidhuvudet: logga till vänster, en länk till höger.
   Utfyllnaden skiljer sig och ligger som modifierare. */
header, .sidhuvud { display: flex; justify-content: space-between; align-items: center; }
.sidhuvud-tat { padding: 2px 0 26px; }
.sidhuvud-luft { padding: 22px 0 8px; }
/* Testlinjen ställer texterna på baslinjen och har luft under. */
.sidhuvud-intern { align-items: baseline; margin-bottom: 16px; }
header a { color: var(--muted); font-size: 13px; text-decoration: none; }
header a:hover { color: var(--text); }
header a.logo { color: var(--text); font-size: 19px; }
.tillbaka { color: var(--green-deep); font-size: 13px; font-weight: 600; text-decoration: none; }
.tillbaka:hover { text-decoration: underline; }

/* Loggan. Punkten är <b> på startsidan och felsidan och <span> på
   övriga sidor; regeln träffar båda så markupen kan stå kvar. */
.logo { font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--text); text-decoration: none; }
.logo b, .logo span { color: var(--green); }
/* Startsidan och felsidan har en aning större logga. */
.logo-stor { font-size: 20px; }
/* Portalens sidomeny ger loggan samma utfyllnad som menyraderna. */
.logo-meny { padding: 0 10px 14px; }
/* Testlinjen. */
.logo-intern { font-weight: 800; font-size: 18px; }

/* Sidfoten. Startsidans uppsättning, med <footer> och .sidfot som
   samma sak så att dagens markup fungerar oförändrad. */
footer, .sidfot { padding: 30px 0 44px; }
footer .wrap, .sidfot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--faint); }
footer a, .sidfot a { color: var(--muted); text-decoration: none; }
footer a:hover, .sidfot a:hover { color: var(--text); }
/* Villkor och integritetspolicy har sidfoten som en enda textrad. */
.sidfot-rad, .rad { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 18px; color: var(--faint-kall); font-size: 14px; }

/* Etiketten över rubriken. Villkorssidorna och portalen har egna mått
   och behåller sina regler. */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green-deep);
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--green); }

/* Länkraden på felsidan. */
.links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; font-size: 15px; }
.links a { text-decoration: none; color: var(--green-deep); }
.links a:hover { text-decoration: underline; }

/* Startsidans stora knapp. */
.btn-green {
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--green-deep); color: var(--pa-gron); font-weight: 750; font-size: 16.5px;
  padding: 15px 30px; border-radius: var(--r-md); box-shadow: 0 10px 24px rgba(5,150,105,.3);
  transition: background .15s ease, transform .13s ease;
}
.btn-green:hover { background: var(--green-dark); transform: translateY(-2px); }

/* ===== 5. STEGTRÄDET ===== */

/* Kartan över hela kundresan, en stil för alla sidor som ritar den:
   registreringen, plansidan och din sidas översikt. Färgerna går via
   tokens så trädet följer sidan det står på. Låg tidigare i steg.css,
   som nu är borta. */
.layout { display: flex; gap: 34px; align-items: flex-start; }
.kolumn { max-width: 560px; flex: 1; min-width: 0; margin: 0 auto; }
.tree { width: 225px; flex: none; padding-top: 8px; position: sticky; top: 22px; }
.t-main { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; align-items: center; font-weight: 650; font-size: 14px; color: var(--faint); margin: 0 0 10px; }
.t-main.active, .t-main.done { color: var(--text); }
.t-num { width: 25px; height: 25px; border-radius: 50%; background: var(--line); color: var(--faint-kall); font-size: 12.5px; font-weight: 650; display: flex; align-items: center; justify-content: center; }
.t-main.active .t-num { background: var(--green); color: var(--pa-gron); }
.t-main.done .t-num { background: var(--green-soft); color: var(--green-deep); }
.t-note { grid-column: 2; font-size: 11.5px; font-weight: 500; color: var(--faint); line-height: 1.35; }
.t-sub { display: flex; gap: 9px; align-items: center; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--faint); padding: 4px 0 4px 9px; margin-left: 12px; cursor: default; }
.t-sub i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-tunn); flex: none; }
.t-sub.active { color: var(--text); font-weight: 650; }
.t-sub.active i { background: var(--green); border-color: var(--green); }
.t-sub.done { color: var(--green-deep); cursor: pointer; }
.t-sub.done i { background: var(--green-soft); border-color: var(--green); }
.t-sub.done:hover { color: var(--green); }
.t-sub:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
/* I sista delsteget finns kontot redan: besökta steg är inte klickbara. */
.t-sub.done:disabled { cursor: default; }
.t-sub.done:disabled:hover { color: var(--green-deep); }
.tree .t-sub:last-of-type { margin-bottom: 10px; }
.chip { display: inline-block; vertical-align: 1px; background: #eef2f7; color: var(--faint-kall); font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; margin-left: 6px; }
.chip-varn { background: var(--amber-soft); color: var(--amber-text); }
.andra { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 650; color: var(--green-deep); cursor: pointer; margin-left: 4px; }
.andra:hover { text-decoration: underline; }

/* Mobilen ersätter trädet med en rad. */
.mobilprogress { display: none; }
/* Plansidan skriver stegtexten rakt i raden och versaliserar den. */
.mobilprogress-text { color: var(--faint-kall); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; margin: 2px 0 6px; }
@media (max-width: 880px) {
  .tree { display: none; }
  .layout { display: block; }
  .mobilprogress { display: block; }
}

/* Registreringens mobilvariant: smala segment plus textrad. Klassen på
   färdiga segment heter "fill", eftersom "done" är upptagen av
   succéskärmen. */
.progress { display: flex; gap: 5px; margin-bottom: 10px; }
.progress i { flex: 1; height: 4px; border-radius: 99px; background: #dbe3ec; transition: background .25s; }
.progress i.fill { background: var(--green); }
.progresslabel { font-size: 11px; font-weight: 650; color: var(--faint-kall); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.progress-sedan { font-size: 12px; color: var(--faint); margin-bottom: 8px; }
/* Hela resan hopfällbar under raden. */
.resan { margin-bottom: 16px; font-size: 12.5px; color: var(--muted); }
.resan summary { cursor: pointer; color: var(--green-deep); font-weight: 600; font-size: 12.5px; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.resan summary::-webkit-details-marker { display: none; }
.resan summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-left: 2px; }
.resan[open] summary::before { transform: rotate(45deg); }
.resan ol { margin: 10px 0 0 4px; padding-left: 18px; }
.resan ol li { margin-bottom: 7px; font-weight: 600; color: var(--text); }
.resan ol li::marker { color: var(--green); font-weight: 650; }
.resan ol li small { display: block; font-weight: 500; color: var(--faint); font-size: 11.5px; line-height: 1.35; }

/* Din sidas översikt ritar samma träd som fyra lika kolumner: stegen
   står alltid på en rad på desktop, noterna radbryts inom sin kolumn i
   stället för att knuffa steg 4 till nästa rad. */
.stegkarta { margin-bottom: 18px; }
.stegkarta .tree { position: static; width: auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.stegkarta .t-main { margin: 0; }
.stegkarta .mobilprogress { display: none; font-size: 12.5px; font-weight: 650; color: var(--muted); }
@media (max-width: 860px) {
  .stegkarta .tree { display: none; }
  .stegkarta .mobilprogress { display: block; }
}

/* ===== 6. IKONER ===== */

/* Inline-SVG utan egna färgattribut: strecket följer color på
   föräldern, så samma ikon fungerar på grön och på vit botten. */
.ico {
  width: 1em; height: 1em; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-14 { width: 14px; height: 14px; }
.ico-22 { width: 22px; height: 22px; }
.ico-26 { width: 26px; height: 26px; }