/* Berättarens vy — iter 6d "tweakpasset": slutgiltiga pilotdräkten i BÅDA teman.
   Tvåparts-differentieringen är TEMA-AGNOSTISK PRINCIP (samma tre vem-sa-vad-
   signaler i båda teman): placering v/h (primär, WCAG 1.4.1-bäraren) + kortens
   fyllnadsskillnad (ljushet/ton — ALDRIG hue) + temperaturkanter (~2 px: sval
   vänster på intervjuaren · varm höger på berättaren). MÖRKT tema är neutral
   antracit HELT utan brunt — värme får bara finnas i ACCENT (kant), aldrig i
   ytan. LJUST temas cream-grund STÅR; differentieringen ligger PÅ den.
   Alla färgpar AA-verifierade programmatiskt (aa-matris-6d: text ≥4,5:1,
   kanter/interaktivt ≥3:1, glas-kompositerna mot båda extremerna per tema).
   Layouten (6b→6d): EN scrollyta äger allt — topprad + composer är STICKY i
   scrollytan (aldrig fixed) så samtalet passerar UNDER dem; liquid glass som
   progressiv förstärkning (@supports), solid halvtransparent bas annars. */

/* Atkinson Hyperlegible Next (variabel 200–800, roman + kursiv) — SELF-HOSTAD
   (BYGGSTANDARD §7.5: ingen extern font-fetch någonsin). Källa: Google Fonts v7
   (gstatic), licens SIL OFL 1.1 (public/fonts/OFL.txt). latin-ext bär de polska
   diakriterna (ł ą ę ś ż ź ć ń); å ä ö + ó bor i latin. font-display:swap med
   diakrit-säker system-stack under swap-fönstret. */
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/atkinson-hyperlegible-next-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/fonts/atkinson-hyperlegible-next-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  font-style:italic;font-weight:200 800;font-display:swap;
  src:url(/fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Ljust tema — VÄG B (iter 6e): dämpad varmgrå grund. Klaras kort skiljs från
     bg av EGGEN (fyllnadskontrast ~1,1:1 — kanten är lastbärande), berättaren är
     EJ nära vit (bländer inte). AA-verifierat programmatiskt (aa-6e-matrisen:
     text ≥4,5 · kanter ≥3 mot BÅDA grannytor · glas-text ≥4,5 mot värsta fall).
     ÄNDRINGAR SKER ENDAST HÄR — mörka blocket nedan är hex-oförändrat (krav 14). */
  color-scheme:light;
  --bg:#efe9df;          /* Väg B grund — dämpad varmgrå */
  --text:#232323;        /* 13.0:1 mot --bg */
  --muted:#615e57;       /* 5.36:1 mot --bg · 4.78:1 mot panel-i */
  --panel-i:#e2ddd2;     /* Klaras kort: kanten bär separationen (fyllnad ~1,1:1 mot bg — bakåt) */
  --panel-n:#faf7f1;     /* berättarens kort: framlyft men EJ nära vit (fram) */
  --edge-i:#3f6f8f;      /* SVAL vänsterkant, intervjuaren — 4.48:1 mot bg · 3.99:1 mot panel-i */
  --edge-n:#9a6414;      /* VARM högerkant, berättaren — 4.13:1 mot bg · 4.67:1 mot panel-n */
  --accent:#2f6fed;      /* valmarkering/selektion (interaktiv, INTE vem-sa-vad) — 3.77:1 mot bg */
  --accent-strong:#1c4fd6; /* länkar/fokus — 5.54:1 mot --bg */
  --btn-bg:#1c4fd6;        /* primärknapp + skicka-pilen: blå + vit (6.69:1) i BÅDA teman */
  --warn:#8a5300;        /* statusrad — 5.24:1 mot bg (≥4,5 även mot glas-kompositerna) */
  --rec:#a03123;         /* inspelningspuls — 5.88:1 mot bg */
  --border:#d8cdb9;      /* dekorativa kanter */
  --border-ui:#8f8265;   /* komponentkanter — 3.13:1 mot --bg, 3.21:1 mot ta-bg */
  --ta-bg:#f2ecdf;       /* inmatningsfält: Väg B-tonad (EJ nära vit, krav 4-beslut) — kanten inramar */
  --ta-ph:#6a635a;       /* placeholder — 5.03:1 mot --ta-bg */
  /* Info-box-ytan (iter 6f.2 A-efterputs krav 3): SYSTEMröstens egen ton —
     LJUSARE än både bg och intervjuarbubblan (--panel-i) så rutan läses som ett
     upphöjt meddelande OM samtalet, aldrig som en replik I det. Ej nära vit
     (bländar inte — samma regel som --panel-n). Mätt AA: --text 13,93:1 ·
     --muted 5,73:1 · --border-ui-kanten 3,36:1 mot ytan och 3,13:1 mot bg.
     ÄRLIG NOT: ljusa temat är medvetet lågkontrast (Väg B) — fyllnadsavståndet
     till närmaste bubbelton är bara ~1,05:1 och INGEN kandidat i paletten når
     högre utan att pressa kant-AA mot 3,0-golvet. Fyllnaden är därför EN av
     fyra signaler; de STRUKTURella (centrerad · smalare · kant runt om) bär
     skillnaden — samma flersignalsprincip som bubblornas egen 6d-regel. */
  --info-bg:#f4f1ea;
  --glass:rgba(239,233,223,.93);      /* solid halvtransparent BAS — tint = Väg B bg (krav 2) */
  --glass-thin:rgba(239,233,223,.72); /* tint OVANPÅ blur (@supports) — AA mot båda extremerna */
  --col:46rem;           /* samtalskolumnens tak (~736 px) — texten löper ALDRIG hela 4K-bredden */
  --chat-fs:17px;        /* AaA minsta läget = DEFAULT */
  /* EN knappradie (iter 6f.2 krav 1): ALLA rektangulära knappar delar denna —
     knappar skiljs via FYLLNAD/TON, aldrig via FORM. Runda ikonknappar (mic +
     skicka = 50 %) och pills (chip/badge = 999px) är egna FUNKTIONella former,
     inte "en knapp skild med form", och rörs inte av token. Skicka-knappens
     1.4.11-ring (6f.1) är geometriskt orörd — token träffar aldrig #btn-send. */
  --btn-radius:.7rem;
}
/* Mörkt tema (brukarens val via växlaren; ljust förblir default).
   VARM ANTRACIT UTAN BRUNT (6d): alla fyllningar rent neutral antracit —
   Klaras kort MÖRKARE (bakåt), berättarens LJUSARE (fram); värmen bor
   ENDAST i accenterna (varm högerkant, amber-statusar). AA-verifierat. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1b1d21;
  --text:#e9e7e2;          /* 13.7:1 mot --bg */
  --muted:#a9a7a0;         /* 7.0:1 mot --bg · 6.0:1 mot panel-n */
  --panel-i:#17181c;       /* Klaras kort: mörkare än bg — bakåt */
  --panel-n:#272a2f;       /* berättarens kort: ljusare än bg — fram */
  --edge-i:#6f8fb0;        /* dämpad sval (ingen skarp blå — åldrande ögon) — 5.3:1 */
  --edge-n:#cf9f5a;        /* dämpad varm — 6.0:1 mot panel-n */
  --accent:#5b8cff;        /* valmarkering — 5.6:1 mot panel-i */
  --accent-strong:#9db9ff; /* länkar/fokus — 8.7:1 mot --bg */
  --warn:#f0b862;          /* 9.4:1 */
  --rec:#ff9d8f;           /* pulsen i mörkt — 8.4:1 */
  --border:#33363b;
  --border-ui:#898d95;     /* 5.1:1 */
  /* Composer-FÄLTET (iter 6f A): egen nyans MÖRKARE än BÅDA bubbeltokens
     (--panel-i #17181c · --panel-n #272a2f) → läses som en NEDSÄNKT input-brunn
     (chrome), aldrig en tredje bubbla. Tidigare = #17181c = EXAKT --panel-i
     (krocken). Tema-scopat: --ta-bg används ENDAST av #answer. Glas-barens tint
     är ORÖRD (nyansen ligger på det solida fältet, ej barens backdrop-filter). */
  --ta-bg:#101216;
  --ta-ph:#a3a19a;         /* 7.25:1 mot nya --ta-bg (ljusnar man fältet sjunker den — därför MÖRKARE) */
  /* Info-box-ytan i mörkt (krav 3): LJUSARE än BÅDA bubbeltokens (--panel-i
     #17181c · --panel-n #272a2f) → upphöjt systemmeddelande, aldrig en tredje
     bubbla. Värdet valt genom MÄTNING: maximerar fyllnadsavståndet till närmaste
     bubbelton (1,28:1 — mot 1,12:1 för #2e3238) utan att tappa något AA-golv.
     Ljusare kandidater (#3b414a+) föll på --muted < 4,5:1. Mätt AA: --text
     9,13:1 · --muted 4,69:1 · --border-ui-kanten 3,39:1 mot ytan, 5,07:1 mot bg. */
  --info-bg:#363b42;
  --glass:rgba(27,29,33,.93);
  --glass-thin:rgba(27,29,33,.72);
  /* Skicka-knappens ring (iter 6f.1, WCAG 1.4.11): blå fylltoken #1c4fd6 når
     matematiskt aldrig 3:1 mot mörka grannytor (fält #101216 2,80 · bg #1b1d21
     2,52 · glas-komposit 2,42). En diskret ljusgrå 1px-ring ger komponentgränsen
     ≥3:1 mot faktiska grannen (glas-baren #chat-bottom, ljusaste komposit #1e2125
     → 5,04:1) med --btn-bg ORÖRD. DARK-SCOPAD: ljust klarar redan sin granne. */
  --send-ring:#8a909b;
  /* Composer-fältets ljusare mörk-ring (iter 6f.2 krav 3a) — den ENDA nya
     palett-token detta pass inför; övriga tokens ORÖRDA. Ljusare än --border-ui
     (#898d95) så input-brunnen lyfts. AA verifierad ≥3:1 (se #answer-regeln). */
  --field-ring:#a2a8b2;
}
/* AaA — TVÅ lägen (6d, fynd 36: största utgick) som skalar SAMTALSTEXTEN
   (bubblor + utkastets brödtext), ALDRIG toppraden/chrome (iter 6b C8).
   Dokumenterade värden: 17/20 px. Lagrat "stor" migreras till "mellan"
   i theme.js (valmigreringsklassen — föräldralösa värden nollas aldrig tyst). */
:root[data-textsize="mellan"]{--chat-fs:20px}

*{box-sizing:border-box}
/* hidden-attributet vinner ALLTID över display-regler (flex-containrar m.fl.) —
   utan detta läcker t.ex. inspelningsraden igenom sin hidden. */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;font-family:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;font-size:1.0625rem}
