/* Robustium: shared tokens and site components. The video stage has its own sheet (scen.css). */
@import url("/assets/css/typsnitt.css");
@import url("/assets/css/pekare.css");

:root {
  /* Palett: assets/js/palett.js (Robustium, porslin och saffran). Värdena här är standard; sidan och spelaren
     sätter dem ur paletten vid start, så en kunds palett byter allt. */
  --papper: #F7F6F1;
  --papper-2: #e9e9e5;
  --papper-3: #dededb;
  --vit: #fdfcfb;
  --black: #121A2B;
  --mork: #2b4070;
  --primar: #4A6FC4;
  --primar-text: #466cc3;
  --primar-ljus: #DCE5F6;
  --primar-ton: #e4e8f3;
  --accent: #F3BE1C;
  --accent-linje: #af7b16;
  --accent-yta: #FBEDC2;
  --linje: #d5d5d3;
  --dampad: #6b6e76;
  --grat: #b9bbbc;
  /* alias från den gröna paletten */
  --jade: var(--primar);
  --jade-text: var(--primar-text);
  --jade-ljus: var(--primar-ljus);
  --ockra: var(--accent-linje);
  --ockra-ljus: var(--accent-yta);
  --rubrik: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --kant: 16px;
  /* The side margin inside a .ram: 4vw on small screens, never more than 48px, so the content never narrows as a
     wide window grows (the .ram itself stops at --bredd). */
  --ramkant: clamp(var(--kant), 4vw, 48px);
  --bredd: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh; /* with .sidfot sticky at 100vh: the footer stands at the window's bottom on a short page */
  background: var(--papper);
  color: var(--black);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; cursor: var(--pekare-aktiv); }
:focus-visible { outline: 2px solid var(--ockra); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--rubrik); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; margin: 0; text-wrap: balance; hyphens: manual; }
/* Never split a word with a hyphen the browser chose, in any language. */
body { hyphens: manual; }
p { margin: 0 0 1em; }
.visuellt-dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ram { max-width: var(--bredd); margin: 0 auto; padding: 0 var(--ramkant); }

/* Header */
/* The header has a faint tint of the palette's blue, so it stands apart from the page (owner 2026-11-05). The folded
   menu under it has the same tint. */
.sidhuvud { --huvud-bakgrund: color-mix(in srgb, var(--primar) 9%, var(--papper)); border-bottom: 1px solid var(--linje); background: var(--huvud-bakgrund); position: sticky; top: 0; z-index: 10; }
.sidhuvud .ram { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--mork); flex: none; }
.marke svg { width: 30px; height: 30px; flex: none; }
.ordmarke { font: 600 15px/1 var(--sans); letter-spacing: 0.22em; margin-right: -0.22em; }
/* A page the server writes on its own (server/enkelsida.mjs: the course link, the lock, the report link): centred in the
   window, the mark above. */
.enkel { min-height: 100svh; display: grid; place-items: center; padding: 48px var(--kant); }
.enkel main { display: grid; gap: 20px; justify-items: center; text-align: center; width: min(100%, 600px); }
.enkel main > * { margin: 0; }
.enkel .marke { flex-direction: column; gap: 14px; margin-bottom: 16px; }
.enkel .marke svg { width: 56px; height: 56px; }
.enkel form { margin: 0; }
/* The login card on the lock page (server/kurslank.mjs lasSida): the mark in a ring, email and password, the answer,
   then a line to the sale. */
.inlogg { width: min(100%, 540px); display: grid; gap: 20px; text-align: left; background: var(--vit); border: 1.5px solid var(--black); border-radius: 16px; box-shadow: 8px 8px 0 var(--black); padding: clamp(24px, 6vw, 56px); }
.inlogg .ring { justify-self: center; display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid var(--black); border-radius: 50%; color: var(--mork); }
.inlogg .ring svg { width: 40px; height: 40px; }
.inlogg h1 { text-align: center; margin: 0; }
.inlogg form .knapp { width: 100%; justify-content: center; padding: 16px 24px; font-size: 16px; margin-top: 4px; }
.inlogg .losenord { position: relative; }
.inlogg .losenord input { padding-right: 56px; }
.inlogg .oga { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: var(--dampad); cursor: var(--pekare-aktiv); }
.inlogg .oga:hover, .inlogg .oga:focus-visible { color: var(--black); }
.inlogg .oga svg { width: 22px; height: 22px; }
.inlogg .oga[aria-pressed="false"] .streck { display: none; }
.enkel-sprak { display: flex; gap: 20px; justify-content: center; font-size: 15px; margin-top: 8px; }
.formular input::placeholder { color: #9aa0a8; opacity: 1; }
.inlogg .svar { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--primar-ton); font-size: 15px; line-height: 1.5; }
.inlogg .prova { margin: 0; text-align: center; font-size: 15px; }
.inlogg hr { border: 0; border-top: 1.5px solid var(--linje); margin: 4px 0; width: 100%; }
.inlogg .kund { margin: 0; text-align: center; display: grid; gap: 12px; justify-items: center; color: var(--dampad); font-size: 15px; }

