/*
  Design tokens – grunden för AKUTBOKEN Platforms designsystem.
  Inga färger, avstånd, typsnittsstorlekar eller hörnradier hårdkodas i
  komponentreglerna nedan; allt refererar till token-variablerna här.
  --color-primary fastställdes och WCAG 2.2 AA-verifierades i Sprint 4.3
  (se kommentar nedan) – se project/design/COLORS.md för hela paletten.
*/

:root {
  /* Färg */
  /* Reader UX Refresh Del 1 (D043 §11): AKUTBOKEN-blå identitet ersätter
     den tidigare orange primärfärgen. WCAG 2.2 AA-kontrast beräknad och
     verifierad (relativ luminans-formel) mot både --color-background och
     --color-surface: 5,98:1/6,47:1 (ljust), 7,23:1/6,45:1 (mörkt) - i båda
     fallen minst i linje med den tidigare orange lösningens nivå
     (5,06:1/5,47:1 ljust, 6,82:1 mörkt). --color-primary-contrast lämnas
     oförändrad i båda teman - redan verifierad ge >=6,4:1 mot de nya
     primärfärgerna, inget nytt värde behövdes. Bakgrund/surface/border/text
     rörs inte - redan "vit/mycket ljus blågrå" (D043 §11) utan ändring. */
  --color-primary: #1b5fa8;
  --color-primary-hover: #164e8c;
  --color-primary-contrast: #ffffff;
  --color-background: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-hover: #eef0f3;
  --color-text: #16181c;
  --color-text-muted: #5b6270;
  --color-border: #dde1e6;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-info-bg: #eef4ff;
  --color-info-border: #b7cdf7;
  /* Reader UX Refresh Del 1 (D043 §9): diskret statusindikering (inloggad
     kontoikon). Samma värden som redan valda i admin/editor/css/editor.css
     (COLORS.md) - ingen tredje, egen grön nyans. */
  --color-success: #1e7d32;
  /* Reader Redesign Gate R4: solid AKUTBOKEN-blå headerbakgrund (matchar
     den fysiska bokomslagets identitet), inte längre en ljus tint.
     Återanvänder --color-primary/--color-primary-hover rakt av i stället
     för att hitta på nya färger - headerkromet blir därmed alltid EXAKT
     samma blå som resten av appens primärfärg, per konstruktion, aldrig
     två färger som kan glida isär. Kontrastverifierad (relativ
     luminans-formel): vit text/ikon (--color-primary-contrast) mot
     --color-header-bg = 6,46:1, mot --color-header-hover-bg = 8,39:1 -
     båda långt över WCAG 2.2 AA (4,5:1 text, 3:1 UI-komponenter/ikoner).
     Mörkt tema rör INTE dessa två tokens (se :root[data-theme="dark"] och
     prefers-color-scheme-blocket nedan) - D043 §11:s tidigare beslut att
     hålla headern neutral i mörkt tema kvarstår oförändrat, en stark ljus
     blåton skulle vara bländande mot en mörk bakgrund. */
  --color-header-bg: var(--color-primary);
  --color-header-hover-bg: var(--color-primary-hover);
  /* Mobile Release Gate 4: egen förgrundsfärg för headerns text/ikoner.
     Tidigare användes --color-primary-contrast, som i mörkt tema är mörk
     (#1a0f06, avsedd för text på ljusblå knappar) - mot den mörka
     headerbakgrunden #1d2025 gav det 1,15:1 och osynliga ikoner. Ljust
     tema oförändrat (vit, 6,46:1 mot --color-header-bg). */
  --color-header-fg: #ffffff;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Typografi */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.85em;
  --font-size-lg: 1.15em;
  --font-size-xl: 1.5em;
  /* Gate R4: dedikerad storlek för AKUTBOKEN-ordmärket i headern - större
     än --font-size-xl (som redan används av vysidorubriker, t.ex.
     .login-view h1), en egen token så en framtida ändring av endera inte
     oavsiktligt påverkar den andra. Relativ (em), skalar därför korrekt
     med --font-size-base och textstorleksinställningen (liten/normal/stor,
     se :root[data-text-size]). */
  --font-size-brand: 1.75em;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Radie */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Layout */
  /* Gate R4: 48px→56px - ger det större ordmärket (--font-size-brand)
     rimligt andrum utan att ändra själva höjdlogiken (samma befintliga
     var(--header-height)-referens i .app-header, samma >=768px-brytpunkt
     som redan höjer den ytterligare). */
  --header-height: 56px;
  --tap-target: 44px;
  --icon-size: 20px;
  /* Gate R4.1: EN delad maxbredd för headerns innehåll och de breda,
     listlika Reader-vyerna (TOC/Urakut/Bokmärken) - så att de "känns
     geometriskt besläktade" på breda skärmar i stället för att råka ha
     två olika, oberoende beslutade maxbredder (headern stannade tidigare
     vid 960px även när TOC:n redan var bredare, 1100px). 1280px valt inom
     det efterfrågade 1250-1300px-spannet. Gäller INTE .kop-view (eget,
     medvetet smalare formulärflöde) eller .chapter-view (egen, medvetet
     smalare läsbredd för brödtext) - båda har redan sina egna, avsiktligt
     annorlunda maxbredder av typografiska/UX-skäl som inte ändras här. */
  --content-max-width: 1280px;
}

:root[data-theme="dark"] {
  --color-primary: #6aa8e0;
  --color-primary-hover: #82b6e8;
  --color-primary-contrast: #1a0f06;
  --color-background: #14161a;
  --color-surface: #1d2025;
  --color-surface-hover: #262a31;
  --color-text: #eef0f3;
  --color-text-muted: #9aa1ac;
  --color-border: #33373f;
  --color-danger: #ff8f87;
  --color-danger-bg: #3a1613;
  --color-info-bg: #1c2c46;
  --color-info-border: #2c4877;
  --color-success: #6fcf7d;
  /* Mörkt tema: headerbakgrunden förblir samma neutrala yta som innan
     denna refresh (--color-surface) - ingen blå headerton i mörkt tema. */
  --color-header-bg: #1d2025;
  /* Mobile Release Gate 4: samma värde som --color-text, 14,3:1 mot
     --color-header-bg. */
  --color-header-fg: #eef0f3;
  /* Mörkt tema hade aldrig problemet (headerbakgrunden är oförändrad där) -
     samma värde som --color-surface-hover, dvs. exakt samma resultat som
     innan denna fix, inte en ny mörk hover-ton. */
  --color-header-hover-bg: #262a31;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #6aa8e0;
    --color-primary-hover: #82b6e8;
    --color-primary-contrast: #1a0f06;
    --color-background: #14161a;
    --color-surface: #1d2025;
    --color-surface-hover: #262a31;
    --color-text: #eef0f3;
    --color-text-muted: #9aa1ac;
    --color-border: #33373f;
    --color-danger: #ff8f87;
    --color-danger-bg: #3a1613;
    --color-info-bg: #1c2c46;
    --color-info-border: #2c4877;
    --color-success: #6fcf7d;
    --color-header-bg: #1d2025;
    --color-header-hover-bg: #262a31;
    --color-header-fg: #eef0f3;
  }
}