/* Samtalsläget: sidscrollen är DÖD — EN scrollyta (#chat-scroll) äger allt (C5). */
body.in-chat{overflow:hidden}
/* UNIVERSELL knappradie (iter 6f.2 A-efterputs krav 2): ALLA knappar ärver
   radie-tokenen här — inga fyrkantiga kvar. Rotorsaken till fyndet: `button.ghost`
   satte aldrig någon radie, så varje spökknapp (paus-boxens val, "Så fungerar
   det", meny-utgången, Avbryt) renderades med radie 0. Medvetet SVAG specificitet
   (0,0,1) så de FUNKTIONella formerna vinner i kaskaden utan !important:
   #btn-mic/#btn-send (50 %) och pills (.stt-chip/#persona-chip/.ai-badge, 999px).
   Skicka-knappens 1.4.11-ring (6f.1) rörs därför aldrig av tokenen. */
button{font:inherit;cursor:pointer;border-radius:var(--btn-radius)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}
a{color:var(--accent-strong)}
::selection{background:var(--accent-strong);color:#fff}
/* F9 (designputsen 2026-08-18): §4-svepet — scrollbar i husets ton + ingen
   blå tap-blixt (ärvs från html i WebKit/Blink). */
html{scrollbar-color:var(--border-ui) transparent;-webkit-tap-highlight-color:transparent}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ Intro-stegen (inbjudan/samtycke/fel) — brand-headern bor HÄR,
   aldrig i samtalsvyn (C4). .page-shell = samma skal för enkelsidorna
   (/integritet/, 404) som lånar den här stylesheeten. ============ */
#intro-shell,.page-shell{max-width:36rem;margin:0 auto;padding:clamp(1rem,4vw,2rem)}
.brand{text-align:center;margin-bottom:1.6rem}
.tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand h1{font-size:2rem;margin:.2rem 0 0;text-wrap:balance}
.sub{color:var(--muted);margin:.2rem 0 0}
#intro-shell h2,.page-shell h2{font-size:1.4rem;margin:0 0 .6rem;text-wrap:balance}
/* Husets röst-kort bär intervjuarsidans SVALA kant (6d-kantspråket, fynd 35). */
.ai-note{background:var(--panel-i);border-left:2px solid var(--edge-i);border-radius:.5rem;padding:1rem 1.1rem;font-size:1.1rem}
.consent-box{border:1px solid var(--border);background:var(--panel-i);border-radius:.8rem;padding:1.1rem 1.2rem;margin-top:1.2rem;font-size:1.05rem}
.consent-box ul{margin:.4rem 0 1rem;padding-left:1.3rem}
.consent-box li{margin:.45rem 0}
.check{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0}
.check input{width:1.6rem;height:1.6rem;flex:none;margin-top:.2rem;accent-color:var(--accent-strong)}
.more{margin-top:1rem}
#msg{min-height:1.5rem;color:var(--warn);margin:.4rem 0 0}
/* Samtalsskalets statusrad reserverar INGEN död yta (6d fynd 26: stram
   composer) — höjd bara när det finns något att säga. */
#chat-msg{color:var(--warn);margin:0;min-height:0}
#chat-msg:not(:empty){margin:.35rem 0 0}

/* Primär- och spökknappar (delas av båda skalen). */
.btn,#intro-shell button{padding:.85rem 1.5rem;border-radius:var(--btn-radius);border:0;background:var(--btn-bg);color:#fff;
  font-size:1.05rem;font-weight:600;min-height:48px}
button:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
/* F2 (designputsen 2026-08-18): samtyckets "Börja" såg AKTIV ut fast den var
   disabled — #intro-shell button (1,0,1) slog button:disabled (0,1,1) och en
   85-åring som tryckte före krysset fick ingen visuell förklaring. Scopad
   disabled-regel med högre specificitet (1,1,1); samma husfärger som den
   generella disabled-stilen, så intro-knapparna följer huset i BÅDA lägena.
   §11-textens innebörd orörd — detta är knappens utseende, ingenting annat. */
#intro-shell button:disabled{background:var(--border);color:var(--muted)}
/* SEKUNDÄRKNAPP (iter 6f.2 A-efterputs krav 2): höjd kontrast så valet utmärker
   sig för ett åldrande öga (NN/g äldre-UX). Texten var --muted (5,36:1) och
   vikten 500 — nu --text (13,0:1 mot bg) och 600, med en tydligare 1,5px-kant.
   Fortsatt LUGNARE än primärknappen (ingen fylld yta) → hierarkin består. */
button.ghost{background:transparent;border:1.5px solid var(--border-ui);color:var(--text);font-weight:600}
button.ghost:hover:not(:disabled){border-color:var(--text)}
/* Tydlig inaktiverad ghost (KR3 punkt 6). */
button.ghost:disabled{background:transparent;opacity:.45;cursor:not-allowed}

/* ============ INFO-BOX-FAMILJEN (iter 6f.2 A-efterputs krav 3) — EN delad
   komponent för SYSTEMinnehåll: huset talar OM samtalet, aldrig I det.
   Fyndet (Darios enhetsrunda): onboardingen, pausbeskedet och persona-kortet
   bar intervjuarens SVALA vänsterkant + bubbelytan (--panel-i) → de lästes som
   Klaras repliker. FYRA signaler skiljer dem nu från en bubbla:
     1. CENTRERAD + SMALARE än bubblorna (30rem mot kolumnens 46rem) — starkaste
        signalen: en bubbla är aldrig centrerad, den är v/h-placerad.
     2. KANT RUNT OM — aldrig en temperaturkant på EN sida. Det språket är
        vem-sa-vad och tillhör bubblorna (6d durabel skyddsregel, orörd).
     3. EGEN TON (--info-bg), skild från BÅDA bubbeltokens i båda teman.
     4. Delar --btn-radius — formspråket är ett.
   Definierad EN gång HÄR, applicerad på alla tre ytorna (onboarding · paus/
   revoked · persona-kortet) så de speglar varandra (Darios uttryckliga krav).
   Seam-domen: pausbeskedets rendering är REN kosmetik — showPaused() togglar ett
   statiskt element och sätter texten från en ren klientsträng; hälsnings-
   persistensen (pausavsked/återkomsthälsning) är turer i #transcript, en annan
   väg. Ingen delad renderingsväg ⇒ inget "chrome som är historikbubbla". ==== */
.info-box{max-width:30rem;margin-inline:auto;background:var(--info-bg);
  border:1px solid var(--border-ui);border-radius:var(--btn-radius);
  padding:1rem 1.15rem;color:var(--text)}
.info-box h3{margin:0 0 .4rem;font-size:1rem}

/* ==== Enhetslänkningen (steg 2 krav 4) ====
   Koden ska kunna läsas TVÄRS ÖVER RUMMET och över telefon: stor, gles och i
   tabellsiffror så 111 och 777 är lika breda. Färgerna är temats egna —
   inga nya variabler, alltså inga nya PAR-rader i apptema-facit. */
#link-code{font-size:2.4rem;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  font-weight:700;text-align:center;margin:.5rem 0;color:var(--text)}
#linkok-code{font-size:1.4rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  width:9ch;text-align:center;padding:.45rem .5rem;margin:.4rem 0;
  background:var(--bg);color:var(--text);
  border:1px solid var(--border-ui);border-radius:var(--btn-radius)}

/* ============ Samtalsskalet (6d): EN scrollyta ÄGER ALLT — toppraden och
   composern är STICKY INUTI den (aldrig fixed → inga tangentbords-/scroll-
   fokusfällor; C5 består: en enda scrollyta). Samtalet passerar UNDER de
   halvtransparenta ytorna — glasets förutsättning. ============ */
#chat-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100svh;background:var(--bg)}
#chat-shell[hidden]{display:none}
/* Kolumnföljningen (E12): toppradens, samtalets och composerns INNEHÅLL delar
   samma centrerade kolumn — aldrig kant-ankringar på ultrawide (§5-ankringsregeln). */
/* Kolumnen (E12): med viewport-fit=cover (6e) bleedar glasbarerna till fysisk
   kant; INNEHÅLLET hålls av sid-safe-area i LANDSKAP (notch på sidan) — max()
   ger 0 extra i porträtt (gratis), skjuter av notchen i landskap (krav 11). */
.col{width:100%;max-width:var(--col);margin:0 auto;
  padding-left:max(clamp(.6rem,2.5vw,1.25rem),env(safe-area-inset-left,0px));
  padding-right:max(clamp(.6rem,2.5vw,1.25rem),env(safe-area-inset-right,0px))}

#chat-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  display:flex;flex-direction:column;
  /* --kb sätts av tangentbords-clearancen (iter 6e1 krav 3): native scrollIntoV./
     ankring respekterar den lyfta composern. 0 utan tangentbord (default). */
  scroll-padding-bottom:var(--kb,0px)}
/* Mittdelen fyller ut så composern bottnar även i korta samtal. */
#chat-main{flex:1 0 auto;display:flex;flex-direction:column}
/* PADDING-SYMMETRI (6f.2 A-efterputs krav 6): header→första bubblan ska matcha
   sista bubblan→composern. Symmetriskt redan i basen (mobil/iPhone) — A/B löste
   det bara på desktop. Header-ikonerna är orörda (touch-target ≥44px); symmetrin
   togs ut i toppadding i stället, precis som dispatchen tillåter. */
#chat-main>.col{padding-block:1rem;container-type:inline-size}

/* Glaset (6d fynd 20, beslut 7): BASEN är en solid halvtransparent yta —
   alltid acceptabel. Blur + saturate läggs OVANPÅ endast där stödet finns
   (@supports fångar frånvaro; "stöds men hackar" fångas av människokvittot
   på surfplatteklassen — flaggas i rapporten). AA-kompositerna verifierade
   mot båda extremerna per tema (aa-matris-6d). */
/* Separatorprincipen (iter 6e krav 6, alla fyra oraklen): INGET horisontellt
   streck bredare än sin kolumn. Glasbarerna är fullbredds (bleed) → en hårlinje
   på dem blir ett svävande streck; en kolumnbunden stub blir ännu värre. Därför
   INGEN egg på någon glasbar — blurret separerar samtalet. */
/* F1 (designputsen): toppraden ÖVER bottenglaset (13 > 12). Höjdtaket på
   #chat-bottom .col räcker inte ensamt: i iPhone 13-landskap (342 px) red
   baren 68 px över bottenläget av scrollpositionen (barY −4, mätt i WebKit)
   och la sig över ☰/⚙/AI-chipet ändå. Chromen — och art.50-märkningen — får
   ALDRIG förlora stapelordningen mot en transient yta; menyer/scrimmar (40+)
   ligger fortfarande över allt. Avvikelse från rapportens förslag (enbart
   maxhöjd) — motiverad av mätningen, bokförd i rapporten. */
#chat-top{position:sticky;top:0;z-index:13;background:var(--glass)}
/* #chat-bottom lyfts av tangentbords-clearancen med transform:translateY(-kb)
   (iter 6e1 krav A · JS). transform (compositor-only) INTE `bottom` — sistnämnda
   ger layout-thrash varje frame och biter frost-perfen (krav C). Kort transition
   så accessory-radens (QuickType) ~44px-växling glider; reduced-motion snäpper
   (regel nedan). backdrop-filtret re-samplar under rörelsen — det, inte radien i
   vila, är den dyra framen (perf-trappan dok. i ITER6E1-rapporten). */