/* Forms: one field per row, label above (rapporter.html, session pages, the login card). */
.formular .falt { display: grid; gap: 6px; margin-bottom: 18px; }
.formular label { font: 600 15px/1.3 var(--sans); color: var(--black); }
.formular input, .formular select, .formular textarea {
  font: inherit; font-size: 17px; padding: 12px 14px; width: 100%; min-width: 0;
  border: 1.5px solid var(--black); border-radius: 8px; background: #fff; color: var(--black);
}
.meny { display: flex; gap: 22px; font-size: 14px; }
.meny a { text-decoration: none; color: var(--dampad); padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.meny a:hover, .meny a[aria-current="page"] { color: var(--black); border-bottom-color: var(--black); }
.meny-knapp { display: none; background: none; border: 1px solid var(--linje); padding: 8px 12px; font-size: 14px; }

/* Type */
.kicker { font: 600 15px/1.3 var(--sans); color: var(--jade-text); }
.ingress { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--dampad); max-width: 36em; }
/* One size for every page's main heading: the start page's (owner 2026-11-05). */
:root { --rubrik-stor: clamp(44px, 5.2vw, 76px); }
.stor { font-size: var(--rubrik-stor); }
.mellan { font-size: clamp(32px, 3.8vw, 54px); }
.liten-rubrik { font-size: clamp(24px, 2.2vw, 30px); }
em, .kursiv { font-style: italic; }

/* Sections */
.sektion { padding-block: clamp(48px, 6vw, 88px); }
/* A page's first section sits closer to the header: the full section space above a headline reads as an empty band. */
main > .sektion:first-child, main.sektion { padding-top: clamp(36px, 4.5vw, 64px); }
.sektion + .sektion { border-top: 1px solid var(--linje); }
.mork-sektion { background: var(--mork); color: var(--papper); }
.mork-sektion .kicker { color: var(--primar-ljus); }
.mork-sektion .ingress, .mork-sektion p { color: color-mix(in srgb, var(--vit) 80%, var(--black)); }

.hjalte { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 3.5vw, 48px); align-items: start; padding-block: clamp(56px, 9vw, 128px) clamp(16px, 2vw, 24px); } /* little below: the film keeps room for its captions under it */
.hjalte h1 { margin: 0 0 18px; }
/* The hero headline is a step smaller than other page headlines, so the film beside it gets the room. */
/* The size also follows the heading's own column (container query), so zoom, scaling or a very wide window never
   pushes it past three lines: the column, not the window, decides. */
.hjalte > div:first-child { container-type: inline-size; }
.hjalte h1.stor { font-size: min(var(--rubrik-stor), 19cqi); margin-top: -0.2em; } /* -0.2em: the capitals line up with the film's top edge */
.hjalte .knappar { margin-top: 18px; gap: 10px; }
/* A handwritten note, "Try a lesson!", under the text toward the film, and a thin arrow that drops from under it,
   turns and rises to the film's corner (owner 2026-11-06: neat, like Trivsio's). The arrowhead follows the line's end
   direction. Normal strokes with a light grain: the filter #korn in index.html (owner 2026-11-06: chalk was too rough). */
.hand-not { position: relative; display: inline-block; margin: 26px 0 104px 52%; font: 600 32px/1 "Caveat", cursive;
  color: var(--primar); rotate: -5deg; filter: url(#korn); }
.hand-pil { position: absolute; top: calc(100% + 6px); left: 30%; width: 176px; height: 102px; overflow: visible; rotate: 5deg; }
/* Stacked (the film under the text): the same arrow, turned so that it ends pointing down at the film. */
@media (max-width: 900px) { .hand-not { margin: 18px 0 100px 18%; } .hand-pil { top: calc(100% + 30px); left: 46%; width: 120px; height: 70px; rotate: 80deg; } }
.hjalte-bild { color: var(--mork); max-width: 380px; justify-self: end; width: 100%; }

.knappar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.knapp {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 12px;
  background: var(--mork); color: var(--papper); border: 1.5px solid var(--black); box-shadow: 4px 4px 0 var(--black);
  font: 600 14px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: var(--pekare-aktiv);
}
.knapp:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--black); }
.knapp:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--black); }
.knapp.ljus { background: var(--vit); color: var(--mork); }
.knapp.gul { background: var(--accent); color: var(--black); }
.textlank { font-weight: 600; font-size: 14px; }