:root[data-text-size="small"] { --font-size-base: 14px; }
:root[data-text-size="normal"] { --font-size-base: 16px; }
:root[data-text-size="large"] { --font-size-base: 19px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-background);
  color: var(--color-text);
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-primary);
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

/* Header */

.app-header {
  flex: 0 0 auto;
  /* Sprint UX2 Gate 2, del C: headern är redan strukturellt "sticky" -
     body/.app-main (inte .app-header) är appens enda skrollbara yta (se
     body/.app-main nedan), så headern lämnar aldrig synfältet i ett långt
     kapitel, oavsett skärmstorlek. Det som SAKNADES var stöd för hack/
     Dynamic Island: web/index.html har redan viewport-fit=cover (använt av
     .overlay:s egen env(safe-area-inset-top) sedan tidigare), men headern
     själv saknade motsvarande - höjden utökas och innehållet trycks ned med
     exakt insetsen, så att --header-height förblir den EFFEKTIVA
     innehållshöjden (.header-row ärver den via height: 100% på den redan
     box-sizing: border-box-satta .app-header). 0px utan stöd/på desktop -
     helt overksamt där. */
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 10;
  /* Gate R4: headern är nu en solid färgyta (inte längre en ljus tint på
     appens vanliga bakgrund) - text/ikoner ärver vit (--color-primary-
     contrast) härifrån i stället för att varje enskild regel (titel,
     ikonknappar, favorit-/kontoindikator) behöver sätta färgen separat. */
  color: var(--color-header-fg);
}

/* Header-specifik hover/focus (se --color-header-hover-bg-kommentaren i
   :root ovan för varför).
   Gate R4: color läggs till uttryckligen - annars skulle den generiska
   .icon-button:hover-regeln (som sätter color: var(--color-primary))
   göra ikonen osynlig, samma blå som den nu solida headerbakgrunden. */
.app-header .icon-button:hover,
.app-header .icon-button:focus-visible {
  background: var(--color-header-hover-bg);
  color: var(--color-header-fg);
}
.app-header .icon-button:focus-visible {
  /* Gate R4: vit fokusring, inte längre --color-primary - en blå ring mot
     den nu blå headerbakgrunden vore osynlig. Kontrast vit/--color-primary
     = 6,46:1, långt över WCAG 2.2 1.4.11:s 3:1-krav för UI-komponenter. */
  outline: 2px solid var(--color-header-fg);
  outline-offset: 2px;
}

/* Gate R4 (uppdaterad Sprint UX2 Gate 6.3 - se .favorite-button nedan): två
   särfall som annars skulle bli osynliga mot den solida headerbakgrunden:
   - Inloggad kontoindikator (.mer-button.is-active, Sprint UX2 Gate 6.1:
     döpt om från .account-button - Mer-knappen bär nu indikatorn) sätter
     samma --color-primary som text - exakt samma färg som bakgrunden.
   - Favoritstjärnan sätter (sedan Gate 6.3) SAMMA --color-primary som
     grundfärg (se .favorite-button nedan) - utan denna override vore en
     blå stjärna osynlig mot headerns blå bakgrund (0:1, inte bara
     lågkontrast som den tidigare ambertonen).
   Båda får i stället samma vita ikonfärg som headerns övriga ikoner
   (6,46:1) - ikonformen (ifylld/ej ifylld stjärna sedan Gate 6.2; den
   gröna prick-indikatorn) förblir den egentliga statussignalen, inte
   färgen. Rör INTE dessa klassers basfärger utanför .app-header (t.ex.
   favoritstjärnan i TOC:ns kapitelrader, som ligger på en annan, ljus
   bakgrund och är oförändrad). */
.app-header .mer-button.is-active,
.app-header .favorite-button {
  color: var(--color-header-fg);
}

/* Diskret, icke-blockerande notis (Sprint 4.2) - visas när ett eller flera
   kapitel inte kunde laddas. Återanvänder faktarutans befintliga
   info-tokens, ingen ny färg eller designyta införs. */
.content-warning {
  flex: 0 0 auto;
  background: var(--color-info-bg);
  border-bottom: 1px solid var(--color-info-border);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-2) var(--space-3);
}