#chat-bottom{position:sticky;bottom:0;z-index:12;background:var(--glass);
  transition:transform 120ms ease-out}
@media (prefers-reduced-motion: reduce){#chat-bottom{transition:none}}
/* Frosten STARKARE (krav 3, Darios steer): mer blur + saturate ger tydligare
   liquid glass — samtalet skymtar rikare under. Tint-opaciteten (.72) höjs INTE
   (bunden av glas-text-AA ≥4,5 OCH show-through); styrkan ligger i blur/saturate. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #chat-top,#chat-bottom{background:var(--glass-thin);
    -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
}

/* Toppraden (6c C7 · 6d): ☰ · kapiteltitel (ellipsis) · AI-markören · ⚙ —
   titeln ska ALLTID synas. Art.50-vakten: mikro-badgen "AI" står på ALLA
   bredder; ≥640 px (dokumenterad brytpunkt) visas hela "Namn · AI"-chipet. */
/* Toppraden gardas mot notch/Dynamic Island (krav 16): cover är GLOBAL i BÅDA
   teman → inset-top skjuter chromet under notchen. env=0 på icke-notch (oförändrad). */
#chat-top .col{display:flex;align-items:center;gap:.5rem;min-height:56px;
  padding-block:calc(.35rem + env(safe-area-inset-top,0px)) .35rem}
#btn-menu{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:transparent;border:1px solid var(--border-ui);color:var(--text);border-radius:var(--btn-radius);
  padding:.35rem .7rem;min-width:44px;min-height:44px;font-weight:600;font-size:.95rem}
/* ☰-knappens ordtext ryker på smalt — titeln äger utrymmet. */
@media (max-width:639px){#btn-menu span{display:none}}
#chat-title{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:.5rem}
/* min-width:0 även på rubriken: flex-items vägrar annars krympa under
   nowrap-textens naturliga bredd — h-scroll på smala lägen (§5-matrisfyndet). */
#chat-chapter{margin:0;min-width:0;flex:1 1 auto;font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Persona-chipet — namnet och AI-märkningen står IHOP (art.50 försvagas aldrig);
   namndelen döljs under brytpunkten men "AI" står ALLTID kvar (mikro-badgen). */
#persona-chip{flex:none;font-size:.78rem;color:var(--muted);border:1px solid var(--border-ui);
  background:var(--panel-i);border-radius:999px;padding:.18rem .6rem;white-space:nowrap}
@media (max-width:639px){#persona-chip-name{display:none}}
#btn-settings,#btn-textsize,#btn-theme{min-width:44px;min-height:44px;padding:.2rem .5rem;border-radius:var(--btn-radius);
  background:transparent;border:1px solid var(--border-ui);color:var(--muted);font-weight:600;line-height:1}
#btn-settings{flex:none;font-size:1.15rem;color:var(--text)}
#btn-textsize[data-size="liten"]{font-size:.85rem}
#btn-textsize[data-size="mellan"]{font-size:1.05rem}
#btn-theme{font-size:1.05rem}

/* ⚙-menyn (6c C7): overlay-panel från höger på ALLA lägen. Persona-kortet
   överst (art.50) — bär intervjuarsidans svala kant (6d-kantspråket). */
#settings-scrim{position:fixed;inset:0;background:rgba(15,15,17,.45);z-index:42}
/* Overlay-panelen är fixed (fäst kant) → gardas mot alla insets under cover (6e
   krav 16): inset-top + höger-inset (panelen är högerdockad, fysisk högerkant). */
#settings-menu{position:fixed;inset:0 0 0 auto;width:min(88vw,360px);z-index:43;overflow-y:auto;
  background:var(--bg);border-left:1px solid var(--border);
  padding:calc(1rem + env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) 1rem}
#settings-menu h2{font-size:1.05rem;margin:.2rem 0 .8rem}
#btn-settings-close{position:absolute;top:calc(.55rem + env(safe-area-inset-top,0px));right:.55rem;min-width:44px;min-height:44px;
  background:transparent;border:0;color:var(--muted);font-size:1.15rem;border-radius:var(--btn-radius)}
/* Persona-kortet ÄR en info-box (krav 3) — art.50-innehållet står oförsvagat:
   den nya ytan har HÖGRE kontrast än den gamla bubbelytan, aldrig lägre. */
#persona-card{font-size:.92rem;margin-block:0 .9rem}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  flex-wrap:wrap;border-top:1px solid var(--border);padding:.7rem 0}
.setting-label{font-weight:600;font-size:.95rem}
/* Röstvalslistan (D9): lugna radknappar; valet markeras med SELEKTIONS-accenten
   (blå = interaktivt val — skild från vem-sa-vad-temperaturkanterna). */
#voice-list{width:100%;display:flex;flex-direction:column;gap:.35rem}
.voice-choice{display:block;width:100%;text-align:left;background:transparent;
  border:1px solid var(--border-ui);color:var(--text);border-radius:var(--btn-radius);
  padding:.55rem .7rem;min-height:48px;font-size:.9rem}
.voice-choice[aria-pressed="true"]{border-color:var(--accent);border-left-width:4px;background:var(--panel-i)}
#voice-hint{width:100%}
/* 🚩 PANELENS KNAPPAR STYLAS SOM KLASS, ALDRIG SOM INSTANS (2026-08-28).
   Regeln bodde förr på #btn-how ENSAM. Följden: #btn-add-device föddes trasig i
   steg 2 — innehållsbred, vänsterjusterad utan toppmarginal — och krockade med
   raden ovanför i berättarens panel (Darios ögonrunda på deployad yta).
   Mätt före fixen: av panelens FYRA ghost-knappar hade #btn-how en ID-regel,
   återkallelsens två fick bredd via `.setting-block button`, och
   #btn-add-device hade INGEN. Fyra knappar, tre olika behandlingar.
   Samma felfamilj som restposten: laga KLASSEN, inte instansen — nästa knapp
   någon lägger i den här asiden ska ärva formen i stället för att födas trasig.
   Låst i aterkallelse-test (frånvarolås som räknar ALLA ghost-knappar här). */
#settings-menu .ghost{display:block;width:100%;min-height:48px;margin-top:1rem;text-align:left}

/* Dörrarna (tillägg 3). Chevronen är ren dekoration — ::after, aldrig text i
   knappen — så skärmläsaren läser handlingen och inte ett tecken. */
#settings-menu .dorr{position:relative;padding-right:2.4rem}
#settings-menu .dorr::after{content:"›";position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;line-height:1;color:var(--muted)}
/* Tillbaka bär samma bredd och justering som allt annat i panelen (låset kräver
   det) men är visuellt lättare — den är en väg tillbaka, inte ett val. */
#settings-menu .tillbaka{margin-top:0;margin-bottom:.4rem;border-color:transparent;font-weight:500;color:var(--muted)}
#settings-menu .tillbaka::before{content:"‹ "}
#settings-menu h2{margin-top:0}

/* TVÅ REGISTER I EN KNAPP: raden säger HANDLINGEN, underraden FÖLJDEN.
   Följden är `--muted` (5,36:1 ljust · 7,0:1 mörkt mot --bg — båda över 4,5:1)
   och normalvikt, så den läses som en upplysning och inte som en andra knapp.
   Ingen ny färgvariabel. */
.knapp-foljd{display:block;margin-top:.25rem;font-weight:400;font-size:.88rem;line-height:1.35;color:var(--muted)}
/* Följdraden ärver ALDRIG farorödan — den är en upplysning, inte en varning,
   och röd text i två storlekar bredvid varandra skriker utan att förtydliga. */
button.danger-text .knapp-foljd{color:var(--muted)}
/* Knappar med följdrad är två rader höga; höjden får växa, aldrig klippa. */
#settings-menu .ghost:has(.knapp-foljd){padding-top:.7rem;padding-bottom:.7rem}

/* Samtalet: auto-scroll till senaste turens BÖRJAN sköts av JS (KR2-fyndet)
   och kompenserar den sticky toppradens höjd. */
.ai-badge{display:inline-block;font-size:.78rem;letter-spacing:.02em;color:var(--muted);
  border:1px solid var(--border-ui);background:var(--panel-i);border-radius:999px;padding:.18rem .75rem;margin:0 0 .8rem}
/* BUBBEL-INSET (6f.2 A-efterputs krav 5): bubblorna dras in en aning från BÅDA
   kanter så de får luft mot header och composer i stället för att linjera
   kant-i-kant med chromet. CLAMPAD — på 320px foldable är bredden dyr och luft
   får aldrig bli trängsel, så insetet krymper till ett par pixlar där.
   Insetet gäller INOM kolumnen; krav 8 placerar kolumnen (ingen dubbel-inset). */
#transcript{display:flex;flex-direction:column;gap:.9rem;
  padding-inline:clamp(.15rem,1.2vw,.6rem)}
/* Bubblorna (6d krav 1–3): tre vem-sa-vad-signaler i BÅDA teman —
   v/h-placering + fyllnadsskillnad (ljushet/ton) + temperaturkant (~2 px).
   DURABEL SKYDDSREGEL (iter 6e1 krav 10, skyddsklass som motion-guardrailen):
   temperaturkanten (border-left/right nedan) är LASTBÄRANDE för separationen —
   Klaras fyllnad mot bg är bara ~1,1:1, så utan kanten smälter bubblan in.
   Kanten får ALDRIG tas bort eller "designas bort". Ändras endast med ny
   AA-verifiering av kant≥3 mot BÅDA grannytor. */
.bubble{border-radius:.8rem;padding:.85rem 1.05rem;max-width:94%;font-size:var(--chat-fs);
  line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.interviewer{background:var(--panel-i);border:1px solid var(--border);border-left:2px solid var(--edge-i);align-self:flex-start}
.bubble.interviewer.current{font-size:calc(var(--chat-fs)*1.12);line-height:1.7}
.bubble.narrator{background:var(--panel-n);border-right:2px solid var(--edge-n);align-self:flex-end}
/* Fold uppfällt / breda containrar (E14, container query): rymligare yta →
   smalare bubbelmått ger lugnare rader. */
@container (min-width: 640px){
  .bubble{max-width:85%}
}
/* TRANSIENT chrome (MINI — hälsnings-persistensen + paus-trayen, krav 5):
   återkomsthälsningen och pausavskedet är STATUS om samtalet, inte repliker i det.
   De renderas en gång sist i transkriptet och persisteras aldrig. Läsningen måste
   matcha sanningen: ingen bubbelform, ingen temperaturkant (det språket är
   vem-sa-vad och tillhör de PERSISTERADE turerna, 6d durabel skyddsregel), ingen
   lyssna-knapp. I stället centrerad, kursiv-fri, dämpad text mellan två hårfina
   linjer — samma familj som info-boxens systemröst men lättare, för den är
   flyktig. Följer AaA (--chat-fs) eftersom hon LÄSER den. */
.transient-note{align-self:stretch;text-align:center;color:var(--muted);
  font-size:calc(var(--chat-fs)*0.92);line-height:1.55;margin:.2rem 0 0;
  padding:.85rem 1.1rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* Lyssna-raden i intervjuarbubblan (C7): diskret, touch-nåbar (≥44 px). */
.bubble-tools{margin-top:.3rem}
.btn-listen{background:transparent;border:0;color:var(--muted);font-size:.8rem;
  font-weight:500;padding:.55rem .5rem .3rem 0;min-height:44px;min-width:44px;text-align:left}
.btn-listen:hover{color:var(--text)}
.btn-listen[aria-pressed="true"]{color:var(--accent-strong)}
.typing{color:var(--muted);font-style:italic;min-height:1.4rem;margin:.5rem 0 0}
/* Skriver-indikatorn i historiken (6c B6): personans namn + tre prickar som en
   lugn intervjuarbubbla. Prickarna står stilla vid prefers-reduced-motion. */
.typing-bubble{display:flex;align-items:center;gap:.5rem;color:var(--muted);
  font-style:italic;font-size:calc(var(--chat-fs)*0.92)}
.typing-bubble .dots{display:inline-flex;gap:4px}
.typing-bubble .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:mbs-dot 1.2s ease-in-out infinite}
.typing-bubble .dots i:nth-child(2){animation-delay:.2s}
.typing-bubble .dots i:nth-child(3){animation-delay:.4s}
@keyframes mbs-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.typing-bubble .dots i{animation:none}}
#btn-retry{margin-top:.6rem}