.tva-kol { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 6vw; align-items: start; }
.tre-kol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linje); }
.tre-kol > * { padding: 28px 28px 32px 0; }
.tre-kol > * + * { border-left: 1px solid var(--linje); padding-left: 28px; }
.tre-kol h3 { font-size: 27px; margin: 34px 0 12px; }
.tre-kol p { color: var(--dampad); font-size: 15px; }
.nummer { font: 500 13px/1 var(--sans); color: var(--jade-text); font-variant-numeric: tabular-nums; }

/* Track list */
.spar { border-top: 1px solid var(--linje); padding: 44px 0 52px; }
.spar-huvud { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5vw; margin-bottom: 26px; }
.spar-huvud h2 { font-size: clamp(30px, 3vw, 42px); margin-top: 10px; }
.spar-huvud p { color: var(--dampad); margin: 8px 0 0; }
.lektionslista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
.lektionslista li { border-bottom: 1px solid var(--linje); }
.lektionslista a {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: baseline;
  padding: 18px 0; text-decoration: none;
}
/* A lesson the visitor cannot open yet: the same row, without the link. */
.lektionslista .lektionsrad { display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: baseline; padding: 18px 0; }
.kurs-last { margin: 24px 0 40px; padding: 14px 18px; border: 1.5px solid var(--black); border-radius: 10px; background: var(--primar-ton); }
.kurs-last p { margin: 0; }
.kurs-last .knappar { margin-top: 14px; }
.lektionslista a:hover .lektionstitel { text-decoration: underline; text-underline-offset: 5px; }
.lektionstitel { font: 600 22px/1.2 var(--rubrik); letter-spacing: -0.015em; }
.lektionsbeteende { display: block; font-size: 14px; color: var(--dampad); margin-top: 4px; font-family: var(--sans); }
.lektionstid { font-size: 13px; color: var(--dampad); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etikett { display: inline-block; border: 1px solid var(--linje); padding: 3px 9px; font-size: 12px; color: var(--dampad); }
/* The directories and lists users come from (tjanst.html, paket.html), as pills. */
.integrationer { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.integrationer li { background: var(--vit); border: 1.5px solid var(--black); border-radius: 999px; padding: 8px 16px; font: 600 15px var(--sans); }

/* Facts and sources */
.kallor { font-size: 13px; color: var(--dampad); }
.kallor li { margin: 4px 0; }
/* "Läs mer" under a film: the sources of the episode, with the date each was checked */
.las-mer { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linje); max-width: 72ch; }
.las-mer h2 { font: 600 20px/1.25 var(--rubrik); margin: 0 0 10px; }
.las-mer .kallor { font-size: 15px; color: var(--black); padding-left: 20px; margin: 0; }
.las-mer .kallor li { margin: 8px 0; }
.las-mer .kallor span { font-size: 13px; color: var(--dampad); white-space: nowrap; }
.not { font-size: 13px; color: var(--dampad); }

/* Footer */
.sidfot { position: sticky; top: 100vh; background: var(--black); color: color-mix(in srgb, var(--vit) 80%, var(--black)); padding: 56px 0 40px; font-size: 14px; }
.sidfot .ram { display: grid; grid-template-columns: 1.4fr .8fr .9fr; gap: 40px; }
.sidfot b { color: var(--vit); font-weight: 600; }
.sidfot .marke { color: var(--papper); }
.sidfot a { color: color-mix(in srgb, var(--vit) 92%, var(--black)); }
.sidfot p { margin: 12px 0 0; }
/* Membership: Cybernode's white symbol and the context line their policy asks for; Kader Cadre AB is only a member. */
.sidfot .ram.sidfot-medlem { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.sidfot-medlem a { flex: none; display: block; }
.sidfot-medlem img { display: block; width: 22px; height: auto; }
.sidfot-medlem p { margin: 0; font-size: 11px; line-height: 1.5; color: color-mix(in srgb, var(--vit) 62%, var(--black)); }
.sidfot-medlem b { color: color-mix(in srgb, var(--vit) 85%, var(--black)); font-weight: 600; }

@media (max-width: 900px) {
  .hjalte, .tva-kol, .spar-huvud { grid-template-columns: 1fr; }
  .hjalte-bild { justify-self: start; max-width: 220px; }
  .tre-kol { grid-template-columns: 1fr; }
  .tre-kol > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--linje); }
  .tre-kol h3 { margin-top: 16px; }
  .sidfot .ram { grid-template-columns: 1fr; }
}
/* The menu folds into a button at 1100 px and below, and above that whenever the links measure too wide. */
@media (max-width: 1100px) {
  .meny { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--huvud-bakgrund); border-bottom: 1px solid var(--linje); padding: 8px var(--kant) 16px; }
  .meny.oppen { display: flex; }
  .meny a { padding: 12px 0; border-bottom: 1px solid var(--linje); }
  .meny-knapp { display: inline-block; }
}
/* The same fold above 1100 px when the links measure too wide (assets/js/sida.js, foljMenyBredd). */
.sidhuvud.kompakt .meny { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--huvud-bakgrund); border-bottom: 1px solid var(--linje); padding: 8px var(--kant) 16px; }
.sidhuvud.kompakt .meny.oppen { display: flex; }
.sidhuvud.kompakt .meny a { padding: 12px 0; border-bottom: 1px solid var(--linje); }
.sidhuvud.kompakt .meny-knapp { display: inline-block; }
@media (max-width: 720px) {
  .lektionslista a, .lektionslista .lektionsrad { grid-template-columns: 34px 1fr; }
  .lektionstid { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* Glide (assets/js/glid.js): Lenis drives the scrolling while html has the class lenis. The browser's own smooth
   scrolling is off then, so the two do not pull against each other; a box with its own scrolling is marked
   data-lenis-prevent. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Home */
.hjalte-film { min-width: 0; }
.hjalte-film .transkript { display: none; }
.steg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linje); margin-top: 36px; }
.steg > div { padding: 24px 24px 8px 0; }
.steg > div + div { border-left: 1px solid var(--linje); padding-left: 24px; }
.steg h3 { font-size: 24px; margin: 18px 0 10px; }
.steg p { color: var(--dampad); font-size: 15px; }
/* The tracks: the two for everyone side by side on the first row, the role tracks three on the second. */
.spar-kort { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.spar-kort > * { grid-column: span 2; }
.spar-kort > :nth-child(-n+2) { grid-column: span 3; }
/* Two cards left over on the last row share it, as the first row does (seven tracks: 2 + 3 + 2). */
.spar-kort > :nth-child(3n+6):nth-last-child(2), .spar-kort > :nth-child(3n+7):nth-last-child(1) { grid-column: span 3; }
.spar-kort > * { display: grid; gap: 10px; align-content: start; background: var(--vit); border: 1.5px solid var(--black); border-radius: 16px; box-shadow: 6px 6px 0 var(--black); padding: 24px; text-decoration: none; min-height: 260px; }
.spar-kort a:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--black); }
.spar-kort h3 { font-size: 26px; }
.spar-kort p { color: var(--dampad); font-size: 15px; margin: 0; }
.spar-kort .antal { margin-top: auto; font-size: 13px; color: var(--jade-text); font-weight: 600; }
.citatblock { font: italic 400 clamp(26px, 2.6vw, 36px)/1.3 var(--serif); max-width: 28em; margin: 0; }
.person { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: 22px 0; }
/* The founder's photo as a shield: straight corners on top, round below (owner 2026-11-05). */
.person .portratt { width: 104px; height: 122px; object-fit: cover; border-radius: 6px 6px 50% 50% / 6px 6px 42% 42%; border: 1.5px solid var(--black); background: var(--mork); }
@media (max-width: 560px) { .person { gap: 16px; } .person .portratt { width: 80px; height: 94px; } }
.person h3 { font-size: 22px; margin-bottom: 4px; }
.person p { color: var(--dampad); margin: 0; font-size: 15px; }
.matt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.matt > div { border-top: 3px solid var(--jade); padding-top: 16px; }
.matt > div.inte { border-top-color: var(--linje); }
.matt h3 { font-size: 21px; margin-bottom: 8px; }
.matt p { color: var(--dampad); font-size: 15px; }
.kontaktrad { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; margin-top: 24px; font-size: 18px; }
.kontaktrad code { font: 500 17px var(--sans); background: var(--papper-2); padding: 4px 8px; user-select: all; }
@media (max-width: 900px) {
  .steg, .spar-kort, .matt { grid-template-columns: 1fr 1fr; }
  .spar-kort > *, .spar-kort > :nth-child(-n+2), .spar-kort > :nth-child(3n+6):nth-last-child(2), .spar-kort > :nth-child(3n+7):nth-last-child(1) { grid-column: auto; }
  .spar-kort > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steg > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .steg, .spar-kort, .matt { grid-template-columns: 1fr; }
  .steg > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linje); }
  .spar-kort a { min-height: 0; }
  .spar-kort > :last-child:nth-child(odd) { grid-column: auto; }
}