.header-row {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  /* Gate R4.1: samma delade token som .toc-view m.fl. - se --content-
     max-width-kommentaren i :root. */
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.header-side {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* Sprint UX2 Gate 6.6: .header-side-start kan nu innehålla TVÅ knappar
     (Bakåt + .header-index-compact, smal detaljvy) - utan ett gap satt här
     låg de tidigare (max ett barn per sida) flush mot varandra. Ingen
     effekt där det fortfarande bara finns ett barn (header-side-end/
     favoritstjärnan, eller header-side-start utanför smal detaljvy). */
  gap: var(--space-1);
}
.header-side-start { justify-content: flex-start; }
.header-side-end { justify-content: flex-end; }
/* Web UX Gate 2 (D053): på webben ligger ★ i .header-nav, så
   header-side-end är alltid tom och tas bort ur raden (inget tomt gap). */
.app-header.is-web .header-side-end { display: none; }

.header-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-weight: var(--font-weight-bold);
  /* Gate R4: väsentligt större ordmärke (tidigare --font-size-sm, en liten
     versal-etikett) - "AKUTBOKEN" ska vara headerns dominerande element,
     i linje med det fysiska bokomslaget. text-transform: uppercase är kvar
     (källtexten, settings.yml:platform.title, är redan versal - regeln
     gör bara framtida titlar robusta), men den täta small-caps-spärrningen
     (0.06em, avsedd för en liten etikett) minskas för ett städat
     ordmärke i denna storlek i stället för utspärrad text. */
  font-size: var(--font-size-brand);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Reader UX Refresh Del 1: titeln är nu en knapp (till #/) i stället för
     en <span> - bara knapp-reset, ingen ny visuell stil i grundläget.
     Gate R4: liten padding/radie tillagd för hover/fokus-ytan nedan -
     färgen ärvs nu vit från .app-header (se dess kommentar), sätts
     inte längre här. */
  border: none;
  background: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* Gate R4: hover/fokus byter inte längre färg (skulle kräva en tredje
   vit-nyans) - samma återanvända, redan etablerade vita overlay-mönster
   som .lightbox-close redan använder (rgba(255,255,255,0.15)) mot en mörk
   yta, bara en bakgrundston i stället för ett färgbyte. */
.header-title:hover,
.header-title:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}
.header-title:focus-visible {
  outline: 2px solid var(--color-header-fg);
  outline-offset: 2px;
}

/* Sprint UX2 Gate 6.6: kompakt Index-kontroll för smala detaljvys-headrar
   (chapter/favoriter/kop/info/info-page/konto) - ersätter det fulla
   ordmärket ("AKUTBOKEN") där det annars trunkerades ("AKUTB...") mot
   konkurrerande bakåtknapp/navikoner. Dold som standard (desktop/bredare
   skärmar behåller det ordinarie ordmärket oförändrat) - visas bara inom
   @media (max-width: 599px) nedan. Ligger i .header-side-start (bredvid
   Bakåt), INTE i den flexibla, centrerade .header-title-positionen - en
   fast bredd baserad på sitt innehåll (ikon + "Index"-text), ingen
   trunkeringsrisk eftersom den aldrig tvingas krympa under sin
   innehållsbredd (se width: auto/flex nedan).
   Dubbel klassväljare (.icon-button.header-index-compact) är avsiktlig:
   .icon-button (display: inline-flex) deklareras senare i filen och skulle
   annars, med samma specificitet, skriva över display: none här och visa
   Index-knappen även på bredare skärmar bredvid ordmärket. */
.icon-button.header-index-compact {
  display: none;
  width: auto;
  gap: var(--space-1);
  padding: 0 var(--space-2);
}
/* Etiketten ("Index") ska ALLTID synas tillsammans med ikonen här (kravet:
   "small book/list/index icon + visible Index label", ALDRIG bara ikon) -
   en egen klass, INTE .icon-button-label (som är dold ända upp till
   1280px, motsatt beteende av vad som behövs här). aria-hidden eftersom
   knappens eget aria-label redan ger det fullständiga tillgängliga namnet
   (samma etablerade mönster som .icon-button-label/navLabel() i app.js). */
.header-index-compact-label {
  display: inline;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Gate R4: visuell gruppering (klinisk/navigering vs. köp/konto/admin) -
   ren spacing/avdelare, ingen omordning: samma DOM-/tabbordning som
   tidigare (renderHeader bygger fortsatt EN sekvens, bara inuti två
   <div>-grupper i stället för direkt i <nav>). */
.header-nav-group {
  display: flex;
  align-items: center;
  gap: 0;
}
.header-nav-divider {
  width: 1px;
  align-self: stretch;
  margin: var(--space-1) var(--space-2);
  /* Samma återanvända vita overlay-teknik som header-titelns hover ovan -
     en diskret avdelare mot den solida headerbakgrunden, ingen ny
     namngiven färgtoken. */
  background: rgba(255, 255, 255, 0.25);
}

.icon-button {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Gate R4.1: den synliga headeretiketten (Sök/Akutlista/...) är dold som
   standard - visas bara på tillräckligt bred desktop, se
   @media (min-width: 1280px) nedan. aria-hidden på elementet i app.js
   gör den här CSS-döljningen rent visuell, ingen dubbel/motstridig
   tillgänglig text. */
.icon-button-label {
  display: none;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--color-surface-hover);
  color: var(--color-primary);
}

/* Sprint UX2 Gate 6.2: font-size (tidigare 1.15em/1.05em) togs bort - den
   var enbart till för de tidigare typografiska glyferna ☆/★. Storleken
   styrs nu av .icon/--icon-size (samma delade ikonram som all övrig
   navigation, se icons.js), inte längre av font-size, så stjärnan blir
   per konstruktion exakt lika stor/proportionerlig som andra navikoner.
   Sprint UX2 Gate 6.3: grundfärgen bytt från den tidigare egna ambertonen
   (--color-favorite, nu borttagen - blev helt oanvänd i web/ efter detta
   byte) till --color-primary - samma redan WCAG 2.2 AA-verifierade
   AKUTBOKEN-blå som resten av appen (se verifieringskommentaren högst upp
   i denna fil), i stället för att hitta på en ny, egen blånyans. Ifylld
   kontra ofylld ikonform (icons.starFilled/icons.star, se Gate 6.2)
   förblir den enda skillnaden mellan aktivt/inaktivt läge - inaktiv
   ärver samma --color-primary-ton, bara ofylld kontur. */
.favorite-button {
  color: var(--color-primary);
}
.favorite-button.small {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
}

/* Main */

.app-main {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.state-message {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.error-message {
  color: var(--color-danger);
}

/* TOC view */

.toc-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3);
}

/* Sprint UX2 Gate 2, del B: "Fäll ihop alla" - en enda, diskret textknapp
   ovanför kategorilistan. Kollapsar (display: none via befintligt [hidden]-
   mönster) helt utan spillutrymme när expandedCategories är tom (app.js
   sätter/tar bort attributet vid varje render/mutation), i stället för att
   visas inaktiverad - en knapp utan funktion är kvarvarande visuellt brus
   (UX_RULES 14/20). */
.toc-toolbar {
  display: flex;
  justify-content: flex-end;
}
.toc-collapse-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.toc-collapse-all:hover {
  text-decoration: underline;
}
.toc-collapse-all:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Web UX Gate 3: diskret knapp med ikon, i kategorikortens dämpade
   textfärg, utan bakgrund (bara en svag hover-yta). Verktygsraden har en
   fast höjd och den dolda knappen behåller sin plats (visibility i stället
   för display: none) - kategorierna flyttar sig aldrig när knappen visas
   eller döljs. En dold knapp går inte att fokusera och syns inte för
   skärmläsare. Native (utan .is-web) är oförändrat. */
.toc-toolbar.is-web {
  min-height: var(--tap-target);
  margin-bottom: var(--space-1);
}
/* Web UX Gate 3b: ingen övre utfyllnad i webbens innehållsförteckning -
   verktygsraden ovan (44 + 4 px) är hela avståndet mellan toppmenyn och
   första kategorikortet, 48 px på alla bredder (tidigare 60/72/80 px).
   Slår brytpunkternas padding för .toc-view (högre specificitet). Native
   (utan .is-web) oförändrat. */
.toc-view.is-web {
  padding-top: 0;
}
.toc-collapse-all.is-web {
  gap: var(--space-1);
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}
.toc-collapse-all.is-web[hidden] {
  display: inline-flex;
  visibility: hidden;
}
.toc-collapse-all.is-web .icon {
  width: 16px;
  height: 16px;
}
.toc-collapse-all.is-web:hover {
  text-decoration: none;
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Gate R4.2: .category-list innehåller åter två .category-column (vänster/
   höger, se app.js:renderTocView) - Gate R4.1:s delade CSS Grid-radspår
   orsakade ett tomt utrymme i syskonkolumnen när en kategori expanderades
   (se .category-column-kommentaren nedan för den fullständiga
   förklaringen). Mobil/smal skärm: kolumnerna staplas bara i DOM-ordning
   under varandra - vänsterkolumnen (A-halvan) direkt följd av
   högerkolumnen (Ö-halvan) ger redan en korrekt sammanhängande A→Ö-lista
   uppifrån och ned. */
.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.category-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Gate R4.1: återhållsammare kortkänsla efter produktgranskning - mindre
   radie (--radius-md, inte längre --radius-lg), en nästan omärklig
   skugga (0.03/0.05 i stället för 0.04/0.08), ingen gradient, ingen
   transform/skalning. */
.category {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.category:has(.category-header:hover),
.category:has(.category-header:focus-visible) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.category-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--tap-target);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  /* Sprint UX2 Gate 2, del A: no-op för <button> (redan sant), men krävs
     för enkapitel-radernas <a href> (direktöppning) - annars ärver den
     webbläsarens standard länkfärg/understrykning i stället för att se ut
     som övriga kategoriheaders. */
  color: inherit;
  text-decoration: none;
}
/* Gate R4.2: en fast titelrad - förhindrar att en ovanligt lång kategori-
   titel radbryter till två rader och därmed gör just den kategorins
   header högre än alla andra (vilket skulle bryta radjusteringen mellan
   kolumnerna - se .category-header:s fasta höjd på desktop nedan, som
   FÖRUTSÄTTER en enda textrad). Ingen av de faktiska kategorititlarna i
   content/categories.yml är i praktiken i närheten av att behöva radbryta
   vid de bredder detta gäller - detta är ett defensivt skydd, inte en
   synlig avkortning av något som annars skulle visas fullt ut. */
.category-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Gate R4.1: hover/fokus återanvänder nu de redan etablerade, ljust blå
   info-tokens (--color-info-bg/#eef4ff) i stället för den neutrala grå
   --color-surface-hover - "en återhållsam ljusblå bakgrund", kompatibel
   med AKUTBOKEN-blått, ingen ny färg. Kontrastverifierad (relativ
   luminans-formel): --color-primary-hover-texten mot denna bakgrund =
   7,60:1, långt över WCAG 2.2 AA. */
.category-header:hover {
  background: var(--color-info-bg);
}
.category-header:hover .category-title,
.category-header:hover .category-chevron {
  color: var(--color-primary-hover);
}
.category-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-info-bg);
}

.category-chevron {
  color: var(--color-text-muted);
  display: flex;
}
.category-chevron .icon {
  transition: transform 0.15s ease;
}
.category.is-open .category-chevron .icon {
  transform: rotate(180deg);
}

/* Reader UX Refresh Del 1 (D043 §2): diskret indrag + vänsterkant som
   visuellt binder kapitlen till sitt ämnesområde ("kapitelhierarki").
   Ingen ändring av markup, layoutmekanism eller kolumnordning. */
.chapter-list {
  list-style: none;
  margin: 0 var(--space-2) var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border);
  border-left: 2px solid var(--color-border);
}

.chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.chapter-row-empty {
  padding: var(--space-3);
  color: var(--color-text-muted);
}

.chapter-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: var(--space-2);
  min-height: var(--tap-target);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.95em;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}
.chapter-link:hover,
.chapter-link:focus-visible {
  background: var(--color-surface-hover);
  color: var(--color-primary);
}

/* Bokmärken (Reader UX Refresh) */
.favorites-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3);
}
.favorites-view h1 {
  font-size: var(--font-size-xl);
}

/* Sprint UX2 Gate 4: "Mitt konto" (#/konto) - en enkel, läsbar
   beskrivningslista (<dl>), samma medvetet återhållsamma stil som
   Bokmärken ovan. account-status is-active använder --color-success
   uteslutande som FÖRSTÄRKNING av den redan tydliga textetiketten
   ("Aktiv"/"Inte aktiv") - aldrig den enda bäraren av informationen. */
.account-view {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3);
}
.account-view h1 {
  font-size: var(--font-size-xl);
}
.account-fields {
  margin: var(--space-4) 0;
}
.account-field {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.account-field dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.account-field dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-base);
}
.account-status.is-active {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}
.account-field-error {
  color: var(--color-text-muted);
}

/* Köp (Köpflöde v2 Slice 4, D044 §1-§4) - tre tydliga alternativ, antal,
   betalningssätt - fortsatt medvetet återhållsam, ingen webshop-/
   kundvagnskänsla (D043 §8). Ingen prisvisning (D041 §14). */
.kop-view {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3);
}
.kop-view h1 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-3);
}
/* Produktvalet är riktiga <input type="radio"> i en <fieldset> (se app.js)
   - tangentbordsnavigation/skärmläsarsemantik kommer gratis och korrekt
   från webbläsaren. Radioknappen lämnas synlig (ingen visuellt dold
   input-hack) - den egna .is-selected-klassen (satt av app.js vid
   'change') är ett REDUNDANT, sekundärt signalsystem utöver den native
   ifylld-cirkel-indikationen och :checked-etiketten - vald produkt framgår
   alltså av mer än enbart färg (kantfärg+tjocklek, fet rubrik och den
   native radioindikatorn tillsammans). */