/* Composern (6d-omtaget, fynd 23/24/26/27/38): brett fält DOMINERAR raden ·
   mic = ren SVG-ikon, neutral/sekundär · rund skicka-knapp med uppåtpil i
   primärfärgen · båda HÖJDCENTRERADE mot fältets enradsläge (48 px = fältets
   min-höjd, flex-end ankrar vid växande fält) · STRAM padding runt om. */
/* Composern (6e krav 8): kolumnbunden via .col + vertikal padding. Toppen
   (iter 6f.2 krav 3c) proportionerlig mot header-fixen så composern inte klämmer
   mot sista bubblan; botten adderar safe-area-inset på mobil så innehållet står
   ovanför hemindikatorn — glaset bleedar dit under. Desktop-lyftet: media nedan. */
#chat-bottom .col{padding-block:.9rem calc(.75rem + env(safe-area-inset-bottom,0px));
  /* F1 (designputsen 2026-08-18): i telefon-LANDSKAP vid FÖRSTABESÖK blev
     glasbaren (onboarding + composer) högre än hela viewporten — 385 px i en
     342 px hög iPhone 13-landskapsvy, mätt i WebKit — och la sig ÖVER toppraden:
     ☰, ⚙ och AI-chipet (art.50-exponeringen!) blev oklickbara tills onboardingen
     kvitterats. Taket lämnar alltid toppraden fri (64 ≈ dess höjd) och låter
     barens INNEHÅLL scrolla i stället för att täcka. Binder bara när innehållet
     är högre än rutan — höga viewports märker ingenting. Glasprincipen orörd. */
  max-height:calc(100svh - 64px);overflow-y:auto}
/* Fält · mic · skicka. mic närmare fältet (iter 6f.2 krav 3b): raden hugger
   (gap .4rem, ner från .5rem) så mic läses som fältets dikterings-affordans;
   skicka får en gnutta mer luft via margin-left (i #btn-send-regeln) som commit.
   Skicka är ett flex-SYSKON till textarean (aldrig absolut-overlaid) → textareans
   scrollbar och skickaringen bor i olika boxar och kan per konstruktion aldrig
   kollidera (krav 4c strukturellt). */
#composer-row{display:flex;gap:.4rem;align-items:flex-end}
/* Fältet följer AaA (iter 6f B): font-size = --chat-fs (bubblans BAS, rad 266) —
   INTE den förstorade aktuella frågan (calc*1.12). Placeholdern ärver storleken
   (rad nedan sätter bara färg). Granska-före-skick-transkriptet (Whisper-utdata
   mamma läser/rättar) BOR i #answer → skalas av samma regel. Läge-2 auto-growar
   (JS autogrow, även vid AaA-byte) så större font aldrig klipps; min-höjd 48px +
   flex-end (composer-row) bevarar 6e-centreringen. */
/* GUTTERN BORTTAGEN (iter 6f.2 A-efterputs krav 1, Darios enhetsfynd): A/B:s
   `scrollbar-gutter:stable` reserverade guttern ALLTID — på enhet syntes den som
   en ful lodrät linje till höger i fältet, även utan scroll. Orakel 1:s regel
   gäller: släpp affordansen när den syns ful. Nativ `overflow-y:auto` visar
   scrollbaren FÖRST när innehållet faktiskt scrollar (fältet växer till
   max-height). Den STRUKTURella vinsten består: skickaknappen/ringen är ett
   flex-SYSKON utanför textareans scroll-box (aldrig absolut-overlaid), så
   scrollbar och ring bor i olika boxar och kan aldrig kollidera. */
#answer{flex:1 1 auto;min-width:0;min-height:48px;max-height:38svh;font:inherit;font-size:var(--chat-fs);
  line-height:1.5;color:var(--text);background:var(--ta-bg);border:1px solid var(--border-ui);
  border-radius:1.4rem;padding:.7rem 1rem;resize:none;overflow-y:auto}
/* SCROLLBAR-TUMMEN I COMPOSERN (leadbeslut 2026-07-28, steg 1 av 3).
   Steg 1 här: dölj scrollbar-chromet tvärwebbläsare. Steg 2 (rotorsaken) bor i
   autogrow() i start.js — under border-box är scrollHeight 2px för kort för en
   ram-box, så fältet blev permanent 2px för litet och tummen tändes ÄVEN när
   texten fick plats. Steg 1 utan steg 2 vore ett plåster: tumman skulle bara
   bli osynlig medan fältet fortsatte scrolla en aning.
   A11Y-GRÄNS: gäller ENDAST composern. Läs- och samtalsytorna (#chat-scroll,
   utkastvyn) behåller sina scrollbars — där ÄR tummen en nödvändig upplysning
   om att det finns mer text. Skriv aldrig den här regeln bredare. */
#answer{scrollbar-width:none;-ms-overflow-style:none}
#answer::-webkit-scrollbar{width:0;height:0}
/* Steg 3: progressiv förstärkning. Där webbläsaren kan höjdsätta textarean
   själv slipper vi mäta alls — men JS-vägen står kvar som bärande, för
   field-sizing saknas ännu på flera av de enheter mamma kan få. */
@supports (field-sizing:content){#answer{field-sizing:content}}
#answer::placeholder{color:var(--ta-ph)}
#answer:disabled{opacity:.55}
/* FOKUSRING vs MIC (krav 1, Darios enhetsfynd D+L): fältets tända ring låg
   3px bred + 2px utanför kanten = 5px ut i den .4rem (6,4px) smala luckan och
   NÅDDE mic-ikonen. Ringen görs INSATT på fältet (offset -3px) — den blir lika
   synlig (samma bredd/kontrast, följer border-radius) men sticker aldrig ut i
   luckan, så mic får luft UTAN att A/B:s "mic närmare fältet" backas.
   Ikonknapparnas egna ringar dras in till offset 1px så en tänd mic-ring
   (4px ut) håller sig inom luckan till skicka. Touch-targets orörda (48px). */
#composer-row #answer:focus-visible{outline-offset:-3px}
#composer-row .icon-btn:focus-visible{outline-offset:1px}
/* Composer-fältets ring 1px LJUSARE i mörkt (iter 6f.2 krav 3a): lyfter den
   nedsänkta input-brunnen tydligare mot den mörka glasbaren. Tema-scopad (ej
   bredd-scopad): en mörk input-ring får inte divergera mobil/desktop. AA (UI-
   komponentgräns ≥3:1): --field-ring mot fält-bg #101216 ≈7,9:1 · mot ljusaste
   mörk glas-komposit #1e2125 ≈6,8:1. --send-ring och --border-ui är ORÖRDA. */
:root[data-theme="dark"] #answer{border-color:var(--field-ring)}
.icon-btn svg{width:24px;height:24px;flex:none}
#btn-mic{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--border-ui);
  background:transparent;color:var(--muted);padding:0;display:inline-flex;align-items:center;justify-content:center}
#btn-mic:hover:not(:disabled){color:var(--text);border-color:var(--muted)}
#btn-mic:disabled{background:transparent;opacity:.45}
#btn-send{flex:none;width:48px;height:48px;margin-left:.1rem;border-radius:50%;border:0;background:var(--btn-bg);
  color:#fff;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* Mörk-scopad 1.4.11-ring (6f.1 krav A): ENDAST mörkt tema; box-sizing:border-box
   ⇒ 48px yttermått oförändrat (inget row-geometribrott), vita pilen + fyllen orörda,
   --btn-bg orörd. Ljust tema: #btn-send behåller border:0 (knappen klarar sin granne). */
:root[data-theme="dark"] #btn-send{border:1px solid var(--send-ring)}
/* Engångs-onboardingen (6c B3) ÄR en info-box (krav 3): systemröst OM samtalet
   — inte en replik i det. Kanten/ytan kommer från .info-box. */
#onboarding{margin-block:0 .55rem}
#btn-onboard-ok{margin-top:.55rem;min-height:44px;padding:.45rem 1rem;border-radius:var(--btn-radius);font-size:.9rem}
.lang-hint{color:var(--muted);font-size:.82rem;margin:.15rem 0 0}
/* Hintraden reserverar ingen död yta (fynd 26) — höjd bara med innehåll. */
#mic-hint{color:var(--warn);font-size:.86rem;min-height:0;margin:0}
#mic-hint:not(:empty){margin:.3rem 0 0}
/* Trygghetssignalen (krav 7a): dämpad men LÄSBAR (--muted ≥4,5:1 i båda teman,
   .82rem — inte mikroskopisk för ett åldrande öga). Centrerad under fältet där
   blicken redan är. Ingen CTA, ingen ikon, ingen rörelse. */
#autosave-note{color:var(--muted);font-size:.82rem;text-align:center;margin:.4rem 0 0}

/* Inspelningsläget (C6 + 6c E): composern växlar PÅ PLATS — puls + timer +
   Klar, med språk-chipen som egen rad under. Pulsen respekterar
   prefers-reduced-motion (stilla punkt i stället). */
#recorder{display:flex;flex-direction:column;gap:.45rem}
#rec-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;min-height:52px}
#stt-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.stt-chip{background:transparent;border:1px solid var(--border-ui);color:var(--muted);
  border-radius:999px;padding:.3rem .85rem;min-height:44px;font-size:.85rem;font-weight:600}
.stt-chip[aria-pressed="true"]{background:var(--panel-i);border-color:var(--accent);color:var(--text)}
.pulse{width:16px;height:16px;border-radius:50%;background:var(--rec);flex:none;animation:mbs-pulse 1.2s ease-in-out infinite}
@keyframes mbs-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
@media (prefers-reduced-motion: reduce){.pulse{animation:none}}
#rec-timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.1rem;min-width:3.2ch}
.rec-label{color:var(--muted);font-size:.9rem;flex:1 1 12ch}
#btn-rec-done{padding:.6rem 1.2rem;border-radius:var(--btn-radius);border:0;background:var(--btn-bg);color:#fff;font-weight:600;min-height:48px}
#btn-rec-cancel{min-height:48px}
/* Granskningsraden (C6): transkriptet är på plats i fältet — rätta, ta om eller skicka. */
#review-bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;color:var(--muted);
  font-size:.86rem;margin:0 0 .4rem}