/* DEV line: only in the development build (content/miljo.js). */
/* The news band above the header: one line, the site's yellow, a link to the whitepapers. */
.nyhetsband { display: block; background: var(--accent); color: var(--black); text-decoration: none; border-bottom: 1px solid var(--black); }
.nyhetsband .ram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; font: 500 15px/1.35 var(--sans); text-align: center; }
.nyhetsband-lank { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nyhetsband:hover .nyhetsband-lank, .nyhetsband:focus-visible .nyhetsband-lank { text-decoration-thickness: 2px; }
.nyhetsband:focus-visible { outline: 3px solid var(--black); outline-offset: -3px; }
.dev-rad { display: flex; gap: 12px; align-items: center; padding: 6px var(--ramkant); background: var(--black); color: color-mix(in srgb, var(--vit) 82%, var(--black)); font: 500 12px/1.4 var(--sans); }
.dev-rad b { background: var(--ockra); color: #fff; padding: 2px 8px; border-radius: 4px; letter-spacing: .1em; }

/* Browser surfaces in the palette. */
::selection { background: var(--jade-ljus); color: var(--black); }
html { scrollbar-color: var(--mork) var(--papper-2); }
a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }

/* Breadcrumb above a page heading: navigation, not a label. */
.smula { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--dampad); margin: 0 0 12px; padding: 0; list-style: none; }
.smula li + li::before { content: "/"; margin-right: 6px; color: var(--linje); }
.smula a { color: var(--dampad); text-decoration: none; }
.smula a:hover { color: var(--black); text-decoration: underline; }

