/* Formprov D: Dygnet. Gemensam form för startsidan och undersidorna.

   SÅ ANVÄNDS SYSTEMET
   Tid på dygnet. Lägg en temaklass på heron (och samma klass på sidhuvudet):
     .tid-natt         Chatten, startsidans hero        mörk blå petrol, ljus text
     .tid-morgon       Kunskapsstödet, Kontakt          ljus, mörk text (sidans grundton)
     .tid-eftermiddag  Statistiken                      varm ljus, mörk text
     .tid-sen-natt     Säkerhet                         lugn petrol, ljus text
     .tid-gryning      Om oss                           blå skiffer med en aprikos horisont
     .tid-kvall        startsidans kväll                djupblå skymning med bärnsten
   Temat sätter variablerna --yta, --yta-2, --ink, --ink-mjuk, --linje, --linje-stark, --accent och
   --fokus, och ger elementet bakgrund och textfärg. Allt under heron ligger i morgonens ton (:root).
   Temat kan också läggas på en enskild yta, till exempel en panel.

   Sidans skelett (se index.html):
     <a class="hoppa">  <header class="sidhuvud tid-…">  <main id="innehall">  <footer class="sidfot">
     Sidhuvudet byter till morgonens ton när heron har passerat (gemensam.js). Har sidan element med
   data-sidhuvud="tid-…" (startsidans kapitel) tar sidhuvudet tonen från det element som ligger under det.
   Mobilmenyn är utfällbar.
   Filmkorn: <body class="korn">. Startsidans tidsförlopp (data-scen) ligger i start.css och gemensam.js.
   Komponenter:
     .ram                     innehållsbredd med marginaler
     .avsnitt                 ett avsnitt med luft; .avsnitt-rubrik för h2, .avsnitt-ingress för texten under
     .brodsmulor              <nav class="brodsmulor"><ol><li><a>Start</a></li><li aria-current="page">…</li></ol></nav>
     .hero                    .hero-ram > .hero-text + .bildram (foto 3:2 med .bildtid, dygnets tid i en platta)
     .sida-hero               undersidornas helskärmshero: .hero.sida-hero > .sida-hero-bild (img och .sida-hero-ljus)
                              + .ram.sida-hero-innehall. Sidan sätter --fokus-x/-y (vilken punkt i bilden som hålls
                              i mitten) och ljuspunkten (--ljus-x, -y, -b, -h, -farg). Med .sidhuvud-over på sidhuvudet
                              ligger det genomskinligt över heron
     .orientering             remsan under heron på undersidor; markera aktuell del med aria-current="page"
     .knapp                   tidens handlingsfärg (jade på ljust, mint på mörkt); .knapp-kant, .knapp-tyst (på mörkt), .knapp-natt (på sjögrönt), .knapp-liten
     .telefon                 personens chatt i nattens hud (.telefon-status, -rad, -innehall, .bubbla-person/-ai)
     .fonster                 gränssnitt i morgonens hud (.fonster-list, .fonster-kropp); .arbetsvy, .post,
                              .kunskap (.kunskap-fraga, -svar, -kalla, -utdrag) och .staplar ligger i fönster
     .demo                    Prova flödet, se demon i index.html; gemensam.js gör den levande. Arbetsvyn står
                              kvar på dator, och på mobil följer lägesraden med längst ned direkt efter telefonen
     .par                     problem och svar: .par-problem (tid-natt) och .par-svar (tid-morgon), med .par-etikett.
                              Visualiseringar: .upprepning, .okant, .mini-chatt, .mini-fonster
     .nr                      siffra i markörfärgen i ett gränssnitt; .steglista.steg-nummer ger stegen samma färg
     .fordelning              fördelningsstapel med .forklaring; färger .f-nytt, .f-pagar, .f-hanterat, .f-avslutat
     [data-rita]              en form i SVG som ritas fram en gång när den kommer i bild, se längst ned
     [data-stegvis]           steg som byts med scrollen i en fast skärm, med stegspår: .stegvis > .stegvis-lager >
                              ol.stegvis-lista > li (.stegvis-text + .stegvis-bit). Utan skript en vanlig lista
     .hel                     håller ihop ord med bindestreck i en rubrik
     .steglista               numrerade steg (ol); .fakta för fakta i rutnät (dl); .lista-far och .lista-inte
     .tabell                  tabell med rubriker; blir kort på mobil om cellerna har data-label
     .fragor                  vanliga frågor med <details>; .pilot för det sjögröna fältet med tre steg och kontakt
     .sidfot                  natt, med stödtexten (#stod) som sidhuvudets ”Behöver du stöd?” leder till
   Bilder ligger i d-dygnet/bilder/ (namn-1600.webp och namn-800.webp, 3:2). Tills de finns syns
   bildramens mörka platta. Undersidor lägger sidspecifik css i en egen <style> eller sida.css. */

:root {
  --natt: #0F2231;
  --natt-2: #13293A;
  --natt-3: #0A1822;
  --sen: #183746;
  --petrol: #0E3A40;
  --skiffer: #2C4F6C;
  --morgon: #F1F5F3;
  --morgon-2: #E6EEEB;
  --eftermiddag: #F4E6D2;
  --aprikos: #F6DDB6;
  --sken: #A8E6D4;
  --honung: #F0B26A;
  --honung-ljus: #F6C78F;
  /* OMTNK:s gröna, ur symbolen och det första designsystemet. Honung är bara personens: hens ord och hens ljus. */
  --jade: #0A7A6D;
  --jade-mork: #086358;
  --sjogron: #7FC8BD;
  --ljusmint: #E1EEE5;
  --blak: #10262E;
  --sol: #7C420B;
  --vit: #FFFFFF;
  --kant: #D3DEDA;
  --platta: #1B3442;

  --rubrik: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 4.5vw, 56px);
  --max: 1240px;
  --sidhuvud: 68px;
  --luft: clamp(64px, 10vh, 120px);
}