#btn-retake{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:1px solid var(--border-ui);color:var(--muted);
  border-radius:var(--btn-radius);padding:.3rem .7rem;min-height:44px;font-size:.86rem;font-weight:600}
#btn-retake svg{width:16px;height:16px;flex:none}

/* Besked-korten i composerytan ÄR info-boxar (krav 3) — systemröst OM samtalet.
   Seam-domen: ren kosmetik (se .info-box-blocket); persistensen rörs aldrig. */
#paused-box,#revoked-box{margin-block:.4rem}
/* "Fortsätt"-affordansens berättar-LÄSBARA text följer AaA (iter 6f B5b): den
   pausade sessionens besked + Fortsätt-knappen skalar med --chat-fs (mamma läser
   dem). Chrome i övrigt (timer/labels/chips) är FAST. */
#paused-text{font-size:var(--chat-fs)}
#btn-resume{font-size:var(--chat-fs)}
/* Pausvalen (6f.2 A-efterputs krav 4): en LODRÄT lista av val, inte en rad med
   knappar — varje val bär sin konsekvens-hint direkt under sin knapp, så
   innebörden aldrig kan glida ifrån knappen. Hierarkin: primären framträdande
   (fylld), sekundärerna tydliga men lugnare (spökknapparnas höjda kontrast från
   krav 2), hinten mindre + dämpad. §12: ingen prestationspress — hinten säger
   vad valet BETYDER, aldrig att hon borde bli klar. Knapparna sträcks inte ut
   över hela bredden (de ska läsas som val, inte som en formulärsubmit). */
.choice-list{display:flex;flex-direction:column;gap:.9rem;margin-top:.9rem}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.choice-hint{color:var(--muted);font-size:.85rem;line-height:1.45;margin:0}
/* Ominstallationsrådet (6c A2): visas endast i standalone-läget via JS. */
.reinstall-advice{color:var(--muted);font-size:.92rem;margin:.6rem 0 0}
.box-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.7rem}

/* ============ ÖPPNINGENS YTA (design rev 2, 2026-08-28) — krav 1–4, 6, 7 ====
   Ögonblicket då hon bestämmer vem som får läsa. Ytan bar tidigare husets
   TEXTkomponenter (.info-box · .gate-line · .lang-hint) men INGEN av dess
   VALkomponenter, och radioknapparna ritades av operativsystemet: 0 regler för
   `input[type=radio]` fanns i hela public/ (mätt). Målgruppen är 80+ på okänd
   hårdvara — en kontroll OS:et ritar ser olika ut på varje enhet.

   HIERARKIN ÄR VÄND (krav 4). Förr var förklaringen tyngst (.info-box, kant runt
   om) och valet lättast (två ostylade prickar). Nu är valkortet sidans huvudsak:
   det löper hela textkolumnen (46rem) mot lägesrutans 30rem, bär en 3:1-kant och
   har frågan som rubrik. Lägesraden är oförändrad — den vann inte genom att bli
   svagare utan genom att valet blev starkare.

   🚩 KANTREGELN (CLAUDE.md § Stående konventioner) — klassificering per färgpar,
   utskriven och aldrig antagen:
   · valkortets kant (--border-ui mot --bg): kortets fyllnad (--panel-n) ligger
     ~1,1:1 från sidan i ljust och ~1,3:1 i mörkt, alltså är KANTEN den enda
     bäraren av kortets avgränsning ⇒ BÄRANDE, krav 3:1.
   · radioknappens kant (--border-ui mot --panel-n): en radioknapp har ingen
     annan avgränsning än sin ring ⇒ BÄRANDE, krav 3:1.
   · nejknappens kant (--border-ui mot --bg): fyllnaden (--info-bg) ligger
     ~1,05:1 från baren i ljust ⇒ KANTEN bär knappens avgränsning, krav 3:1.
   Alla tre mäts ur LÄSTA värden i BÅDA teman i `oppningsytan-test.mjs`.

   🚩 VARFÖR .consent-box FÅR EN MODIFIERARE. Komponenten är rätt — ytan ÄR ett
   samtycke (art. 7) — men dess fyllnad är --panel-i, alltså INTERVJUARENS
   bubbelton. Det är precis den krocken info-box-familjen byggdes för att stänga
   ("de lästes som Klaras repliker"). Kortet är HENNES beslut och bär därför
   --panel-n, berättarens egen ton, plus den bärande kanten. Samtyckesskärmens
   .consent-box är ORÖRD — modifieraren är scopad. */
.insyn-kort{max-width:none;margin-top:1rem;background:var(--panel-n);
  border:1.5px solid var(--border-ui);padding:1.2rem 1.3rem}
.insyn-kort>h3{margin:0 0 .2rem;font-size:1.15rem;line-height:1.35;overflow-wrap:anywhere}
.insyn-kort .choice-list{gap:1.1rem}
/* Träffytan är HELA raden, aldrig bara prickens 1,6rem (44px-golvet). */
.insyn-kort .check{min-height:44px;align-items:center;margin:0;cursor:pointer}
.choice-etikett{font-size:1.05rem;line-height:1.45;color:var(--text)}
.insyn-kort .choice-hint{margin-left:2.3rem}

/* 🚩 HUSETS RADIOKNAPP — 0 OS-renderade kontroller kvar i öppningens yta.
   `accent-color` ensamt räcker inte: OS:et ritar fortfarande formen, och det var
   det som gav avvikande blå prickar och bruten uppradning mot etiketten. Ringen
   ritas därför av huset. Bunden till `.check`-mönstret (samma mönster som
   beställarvyns temaväljare) så varje framtida radiorad i skalet ärver den.
   Fokusringen är husets globala `input:focus-visible` — orörd. */
.check input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:1.6rem;height:1.6rem;flex:none;margin:0;
  border:2px solid var(--border-ui);border-radius:50%;
  background:var(--bg);display:grid;place-content:center}
.check input[type="radio"]::before{
  content:"";width:.85rem;height:.85rem;border-radius:50%;
  background:var(--accent-strong);transform:scale(0)}
.check input[type="radio"]:checked{border-color:var(--accent-strong)}
.check input[type="radio"]:checked::before{transform:scale(1)}
@media (prefers-reduced-motion: no-preference){
  .check input[type="radio"]::before{transition:transform .12s ease-out}
}

/* FÖRBEHÅLLET FÖRE VALET (--text, inne i kortet) och PRODUKTBEGRÄNSNINGEN
   (--muted, utanför kortet) är OLIKA SAKER och ser inte längre likadana ut:
   båda var .lang-hint. Det ena är något hon måste väga in INNAN hon väljer,
   det andra är en gräns i v1. */
.insyn-forbehall{color:var(--text);font-size:.95rem;line-height:1.5;
  margin:1.1rem 0 0;padding-left:.8rem;border-left:3px solid var(--border-ui)}
.insyn-krets{color:var(--muted);font-size:.85rem;line-height:1.45;margin:1rem 0 0}

/* 🚩 SKYDDSMENINGEN (krav 9.3 / design rev 2 krav 3) — DPIA:ns R1-åtgärd, ut ur
   finstilten. Brödtextvikt i --text, egen rad, sist i kortet där valet står. */
.insyn-trygg{color:var(--text);font-size:1.05rem;line-height:1.5;margin:1.1rem 0 0}

/* LÄSLOGGEN äger sin egen tomstatus — den är ett LOGGLÄGE, inte finstilt. */
.insyn-logg-block{margin-top:1.6rem}
.insyn-logg-block h3{margin:0 0 .4rem;font-size:1rem}
.insyn-logg-block ul{margin:0;padding-left:1.2rem}
.insyn-logg-block ul:empty{display:none}
.insyn-logg-tom{color:var(--muted);font-size:.95rem;margin:0}
/* Läsupplevelsen §6.4: sammanfattningsraden i hanteringsvyn (brödtext, inte
   meta — den är ett svar på hennes fråga) och knappen till listan. */
.insyn-logg-rad{color:var(--text);font-size:1rem;line-height:1.5;margin:0 0 .4rem}
#btn-insyn-logg{margin-top:.3rem;min-height:44px}
#insyn-logg-view ul{margin:.4rem 0 0;padding-left:1.2rem}
#insyn-logg-view li{margin:.35rem 0}
/* Läsarläget §6.5: satsytan så nära tryckets som skärmen tillåter — smalare
   mått än manusvyn (34rem ≈ 66 tecken i husets font), luftigare rader, större
   brödtext, inga chip. AaA följer med via --chat-fs (samma som .draft-body). */
#bok-view{max-width:34rem;margin-inline:auto}
#bok-titel{font-size:1.5rem;line-height:1.25;margin:0 0 .9rem;text-wrap:balance}
/* #bok-view-prefixet är specificiteten som gör raden levande: .draft-body p
   står senare i filen och hade annars vunnit på källordning (granskningsfynd
   2026-09-02, mätt i Chromium). */
#bok-view .bok-text p{font-size:calc(var(--chat-fs)*1.06);line-height:1.8;margin:0 0 1.1em;text-wrap:pretty}
#bok-actions .box-row{margin-top:.2rem}

/* 🚩 SVARSRADEN — jämvikten mellan ja och nej (design rev 2 krav 2).
   Lika flex-bas ⇒ lika breda knappar på samma rad; under brytpunkten radbryter
   båda och blir fullbreda — fortfarande lika. Klickytorna MÄTS live, för en
   klassassertion mäter att markupen är sig lik, aldrig att ytorna är jämbördiga.
   Nejet är FYLLT och bordat, aldrig en spökknapp: `.ghost` är transparent och
   det var precis den asymmetrin DPIA:ns R1 pekade ut. */
.svar-rad{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.7rem}
/* 🚩 GENOMSKINLIG KANT PÅ BÅDA — annars är de inte lika höga (eget fynd, mätt
   live). `.btn` har `border:0` och nejet 1,5 px, så på EN rad döljer flexens
   `stretch` skillnaden, men när de RADBRYTER (320 px) blir varje knapp sin egen
   flexlinje och ja blev 54 px mot nejets 56. Jämvikten får inte hänga på att
   knapparna råkar dela rad. Mätt efteråt: 56 = 56 i båda lägena. */
.svar-rad .svar{flex:1 1 11rem;overflow-wrap:anywhere;border:1.5px solid transparent}
/* 🚩 KRAV 6 — NEJET ÄR INTE ANDRAHANDSVALET (leads dom på rev 2:s flagga 1).
   Rev 2 nådde identisk GEOMETRI (kvot 1,000) men gav nejet husets chrome-ton
   (--info-bg), som i ljust tema ligger 1,05:1 från sidan — knappen läste sig
   som en konturknapp bredvid en fylld. DPIA R1 kräver att det ska vara lika
   lätt att LÅTA BLI, och »lika lätt« rymmer lika lätt att UPPTÄCKA.
   Nejet bär nu husets bläck: fylld yta i --text med sidans egen färg som text.
   Ingen ny färgvariabel införs — paret --bg på --text är palettens redan mätta
   brödtextpar, baklänges (13,0:1 ljust · 13,7:1 mörkt). Varken varning eller
   fara: att avstå är inte farligt, och därför aldrig --warn eller --rec. */