/* A line under a heading that says who and in what format. */
.under-rubrik { font-size: 14px; color: var(--jade-text); font-weight: 600; margin: 6px 0 0; }
.spar-kort .format { font-size: 13px; color: var(--jade-text); font-weight: 600; margin-top: -7px; } /* close under the track's name, which it describes */

@media (max-width: 720px) {
  .hjalte { gap: 28px; }
  .mellan { font-size: clamp(28px, 8vw, 38px); }
  .sektion { padding-block: 48px; }
  .knappar .knapp { flex: 1 1 auto; justify-content: center; }
}

/* Home: figures under the hero, what we take care of, the closing call. */
.siffror { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linje); padding-top: 0; padding-bottom: clamp(48px, 6vw, 80px); }
.siffror > div { display: grid; gap: 6px; padding-right: 24px; }
.siffror b { font: 600 clamp(44px, 5vw, 72px)/1 var(--rubrik); letter-spacing: -0.025em; color: var(--mork); font-variant-numeric: tabular-nums; }
.siffror span { font-size: 15px; color: var(--dampad); }
.nytta-sektion { border-top: 1px solid var(--linje); }
.spar-huvud .ingress { margin: 0; }
.mork-sektion .spar-huvud { margin-bottom: 0; }
.slut .ingress { margin-top: 24px; }
.slut .knappar { margin-top: 36px; gap: 16px 28px; }
.eller { color: var(--dampad); font-size: 16px; }
.eller a { color: var(--black); font-weight: 600; }
@media (max-width: 900px) {
  .siffror { grid-template-columns: 1fr 1fr; gap: 24px 0; }
}
.spar-huvud h2.mellan { font-size: clamp(32px, 3.8vw, 54px); margin-top: 0; }
.mork-sektion .spar-huvud p { color: color-mix(in srgb, var(--vit) 80%, var(--black)); }
/* Dividers follow the text edge, not the frame edge; none after a dark section and none above the figures under the
   hero (owner 2026-11-05). Two lines with the mark in the gap
   between them (owner 2026-11-05, after Dalanovum's divider); the mark takes the palette's colour through a mask. */