.kop-products {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Checkout Gate 2: kompakta kort - rubrik och högerställt pris på en rad,
   en beskrivande mening under. Hela kortet är klickytan (<label>). */
.kop-product {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.kop-product:hover {
  background: var(--color-surface-hover);
}
.kop-product:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.kop-product.is-selected {
  border-color: var(--color-primary);
  background: var(--color-info-bg);
}
.kop-product input {
  margin-top: 2px;
  min-width: 20px;
  min-height: 20px;
}
.kop-product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* En lång rubrik (paketet) radbryts inom sin egen kolumn - priset ligger
   kvar högerställt på första raden och kan aldrig överlappas. */
.kop-product-name {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-bold);
}
.kop-product.is-selected .kop-product-name {
  color: var(--color-primary);
}
.kop-product-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.kop-product-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.kop-product-price {
  margin-left: auto;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  white-space: nowrap;
}
/* Länk till "Om AKUTBOKEN" under produktkorten - sekundär knapp: kantlinje
   och ytbakgrund, aldrig fylld, så att den inte konkurrerar med "Gå till
   betalning". 44 px klickyta. */
.kop-about-link {
  display: block;
  box-sizing: border-box;
  min-height: var(--tap-target);
  margin: 0 0 var(--space-3);
  padding: 10px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
}
.kop-about-link:hover {
  background: var(--color-surface-hover);
}
.kop-about-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Köpsammanfattning (Checkout Gate 2): vald produkt, antal och totalsumma
   direkt efter produktval och antal. */
.kop-summary {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.kop-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.kop-summary-row + .kop-summary-row {
  margin-top: var(--space-1);
}
.kop-summary dt {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.kop-summary dd {
  margin: 0;
  text-align: right;
}
.kop-summary-row.kop-summary-total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}
.kop-summary-total dt {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
.kop-summary-total dd {
  font-size: var(--font-size-lg);
}
/* Kort villkorssammanfattning, alltid synlig före kontakt/betalning (A1).
   Ägarens fullständiga text ligger i en <details>. */
.kop-legal {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.kop-legal p {
  margin: 0 0 var(--space-1);
}
.kop-legal .kop-section-heading {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text);
}
.kop-terms {
  margin: 0 0 var(--space-2);
  padding-left: 1.2em;
}
.kop-terms li + li {
  margin-top: 2px;
}
.kop-terms-more {
  margin: 0 0 var(--space-2);
}
/* display: list-item behåller webbläsarens öppna/stängda-pil; padding ger
   44 px klickyta. */
.kop-terms-more summary {
  display: list-item;
  min-height: var(--tap-target);
  box-sizing: border-box;
  padding: var(--space-3) 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.kop-terms-more summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.kop-legal .kop-legal-heading {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.kop-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.kop-quantity-label {
  font-weight: var(--font-weight-bold);
}
.kop-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kop-stepper-btn {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  cursor: pointer;
}
.kop-stepper-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
}
.kop-stepper-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.kop-stepper-btn:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}
/* Checkout Gate 6A: antalet skrivs direkt i ett numeriskt fält mellan − och
   +. 16 px eller större text hindrar att iOS zoomar in vid fokus; webbläsarens
   egna små pilar döljs eftersom − och + redan finns med 44 px klickyta. */
.kop-quantity-input {
  box-sizing: border-box;
  width: 5.5em;
  min-height: var(--tap-target);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.kop-quantity-input::-webkit-outer-spin-button,
.kop-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kop-quantity-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.kop-quantity-hint {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  text-align: right;
}
.kop-quantity-hint[hidden] {
  display: none;
}
/* Leveransadress (Köpflöde v2 Slice 5) - visas bara när fysisk bok är
   vald. Återanvänder .login-field oförändrat (samma fält-/label-mönster
   som redan bevisat i auth-overlayn) - egen klass bara för rubriken och
   radavståndet mellan fälten. */
.kop-delivery-heading {
  margin: 0;
  font-weight: var(--font-weight-bold);
}
.kop-payment .login-submit {
  width: 100%;
}
/* Checkout Gate 2: primärknappen "Gå till betalning" - befintlig
   .login-submit-stil, något högre och större text så att den är sidans
   tydligaste handling. */
.kop-payment .kop-checkout-button {
  min-height: 52px;
  font-size: var(--font-size-lg);
}
.kop-payment-hint {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.kop-stripe-unavailable {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-text);
}
/* Fakturabeställning: sekundärt alternativ under primärknappen - en
   kantad knapp (inte fylld) med full bredd och 44 px klickyta. När
   kortbetalning inte finns (.is-invoice-only) blir den huvudvägen och får
   primärknappens fyllda stil. */
.kop-invoice-choice {
  margin-top: var(--space-4);
}
.kop-invoice-toggle {
  width: 100%;
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.kop-invoice-toggle:hover {
  background: var(--color-surface-hover);
}
.kop-invoice-toggle:focus-visible,
.kop-checkout-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.kop-invoice-toggle[aria-expanded="true"] {
  background: var(--color-info-bg);
}
.kop-payment.is-invoice-only .kop-invoice-toggle {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.kop-payment.is-invoice-only .kop-invoice-toggle:hover {
  background: var(--color-primary-hover);
}
.kop-payment-body {
  margin-top: var(--space-4);
}
/* Informationsrad för anställda i Region Sörmland - diskret ruta under
   betalningsalternativen, visas för alla produkter och påverkar inte
   betalningsflödet. Länken får 44 px klickhöjd utan att raden växer
   visuellt (inline-block + negativ marginal). */
.kop-region-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.kop-region-note a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}
/* Smal skärm (375-767 px): "Gå till betalning" ligger fast längst ned så
   att köpknappen alltid syns medan produkt, villkor och leveransuppgifter
   läses/fylls i - utan att knappen flyttas före dem i DOM-/tabbordningen.
   Under headern (z-index 10) och alla dialoger (.overlay, z-index 100).
   .kop-view får motsvarande luft nedtill så att inget innehåll döljs bakom
   baren. När fakturapanelen är öppen (.is-invoice-open) återgår baren till
   sin plats i flödet - då ska fakturans egen knapp vara huvudhandlingen. */
@media (max-width: 767px) {
  .kop-checkout-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }
  .kop-view:has(.kop-checkout-bar:not([hidden])) {
    padding-bottom: calc(var(--space-3) + 96px + env(safe-area-inset-bottom));
  }
  .kop-payment.is-invoice-open .kop-checkout-bar {
    position: static;
    padding: 0;
    background: none;
    border-top: none;
    box-shadow: none;
  }
}
/* Informationsrad för ej aktiverade köpvägar (Slice 4) - medvetet inte en
   disabled-knapp: en gråtonad knapp signalerar ändå "det här borde funka".
   Samma info-tokens som redan används för det diskreta laddningsfelet
   (.content-warning). Sedan Slice 6b oanvänd i #/kop självt (faktura är nu
   alltid en riktig, fungerande väg i stället för denna informationstext) -
   kvar oförändrad ifall den behövs för ett framtida, annat ej aktiverat
   läge. */
.kop-info {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-text);
}
/* Formulärytans två sektioner (Slice 6b-förenkling: "Kontakt och
   leverans" | "Betalning") - en kolumn på smal skärm (DOM-ordningen är
   redan den logiska/önskade läsordningen), två kolumner från 768px när
   båda sektionerna faktiskt finns (se @media-blocket längre ner). Detta är
   SAMMA formulär/flöde i båda fallen, bara ett layoutbyte - inget separat
   desktopflöde. */
.kop-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.kop-section-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
}
.kop-contact-section,
.kop-payment-section {
  min-width: 0;
}
/* Fakturapanelen expanderas via [hidden], ALDRIG via innerHTML-utbyte
   (app.js:s applyKopPaymentMethodVisibility) - det är det som garanterar
   att ett redan ifyllt fakturaformulär överlever att panelen fälls ihop. */
.kop-payment-error {
  margin: var(--space-2) 0 0;
}
/* Samma Slice 3-lärdom som .login-field[hidden] (se den kommentaren ovan) -
   [hidden] och en egen display-regel med samma specificitet (0,1,0)
   krockar annars i kaskaden. Upprepas explicit här för varje ny klass
   denna slice inför som kan vara [hidden]. */
.kop-checkout-bar[hidden],
.kop-checkout-button[hidden],
.kop-stripe-unavailable[hidden],
.kop-payment-body[hidden],
.kop-invoice-org[hidden],
.kop-invoice-address[hidden] {
  display: none;
}
.kop-invoice {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kop-invoice-heading {
  margin: 0;
  font-weight: var(--font-weight-bold);
}
.kop-invoice-info {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
/* D049 §4: hjälptext under leveransens "Övrig information"-etikett -
   samma diskreta ton som .kop-invoice-info ovan. */
.kop-field-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.kop-customer-type {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-4);
}
.kop-customer-type legend {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
  padding: 0;
  width: 100%;
}
.kop-radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  cursor: pointer;
}
.kop-invoice-org,
.kop-invoice-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kop-invoice-address-heading {
  margin: 0;
  font-weight: var(--font-weight-bold);
}
.kop-checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  cursor: pointer;
}
.kop-invoice textarea {
  min-height: calc(var(--tap-target) * 1.5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}
.kop-invoice textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* Landfältet, låst till Sverige (implementationsrapporten punkt 4) - visas
   som statisk text i stället för ett redigerbart <input>, samma
   .login-field-rytm som övriga fält (span-etikett + värde) men utan
   interaktion. Det faktiska värdet skickas via ett separat hidden-fält
   (se app.js:s renderAddressFieldsMarkup). */
.kop-fixed-value {
  margin: 0;
  padding: 0 var(--space-4);
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Chapter view */

.chapter-view {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.chapter-body {
  line-height: var(--line-height-relaxed);
}

.chapter-body h1 {
  margin-top: 0;
}

/* H2 (Sprint 4.5, korrigerad efter visuell feedback): vertikal accent via
   ::before i stället för border-left, så strecket har en bestämd,
   textradsrelativ höjd och inte sträcker sig över hela rubriken om den
   radbryts. Strecket är vertikalt centrerat mot rubrikens höjd (top: 50% +
   translateY(-50%)) snarare än radrelaterat, vilket ger bättre centrering
   och tillåter ett längre streck utan att det ser förskjutet ut. Färg via
   befintlig --color-primary (redan definierad som varumärkesaccent,
   COLORS.md), rundade ändar via befintlig --radius-full. */
.chapter-body h2 {
  position: relative;
  margin-top: 2em;
  margin-bottom: 0.8em;
  padding-left: var(--space-5);
}
.chapter-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.8em;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.chapter-body ul,
.chapter-body ol {
  padding-left: 1.4em;
}
.chapter-body ul ul,
.chapter-body ol ol,
.chapter-body ul ol,
.chapter-body ol ul {
  margin-top: var(--space-1);
}

.chapter-body .chapter-link {
  display: inline;
  padding: 0;
  min-height: 0;
  color: var(--color-primary);
  text-decoration: underline;
  border-radius: 0;
}
.chapter-body .chapter-link:hover,
.chapter-body .chapter-link:focus-visible {
  background: none;
}

.info-block {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-4);
  margin: 1.2em 0;
}
.info-block p {
  margin: 0.8em 0;
}
.info-block ul,
.info-block ol {
  margin: 0.8em 0;
  padding-left: 1.4em;
}

/* Referensavsnitt (D063): kapitlets "## Referenser" renderas av
   shared/js/markdown.js som <details class="chapter-references">, stängt
   från början. Diskret: skild från kapiteltexten med en tunn linje, dämpad
   textfärg och mindre text i listan. Raden "Referenser" (inget antal) är
   minst 44 px hög (--tap-target). Egen pil i stället för webbläsarens markör, så att den
   ser likadan ut i Chrome och WebKit (iOS); summary är display: block, inte
   flex, som inte fungerar på summary i äldre WebKit. Bara färgtokens - mörkt
   läge följer av sig självt. Påverkar inga andra kapitelavsnitt. */
.chapter-references {
  margin-top: 2em;
  border-top: 1px solid var(--color-border);
}
.chapter-references summary {
  position: relative;
  display: block;
  list-style: none;
  min-height: var(--tap-target);
  box-sizing: border-box;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.chapter-references summary::-webkit-details-marker {
  display: none;
}
/* Pilen pekar åt höger när avsnittet är stängt och nedåt när det är öppet. */
.chapter-references summary::before {
  content: '';
  position: absolute;
  left: var(--space-1);
  top: 50%;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}
.chapter-references[open] summary::before {
  transform: translateY(-75%) rotate(45deg);
}
.chapter-references summary:hover {
  color: var(--color-text);
}
.chapter-references summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Referenslistan (ägarens standard 2026-10-20): kompakt, jämnt radavstånd
   1,45, 9 px mellan referenserna och hängande indrag – numret står i
   marginalen och alla rader i en referens börjar på samma linje. */
.chapter-references-body {
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.chapter-references-body ol,
.chapter-references-body ul {
  margin: 0;
  padding-left: 2.2em;
}
.chapter-references-body li {
  margin: 0;
  padding-left: 0.2em;
}
.chapter-references-body li + li {
  margin-top: 9px;
}
.chapter-references-body li::marker {
  font-variant-numeric: tabular-nums;
}
/* Referensens länk: texten "Länk" direkt efter referensen, i diskret blått
   med tunn understrykning. Vanlig inline-text – ändrar varken radhöjd eller
   radavstånd. Tryckytan förstoras osynligt (::after) till ca 46 × 26 px
   utan att påverka layouten; den är lägre än avståndet mellan två
   referensers rader, så den kan inte överlappa grannlänkar. Webbadressen
   visas aldrig; det tillgängliga namnet sätts av renderaren (aria-label). */
.chapter-references-body .reference-link {
  position: relative;
  white-space: nowrap;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 2px;
}
.chapter-references-body .reference-link::after {
  content: '';
  position: absolute;
  inset: -5px -8px;
}
.chapter-references-body .reference-link:hover {
  text-decoration-color: currentColor;
}
.chapter-references-body .reference-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  text-decoration-color: currentColor;
}

.chapter-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: 1em 0;
  cursor: zoom-in;
}
.chapter-image:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  margin: 1em 0;
}
.image-placeholder-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.image-placeholder-icon .icon {
  width: calc(var(--icon-size) * 1.4);
  height: calc(var(--icon-size) * 1.4);
}
.image-placeholder-title {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.image-placeholder-description {
  margin: 0;
  color: var(--color-text);
}
.image-placeholder-note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.table-scroll {
  overflow-x: auto;
  margin: 1.2em 0;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
}
.table-scroll th,
.table-scroll td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.table-scroll thead {
  background: var(--color-background);
}

/* Overlays */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  padding: env(safe-area-inset-top, 0) 0 0;
}
.overlay-hidden {
  display: none;
}

.overlay-panel {
  background: var(--color-surface);
  width: 100%;
  max-width: 560px;
  margin-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-4);
  max-height: 100vh;
  overflow-y: auto;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#search-input {
  flex: 1 1 auto;
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 1em;
}
#search-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.search-results {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-2);
  min-height: var(--tap-target);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
}
.search-result:hover,
.search-result:focus-visible {
  background: var(--color-surface-hover);
}
.search-result-category {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.search-result-empty {
  padding: var(--space-2);
  color: var(--color-text-muted);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-group {
  border: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.settings-group legend {
  font-weight: var(--font-weight-bold);
  padding: 0 0 var(--space-2);
}
.settings-options {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.option-button {
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: pointer;
}
.option-button.is-selected {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}

/* Mobile UX Gate 2: sorteringsvalet i Bokmärken (samma valknappar som
   Inställningar). */
.favorites-sort {
  margin-bottom: var(--space-3);
}

/* Sprint UX2 Gate 6.1: Mer-menyn - avsiktligt enkla, platta rader. Inga
   kort (ingen egen bakgrund/skugga/radie per rad), inga beskrivningar
   under raderna, ingen animation utöver webbläsarens vanliga fokus-/
   hover-övergångar (redan definierade generiskt på andra knappar). */
.mer-panel {
  padding-bottom: var(--space-2);
}
.mer-menu {
  display: flex;
  flex-direction: column;
}
.mer-item {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-2);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
}
.mer-item:last-child {
  border-bottom: none;
}
.mer-item:hover,
.mer-item:focus-visible {
  background: var(--color-surface-hover);
}
.mer-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.login-message {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Slice 3-korrigering: .login-field[hidden] måste vara en egen regel.
   [hidden] (webbläsarens standard, display: none) och .login-field
   (display: flex) har identisk specificitet (0,1,0) - författarens .login-
   field-regel vinner annars kaskaden och elementet förblir synligt trots
   att JS satt .hidden = true (upptäckt vid browserverifiering:
   lösenordsfältet i recovery-läget). */
.login-field[hidden] {
  display: none;
}
.login-field input {
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 1em;
}
.login-field input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* Checkout Gate 9A: ångerformuläret (#/angra) återanvänder fälten ovan;
   textrutorna får samma utseende. */
/* Checkout Gate 9B: gällande villkorsversion med PDF-länk på köpsidan. */
.kop-terms-version {
  font-weight: var(--font-weight-bold);
}
.withdrawal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.login-field textarea {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}
.login-field textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* Dolt fält mot automatiserad skräppost - aldrig synligt eller fokuserbart. */
.withdrawal-website {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.withdrawal-summary {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-3);
}
.withdrawal-summary dt {
  color: var(--color-text-muted);
}
.withdrawal-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.withdrawal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.withdrawal-back {
  min-height: var(--tap-target);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
/* Web UX Gate 3: lösenordsfältet med visa/dölj-knapp. Utan .has-toggle
   (native, D052) ser fältet ut exakt som tidigare. */
.password-input {
  position: relative;
  display: flex;
}
.password-input input {
  flex: 1 1 auto;
  min-width: 0;
}
.password-input.has-toggle input {
  padding-right: calc(var(--tap-target) + var(--space-1));
}
/* Edges egen visningsknapp - annars två ögon i samma fält. */
.password-input.has-toggle input::-ms-reveal {
  display: none;
}
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  color: var(--color-text-muted);
}
/* .icon-button (display: inline-flex) vinner annars över [hidden]. */
.password-toggle[hidden] {
  display: none;
}
.login-error {
  margin: 0;
  color: var(--color-danger);
}
.login-submit {
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
/* Slice 3: lägesväxling (Logga in / Skapa konto / Glömt lösenord) inuti
   samma overlay - se app.js:s setAuthMode(). */
.login-switch {
  margin: var(--space-2) 0 0;
  font-size: 0.9em;
  text-align: center;
}
.login-switch a {
  color: var(--color-primary);
}
/* Slice 3-korrigering: signup-success-läge (Supabase kräver e-post-
   bekräftelse). Ingen egen display-regel här - .login-confirm förblir
   sin block-standard, så webbläsarens [hidden] (display: none) vinner
   utan konflikt, samma lärdom som .login-field[hidden] ovan. */
.login-confirm p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}
.login-confirm p:last-child {
  margin-bottom: 0;
}
.login-confirm strong {
  color: var(--color-text);
}
/* Slice 3: vyn för att sätta nytt lösenord efter en följd recovery-länk.
   Egen klass, inte .kop-view - samma minimala "ingen webshopskänsla"-
   princip men annat innehåll (D043 §8 gäller specifikt köpsidan). */
.login-view {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3);
}
.login-view h1 {
  font-size: var(--font-size-xl);
}
.login-view p {
  color: var(--color-text-muted);
}
/* Kontoindikator (D043 §9, Reader UX Refresh Del 1): diskret grön punkt,
   enbart CSS på den redan befintliga .is-active-klassen (satt av
   renderHeader() utifrån auth.isLoggedIn(), oförändrat). Ingen ny
   authlogik. aria-label ("Mer") förblir den enda semantiska signalen -
   ::after med tomt content exponeras aldrig för skärmläsare. Sprint UX2
   Gate 6.1: klassen döpt om från .account-button till .mer-button - Konto
   är inte längre en egen header-knapp, indikatorn följer med till Mer. */
.mer-button {
  position: relative;
}
.mer-button.is-active {
  color: var(--color-primary);
}
.mer-button.is-active::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  border: 1.5px solid var(--color-surface);
}

#lightbox {
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
}
#lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Sprint UX2 Gate 6.6: smal detaljvys-header (chapter/favoriter/kop/info/
   info-page/konto). Ägarens granskning visade trunkering av ordmärket
   ("AKUTB...") på Android-bredd - inte löst genom att krympa typsnittet,
   utan strukturellt: det fulla ordmärket (.header-title, flex:1 1 auto,
   centrerat) byts ut mot den kompakta Index-kontrollen (.header-index-
   compact, i .header-side-start bredvid Bakåt - se dess baskommentar
   ovanför .header-nav), och två icke-obligatoriska ikoner (den globala
   Bokmärken-destinationen och Köp) döljs. Kvar blir exakt uppdragets
   låsta prioritetsordning för smal chapter-vy: Bakåt, Index, Sök,
   kapitlets favoritstjärna, Mer - alla på EN rad, ingen radbrytning.
   599px vald som brytpunkt (bredare än den befintliga 400px-marginalen
   nedan) - täcker robust alla telefonbredder i porträttläge (320-430px,
   inklusive både iPhone- och Android-referensbredderna), medan surfplatta/
   desktop (≥600px) behåller "the existing AKUTBOKEN/Index treatment"
   helt oförändrat, precis som uppdraget kräver. .header-nav ges
   margin-left: auto (i stället för att ändra .header-row:s
   justify-content, vilket skulle kunna påverka TOC-headern nedan) - detta
   trycker Sök/Köp/Mer-klustret till höger, med Bakåt+Index kvar flush
   till vänster i .header-side-start, utan att röra grundlayoutens
   justify-content. */
@media (max-width: 599px) {
  .is-chapter-view .header-title {
    display: none;
  }
  .is-chapter-view .header-index-compact {
    display: inline-flex;
  }
  .is-chapter-view .header-nav {
    margin-left: auto;
  }
  /* Web UX Gate 2 (D053): Köp döljs inte längre i smal detaljvy (Gate 6.6
     upphävd för webben). Native påverkas inte - där renderas Köp aldrig
     (D050 §3). */
}

/* Sidhuvudets titel (Sprint 4.4, utökad i Reader UX Refresh Köp/Bokmärken):
   bakåt-knapp (i chapter/favoriter/kop-läge) + navikoner + ev.
   favoritknapp konkurrerar om samma rad som titeln, som annars trunkeras
   till nästan inget vid smala skärmar. 400px vald som brytpunkt (med
   marginal utöver de trasiga 320/360px) för robusthet.
   Sprint UX2 Gate 6.6: .header-title/.header-nav:s tvårads-radbrytning
   nedan gäller numera ENDAST TOC-headern (:not(.is-chapter-view)) - den
   behåller det fulla ordmärket på alla bredder (kravet: "Index view: Keep
   the full AKUTBOKEN wordmark"), så den behöver fortfarande denna
   reservlösning. Detaljvys-headrar (.is-chapter-view) löser i stället
   trångboddheten strukturellt (kompakt Index-kontroll, Bokmärken/Köp
   dolda vid smala bredder - se @media (max-width: 599px) ovanför denna
   regel) och ryms redan på EN rad - att även tvinga dem till radbrytning
   här skulle bryta sönder det nya, avsiktligt enradiga layoutet. */
@media (max-width: 400px) {
  .app-header {
    height: auto;
  }
  .header-row {
    height: auto;
    flex-wrap: wrap;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .app-header:not(.is-chapter-view) .header-title {
    order: 10;
    flex-basis: 100%;
    padding-top: var(--space-1);
  }
  /* Sju navikoner (Gate R4 lade till Information, tidigare sex) ryms inte
     tillförlitligt bredvid bakåt-/favoritknapp på samma rad som titeln vid
     320-360px. Egen, full-bred rad (i stället för att bara flytta undan
     titeln, som räckte vid fyra ikoner) undviker att behöva förlita sig på
     hur pass tillförlitligt ikonerna själva radbryter inom en trängre yta. */
  .app-header:not(.is-chapter-view) .header-nav {
    order: 11;
    flex-basis: 100%;
    justify-content: flex-end;
    padding-top: var(--space-1);
  }
  /* Gate R4: sju ikoner + avdelare (7×44px + avdelare ≈ 325px) ryms inte
     tillförlitligt inom en 320px-bred vy (304px tillgängligt efter
     .header-row:s padding) - samma redan kända 320/360px-marginal som
     kommentaren ovan nämner. I stället för ett nytt overflow/"mer"-mönster
     (större UI-omstrukturering) minskas tapptargeten diskret till 40px
     (fortfarande väl över WCAG 2.2 2.5.8:s minimum på 24px, bara under
     Apple/Materials rekommenderade 44px) och avdelarens marginal halveras
     - tillsammans frigör det ~36px, gott om marginal även vid 320px. Gäller
     ENDAST denna smalaste brytpunkts headernavigering, ingen annan
     tapptarget i appen påverkas. Fortsatt oskopat (gäller båda TOC/
     detaljvy) - gynnar den nya enradiga detaljvys-layouten också.
     Web UX Gate 2 (D053): 40px gäller numera bara native (frysta appskal).
     Webben behåller 44 × 44 px och får plats genom mindre avstånd nedan. */
  .app-header:not(.is-web) .header-nav .icon-button {
    min-width: 40px;
    min-height: 40px;
  }
  .header-nav-divider {
    margin: var(--space-1) var(--space-1);
  }
  /* Web UX Gate 2 (D053): webbens detaljvy rymmer Tillbaka · Index |
     ★ · Sök · Köp · Mer på en rad vid 320 px, även med textstorlek Stor,
     genom mindre avstånd - aldrig mindre klickytor (44 × 44 px). */
  .app-header.is-web.is-chapter-view .header-row {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .app-header.is-web.is-chapter-view .header-nav-divider {
    margin-left: 2px;
    margin-right: 2px;
  }
  .app-header.is-web.is-chapter-view .header-index-compact {
    padding: 0 var(--space-1);
  }
}

/* Responsive breakpoints */

@media (min-width: 768px) {
  :root {
    /* Gate R4: 52px→64px - denna brytpunkt ska vara STÖRRE än mobilens
       56px-bas (rymmer det större ordmärket bekvämt), inte mindre - 52px
       (oförändrat sedan innan denna gate) hade oavsiktligt blivit lägre än
       den nya mobila basen. */
    --header-height: 64px;
  }
  .toc-view,
  .favorites-view,
  .account-view,
  .kop-view {
    padding: var(--space-5);
  }
  .chapter-view {
    padding: var(--space-6) var(--space-5) var(--space-6);
  }
  /* Bredare yta för #/kop från denna brytpunkt, så Kontakt-/leverans- och
     Betalningssektionerna får plats sida vid sida (D044/D048, Slice
     6b-förenkling, implementationsrapporten punkt 15) - SAMMA formulär/
     flöde som på smal skärm, bara ett layoutbyte, inget separat
     desktopflöde. */
  .kop-view {
    max-width: 760px;
  }
  .kop-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  /* Ren Digital access (ingen fysisk leverans) har bara EN sektion
     (Betalning) - då finns ingen andra kolumn att dela ytan med. Sektionen
     får då spänna över hela bredden, men behåller ett läsbart max-width i
     stället för att sträckas ut till en väldigt bred enkolumnsform. */
  .kop-payment-section:only-child {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

@media (min-width: 1280px) {
  .toc-view,
  .favorites-view,
  .account-view {
    padding: var(--space-6);
  }
  /* Gate R4.2: HYBRIDLAYOUT - ersätter Gate R4.1:s delade CSS Grid-
     radspår, som hade en genuin bieffekt: eftersom en gridrads höjd per
     definition är den högsta cellen i just DEN raden, över BÅDA
     kolumnerna, gjorde en expanderad kategori i ena kolumnen alltid den
     delade raden hög även i den andra kolumnen - ett tomt utrymme bredvid
     en helt oberörd kategori (upptäckt vid produktgranskning).

     Lösningen är att INTE dela radspår alls: två oberoende flex-kolumner
     (.category-column, samma grundmodell som Gate R3), där en kolumns
     höjd aldrig kan påverka den andra - expanderas en kategori i vänster-
     kolumnen växer BARA vänsterkolumnen, högerkolumnen förblir exakt
     oförändrad. Detta återinför i sig INGEN radjusteringsgaranti (två
     oberoende kolumner "råkar" bara vara lika höga om deras innehåll
     råkar vara det) - den garantin kommer i stället från att
     .category-header ges en FAST, enhetlig höjd nedan (kombinerat med
     .category-title:s text-overflow: ellipsis ovan, som förhindrar att en
     ovanligt lång titel gör just den headern högre än alla andra). Två
     kolumner med identiskt fasta headerhöjder OCH identiska mellanrum ger
     därmed radjustering "på riktigt" (genom att varje rad garanterat är
     exakt lika hög, inte genom ett delat radspår som tvingar dem att
     vara det) - utan att någonsin kunna orsaka Gate R4.1:s tomrums-
     bieffekt. Vilken kolumn en kategori hamnar i avgörs fortsatt
     uteslutande av dess index i den redan sorterade listan (tocLayout.js),
     aldrig av någon kategoris renderade höjd - Gate R3:s
     stabilitetsprincip kvarstår oförändrad. */
  .category-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .category-column {
    flex: 1 1 0;
    /* Gate R4.2: något tätare på desktop (mobilens var(--space-3) behålls
       - "bekväma tapptargets på mobil" gäller radavstånd också). */
    gap: var(--space-2);
  }
  /* Gate R4.2: FAST höjd (inte bara min-height) - den faktiska garantin
     för att alla headers är exakt lika höga, oavsett vilken kolumn de
     hamnar i. 48px rymmer en textrad bekvämt även vid den största
     textstorleksinställningen (font-size-large, 19px bas × 1.5
     radhöjd ≈ 28,5px) plus chevron-ikonen (20px), centrerade via
     align-items: center (oförändrat ovan). Mobilens var(--space-3)
     var(--space-4)-padding (tapptarget-komfort) skrivs över av samma
     skäl - en fast höjd och en explicit padding är inte meningsfulla
     att kombinera. */
  .category-header {
    height: 48px;
    padding: 0 var(--space-3);
  }
  .chapter-view {
    max-width: 800px;
  }

  /* Gate R4.1: synliga, sekundära etiketter under headerns ikoner - bara
     på tillräckligt bred desktop (denna redan etablerade brytpunkt,
     samma som TOC:ns tvåkolumnsläge - ingen tredje egen brytpunkt
     införs). Knappen går från en fast, rund ikonyta till en smalt rundad
     rektangel med ikon över text - fortsatt samma .icon-button-klass,
     bara omstöpt HÄR. Etiketten hålls uttryckligen liten/dämpad
     (font-size 0.65em, samma vita ikonfärg men lägre visuell vikt genom
     storleken ensam) - AKUTBOKEN-ordmärket förblir det dominerande
     elementet i headern. */
  .header-nav .icon-button {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 56px;
    min-height: auto;
    height: auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
  }
  /* Web UX Gate 2 (D053): ikon + etikett gav knappar strax under 44 px
     höga. På webben gäller minst 44 × 44 px även här (native oförändrat). */
  .app-header.is-web .header-nav .icon-button {
    min-height: var(--tap-target);
  }
  .header-nav .icon-button-label {
    display: block;
    font-size: 0.65em;
    line-height: 1;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  /* Gate R4.1: kontoindikatorns gröna prick följer med ikonen, inte hela
     den nu högre (ikon+etikett) knappen - annars hamnar den mitt i
     etikettexten. Positioneras om relativt ikonens egna, kända mått
     (--icon-size) i stället för knappens yttre kant. */
  .header-nav .mer-button.is-active::after {
    right: 4px;
    bottom: 20px;
  }
}