.btn.svar-nej{background:var(--text);color:var(--bg);border:1.5px solid var(--text)}
.btn.svar-nej:hover:not(:disabled){opacity:.88}
/* 🚩 NAVIGERINGEN ÄR MINDRE — men aldrig under 44 px träffyta (eget fynd, mätt
   live). »Tillbaka« låg förr i samma `.box-row` som en `.btn` och sträcktes av
   flexens `stretch` till radens höjd; ensam på egen rad föll den till 31 px.
   Att flytta ut den ur svarsraden var rätt, men den fick aldrig kosta träffytan. */
.nav-rad{margin-top:.55rem}
.nav-rad .ghost{min-height:44px;padding:.55rem 1.1rem}

/* 🚩 SMALA BREDDER: valet ska hinna upp i bild (mätt, inte gissat). På 320 px är
   den sticky bottenraden 216 px och läsbandet 448 px — rubriken, den NORMATIVA
   ingressen och lägesrutan tog hela bandet, så valkortet började först vid
   ~480 px. Ingressens ORD är normativa och orörda; dess TYPOGRAFI är det inte.
   Ärlig kvarstående gräns, bokförd i rapporten: på 320 px börjar kortet
   fortfarande nära bandets nedkant och kräver ett kort svep. */
@media (max-width:420px){
  #insyn-title{font-size:1.35rem;line-height:1.25;margin-bottom:.5rem}
  .insyn-ingress{font-size:.95rem;line-height:1.45;margin-block:.6rem}
  #insyn-lage{padding:.75rem .9rem}
  .insyn-kort{margin-top:.75rem;padding:1rem 1rem}
}

/* Krav 6: e-postfallbacken får aldrig spränga ytan — långa adresser bryts. */
#insyn-fraga,#insyn-lage,#insyn-foljd{overflow-wrap:anywhere}

/* ============ Min berättelse-menyn (D9): overlay på smala lägen,
   fast sidopanel på breda landskapslika ytor (brytpunkt nedan). */
#menu-scrim{position:fixed;inset:0;background:rgba(15,15,17,.45);z-index:40}
/* Vänsterdockad fixed panel → gardas mot insets under cover (6e krav 16):
   inset-top + vänster-inset (fysisk vänsterkant). */
#chapter-menu{position:fixed;inset:0 auto 0 0;width:min(86vw,330px);z-index:41;overflow-y:auto;
  background:var(--bg);border-right:1px solid var(--border);
  padding:calc(1rem + env(safe-area-inset-top,0px)) .9rem calc(1rem + env(safe-area-inset-bottom,0px)) max(.9rem,env(safe-area-inset-left,0px))}
#chapter-menu h2{font-size:1.05rem;margin:.2rem 0 .7rem;padding-left:.35rem}
#btn-menu-close{position:absolute;top:calc(.55rem + env(safe-area-inset-top,0px));right:.55rem;min-width:44px;min-height:44px;
  background:transparent;border:0;color:var(--muted);font-size:1.15rem;border-radius:var(--btn-radius)}
#chapter-list{list-style:none;margin:0;padding:0}
/* Vertikal stepper (iter 6f.2 krav 2): varje kapitel är ett KORT på en lodrät
   ryggrad. Noden (pricken) bär POSITIONen; "här är vi nu" får emfas. Kort skiljs
   via fyllnad/ton (aldrig form — delar --btn-radius). §12-andan HÅLLS: noderna är
   POSITIONsmarkörer, ALDRIG procent/progress/bock. Varsamhetsprincipen (menyn-
   test): ett bortvalt kapitel (status 'inte påbörjat') får EXAKT samma nod OCH
   samma platta div-yta som ett ouppnått — steget härleds ur SAMMA status som
   redan kodar det (chapStepState, ren). Nod-tokens är BEFINTLIga, AA-verifierade
   (accent-strong/border-ui mot --bg ≥3:1 i båda teman) — inget nytt färgpar. */
#chapter-list li{position:relative;margin:0 0 .5rem;padding-left:1.75rem}
/* Ryggraden: ett segment från denna nod ned mot nästa (sista kapitlet: inget). */
#chapter-list li:not(:last-child)::before{content:"";position:absolute;left:.5rem;top:1.7rem;bottom:-.35rem;width:2px;background:var(--border)}
/* Noden är förankrad på LI (stabil): current-kortets 4px-kant får aldrig skjuta pricken ur led. */
#chapter-list li::after{content:"";position:absolute;left:.2rem;top:1.05rem;width:.7rem;height:.7rem;
  border-radius:50%;box-sizing:border-box;border:2px solid var(--border-ui);background:var(--bg);z-index:1}
/* Nod-emfas per steg (data-step på LI ur chapStepState): 'current' fylld accent ·
   'visited' fylld DÄMPAD (aldrig success/bock) · 'upcoming' HÅLIG (= bortvalt). */
#chapter-list li[data-step="current"]::after{border-color:var(--accent-strong);background:var(--accent-strong)}
#chapter-list li[data-step="visited"]::after{border-color:var(--border-ui);background:var(--border-ui)}
#chapter-list li[data-step="upcoming"]::after{border-color:var(--border-ui);background:var(--bg)}
/* Kortet: fyllnad + kant = kort (skillnaden är TON, aldrig form). */
.chap-row{position:relative;display:block;width:100%;text-align:left;background:var(--panel-i);
  border:1px solid var(--border);border-radius:var(--btn-radius);padding:.6rem .8rem;min-height:52px;color:var(--text)}
button.chap-row:hover{border-color:var(--muted)}
/* HÄR ÄR VI NU-emfas: accentkant + tjock vänsterkant (padding kompenserad så texten inte hoppar). */
.chap-row.current{border-color:var(--accent);border-left-width:4px;padding-left:calc(.8rem - 3px)}
.chap-title{display:block;font-weight:600;font-size:.95rem;line-height:1.35}
.chap-status{display:block;color:var(--muted);font-size:.8rem;margin-top:.1rem}
.chap-here{display:block;color:var(--accent-strong);font-size:.78rem;font-weight:600;margin-top:.15rem}
/* Framtida/bortvalda kort (div, ej knapp): lugnare — platt yta, dämpad text. */
div.chap-row{color:var(--muted);background:transparent}
div.chap-row .chap-title{font-weight:500}
.chap-draft-link{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--accent-strong);
  font-size:.84rem;font-weight:600;padding:.5rem .7rem .5rem 1rem;min-height:44px;border-radius:var(--btn-radius)}
.chap-draft-link:hover{background:var(--panel-i)}
/* Paus-utgången i menyns TOPP (krav 7b): egen avdelning med en linje UNDER sig
   (den skiljer utgången från kapitellistan) i stället för den gamla botten-
   placeringens linje ovanför. Knappen bär spökknappens höjda kontrast (krav 2)
   och fyller bredden så den är lätt att träffa. */
#menu-pause-row{margin-bottom:.9rem;border-bottom:1px solid var(--border);padding-bottom:.9rem;padding-left:.35rem}
#btn-pause{min-height:48px;width:100%}
/* Manus-ingången (Synlighetspasset fas 2, M1) och ring-ingången (träd-
   expansionen fas 2, K2): läs-handlingarnas accentspråk — samma som kapitel-
   radernas "Läs utkastet →" — i egna avdelningar mellan paus-utgången och
   listan. Paus-raden flyttas INTE från sin beslutade topplats. K2-skillnaden
   bärs av NAMNET ("Människorna i min berättelse" ≠ menyns "Min berättelse"). */
#menu-manuscript-row{border-bottom:1px solid var(--border)}
#menu-people-row{margin-bottom:.9rem;border-bottom:1px solid var(--border);padding-bottom:.35rem}
#btn-manuscript,#btn-people{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--accent-strong);
  font-size:.92rem;font-weight:600;padding:.6rem .35rem;min-height:48px;border-radius:var(--btn-radius)}
#btn-manuscript:hover,#btn-people:hover{background:var(--panel-i)}

/* Sidopanelsbrytpunkten (E13, dokumenterat val): ≥1024 px OCH landskapslik yta
   (aspect > 23/20). Kvadratiska fold-uppfällda lägen (~1:1) får ALDRIG
   desktop-mönstret (E14). 6d: innehållet (scrollytan med sticky topprad +
   composer) centrerar sin kolumn i ytan HÖGER om panelen — §5-ankringsregeln. */
@media (min-width:1024px) and (min-aspect-ratio:23/20){
  /* KOLLAPSBAR panel (6f.2 A-efterputs krav 8, Darios iPad-fynd): master-detail
     gäller bara när panelen är ÖPPEN. Stängd → en enda kolumn, och .col centrerar
     samtalet i FULL viewport-bredd. Tidigare tog panelen ALLTID sin spalt, så
     samtalskolumnen hamnade höger om skärmens mitt och drog blicken dit.
     ☰ är SAMMA toggle som på mobil — mönstret återanvänds, inget nytt byggs, och
     mobilens drawer-beteende är oförändrat (den här regeln gäller bara ≥1024px
     landskapslika ytor). Därför är #btn-menu och ✕ inte längre dolda här. */
  #chat-shell.menu-docked.panel-open{grid-template-columns:minmax(264px,320px) minmax(0,1fr)}
  #chat-shell.menu-docked.panel-open #chapter-menu{display:block;position:static;width:auto;
    border-right:1px solid var(--border);z-index:auto}
  /* Scrim hör till overlay-läget (smala skärmar) — aldrig på dockade bredder. */
  #chat-shell.menu-docked #menu-scrim{display:none}
}

/* Desktop/stor skärm (iter 6f.2 krav 4): (a) composern LYFTS från bottenkanten —
   composer-raden får mer luft under sig INOM glasbaren (baren bleedar fortsatt
   till kanten, glasprincipen orörd) · (b) uniform vertikal padding — header→
   första bubblan (chat-main topp) = sista bubblan→composern (chat-main botten +
   composer-topp). Keyboard-clearancen (6e1) är mobil (max-width långt under detta)
   och rörs aldrig; safe-area-inset-bottom är 0 på desktop → lyftet är rent. */
@media (min-width:1024px){
  #chat-main>.col{padding-block:1.15rem 1.15rem}
  #chat-bottom .col{padding-block:1.15rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
}

/* ============ Kapitelutkastet — ÄRVER samtalets chrome (8b): samma topprad,
   tema, AaA (brödtexten följer --chat-fs) och kolumntak. ============ */