.sektion + .sektion, .siffror, .nytta-sektion { border-top: 0; position: relative; --marke-luft: 26px; }
/* Sections inside one frame (main.ram on the inner pages) already sit inside its padding: the lines run to the text edge. */
.ram > .sektion { --avdelarkant: 0px; }
.ram.sektion + .ram.sektion::before, .ram.nytta-sektion::before, .ram > .sektion + .sektion::before {
  content: ""; position: absolute; top: 0; left: var(--avdelarkant, var(--ramkant)); right: var(--avdelarkant, var(--ramkant)); height: 1px;
  background: linear-gradient(90deg, var(--linje) calc(50% - var(--marke-luft)), transparent 0 calc(50% + var(--marke-luft)), var(--linje) 0);
}
.ram.sektion + .ram.sektion::after, .ram.nytta-sektion::after, .ram > .sektion + .sektion::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 18px; height: 17px; translate: -50% -50%;
  background: var(--primar); mask: url(../../brand/robustium-mark.svg) center / contain no-repeat;
}
/* A section marked utan-avdelare has no divider above it: it continues the one before, or follows a part that ends
   with tight spacing (kurser, metod, tjänst; owner 2026-11-05). Placed after the divider rules, which have the same
   specificity. */
.ram > .sektion.utan-avdelare::before, .ram > .sektion.utan-avdelare::after { content: none; }

/* Header: the menu beside the mark, then space, then the language, the yellow contact call and the dark "Log in"
   (yellow is contact, dark is the product). On a phone the hero carries the contact call instead. */