/* Tid på dygnet. :root är morgon, sidans grundton. */
:root, .tid-morgon {
  --yta: var(--morgon); --yta-2: var(--morgon-2);
  --ink: #10262E; --ink-mjuk: #41585E;
  --linje: rgba(16, 38, 46, .14); --linje-stark: rgba(16, 38, 46, .34);
  --accent: var(--jade); --fokus: var(--natt);
  --handling: var(--jade); --handling-hover: var(--jade-mork); --handling-ink: #FFFFFF; --markor: var(--jade);
}
.tid-natt {
  --yta: var(--natt); --yta-2: var(--natt-2);
  --ink: #E7EEEC; --ink-mjuk: #AFC2C4;
  --linje: rgba(231, 238, 236, .16); --linje-stark: rgba(231, 238, 236, .42);
  --accent: var(--sken); --fokus: var(--sken);
  --handling: var(--sken); --handling-hover: #C6F0E3; --handling-ink: var(--blak); --markor: var(--sken);
}
.tid-sen-natt {
  --yta: var(--petrol); --yta-2: #12454C;
  --ink: #E8F1EF; --ink-mjuk: #B5CCCA;
  --linje: rgba(232, 241, 239, .16); --linje-stark: rgba(232, 241, 239, .42);
  --accent: var(--sken); --fokus: var(--sken);
  --handling: var(--sken); --handling-hover: #C6F0E3; --handling-ink: var(--blak); --markor: var(--sken);
}
.tid-eftermiddag {
  --yta: var(--eftermiddag); --yta-2: #EEDCC3;
  --ink: #10262E; --ink-mjuk: #41585E;
  --linje: rgba(16, 38, 46, .14); --linje-stark: rgba(16, 38, 46, .34);
  --accent: var(--jade); --fokus: var(--natt);
  --handling: var(--jade); --handling-hover: var(--jade-mork); --handling-ink: #FFFFFF; --markor: var(--jade);
}
.tid-gryning {
  --yta: var(--skiffer); --yta-2: #33597A;
  --ink: #EEF3F4; --ink-mjuk: #C3D3DA;
  --linje: rgba(238, 243, 244, .18); --linje-stark: rgba(238, 243, 244, .45);
  --accent: var(--aprikos); --fokus: var(--sken);
  --handling: var(--sken); --handling-hover: #C6F0E3; --handling-ink: var(--blak); --markor: var(--sken);
}
.tid-kvall {
  --yta: #133A40; --yta-2: #18464D;
  --ink: #EEF3F2; --ink-mjuk: #B5CBC9;
  --linje: rgba(238, 241, 244, .16); --linje-stark: rgba(238, 241, 244, .42);
  --accent: var(--sken); --fokus: var(--sken);
  --handling: var(--sken); --handling-hover: #C6F0E3; --handling-ink: var(--blak); --markor: var(--sken);
}
.tid-natt, .tid-morgon, .tid-sen-natt, .tid-eftermiddag, .tid-gryning, .tid-kvall {
  background-color: var(--yta); color: var(--ink);
}

/* Grund */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sidhuvud) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--yta); color: var(--ink);
  font-family: var(--sans); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--rubrik); font-weight: 560; line-height: 1.08; letter-spacing: -.008em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem); font-weight: 560; line-height: 1.02; letter-spacing: -.018em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 1.17rem + .5vw, 1.6rem); font-weight: 600; letter-spacing: -.006em; }
p { margin: 0 0 1em; max-width: 64ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
time, .tid { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
.dold { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hoppa { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--sken); color: var(--blak); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.hoppa:focus { top: 12px; }
/* Filmkorn: <body class="korn">. Stilla brus i en liten ruta som upprepas, utan blandningsläge, så att det är billigt. */
.korn::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

.ram { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.avsnitt { padding-block: var(--luft); }
.avsnitt + .avsnitt { padding-top: 0; }
.avsnitt-rubrik { max-width: 20ch; margin-bottom: clamp(20px, 3vh, 28px); }
.avsnitt-ingress { max-width: 56ch; color: var(--ink-mjuk); font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); margin-bottom: clamp(32px, 5vh, 52px); }
.not { font-size: .9rem; color: var(--ink-mjuk); }
.hel { white-space: nowrap; }
.las-mer { font-weight: 600; }

/* Knappar. Texten säger vad som händer, utan pilar. */
.knappar { display: flex; flex-wrap: wrap; gap: 12px; }
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--handling); color: var(--handling-ink);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.knapp:hover { background: var(--handling-hover); }
.knapp-kant { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linje-stark); }
.knapp-kant:hover { background: var(--linje); }
.knapp-tyst { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linje-stark); }
.knapp-tyst:hover { background: var(--linje); }
.knapp-natt { background: var(--natt); color: var(--morgon); }
.knapp-natt:hover { background: #1C3B4D; }
.knapp-liten { min-height: 40px; padding: 0 16px; font-size: .92rem; border-radius: 10px; }

/* Sidhuvud */
.sidhuvud {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  min-height: var(--sidhuvud); padding: 0 var(--gutter);
  box-shadow: 0 1px 0 var(--linje);
  transition: background-color .35s ease, color .35s ease;
}
.logga { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.logga-skiva { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--morgon); display: grid; place-items: center; }
.logga-skiva img { width: 26px; height: 26px; }
.logga-namn { font-family: var(--rubrik); font-weight: 700; font-size: 1.12rem; letter-spacing: .03em; }
.klocka {
  display: none; align-items: baseline; gap: .45em; flex: none;
  font-size: .9rem; line-height: 1; color: #AFC2C4;
  padding: 8px 13px; border-radius: 999px; background: var(--natt); box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .18);
}
.skript .klocka { display: flex; opacity: 0; transition: opacity .45s ease; }
.skript.visa-klocka .klocka { opacity: 1; }
.klocka-tid { color: var(--sken); font-weight: 600; letter-spacing: .02em; display: inline-block; }
.klocka-tid.byter { animation: tid-in .42s cubic-bezier(.2, .7, .2, 1); }
@keyframes tid-in { from { opacity: 0; transform: translateY(-.45em); } to { opacity: 1; transform: none; } }
.meny { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); margin-left: auto; }
.meny-lankar { display: flex; gap: clamp(14px, 1.6vw, 26px); margin: 0; padding: 0; list-style: none; }
.meny a { color: var(--ink); text-decoration: none; font-size: .96rem; font-weight: 500; }
.meny a:hover, .meny a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
.meny .stod-lank { font-weight: 400; color: var(--ink); opacity: 1; }
.meny .knapp { color: var(--handling-ink); text-decoration: none; }
.meny-knapp {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 14px; border-radius: 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linje-stark);
  font: 600 .95rem/1 var(--sans);
}
.meny-knapp-ikon { position: relative; width: 16px; height: 10px; }
.meny-knapp-ikon::before, .meny-knapp-ikon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, top .25s ease; }
.meny-knapp-ikon::before { top: 0; }
.meny-knapp-ikon::after { top: 8px; }
.meny-knapp[aria-expanded="true"] .meny-knapp-ikon::before { top: 4px; transform: rotate(45deg); }
.meny-knapp[aria-expanded="true"] .meny-knapp-ikon::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 1180px) {
  .sidhuvud { flex-wrap: wrap; }
  .js .meny-knapp { display: inline-flex; }
  .meny { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 20px; border-top: 1px solid var(--linje); }
  .js .meny:not(.oppen) { display: none; }
  .meny-lankar { flex-direction: column; gap: 0; }
  .meny-lankar a, .meny .stod-lank { display: block; padding: 13px 0; border-bottom: 1px solid var(--linje); font-size: 1.05rem; }
  .meny .knapp { margin-top: 16px; align-self: flex-start; }
  html:not(.js) .meny { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; border-top: 0; padding-top: 0; }
  html:not(.js) .meny-lankar { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  html:not(.js) .meny-lankar a, html:not(.js) .meny .stod-lank { border: 0; padding: 6px 0; font-size: .95rem; }
}
@media (max-width: 560px) { .skript .klocka { display: none; } }
/* Klockan hör till startsidans tidsförlopp och visas bara när det är igång */
html:not(.scen-aktiv) .klocka { display: none !important; }
/* Knappen i sidhuvudet markeras med en kant på sin egen sida, i stället för understrykning */
.meny .knapp[aria-current="page"] { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--blak); }
/* Sidhuvudet över en helskärmshero: genomskinligt med en svag toning uppifrån, och fast när man har scrollat
   förbi (gemensam.js sätter .over-hero). Samma regler finns i start.css för startsidan. */