#draft-view h2{font-size:1.45rem;margin:0 0 .15rem;text-wrap:balance}
.draft-meta{color:var(--muted);font-size:.85rem;margin:0 0 .4rem}
.ai-line{color:var(--muted);font-size:.86rem;margin:.2rem 0 1rem}
.gate-line{color:var(--muted);font-size:.9rem;margin:.2rem 0 .9rem}
.draft-body p{font-size:calc(var(--chat-fs)*1.02);line-height:1.75;margin:0 0 1em}
/* Utkastets kort är husets sammanfattande röst → svala kanten (6d fynd 35). */
.draft-box{border:1px solid var(--border);border-left:2px solid var(--edge-i);background:var(--panel-i);border-radius:.8rem;padding:1rem 1.15rem;margin:1.1rem 0}
.draft-box h3{margin:0 0 .5rem;font-size:1rem}
.draft-box ul{margin:.2rem 0 0;padding-left:1.2rem}
.draft-box li{margin:.4rem 0;font-size:calc(var(--chat-fs)*0.92)}
/* Trådrutans underrubrik i SAMTALSVYN (v2.7 §2 D). Dämpad med flit: raden
   förklarar att listan är hennes egen och frivillig, och ska läsas som en
   vänlig upplysning — inte som en instruktion ovanför en uppgiftslista. */
.thread-lead{margin:0 0 .5rem;color:var(--muted);font-size:calc(var(--chat-fs)*0.88)}
/* Citaten är BERÄTTARENS ord — varma kanten (6d-kantspråket). */
.draft-quote{border-left:2px solid var(--edge-n);padding:.15rem 0 .15rem .8rem;margin:.6rem 0;
  font-style:italic;font-size:calc(var(--chat-fs)*0.95)}
#draft-actions .box-row{margin-top:.2rem}

/* ============ Manusvyn (Synlighetspasset fas 2): hela utkastet som EN läsning —
   ärver chromen och kapitelutkastets läs-typografi (.draft-body återanvänds,
   AaA följer med). INTE boksteget: läsro med husets röst, ingen typografi-
   ambition. Kapitel utan utkast har sin egen dämpade rad (M4). ============ */
/* Ankaret (bokexporten fas 1): "3·12" i styckets början. DISKRET är kravet —
   mindre grad, dämpad färg, litet indrag till texten; nowrap så numret aldrig
   bryts mitt i. Informationen bärs av SIFFRORNA (text), aldrig av färgen
   ensam. --muted är AA-mätt i båda teman (5.36:1 ljust · 7.02:1 mörkt, båda
   ≥ 4.5:1) — samma färg som ms-kicker, så ankaret läser som samma familj av
   stillsam meta. inline: ingen float, ingen absolut position — radflödet och
   h-scroll kan inte påverkas. */
.msa{color:var(--muted);font-size:.74em;margin-right:.55em;letter-spacing:.02em;white-space:nowrap}

/* ============ Marginalanteckningarna (bokexporten fas 2a, 2026-08-18) ======
   Hennes marginal, aldrig en uppgiftslista: inga räknare, inga prickar, ingen
   uppmaning. Ankarchipen ÄR greppet — knappformen ärver .msa:s exakta
   typografi (noll ny visuell vikt per stycke); affordansen bärs av hintraden
   (.ms-hint, people-hint-klassens roll) + understrykning på hover/fokus.
   KANTREGELN: grupperingen not↔stycke bärs av NÄRHET + indrag, så vänster-
   linjen är DEKORATIV — mäts ändå: --border-ui 3,13:1 (ljust) · 5,07:1
   (mörkt) mot bg. Fältkanten däremot ÄR ensam bärare av fältets avgränsning
   → mörkt tema får --field-ring precis som #answer (uppmätt ≈7,9:1 mot
   fält-bg). Textfärgerna är befintliga uppmätta par (--text 13,0/9,13:1 ·
   --muted 5,36/4,69:1 mot bg) — passet inför INGA nya färgvariabler. */
/* Chipen som PILL (Darios styrning under passet): ett naket siffer-chip läser
   som text, och hover finns inte på pekskärm — pillerkanten är appens
   etablerade "här kan man trycka"-signal (persona-chip/stt-chip-familjen).
   Kanten är därmed komponentens ENDA avgränsare → KANTREGELN kräver 3:1:
   --border-ui är mätt 3,13:1 (ljust) · 5,07:1 (mörkt) mot bg. Träffytan
   höjs med fyllnaden; typografin är kvar i .msa:s lågmälda familj. */
button.msa{background:transparent;border:1px solid var(--border-ui);border-radius:999px;
  padding:.12em .6em;font-family:inherit;cursor:pointer;line-height:1.4}
button.msa:hover,button.msa:focus-visible{background:var(--panel-i);color:var(--text)}
.ms-hint{color:var(--muted);font-size:.85rem;margin:.1rem 0 1rem}
.ms-noter{margin:-.4rem 0 1.1rem;padding:0 0 0 .9rem;border-left:2px solid var(--border-ui)}
.ms-not{margin:.55rem 0}
.ms-not-text{margin:0;font-size:.95em;color:var(--text)}
.ms-not-struken .ms-not-text{text-decoration:line-through;color:var(--muted)}
.ms-not-text.ms-not-olasbar{font-style:italic;color:var(--muted)}
.ms-not-rad{margin:.15rem 0 0;color:var(--muted);font-size:.8rem;display:flex;gap:1rem;align-items:center}
.ms-not-knapp{background:none;border:0;padding:0;font:inherit;font-size:.8rem;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.ms-not-knapp:hover,.ms-not-knapp:focus-visible{color:var(--text)}
.ms-not-angra{margin:.55rem 0;color:var(--muted);font-size:.9em}
.ms-not-lucka{margin:0 0 .1rem;color:var(--muted);font-size:.8rem}
.ms-not-form{margin:.55rem 0}
.ms-not-falt{width:100%;box-sizing:border-box;font:inherit;font-size:.95em;line-height:1.5;color:var(--text);
  background:var(--ta-bg);border:1px solid var(--border-ui);border-radius:10px;padding:.55rem .7rem;resize:vertical}
:root[data-theme="dark"] .ms-not-falt{border-color:var(--field-ring)}
.ms-not-knappar{display:flex;gap:.6rem;margin-top:.45rem}
.ms-not-knappar .ghost{padding:.5rem 1.1rem}

/* ---- De två stilla handlingarna (bokexporten fas 2b, 2026-08-19) ---------
   Hennes anteckning kan bli två saker och hon säger själv vilken. Formen är
   fas 2a:s: tryck → lugn ruta. Inget som jagar — ingen färgprick, ingen röd
   ton, ingen rörelse; även FELET talar i vanlig textfärg, eftersom ett larm
   som skriker inte gör en 85-åring klokare, bara räddare.
   KANTREGELN, utskriven per par:
     · .ms-not-handling — pillerkanten är knappens ENDA avgränsare (samma
       beslut och samma skäl som button.msa: hover finns inte på pekskärm)
       ⇒ BÄRANDE, krav 3:1. --border-ui mot --bg: 3,13:1 ljust · 5,07:1 mörkt.
     · .ms-not-ruta — rutans fyllnad (--info-bg) skiljer sig bara ~1,05:1 från
       bg i ljust tema (Väg B är medvetet lågkontrast), så fyllnaden bär INTE
       avgränsningen på egen hand ⇒ kanten klassas BÄRANDE, krav 3:1.
       --border-ui mot --info-bg 3,36:1 ljust; mörkt mätt i sviten.
   Inga nya färgvariabler införs — allt är befintliga, uppmätta par.
   TRÄFFYTAN: handlingsknapparna är de enda i marginalen som utför något
   irreversibelt-ish (en ny version), och får därför full 44 px höjd — de små
   meta-länkarna (klar/stryk/ta bort) står kvar i fas 2a:s form. */
.ms-not-handlingar{margin:.45rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.ms-not-handling{display:inline-flex;align-items:center;min-height:44px;
  background:transparent;border:1px solid var(--border-ui);border-radius:999px;
  padding:.35rem 1rem;font:inherit;font-size:.92rem;color:var(--text);cursor:pointer;line-height:1.4}
.ms-not-handling:hover,.ms-not-handling:focus-visible{background:var(--panel-i)}
.ms-not-ruta{margin:.5rem 0 0;background:var(--info-bg);border:1px solid var(--border-ui);
  border-radius:12px;padding:.7rem .85rem}
.ms-not-ruta-text{margin:0;color:var(--text);font-size:.95rem;line-height:1.55}
.ms-not-ruta-text:focus{outline:none}
.ms-not-ruta .ms-not-knappar{margin-top:.6rem}
.ms-not-vantar{margin:.6rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.5}
.ms-not-vald{margin:.35rem 0 0;color:var(--muted);font-size:.9rem}
.ms-not-fel{margin:.5rem 0 0;color:var(--text);font-size:.92rem;line-height:1.5}
.ms-not-kvittens{margin:0 0 .5rem;color:var(--text);font-size:.92rem}

.ms-chapter{margin:0 0 2.4rem}
.ms-chapter:last-child{margin-bottom:.6rem}
.ms-kicker{color:var(--muted);font-size:.84rem;letter-spacing:.03em;margin:0 0 .15rem}
.ms-chapter h3{font-size:1.3rem;margin:0 0 .5rem;text-wrap:balance}
.ms-none{color:var(--muted);font-style:italic;margin:.1rem 0 0}
#ms-actions .box-row{margin-top:.2rem}

/* ============ Ringvyn (trädexpansionen fas 2 + Trädputsen): människorna i
   berättelsen — koncentriska ringar i INLINE-SVG (CSS-variablerna gäller,
   temat följer med). P2 (Darios ord, överstyr K7-uppskjutningen): kartan är
   CENTRERAD i en viewport med enkel pan/zoom — hjul/pinch/drag, dubbelklick
   återställer. K7:s fulla gruppering/navigering förblir portalfas. */
.people-scroll{overflow:hidden;margin:.3rem 0 1rem;touch-action:none;cursor:grab;
  height:min(64svh,560px);border:1px solid var(--border);border-radius:.8rem;background:var(--bg)}
.people-scroll.pn-drar{cursor:grabbing}
/* Q4 (Trädputsen 2): kartan nyttjar desktopytan — kolumnen släpper sitt tak
   NÄR ringvyn är öppen (klass på skalet; toppradens kolumn orörd) och
   viewporten växer. Mobilanpassningen är exakt som förr. */
#chat-shell.people-open #chat-main>.col{max-width:min(1560px,100%)}
@media (min-width:1024px){
  /* DESKTOP-HÖJDEN (kalibreringsmini 2, Darios fynd 4): på en 27-tumsskärm låg
     taket 860px och rutan använde bara 60 % av fönsterhöjden — mätt — medan det
     fanns gott om yta under kortet. Regeln är nu viewport-driven (husets
     etablerade klass) MEN skriven så att den ALDRIG kan ge mindre än den gamla:
     max() av gamla uttrycket och det nya. Det är därför korta fönster inte kan
     tappa höjd av en ändring som handlar om stora. 13rem är chrome-utrymmet
     (topprad + hjälprad + knapp + marginaler), mätt i browsern, inte gissat.
     Mobil/smal formfaktor rörs inte — regeln bor kvar innanför 1024px-frågan. */
  /* 🚩 RUTHÖJDEN HÄRLEDS UR LAYOUTFLÖDET — ingen konstant kan ljuga igen.
     ROTEN till att hjälpraden täcktes (Darios live-fynd): #chat-bottom är
     position:sticky, och #chat-main var flex:1 0 auto — alltså kunde INTE
     krympa. Blev innehållet högre än rutan lade sig den klistrade botten
     ÖVER slutet av flödet, och slutet av flödet är hjälpraden. Ett räknat
     chrome-avdrag (13rem) fungerade i min e2e-viewport och föll i ett verkligt
     fönster, precis som flaggan varnade: talet var mätt, inte härlett.
     Nu får kortet det som BLIR ÖVER när topprad, hjälprad och knapp fått sitt.
     Kedjan måste vara obruten — varje led både flexbehållare och krympbart
     flexbarn (min-height:0), annars ärver inte höjden hela vägen ned. */
  #chat-shell.people-open #chat-main{flex:1 1 auto;min-height:0}
  #chat-shell.people-open #chat-main>.col{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  #chat-shell.people-open #people-view{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  #chat-shell.people-open .people-scroll{flex:1 1 auto;min-height:22rem;height:auto}
}
#people-svg{display:block;width:100%;height:100%}
#people-empty{color:var(--muted);margin:.4rem 0 1rem}

/* VÄNTRUMMET (V2): varm, lugn yta medan kapitlets första fråga skrivs.
   Husets info-ton, inte en systemruta. Punkterna pulserar mjukt — ALDRIG en
   snurra och aldrig en procentsiffra: båda talar om maskinen, och det är
   precis vad V3 förbjuder. Texten bär --text mot --info-bg (mätt i
   vantrum-test, båda teman); punkterna är dekor och bär ingen information. */
#wait-room{background:var(--info-bg);border:1px solid var(--border-ui);
  border-radius:var(--btn-radius);padding:1.1rem 1.25rem;margin:1.2rem auto;
  max-width:30rem;text-align:center}
#wait-text{color:var(--text);font-size:1.06rem;line-height:1.5;margin:0}
#wait-more{color:var(--muted);font-size:.95rem;margin:.7rem 0 0}
.wait-dots{display:inline-flex;gap:.42rem;margin-top:.85rem}
.wait-dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--muted);
  opacity:.35;animation:wait-puls 1.4s ease-in-out infinite}