.sidhuvud .meny { margin-left: 28px; }
.huvud-hoger { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* The language toggle: a pill whose dark part is the current language and whose right end is the globe. Open, the other
   languages grow out of it to the left. */
.sprak-val { display: inline-flex; align-items: center; flex-direction: row-reverse; padding: 3px; border: 1.5px solid var(--black);
  border-radius: 999px; background: var(--vit); font: 600 13px/1 var(--sans); letter-spacing: .04em; }
.sprak-val summary { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; list-style: none; cursor: var(--pekare-aktiv); color: var(--dampad); }
.sprak-val summary::-webkit-details-marker { display: none; }
.sprak-val summary svg { width: 16px; height: 16px; flex: none; }
.sprak-kod { padding: 6px 9px; border-radius: 999px; background: var(--mork); color: var(--papper); }
.sprak-val summary:hover, .sprak-val[open] summary { color: var(--black); }
.sprak-val summary:focus-visible { outline: 2px solid var(--primar); outline-offset: 3px; border-radius: 999px; }
.sprak-lista { display: flex; overflow: hidden; } /* motion: assets/js/sprakval.js */
.sprak-lista a { padding: 6px 8px; border-radius: 999px; color: var(--dampad); text-decoration: none; white-space: nowrap; }
.sprak-lista a:hover, .sprak-lista a:focus-visible { color: var(--black); background: var(--accent-yta); }
.huvud-knapp { padding: 10px 16px; box-shadow: 3px 3px 0 var(--black); white-space: nowrap; }
@media (max-width: 1200px) and (min-width: 1101px) { .meny { gap: 18px; } }
@media (max-width: 520px) {
  .huvud-knapp.gul { display: none; }
  .sidhuvud .ram { gap: 12px; }
  .huvud-hoger { gap: 10px; }
  .huvud-hoger .huvud-knapp { padding: 9px 12px; }
  .sprak-val summary svg { display: none; }
  .sprak-val summary { padding-right: 0; }
  /* No room to push the buttons: the languages open as a pill of their own beside the toggle, over the mark. */
  .sprak-val { position: relative; }
  .sprak-lista { position: absolute; z-index: 30; right: calc(100% + 6px); top: -1.5px; bottom: -1.5px; align-items: center;
    padding: 0 3px; background: var(--vit); border: 1.5px solid var(--black); border-radius: 999px; box-shadow: 3px 3px 0 var(--black); }
}
/* A header row that is still too wide with the menu folded keeps the mark and drops the word, so "Log in" and the menu
   still fit (measured: assets/js/sida.js, foljMenyBredd). */
.sidhuvud.smal .ordmarke { display: none; }
/* Cards and buttons lift softly instead of jumping. Site only; the film stage never uses CSS transitions. */
.spar-kort a, .knapp { transition: translate .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s cubic-bezier(.22, 1, .36, 1), background-color .32s ease; }
.spar-kort a:hover { translate: -3px -3px; box-shadow: 9px 9px 0 var(--black); }
/* Hover: the card and its picture take a little more of the primary colour (owner 2026-11-06). */
.spar-kort a:hover { background-color: color-mix(in srgb, var(--primar) 5%, var(--vit)); }
.spar-kort a .spar-bild { transition: background-color .32s ease; }
.spar-kort a:hover .spar-bild { background-color: color-mix(in srgb, var(--primar) 12%, var(--primar-100)); }
.knapp:active { transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { .spar-kort a, .spar-kort a .spar-bild, .knapp { transition: none; } }

/* Ni och vi: what the customer does (light porcelain, shapes) and what we take care of (the list). */
.ni-vi { display: grid; grid-template-columns: 0.8fr 1.2fr; margin-top: 44px; background: var(--vit); border: 1.5px solid var(--black); border-radius: 20px; box-shadow: 8px 8px 0 var(--black); overflow: hidden; }
.ni { position: relative; overflow: hidden; background: var(--primar-100); border-right: 1.5px solid var(--black); padding: 44px; display: grid; align-content: start; gap: 14px; }
.ni > :not(.sidform) { position: relative; z-index: 1; margin: 0; }
.ni b, .vi > b { font: 600 15px var(--sans); }
.ni-stor { font: 600 clamp(30px, 3vw, 42px)/1.08 var(--rubrik); letter-spacing: -0.025em; color: var(--black); text-wrap: pretty; }
.ni p:last-of-type { color: var(--neutral-700); }
.vi { padding: 40px 44px; }
.vi > b { display: block; color: var(--dampad); margin-bottom: 8px; }
.vi-rad { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--linje); }
.vi-rad i { width: 12px; height: 12px; margin-top: 8px; border-radius: 3px; background: var(--accent); border: 1px solid var(--black); }
.vi-rad h3 { font-size: 20px; margin-bottom: 4px; }
.vi-rad p { margin: 0; color: var(--dampad); font-size: 15.5px; }
.sidform { position: absolute; z-index: 0; pointer-events: none; display: block; }
.sidform svg { width: 100%; height: 100%; display: block; }
.ni-kvart { width: 300px; height: 300px; left: 0; bottom: 0; }
.ni-halv { width: 110px; height: 55px; right: 46px; top: 0; }
.ni-ring { width: 92px; height: 92px; right: 52px; top: 54%; }
@media (max-width: 900px) {
  .ni-vi { grid-template-columns: 1fr; }
  .ni { border-right: 0; border-bottom: 1.5px solid var(--black); padding: 32px 28px 28px; }
  .vi { padding: 28px; }
  .ni-kvart { width: 150px; height: 150px; }
  .ni-ring { width: 80px; height: 80px; left: auto; right: -30px; top: auto; bottom: 30px; }
}

/* Illustrations (assets/bilder, Humaaans style, made by the owner). Decorative: alt="". */
.spar-bild { display: block; width: 100%; height: 150px; object-fit: contain; background: var(--primar-100); border-radius: 10px; padding: 14px 10px 6px; margin-bottom: 6px; }
.spar-ikoner { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 10px; }
.spar-ikoner svg { width: 76px; height: 76px; }
.ni { display: flex; flex-direction: column; gap: 14px; }
.ni-bild { position: relative; z-index: 1; width: 100%; max-width: 380px; height: auto; margin: auto auto 0; padding-top: 24px; }
.ni-ring { top: 40%; }
.bild-med-form { position: relative; isolation: isolate; }
.bild-med-form .sidform { inset: 4% 2% -2% 2%; z-index: -1; }
.bild-med-form img { display: block; width: 100%; height: auto; }
.ciso-bild { max-width: 440px; margin-top: 40px; }
.slut { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 5vw; align-items: center; }
.slut-bild { max-width: 520px; justify-self: end; width: 100%; }
@media (max-width: 900px) {
  .slut { grid-template-columns: 1fr; }
  .slut-bild { justify-self: start; max-width: 420px; }
  .ni-bild { max-width: 260px; }
  .ciso-bild { max-width: 320px; margin-top: 28px; }
}
/* The law heading runs across the page so it stays on two lines. */
.lag-huvud { grid-template-columns: 1fr; gap: 18px; }
.lag-huvud h2.mellan { text-wrap: balance; max-width: 20em; }
.lag-huvud > div { max-width: 62em; }
/* A long track name (Informationssäkerhetsanalys) breaks inside the card instead of widening it. */
.spar-kort a { min-width: 0; }
.spar-kort h3 { overflow-wrap: break-word; }

/* Required fields: an asterisk after the label of every required field, and one line above the form explaining it. */
.formular .falt:has(:required) label::after { content: " *"; color: var(--fel, #b42318); font-weight: 600; }
.obligatoriskt-not { margin: 0 0 4px; font-size: 14px; color: var(--dampad); }
.kryss-krav > span::after { content: " *"; color: var(--fel, #b42318); font-weight: 600; }

/* Under the lesson film: previous on the left, next on the right. On a phone they stack, next first. */
.lektion-lankar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; margin-top: 24px; }
.lektion-lankar > span:last-child { text-align: right; margin-left: auto; }
@media (max-width: 560px) { .lektion-lankar { flex-direction: column-reverse; align-items: flex-start; gap: 12px; } .lektion-lankar > span:last-child { margin-left: 0; text-align: left; } }

/* Din kurs (kurser.html, inloggad): nästa lektion och det som ska repeteras nu. */
.min-kurs { padding-bottom: 10px; }
.min-kurs h2 { margin: 0 0 22px; }
.min-kurs-rutor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.min-kurs-rutor .kort { display: grid; gap: 12px; align-content: start; background: var(--vit); border: 1.5px solid var(--black); border-radius: 16px; box-shadow: 6px 6px 0 var(--black); padding: 24px; }
.min-kurs-rutor h3 { margin: 0; }
.min-kurs-rutor p { margin: 0; }
.min-fragor { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
@media (max-width: 760px) { .min-kurs-rutor { grid-template-columns: minmax(0, 1fr); } }
.min-oversikt { margin: 22px 0 0; }

/* Design check 2026-10-29 (fawos faw-design, decided by Pi). One block, so the rest of the sheet stays as it was. */
/* Body text 16px everywhere a reader reads a sentence. */
.tre-kol p, .las-mer .kallor, .steg p, .spar-kort p, .person p, .matt p, .vi-rad p { font-size: 16px; }
.not { font-size: 16px; max-width: 65ch; }
/* Ochre as text on paper is 3.4:1; a darker ochre reads at 5.4:1. The ochre fills (buttons, the DEV badge) stay. */
:root { --ockra-text: #875c0b; }
.dev-rad b { background: var(--ockra-text); padding: 12px; line-height: 1; }
.dev-rad { padding-block: 12px; }
/* A disabled button keeps its colours and shows its state with a pattern-free lighter look that still reads at 4.5:1. */
.formular .knapp:disabled, .rapportkort .knapp:disabled { opacity: 1; background: var(--accent-yta); color: var(--black); cursor: not-allowed; box-shadow: none; }
/* Tap targets: links and the brand mark get 44px of height on a phone. */
.textlank { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
@media (max-width: 720px) { .marke { min-height: 44px; } }
/* Reduced motion: the player's overlay appears without a slide. */
@media (prefers-reduced-motion: reduce) { .ov { transition: none !important; } }
/* Source lists are read: 16px. The DEV badge gets 12px of inner space (it is never shown on the real site). */
.kallor li { font-size: 16px; }
.dev-rad b { padding: 14px 12px; }

/* The page index (assets/js/sidindex.js), after Dalanovum's: a card with a hard offset shadow and a filled head. It
   sticks in a rail as tall as <main>. The puck slides with transform; the card fades in once it has its place. */
.sidindex-skena { position: absolute; z-index: 4; pointer-events: none; }
.sidindex-skena[hidden] { display: none; }
.sidindex { position: sticky; overflow: hidden; background: var(--vit); border: 1.5px solid var(--black); border-radius: 14px; box-shadow: 4px 4px 0 var(--black); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.sidindex[data-visa] { opacity: 1; pointer-events: auto; }
.sidindex-huvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 9px 14px; background: var(--primar); color: var(--vit); font: 600 14px/1.2 var(--rubrik); }
.sidindex-huvud button { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--vit) 20%, transparent); color: inherit; cursor: var(--pekare-aktiv); }
.sidindex-huvud button:hover { background: color-mix(in srgb, var(--vit) 35%, transparent); }
.sidindex-kropp { position: relative; padding: 7px 6px 7px 0; }
.sidindex-puck { position: absolute; top: 7px; left: 0; right: 6px; border-radius: 0 7px 7px 0; pointer-events: none; background: color-mix(in srgb, var(--primar) 12%, var(--vit)); box-shadow: inset 4px 0 0 var(--primar); transition: transform .22s ease, height .22s ease; }
.sidindex ul { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sidindex li button { display: block; width: 100%; padding: 6px 12px 6px 16px; border: 0; background: none; text-align: left; font: 500 14px/1.3 var(--sans); color: var(--dampad); cursor: var(--pekare-aktiv); }
.sidindex li button:hover, .sidindex li button[aria-current] { color: var(--black); }
.sidindex li button[aria-current] { font-weight: 600; }
.sidindex button:focus-visible { outline: 2px solid var(--primar); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .sidindex, .sidindex-puck { transition: none; } }
@media print { .sidindex-skena { display: none; } }