.sidhuvud-over { position: fixed; top: 0; left: 0; right: 0; }
.sidhuvud.over-hero { background: linear-gradient(rgba(6, 14, 22, .62), rgba(6, 14, 22, 0)); box-shadow: none; }
.sidhuvud.over-hero:has(.meny.oppen) { background: var(--natt); }
/* Över en ljus hero (sidhuvudet i morgonens ton) är toningen ljus i stället. */
.sidhuvud.over-hero.tid-morgon { background: linear-gradient(rgba(241, 245, 243, .72), rgba(241, 245, 243, 0)); }
.sidhuvud.over-hero.tid-morgon:has(.meny.oppen) { background: var(--morgon); }
/* Utan skript står menyn utfälld och sidhuvudet blir högre, så på undersidorna ligger det då i flödet ovanför heron. */
html:not(.js) body:has(.sida-hero) .sidhuvud-over { position: sticky; }

/* Brödsmulor */
.brodsmulor { margin-bottom: clamp(18px, 3vh, 28px); font-size: .92rem; color: var(--ink-mjuk); }
.brodsmulor ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.brodsmulor li + li::before { content: "›"; margin: 0 .55em; color: var(--ink-mjuk); }
.brodsmulor a { color: var(--ink); }
.brodsmulor [aria-current] { color: var(--ink); }

/* Hero med tid på dygnet */
.hero { position: relative; padding: clamp(36px, 6vh, 80px) 0 clamp(56px, 9vh, 104px); }
.hero-ram { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.hero-for { margin: 0 0 18px; color: var(--accent); font-weight: 500; font-size: 1rem; max-width: 40ch; }
.hero h1 { max-width: 14ch; }
.hero-ingress { margin: clamp(20px, 3vh, 30px) 0 0; max-width: 36rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem); line-height: 1.55; color: var(--ink); }
.hero .knappar { margin-top: clamp(26px, 4vh, 40px); }
.tid-gryning.hero { padding-bottom: calc(clamp(56px, 9vh, 104px) + 40px); }
.tid-gryning.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(44, 79, 108, 0), #CFDFE7 55%, var(--aprikos) 80%, var(--morgon-2));
}
@media (max-width: 960px) { .hero-ram { grid-template-columns: 1fr; } }

/* Undersidornas helskärmshero: sidans foto i hela skärmen och rubriken i bildens tomma yta. Bilden täcker heron
   som object-fit: cover, men i en egen ram med fotots proportioner (3:2), så att ljuspunkten kan placeras i
   fotots egna mått. --fokus-x och --fokus-y är den punkt i bilden som hålls i mitten när bilden beskärs.
   --zoom (standard 1) förstorar bilden utöver det som behövs för att täcka heron.
   Det samlade ögonblicket: rummet är först mörkare och ljuspunkten tonar upp. Utan skript och med reducerad
   rörelse står bilden färdig. */