.wait-dots i:nth-child(2){animation-delay:.18s}
.wait-dots i:nth-child(3){animation-delay:.36s}
@keyframes wait-puls{0%,100%{opacity:.28;transform:translateY(0)}
  50%{opacity:.85;transform:translateY(-.18rem)}}
/* Rörelsekänslighet: punkterna står stilla men syns — vyn får aldrig bli tom
   av att någon stängt av rörelse. */
@media (prefers-reduced-motion: reduce){
  .wait-dots i{animation:none;opacity:.6}
}
/* Hjälpraden under kartan (kalibreringsminin): när utsnittet väljs av
   läsbarheten kan kartan sträcka sig utanför rutan, och då måste det STÅ hur
   man når resten. Det är COPY, inte en kontroll — K3:s läs-bara karta har
   fortfarande exakt en knapp (tillbaka). */
#people-hint{color:var(--muted);font-size:.92rem;margin:.1rem 0 1rem;text-align:center}
/* P3: subtila ringfärger per generationsring — FÖRSTÄRKNING (avstånd och
   etikett bär betydelsen ensamma), men mätta till ≥3:1 mot --bg i BÅDA teman
   (ringvy-testet räknar kontrasten ur just de här värdena — ändra aldrig
   färg utan att testet får döma). Fyra toner, cyklar för ring 5+. */
:root{--ring-c1:#9c5f45;--ring-c2:#6b6b33;--ring-c3:#4a6288;--ring-c4:#7d4a6e}
:root[data-theme="dark"]{--ring-c1:#d29a7f;--ring-c2:#b3b36a;--ring-c3:#8fa8d6;--ring-c4:#c88fb6}
.pn-ring{stroke:var(--border)}
.pn-ring.pn-ring-1{stroke:var(--ring-c1)}
.pn-ring.pn-ring-2{stroke:var(--ring-c2)}
.pn-ring.pn-ring-3{stroke:var(--ring-c3)}
.pn-ring.pn-ring-4{stroke:var(--ring-c4)}
.pn-line{stroke:var(--muted);stroke-width:1.4;opacity:.55}
/* Grenlinjen (Trädform 2.0): ankare → rubriknod → medlem. Samma färg som
   övriga kanter men heldragen och något tydligare — den bär en GRUPP, inte
   en enskild relation, och ska läsas som stammen den är. */
.pn-line.pn-line-gren{opacity:.75;stroke-width:1.6}
/* Ledarlinjen: knyter ihop en etikett med sin nod nar trappan lyft undan den.
   Avsiktligt SVAGARE an relationskanterna - den bar ingen relation, bara en
   blick. Ingen kontrasttroskel: den ar dekorativ, informationen (kopplingen)
   finns ocksa i narheten, i <title> och i nodens egen ordning. */
.pn-ledare{stroke:var(--muted);stroke-width:1;opacity:.34}
.pn-nod{fill:var(--panel-i);stroke:var(--border-ui);stroke-width:1.6}
.pn-nod.pn-narrator{fill:var(--accent);stroke:var(--accent-strong)}
/* TÄND person = FYLLD i generationens färg (kalibreringsminin, Darios fynd 2).
   Den gamla panelfyllnaden låg nästan ovanpå bakgrunden i mörkt tema och gav
   noderna hål-intryck. Ringfärgerna är redan AA-räknade mot --bg i BÅDA teman
   (≥ 3:1, WCAG 1.4.11 grafiska objekt) och fungerar därför lika bra som
   FYLLNAD som de gör som ring — fyllnaden är nu nodens enda avgränsningsbärare
   och faller under samma tröskel. Räknas i ringvy-testet, per färg och tema. */
.pn-nod.pn-gen-1{fill:var(--ring-c1)}
.pn-nod.pn-gen-2{fill:var(--ring-c2)}
.pn-nod.pn-gen-3{fill:var(--ring-c3)}
.pn-nod.pn-gen-4{fill:var(--ring-c4)}
/* D5 — TÄND-TRAPPANS mellansteg. DIMMAD = grundad men namnlös: diskret,
   streckad, liten, med kursiv parentesetikett. Ärver Trädputsen 2:s
   mellannods-semantik och gäller sedan Trädform 2.0 VARJE namnlös position,
   inte bara bryggorna — trappan har tre steg, inte fyra. G1: en tom cirkel i
   personstil hade lästs som "okänd människa", och det är precis vad den
   dimmade formen INTE gör. FRÅNVARANDE har ingen stil alls: ingen ruta finns. */
.pn-nod.pn-dimmad{fill:var(--bg);stroke:var(--border-ui);stroke-dasharray:3 3;stroke-width:1.3}
.pn-mellanetikett{fill:var(--muted);font-size:16px;font-style:italic;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
/* D4 — RUBRIKNODEN. Visuellt en HELT ANNAN SAK än både personnoden (fylld
   cirkel) och den dimmade positionen (liten streckad cirkel): en avrundad
   platta med etikett + antal. Formskillnaden är avsiktlig och bärande — en
   rubrik är layout, aldrig en människa, och får aldrig kunna förväxlas med en.
   Färgerna är BEFINTLIGA tokens med redan mätta par (--info-bg-ytan: --text
   13,93:1 ljust / 9,13:1 mörkt; --border-ui-kanten 3,36:1 ljust / 3,39:1
   mörkt mot ytan) — plattans kant är ENDA bäraren av dess avgränsning och
   faller därmed under kantregelns 3:1. Inga nya färgvariabler infördes. */
.pn-rubrik{cursor:pointer}
.pn-rubrik-platta{fill:var(--info-bg);stroke:var(--border-ui);stroke-width:1.4}
.pn-rubriketikett{fill:var(--text);font-size:15px;font-weight:600;pointer-events:none}
.pn-rubrik.pn-rubrik-hopfalld .pn-rubrik-platta{stroke-dasharray:5 3}
.pn-rubrik:focus-visible{outline:none}
.pn-rubrik:focus-visible .pn-rubrik-platta{stroke:var(--accent-strong);stroke-width:3}
/* Text-halo (ögonrundans linje-genom-etikett-fynd): bg-färgad kontur UNDER
   glyferna (paint-order) gör etiketten läsbar även där en kantlinje passerar. */
.pn-namn{fill:var(--text);font-size:20px;font-weight:600;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.pn-term{fill:var(--muted);font-size:17px;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.pn-sektor{fill:var(--muted);font-size:17px;letter-spacing:.05em}
#people-actions .box-row{margin-top:.2rem}

/* ── ÅTERKALLELSEN (art. 7.3, krav 5–6) ─────────────────────────────────────
   INGEN NY FÄRGVARIABEL, med avsikt. En fylld röd knapp hade krävt en egen
   textton per tema (vit på --rec klarar 7,10:1 i ljust men bara ~2,1:1 i mörkt),
   alltså ett nytt par som måste in i apptema-testets PAR-tabell. Tydligheten i
   den här vyn ligger i TEXTEN och i kryssrutan — aldrig i färgen. Knappen är
   husets vanliga primärknapp (blå + vit, 6,69:1 i båda teman).
   `.danger-text` används ENDAST som text på --bg: 5,88:1 i ljust · 8,4:1 i
   mörkt — båda över 4,5:1 utan att röra paletten. */
/* 🚩 SPECIFICITET, inte källordning: `button.ghost` (0-1-1) sätter color och
   slår en ren `.danger-text` (0-1-0) oavsett var den står. Den första formen såg
   rätt ut i källan och hade INGEN verkan — mätt på COMPUTED color i browsern
   (både ljust och mörkt gav samma ton som en vanlig knapp). Ett källtextlås som
   bara letar efter regeln hade varit grönt hela tiden; därför mäts den här
   raden numera på det renderade värdet, inte på att den finns. */
button.danger-text{color:var(--rec)}

/* `.setting-block` är BORTTAGEN (tillägg 3, 2026-08-28): grupperingen "Ta
   tillbaka ditt ja" ersattes av dörren "Din berättelse", och klassen har noll
   förekomster i markupen. En kvarlämnad regel utan yta är en fälla för nästa
   läsare — den ser ut att styra något. */

#revoke-view h2{font-size:1.15rem;margin:.2rem 0 .6rem}
#revoke-view ul{margin:.6rem 0 1rem;padding-left:1.2rem}
#revoke-view li{margin:.45rem 0}

/* Kryssrutan: 44 px träffyta (samma golv som resten av berättarytan) och
   etiketten klickbar — hon ska inte behöva träffa en 13-pixelsruta. */
.confirm-row{display:flex;align-items:flex-start;gap:.7rem;margin:.9rem 0}
.confirm-row input[type="checkbox"]{width:1.4rem;height:1.4rem;margin:.15rem 0 0;flex:0 0 auto;accent-color:var(--accent-strong)}
.confirm-row label{cursor:pointer;min-height:44px;display:flex;align-items:center}

#revoke-export-box p{margin:.2rem 0 .6rem}
#erasure-box p{margin:.2rem 0}