.sida-hero {
  --hb: calc(max(100vw, max(100svh, 560px) * 1.5) * var(--zoom, 1)); --hh: calc(var(--hb) / 1.5);
  position: relative; isolation: isolate; display: flex; height: 100svh; min-height: 560px; padding: 0; overflow: hidden;
}
.sida-hero-bild {
  position: absolute; z-index: -2; width: var(--hb); height: var(--hh);
  left: clamp(calc(100vw - var(--hb)), calc(50vw - var(--fokus-x, .5) * var(--hb)), 0px);
  top: clamp(calc(max(100svh, 560px) - var(--hh)), calc(max(100svh, 560px) / 2 - var(--fokus-y, .5) * var(--hh)), 0px);
}
.sida-hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.sida-hero-bild::after { content: ""; position: absolute; inset: 0; background: #040A10; opacity: 0; pointer-events: none; }
.sida-hero-ljus {
  position: absolute; left: var(--ljus-x, 50%); top: var(--ljus-y, 50%); width: var(--ljus-b, 30%); height: var(--ljus-h, 30%);
  translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: var(--ljus-styrka, .7);
  background: radial-gradient(closest-side, var(--ljus-farg, rgba(255, 220, 170, .5)), rgba(0, 0, 0, 0));
}
.sida-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sida-hero-innehall {
  width: 100%; display: flex; flex-direction: column;
  padding-top: calc(var(--sidhuvud) + clamp(16px, 5vh, 56px)); padding-bottom: clamp(24px, 6vh, 64px);
}
.sida-hero .brodsmulor, .sida-hero .brodsmulor li + li::before { color: var(--ink); }
.sida-hero .brodsmulor { margin-bottom: clamp(14px, 2.4vh, 24px); }
.sida-hero h1 { max-width: none; font-size: clamp(3rem, min(7vw, 9.5vh), 7.5rem); font-weight: 560; line-height: .96; letter-spacing: -.018em; }
.sida-hero h1 .rad { display: block; }
.sida-hero .hero-ingress, .sida-hero .knapp { font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); }
.sida-hero .hero-ingress { max-width: 34rem; margin-top: clamp(16px, 3vh, 28px); line-height: 1.5; }
.sida-hero .knappar { margin-top: clamp(18px, 3vh, 28px); }
@keyframes rum-morkt { from { opacity: .38; } to { opacity: 0; } }
@keyframes ljus-upp { from { opacity: 0; } }
.skript .sida-hero-bild::after { animation: rum-morkt 3.4s cubic-bezier(.3, .1, .2, 1) .2s both; }
.skript .sida-hero-ljus { animation: ljus-upp 3.4s cubic-bezier(.3, .1, .2, 1) .5s both; }
@media (max-width: 760px) {
  .sida-hero h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .sida-hero .hero-ingress { font-size: 1rem; }
  .sida-hero .knappar { margin-top: auto; flex-wrap: nowrap; gap: 8px; }
  .sida-hero .knapp { min-height: 46px; padding: 0 14px; font-size: .95rem; white-space: nowrap; }
}

/* Bildram: foto i 3:2 med en mörk platta tills bilden finns. Tiden ligger i en egen platta. */
.bildram { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--platta); border-radius: 6px; overflow: hidden; }
.bildram img { width: 100%; height: 100%; object-fit: cover; color: transparent; }
.bildram img.saknas { visibility: hidden; }
.bildtid {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  display: inline-flex; gap: .45em; align-items: baseline;
  padding: 7px 12px; border-radius: 999px; background: rgba(10, 24, 34, .8);
  color: #C9D7D9; font-size: .9rem; line-height: 1;
}
.bildtid b { color: var(--sken); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Orienteringsremsan, direkt under heron på undersidor */
.orientering { background: var(--morgon-2); border-bottom: 1px solid var(--linje); }
.orientering-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px clamp(24px, 4vw, 64px); align-items: center; padding-block: 22px; }
.orientering-text { margin: 0; font-family: var(--rubrik); font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height: 1.45; max-width: 46ch; }
.orientering-delar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.orientering-delar a {
  display: block; height: 100%; padding: 12px 14px; border-radius: 10px; text-decoration: none;
  background: var(--morgon); box-shadow: inset 0 0 0 1px var(--linje);
}
.orientering-delar a:hover { box-shadow: inset 0 0 0 1.5px var(--linje-stark); }
.orientering-delar b { display: block; font-family: var(--rubrik); font-weight: 620; font-size: 1.08rem; }
.orientering-delar span { display: block; font-size: .88rem; color: var(--ink-mjuk); }
.orientering-delar a[aria-current="page"] { background: var(--vit); box-shadow: inset 0 0 0 1.5px var(--blak), inset 0 -4px 0 var(--jade); }
@media (max-width: 860px) { .orientering-ram { grid-template-columns: 1fr; } }
/* På mobil blir delarna tre flikar på en rad, utan rollerna, så att remsan tar lite plats på varje sida. */
@media (max-width: 520px) {
  /* Den mittersta fliken (Kunskapsstödet) har det längsta namnet och får lite mer plats. */
  .orientering-delar { gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .orientering-delar a { display: grid; place-items: center; padding: 11px 4px; text-align: center; }
  /* Kunskapsstödet ska rymmas i sin flik även på 360 px. */
  .orientering-delar b { font-size: clamp(.8rem, 3.5vw, .92rem); font-weight: 600; letter-spacing: -.005em; }
  .orientering-delar span { display: none; }
}

/* Telefonen: personens chatt, alltid i nattens hud */
.telefon {
  width: min(100%, 340px); display: flex; flex-direction: column;
  background: var(--natt-3); border: 1px solid rgba(168, 230, 212, .16); border-radius: 34px;
  padding: 14px 12px 12px; color: #D5E6E2; font-size: 14px; line-height: 1.45;
}
.telefon p { margin: 0; max-width: none; }
.telefon-status { display: flex; justify-content: space-between; align-items: center; padding: 0 14px 8px; font-size: 11.5px; font-weight: 600; color: rgba(213, 230, 226, .8); }
.telefon-batteri { width: 20px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(213, 230, 226, .6); position: relative; }
.telefon-batteri::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 10px; border-radius: 1px; background: rgba(213, 230, 226, .7); }
.telefon-adress { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 18px 10px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: rgba(213, 230, 226, .72); font-size: 11px; }
.telefon-rad { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(168, 230, 212, .12); }
.telefon-symbol { width: 24px; height: 24px; border-radius: 50%; background: #E9F1EE; display: grid; place-items: center; flex: none; }
.telefon-symbol img { width: 18px; height: 18px; }
.telefon-rad b { font-size: 13px; letter-spacing: .04em; }
.telefon-roll { font-size: 11px; color: rgba(213, 230, 226, .72); white-space: nowrap; }
.lamna { margin-left: auto; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--sken); padding: 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .55); }
.telefon-innehall { display: flex; flex-direction: column; gap: 10px; padding: 14px 4px 6px; min-height: 260px; }
.ai-not { text-align: center; font-size: 11.5px; color: rgba(213, 230, 226, .72); padding: 2px 10px 6px; }
.bubbla { max-width: 86%; padding: 10px 13px; border-radius: 16px; }
.bubbla-person { align-self: flex-end; background: var(--honung); color: #1D1A13; border-bottom-right-radius: 5px; }
.bubbla-ai { align-self: flex-start; background: #1A3442; color: #DCEBE7; border-bottom-left-radius: 5px; }
.telefon-falt { margin-top: 8px; padding: 11px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(213, 230, 226, .66); font-size: 12.5px; }
.kodruta { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--sken); }
.kodruta span { font-size: 12px; color: rgba(213, 230, 226, .8); }
.kodruta b { font-size: 18px; letter-spacing: .08em; color: var(--sken); font-variant-numeric: tabular-nums; }
.bubbla.skriver::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: currentColor; vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.skript [data-svar].vantar { display: none; }
.skript [data-svar].visas { animation: svar-in .5s ease both; }
@keyframes svar-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prickar { display: inline-flex; gap: 4px; padding: 13px 14px; }
.prickar i { width: 6px; height: 6px; border-radius: 50%; background: #9FB9B5; animation: prick 1s ease-in-out infinite; }
.prickar i:nth-child(2) { animation-delay: .15s; }
.prickar i:nth-child(3) { animation-delay: .3s; }
@keyframes prick { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Fönster: verksamhetens gränssnitt, alltid i morgonens hud */
.fonster { background: var(--vit); color: var(--blak); border-radius: 14px; box-shadow: 0 0 0 1px var(--kant); overflow: hidden; font-size: 15px; line-height: 1.5; }
.fonster p { max-width: none; }
.fonster-list { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: #E6EEEB; font-size: 13px; color: #41585E; }
.fonster-list > b:first-child, .fonster-list > span:first-child { font-weight: 650; color: var(--blak); }
.fonster-flikar { display: flex; gap: 14px; flex-wrap: wrap; }
.fonster-flikar .aktiv { color: var(--blak); font-weight: 600; box-shadow: 0 2px 0 var(--blak); }
.fonster-kropp { padding: clamp(16px, 2.4vw, 26px); }
.etikett { display: block; font-size: 12.5px; color: #4E6267; }
/* Arbetsvyn */
.arende-huvud { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #E1E9E6; }
.kod { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); letter-spacing: .07em; font-weight: 650; font-variant-numeric: tabular-nums; }
.kod.is-text { font-size: 1.15rem; letter-spacing: 0; }
.status { flex: none; font-size: 12.5px; font-weight: 650; padding: 5px 11px; border-radius: 999px; background: #F7E3C6; color: #6B3E08; }
.post { margin-top: 10px; padding: 10px 12px 11px; border-radius: 10px; border-left: 4px solid #0B6B63; background: #F3F8F6; }
.post p { margin: 0; }
.post p + p { margin-top: 4px; }
.post-huvud { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.markering { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #0B6B63; }
.markering::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ikon) center / contain no-repeat; mask: var(--ikon) center / contain no-repeat;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.post.is-dold { border-left-color: #8FA3A0; background: repeating-linear-gradient(135deg, #EEF2F1 0 8px, #E5EBE9 8px 10px); color: #41585E; }
.post.is-dold .markering { color: #4E6267; }
.post.is-dold .markering::before { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.6A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.9 3.7M6.3 6.9C3.9 8.6 2.5 12 2.5 12s3.5 6.5 9.5 6.5c1.6 0 3-.4 4.2-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); }
.samtal { display: grid; gap: 5px; margin-top: 4px; }
.samtal p { padding: 6px 9px; border-radius: 8px; font-size: 13.5px; }
.samtal .fran-person { background: #FBE7CC; }
.samtal .fran-ai { background: var(--vit); box-shadow: inset 0 0 0 1px var(--kant); }
.samtal .avsandare { display: block; font-size: 11.5px; font-weight: 700; color: #4E6267; }
.tomt { display: flex; gap: 12px; align-items: flex-start; padding: 22px 18px; border: 1.5px dashed #B9C8C4; border-radius: 10px; color: #41585E; }
.tomt b { color: var(--blak); }
.tomt[hidden], [data-del="arende"][hidden] { display: none; }
.anteckning { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--kant); color: #4E6267; font-size: 14px; }
/* Kunskapsstödet */
.kunskap { display: grid; gap: 10px; }
.kunskap-fraga { font-weight: 650; }
.kunskap-svar { color: #2B4248; }
.kunskap-kalla { padding-top: 10px; border-top: 1px solid #E1E9E6; font-size: 13px; color: #0B6B63; font-weight: 600; }
.kunskap-utdrag { padding: 10px 12px; border-radius: 10px; background: #F3F8F6; font-size: 13.5px; color: #2B4248; }
/* Staplar */
.staplar { display: flex; align-items: flex-end; gap: 12px; height: 90px; margin-top: 26px; }
.staplar i { flex: 1; height: calc(var(--h) * 100%); background: var(--sen); border-radius: 5px 5px 0 0; position: relative; }
.staplar b { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: 11.5px; font-weight: 600; font-style: normal; color: var(--blak); }
.staplar-etiketter { display: flex; gap: 12px; margin-top: 6px; font-size: 11.5px; color: #4E6267; }
.staplar-etiketter span { flex: 1; text-align: center; }

/* Prova flödet: personens val i telefonen, och vad medarbetaren ser i arbetsvyn */
.demo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.demo-vem { margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: var(--ink-mjuk); }
.demo .telefon { width: 100%; }
.demo fieldset { margin: 0; padding: 12px 4px 4px; border: 0; min-width: 0; }
.demo fieldset + fieldset { border-top: 1px solid rgba(168, 230, 212, .12); }
.demo legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 14.5px; font-weight: 650; color: #F3F7F5; }
.demo legend + * { clear: both; }
.demo-sammanfattning { margin: 8px 0 !important; padding: 10px 12px; border-radius: 12px; background: #13293A; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .22); }
.demo textarea { width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 0; background: #13293A; color: #E3EEEA; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .3); font: inherit; resize: vertical; }
.val-rad { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.val-rad + .val-rad { margin-top: 6px; }
.val-rad input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sken); cursor: pointer; }
.val-rad input:disabled { cursor: default; }
.val-rad b { display: block; font-size: 13.5px; color: #F3F7F5; }
.val-rad span { font-size: 12.5px; color: rgba(213, 230, 226, .78); }
.val-alternativ { box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .2); }
.val-alternativ:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--sken); background: rgba(168, 230, 212, .09); }
.demo-kontaktfalt { display: grid; gap: 4px; margin: 6px 0 4px 30px; font-size: 12.5px; }
.demo-kontaktfalt[hidden] { display: none; }
.demo-kontaktfalt input { padding: 8px 10px; border-radius: 10px; border: 0; background: #13293A; color: #E3EEEA; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .3); font: inherit; }
.demo .kodruta { margin-top: 12px; }
.demo .kodruta[hidden] { display: none; }
.demo-andrad { font-size: 12.5px; color: var(--sken); }
.demo-andrad[hidden] { display: none; }
.demo-lage {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin: 0; padding: 14px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--linje-stark); max-width: none;
}
.demo-lage-text { margin: 0; flex: 1 1 22rem; font-weight: 600; max-width: none; }
.demo-lage-etikett { flex-basis: 100%; margin-bottom: -6px; font-size: .82rem; font-weight: 600; color: var(--jade-mork); }
.demo-lage .knapp[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .post.is-andrad, .tomt.is-andrad, .demo-lage.is-andrad { animation: andrad 1.6s ease-out; }
  @keyframes andrad { 0% { box-shadow: 0 0 0 3px var(--sjogron); } 100% { box-shadow: 0 0 0 3px rgba(127, 200, 189, 0); } }
}
@media (min-width: 861px) { .demo-personal { position: sticky; top: calc(var(--sidhuvud) + 20px); } }
/* Ljustråden i demon ([data-demo-trad]): från valet i telefonen till det som syns i arbetsvyn (gemensam.js). */
.demo[data-demo-trad] { position: relative; }
.demo-trad { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; visibility: hidden; }
.demo-trad path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.demo-trad path.tand { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1); }
.demo-trad circle { fill: var(--trad-morgon); }
/* Ljustråden i ett exempel ([data-exempelvisning]): från källan till stycket den pekar på (gemensam.js). */
[data-exempelvisning] { position: relative; }
.exempel-trad { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; visibility: hidden; }
.exempel-trad path { fill: none; stroke: var(--trad-morgon); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.exempel-trad path.tand { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1); }
.exempel-trad circle { fill: var(--trad-morgon); }
.exempel-trad path:not(.tand) + circle { opacity: 0; }
/* Stationer längs en ljustråd ([data-stationer="slinga"], gemensam.js): linjen slingrar sig genom punkterna och ritas
   med scrollen (--trad). */
.stationer-slinga { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stationer-slinga path { fill: none; stroke: var(--trad-morgon); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--trad, 1)); }
/* Ljusränder och staplar ([data-ranter], gemensam.js). Staplarna i heron ligger i bildramen, i bildens egna mått,
   och ritas upp en i taget när man börjar scrolla. De tonar ut nedåt. --golv håller dem ovanför knappar som står
   längst ned i heron (mobil). Diagrammets staplar växer upp ur baslinjen i samma takt när diagrammet syns. */
.ranter { position: absolute; inset: 0; pointer-events: none; }
.ranter i {
  position: absolute; left: calc(var(--x) * 100% - 3px); width: 6px; top: calc(var(--topp) * 100%);
  bottom: max((1 - var(--botten)) * 100%, var(--golv, 0px)); border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--sken) 0, var(--sken) 45%, rgba(168, 230, 212, 0));
  transform: scaleY(0); transform-origin: 50% 100%;
}
.ranter-uppe .ranter i { transform: none; transition: transform 1.3s cubic-bezier(.3, .7, .2, 1) calc(var(--n, 0) * .18s); }
.staplar-vantar > * { transform: scaleY(0); transform-origin: 50% 100%; }
.staplar-vantar > * > * { opacity: 0; }
.staplar-vantar.staplar-vuxna > * { transform: none; transition: transform 1.3s cubic-bezier(.3, .7, .2, 1) calc(var(--n, 0) * .18s); }
.staplar-vantar.staplar-vuxna > * > * { opacity: 1; transition: opacity .4s ease calc(var(--n, 0) * .18s + 1s); }
@media (max-width: 860px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo .telefon { max-width: 360px; }
  .demo-person { order: 1; }
  /* På mobil följer lägesraden med längst ned medan man väljer i telefonen, som en smal mörk rad i telefonens hud. */
  .demo-lage {
    order: 2; position: sticky; bottom: 10px; z-index: 2; gap: 4px 12px; padding: 10px 14px 12px; border-radius: 14px;
    background: rgba(10, 24, 34, .95); color: #E3EEEA; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .4), 0 12px 30px rgba(0, 0, 0, .35);
  }
  .demo-lage-etikett { margin: 0; font-size: .76rem; color: var(--sken); }
  .demo-lage-text { font-size: .86rem; font-weight: 500; line-height: 1.4; flex-basis: 12rem; }
  .demo-lage .knapp-kant { color: #E3EEEA; box-shadow: inset 0 0 0 1.5px rgba(168, 230, 212, .5); }
  .demo-personal { order: 3; }
}

/* Steg, fakta och listor */
.steglista { list-style: none; margin: 0; padding: 0; counter-reset: steg; display: grid; grid-template-columns: repeat(var(--antal, 4), minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.steglista > li { counter-increment: steg; padding-top: 16px; border-top: 1px solid var(--linje-stark); }
.steglista > li::before {
  content: counter(steg); display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; margin-bottom: 12px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font-family: var(--rubrik); font-size: .95rem; font-weight: 650;
}
.steglista b, .steglista h3 { display: block; margin-bottom: 6px; font-family: var(--rubrik); font-weight: 620; font-size: 1.18rem; line-height: 1.25; }
.steglista p, .steglista span { display: block; color: var(--ink-mjuk); font-size: 1rem; line-height: 1.55; }
.steg-nummer > li::before { background: var(--markor); color: var(--handling-ink); box-shadow: none; }
@media (max-width: 960px) { .steglista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steglista { grid-template-columns: 1fr; } }
.fakta { margin: 0; display: grid; grid-template-columns: repeat(var(--antal, 4), minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.fakta > div { padding: 20px 0 24px; border-top: 1px solid var(--linje-stark); }
.fakta dt { hyphens: auto; font-family: var(--rubrik); font-size: clamp(1.2rem, 1.12rem + .35vw, 1.4rem); font-weight: 600; line-height: 1.25; }
.fakta dd { margin: 8px 0 0; color: var(--ink-mjuk); max-width: 40ch; }
@media (max-width: 1080px) { .fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fakta { grid-template-columns: 1fr; } }
.lista-far, .lista-inte { list-style: none; margin: 0; padding: 0; }
.lista-far li, .lista-inte li { position: relative; padding: 13px 0 13px 32px; border-top: 1px solid var(--linje); }
.lista-far li:last-child, .lista-inte li:last-child { border-bottom: 1px solid var(--linje); }
.lista-far li::before { content: ""; position: absolute; left: 4px; top: 1.3em; width: 10px; height: 10px; border-radius: 50%; background: var(--markor); }
.lista-inte li::before { content: ""; position: absolute; left: 2px; top: 1.52em; width: 14px; height: 2px; background: var(--ink-mjuk); }

/* Problem och svar: problemet i nattens ton, OMTNK:s svar i morgonens */
.par { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--linje); }
.par-problem, .par-svar { padding: clamp(22px, 3vw, 40px); }
.par-problem { background-color: var(--natt-2); }
.par-svar { display: flex; flex-direction: column; }
.par-etikett { margin: 0 0 8px; font-size: .92rem; color: var(--ink-mjuk); }
.par-problem h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem); font-weight: 560; max-width: 26ch; margin-bottom: clamp(20px, 3vh, 30px); }
.par-svar h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 560; margin-bottom: 12px; }
.par-svar-text { margin: 0 0 20px; font-size: 1.08rem; }
.par-svar .las-mer { margin-top: auto; padding-top: 20px; }
@media (max-width: 860px) { .par { grid-template-columns: minmax(0, 1fr); } }
/* Samma fråga, gång på gång */
.upprepning { display: grid; gap: 8px; max-width: 30rem; }
.upprepning p { margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(231, 238, 236, .08); box-shadow: inset 0 0 0 1px rgba(231, 238, 236, .12); font-size: .98rem; }
.upprepning p:nth-child(2) { margin-left: 8%; }
.upprepning p:nth-child(3) { margin-left: 16%; }
.upprepning span { display: block; font-size: .8rem; color: var(--ink-mjuk); font-variant-numeric: tabular-nums; }
/* Ingen bild av användningen */
.okant { max-width: 22rem; padding: 14px 16px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(231, 238, 236, .16); }
.okant p { margin: 0; font-size: .85rem; color: var(--ink-mjuk); }
.okant-staplar { display: flex; align-items: flex-end; gap: 12px; height: 86px; margin-top: 26px; }
.okant-staplar i { flex: 1; height: calc(var(--h) * 100%); position: relative; border-radius: 5px 5px 0 0; border: 1.5px dashed rgba(231, 238, 236, .4); border-bottom: 0; }
.okant-staplar b { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-style: normal; font-family: var(--rubrik); font-size: 1rem; color: var(--ink); }
/* Små gränssnitt i svaren */
.mini-chatt { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--natt-3); color: #D5E6E2; font-size: 13.5px; line-height: 1.45; }
.mini-chatt p { margin: 0; }
.mini-chatt .kodruta { margin-top: 4px; }
.mini-fonster { font-size: 13.5px; max-width: 28rem; }
.mini-fonster .staplar { height: 72px; }
/* Siffror som kopplar ett gränssnitt till en lista eller steg */
.nr {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 8px;
  border-radius: 50%; background: var(--markor); color: var(--handling-ink); font: 650 12px/1 var(--sans); vertical-align: 2px;
}
/* Fördelning i en stapel, med förklaring. Färgen följer betydelsen, och texten säger alltid vad den är. */
.fordelning { display: flex; gap: 2px; height: 14px; margin-top: 12px; border-radius: 7px; overflow: hidden; }
.fordelning i { flex: var(--n); background: var(--f); }
.f-nytt { --f: var(--jade); }
.f-pagar { --f: var(--sjogron); }
.f-hanterat { --f: var(--skiffer); }
.f-avslutat { --f: #A9B8B5; }
.forklaring { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #2B4248; font-variant-numeric: tabular-nums; }
.forklaring li { display: flex; align-items: center; gap: 6px; }
.forklaring li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--f); }

/* Tabell */
.tabell-ram { overflow-x: auto; }
.tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabell th, .tabell td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--linje-stark); }
.tabell thead th { font-size: .9rem; color: var(--ink-mjuk); font-weight: 600; border-top: 0; }
.tabell tbody th { font-family: var(--rubrik); font-weight: 620; }
@media (max-width: 760px) {
  .tabell thead { display: none; }
  .tabell tr { display: block; padding: 14px 0; border-top: 1px solid var(--linje-stark); }
  .tabell th, .tabell td { display: block; padding: 4px 0; border: 0; }
  .tabell td[data-label]::before { content: attr(data-label); display: block; font-size: .85rem; color: var(--ink-mjuk); }
}

/* Vanliga frågor */
.fragor-ram { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.fragor-huvud { position: sticky; top: calc(var(--sidhuvud) + 32px); }
.fragor-huvud h2 { margin-bottom: 14px; }
.fragor-huvud p { color: var(--ink-mjuk); }
.fragor-lista details { border-top: 1px solid var(--linje-stark); }
.fragor-lista details:last-child { border-bottom: 1px solid var(--linje-stark); }
.fragor-lista summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 0; font-family: var(--rubrik); font-size: clamp(1.12rem, 1.06rem + .3vw, 1.3rem); font-weight: 580; line-height: 1.3;
}
.fragor-lista summary::-webkit-details-marker { display: none; }
.fragor-lista summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.5rem; line-height: 1; color: var(--accent); transition: transform .3s ease; }
.fragor-lista details[open] summary::after { transform: rotate(45deg); }
.fragor-lista details p { margin: -4px 0 20px; color: var(--ink-mjuk); max-width: 60ch; }
@media (max-width: 860px) { .fragor-ram { grid-template-columns: 1fr; } .fragor-huvud { position: static; } }

/* Pilot: sjögrönt fält, OMTNK:s egen färg */
.pilot {
  --ink: #10262E; --ink-mjuk: #23403F; --linje: rgba(16, 38, 46, .22); --linje-stark: rgba(16, 38, 46, .4); --accent: var(--blak); --fokus: var(--natt);
  --handling: var(--natt); --handling-hover: #1C3B4D; --handling-ink: var(--morgon); --markor: var(--blak);
  background: var(--sjogron); color: var(--ink); padding-block: clamp(64px, 11vh, 128px);
}
.pilot-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 96px); align-items: end; }
.pilot h2 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 4rem); font-weight: 560; max-width: 13ch; margin-bottom: clamp(28px, 5vh, 44px); }
.pilot-steg { list-style: none; margin: 0; padding: 0; counter-reset: steg; }
.pilot-steg li { counter-increment: steg; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 16px; padding: 14px 0; border-top: 1px solid var(--linje); color: var(--ink-mjuk); }
.pilot-steg li::before { content: counter(steg); grid-row: span 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--blak); font-family: var(--rubrik); font-weight: 650; color: var(--blak); }
.pilot-steg b { color: var(--blak); font-size: 1.1rem; }
.kontakt { font-style: normal; display: flex; flex-direction: column; gap: 6px; }
.kontakt-stor { font-family: var(--rubrik); font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); font-weight: 560; text-decoration: none; align-self: flex-start; overflow-wrap: anywhere; }
.kontakt-stor:first-child { border-bottom: 1.5px solid var(--linje-stark); }
.kontakt .knappar { margin: 20px 0 8px; }
.kontakt small { color: var(--ink-mjuk); font-size: .9rem; }
@media (max-width: 860px) { .pilot-ram { grid-template-columns: 1fr; align-items: start; } }

/* Sidfot: natten igen */
.sidfot { padding: clamp(56px, 9vh, 96px) 0 32px; }
.sidfot-ram { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr); gap: 40px clamp(28px, 5vw, 80px); }
.stod h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 16px; }
.stod p { font-size: 1.08rem; }
.stod a { color: var(--sken); font-weight: 600; }
.sidfot-lankar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sidfot-lankar a { color: var(--ink); text-decoration: none; }
.sidfot-lankar a:hover { text-decoration: underline; }
.foretag { color: var(--ink-mjuk); font-size: .98rem; }
.foretag p { margin-bottom: .9em; }
.foretag-namn { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--rubrik); font-size: 1.1rem; letter-spacing: .06em; }
.foretag-namn .logga-skiva { width: 30px; height: 30px; }
.foretag-namn .logga-skiva img { width: 22px; height: 22px; }
.sidfot-botten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--linje); font-size: .9rem; color: var(--ink-mjuk); max-width: none; }
.sidfot-botten a { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) { .sidfot-ram { grid-template-columns: 1fr 1fr; } .stod { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sidfot-ram { grid-template-columns: 1fr; } }

/* Steg som byts med scrollen ([data-stegvis]). gemensam.js sätter .stegvis-aktiv (bara utan reducerad rörelse),
   --antal på blocket och per steg --synlig (texten, ett steg i taget), --bild (biten, som tonar över i nästa) och
   --lyft (textens rörelse). Varje steg får 0,85 skärmhöjder. Utan skript är det en vanlig lista. */
.stegvis-aktiv { position: relative; height: calc((1 + var(--antal, 4) * .85) * 100svh); }
.stegvis-aktiv .stegvis-lager { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; padding-top: var(--sidhuvud); }
.stegvis-aktiv .stegvis-lista { width: 100%; display: grid; }
.stegvis-aktiv .stegvis-lista > li { grid-area: 1 / 1; }
.stegvis-aktiv .stegvis-lista > li:not(.aktiv) { pointer-events: none; }
.stegvis-aktiv .stegvis-text { opacity: var(--synlig, 0); transform: translateY(var(--lyft, 0)); will-change: opacity, transform; }
.stegvis-aktiv .stegvis-bit { opacity: var(--bild, 0); }
/* Stegspåret: en punkt per steg på en tunn linje i högerkanten. Den aktuella punkten är mint och större.
   Startsidans scen har dygnsklockan i stället (start.css). */
.stegspar { position: absolute; right: 26px; top: 50%; width: 14px; height: min(34vh, 260px); translate: 0 -50%; opacity: 0; pointer-events: none; }
.stegspar-linje { position: absolute; left: 6.25px; top: 0; bottom: 0; width: 1.5px; background: rgba(231, 238, 236, .35); }
.stegspar-fyll { position: absolute; inset: 0; background: var(--sken); transform-origin: 50% 0; transform: scaleY(var(--fyll, 0)); }
.stegspar-punkt {
  position: absolute; left: 7px; top: calc(var(--i) * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #E7EEEC; box-shadow: 0 0 0 3px rgba(10, 22, 32, .45); transition: transform .35s ease, background-color .35s ease;
}
.stegspar-punkt.forbi { background: var(--sken); }
.stegspar-punkt.aktiv { background: var(--sken); transform: scale(1.75); }
.stegspar-text {
  position: absolute; top: calc(100% + 18px); right: -6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(10, 24, 34, .82); color: #E7EEEC; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 860px) {
  .stegspar { top: calc(var(--sidhuvud) + 14px); left: var(--gutter); right: var(--gutter); width: auto; height: 14px; translate: none; }
  .stegspar-linje { left: 0; right: 0; top: 6.25px; bottom: auto; width: auto; height: 1.5px; }
  .stegspar-fyll { transform-origin: 0 50%; transform: scaleX(var(--fyll, 0)); }
  .stegspar-punkt { top: 7px; left: calc(var(--i) * 100%); }
  .stegspar-text { display: none; }
}

/* Ljustråden börjar i personens varma ljus och blir OMTNK:s gröna när den når tjänsten. På ljus yta är den jade. */
:root { --trad-morgon: var(--jade); }

/* Former som ritas fram en gång: data-rita på behållaren, class="rita" och pathLength="1" på linjerna och
   class="tona" på det som tonas in efteråt. gemensam.js sätter .kan-rita (bara utan reducerad rörelse) och
   .ritad när formen kommer i bild. Utan skript är formerna färdiga. */
.kan-rita [data-rita] .rita { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kan-rita [data-rita].ritad .rita { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1); }
.kan-rita [data-rita] .tona { opacity: 0; }
.kan-rita [data-rita].ritad .tona { opacity: 1; transition: opacity .7s ease .9s; }

/* Har besökaren valt rörelse trots enhetens inställning (gemensam.js, .rorelse-vald) får övergångarna vara kvar. */
@media (prefers-reduced-motion: reduce) {
  html:not(.rorelse-vald) *, html:not(.rorelse-vald) *::before, html:not(.rorelse-vald) *::after { animation: none !important; transition: none !important; }
}
.rorelse-av { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }