/* ARBETSLJUS. Formen från Designteamets grafiker 2026-09-30, vald av Andreas
   samma dag. Referensen är en läsrepetition sent på kvällen: rummet är svalt
   och mörkt, manuset är varmt papper i Courier, och en enda varm lampa visar
   var du är och vad du gör härnäst.

   Två regler bär hela formen.
   LJUSREGELN: --ljus används till fyra saker och inget annat: nästa handling,
   din roll, din replik och fokus. Aldrig dekor, länkar eller varningar.
   TYPSNITTSREGELN: allt som står i manuset sätts i Courier, allt appen själv
   säger i systemets typsnitt. Namnet MOTLÄSARE sätts som ett rollnamn, för
   det är vad appen är.

   Kontrasterna är räknade av grafikern och mätta på skärm efter bygget:
   text 14,1:1, dov 7,3:1, ljus 9,0:1, kant 3,7:1 mot rummet. */
:root {
  color-scheme: dark;

  /* Rummet, ytorna och linjerna */
  --rum: #141517;
  --yta: #1D1F22;
  --yta-vald: #26292D;
  --linje: #2E3135;
  --kant: #6C7076;

  /* Papperet */
  --text: #E8E1D4;
  --dov: #A9A398;

  /* Ljuset, det enda varma */
  --ljus: #E2AC62;
  --ljus-svag: rgba(226, 172, 98, .08);
  --text-mork: #141517;

  /* Status */
  --fel: #EE8D7A;
  --ok: #93C29B;

  /* Typsnitt */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-manus: "Courier New", Courier, monospace;

  /* Typskala, fem steg */
  --t-fot: .875rem;      /* 14 px */
  --t-brod: 1.0625rem;   /* 17 px */
  --t-mellan: 1.3125rem; /* 21 px */
  --t-rubrik: 1.625rem;  /* 26 px */
  --t-titel: 2rem;       /* 32 px */

  /* Avstånd, bas 4 px */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --radie: 4px;
  --spalt: 34rem;      /* vy 1 och 2 */
  --scenspalt: 30rem;  /* pluggläget, runt 38 tecken i 21 px Courier */

  /* Stödrutan är en gemensam mall som läser värdsidans variabler under sina
     EGNA namn. --accent får ALDRIG vara ljuset: mallen skriver vit text på
     den, och vit på ljuset ger 2,0:1. Mässingen håller 5,9:1. */
  --ram: var(--linje);
  --text-dampad: var(--dov);
  --accent: #8A5A1C;
  --radie-kort: var(--radie);
  --serif: var(--font-ui);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 56px; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--rum);
  color: var(--text);
  font: 400 var(--t-brod)/1.5 var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
}
[hidden] { display: none !important; }
main { max-width: var(--spalt); margin: 0 auto; padding: var(--s4) var(--s5) var(--s7); }
:focus-visible { outline: 2px solid var(--ljus); outline-offset: 2px; }
::placeholder { color: var(--dov); opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
/* Bara för skärmläsaren: skärmläsarens rop, den dolda replikens besked och
   pluggvyns rubrik. Syns aldrig, läses alltid. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- ord och text ---------- */

/* Ordmärket sätts som ett rollnamn. Scopat till startsidan: rollvalet och
   integritetssidan har också h1, med klassen rubrik2. */
#vy-manus > h1 {
  font: 700 var(--t-titel)/1.05 var(--font-manus);
  letter-spacing: .06em; text-transform: uppercase;
  margin: var(--s4) 0 var(--s3);
}
.ingress { color: var(--dov); margin: 0 0 var(--s6); }
h1.rubrik2 { font-size: var(--t-rubrik); line-height: 1.15; font-weight: 600; margin: var(--s2) 0 var(--s2); }
h2.rubrik2 { font-size: var(--t-mellan); line-height: 1.2; font-weight: 600; }
label { display: block; font-weight: 600; margin: 0 0 var(--s2); }
.finstilt { color: var(--dov); font-size: var(--t-fot); line-height: 1.45; }
.tajt { margin: 0; }
.vikt400 { font-weight: 400; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--kant); text-underline-offset: .15em; }
a:visited { color: var(--text); }

/* ---------- fält och knappar ---------- */

textarea {
  width: 100%; min-height: 8rem;
  background: var(--yta); color: var(--text);
  border: 1px solid var(--kant); border-radius: var(--radie);
  padding: var(--s3); font: 400 var(--t-brod)/1.45 var(--font-manus);
  resize: vertical;
}
select {
  font: inherit; background: var(--yta); color: var(--text);
  border: 1px solid var(--kant); border-radius: var(--radie);
  padding: var(--s2) var(--s3); min-height: 44px; max-width: 100%;
}
button {
  font: inherit; cursor: pointer; border-radius: var(--radie);
  border: 1px solid var(--kant); background: transparent; color: var(--text);
  padding: var(--s3) var(--s4); min-height: 44px;
}
button:hover { background: var(--yta-vald); }
/* Primärknappen är lampan: nästa handling. */
button.primar {
  background: var(--ljus); border-color: var(--ljus); color: var(--text-mork);
  font-weight: 600; width: 100%; padding: var(--s3) var(--s4); min-height: 56px;
}
button.primar:hover { background: var(--ljus); filter: brightness(1.06); }
/* Släckt, inte trasig: tills en roll är vald. */
button.primar:disabled,
button.primar[aria-disabled="true"] { background: var(--yta); border-color: var(--yta); color: var(--dov); cursor: default; filter: none; }
button.lank {
  border: none; background: none; color: var(--dov);
  text-decoration: underline; text-decoration-color: var(--kant); text-underline-offset: .15em;
  padding: var(--s2) var(--s1); min-height: 44px;
}
button.lank:hover { color: var(--text); background: none; }
.rad { margin: var(--s4) 0; }
.valrad { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s3) 0; }
/* Inställningarna är tystare än rollkorten: två magröster sa oberoende att
   kryssrutornas text stal blicken från valet. */
.kryss { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s4) 0; color: var(--dov); }
.kryss input { width: 24px; height: 24px; margin: 0; accent-color: var(--ljus); flex: none; }
.kryss input:checked + label { color: var(--text); }
.besked {
  background: var(--yta); border-left: 3px solid var(--kant);
  border-radius: 0 var(--radie) var(--radie) 0; padding: var(--s3) var(--s4); margin: var(--s4) 0;
}
.besked.ok { border-left-color: var(--ok); }
.besked.fel { border-left-color: var(--fel); }
/* Felbeskedet om roller visar ett exempelmanus med radbrytningar. */
#manusfel { white-space: pre-line; }
/* En tom live-ruta tar ingen plats men FINNS, alltså renderad. En region som
   tänds ur display:none samtidigt som texten skrivs blir ofta tyst. */
.besked:empty { margin: 0; padding: 0; border: 0; min-height: 0; background: none; }

/* ---------- vy 1: startsidan ---------- */

.kontorad {
  display: flex; justify-content: flex-end; align-items: center;
  gap: var(--s3); min-height: 44px; margin: calc(-1 * var(--s2)) 0 0;
}
.kontorad .finstilt { margin: 0; }

/* Demokortet visar produkten före frågan: en motreplik som läses upp och en
   egen replik som luckor. Hela kortet är EN knapp, och det enda varma på
   sidan är dess handlingsrad. Förhandsvisningen är dold för skärmläsare, så
   knappens namn är exakt den synliga etiketten. */
.demokort {
  display: block; width: 100%; padding: 0; text-align: left;
  background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie);
  overflow: hidden; margin: 0 0 var(--s6);
}
.demokort:hover { background: var(--yta); }
.demokort:hover .demokort-handling { filter: brightness(1.06); }
.forhandsvisning { display: block; padding: var(--s4) var(--s4) var(--s4); font-family: var(--font-manus); }
.forhandsvisning .replik { display: block; margin: 0 0 var(--s4); color: var(--text); font-size: var(--t-brod); }
.forhandsvisning .replik .vem { display: flex; align-items: center; gap: var(--s2); }
.forhandsvisning .replik .vad { display: block; }
.forhandsvisning .replik:last-child { margin-bottom: 0; }
.forhandsvisning .replik.min .vem { color: var(--ljus); }
.chip {
  display: inline-block; margin-left: 0; padding: .1em .55em;
  font: 400 var(--t-fot)/1.4 var(--font-ui); letter-spacing: 0; text-transform: none;
  border-radius: 999px; border: 1px solid var(--kant); color: var(--dov); vertical-align: middle;
}
.chip.tur { border-color: var(--ljus); color: var(--ljus); }
.demokort-handling {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--ljus); color: var(--text-mork); font-weight: 600;
  min-height: 56px; padding: var(--s3) var(--s4);
}

.grupprubrik { font: 600 var(--t-brod)/1.3 var(--font-ui); margin: 0 0 var(--s3); }
.grupp { margin: 0 0 var(--s5); }
.grupp .valrad { margin: 0 0 var(--s4); }
#filknapp { width: 100%; }
.grupp textarea { min-height: 6.5rem; }
.grupp label.vikt400 { color: var(--dov); font-weight: 400; margin-top: var(--s2); }
#lasin { margin-top: var(--s3); }
/* Bildläsningens förlopp (ocr.b4f976b70a.js). Layouten står i ocr.css, färgen här så alla
   tokens bor på ett ställe. Mätaren är lampan: den visar nästa handling
   hända. Spåret är en kant med 3:1 mot rummet (F71). */
.bildlasning progress { accent-color: var(--ljus); border-radius: 999px; overflow: hidden; }
.bildlasning progress::-webkit-progress-bar { background: var(--yta); border: 1px solid var(--kant); border-radius: 999px; }
.bildlasning progress::-webkit-progress-value { background: var(--ljus); border-radius: 999px; }
.bildlasning progress::-moz-progress-bar { background: var(--ljus); border-radius: 999px; }
.grupp .fortroende { margin: 0 0 var(--s4); }

/* Vanliga frågor: egna rader, inte webbläsarens triangel. */
.faq { margin-top: var(--s7); }
.faq h2 {
  font: 600 var(--t-fot)/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dov); margin: 0;
}
details { color: var(--dov); }
.faq details, .rattning { border-bottom: 1px solid var(--linje); }
summary { cursor: pointer; color: var(--text); list-style: none; }
summary::-webkit-details-marker { display: none; }
.faq summary, .rattning summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 48px; padding: var(--s2) 0; color: var(--text);
}
.faq summary::after, .rattning summary::after {
  content: "+"; color: var(--dov); font-size: 1.3em; line-height: 1; flex: none;
}
.faq details[open] summary::after, .rattning[open] summary::after { content: "\2212"; }
.faq details p { color: var(--dov); line-height: 1.55; margin: var(--s2) 0 var(--s4); }
.sidfot { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--linje); }

/* ---------- vy 2: rollvalet ---------- */

.kvitto { color: var(--dov); margin: var(--s1) 0 var(--s5); }
.roller { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s2); }
.roller li { margin: 0; }
/* Ramen ligger genomskinlig på alla kort från början, så ingenting hoppar
   när en roll väljs. Vald roll får lampan: ram och en svag varm botten. */
.rollval {
  width: 100%; text-align: left; display: grid; gap: var(--s1);
  background: var(--yta); border: 2px solid transparent; border-radius: var(--radie);
  padding: calc(var(--s4) - 2px);
}
.rollval:hover { background: var(--yta-vald); }
.rollval[aria-pressed="true"] { background: var(--ljus-svag); border-color: var(--ljus); }
.rollval.kalla { border-color: var(--ljus); border-style: dashed; }
.rollrad { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; }
.rollnamn { display: flex; align-items: center; gap: var(--s3); font: 700 var(--t-brod)/1.3 var(--font-manus); letter-spacing: .06em; text-transform: uppercase; min-width: 0; }
.rollantal { color: var(--dov); font-size: var(--t-fot); white-space: nowrap; flex: none; }
/* Exempelrepliken får bryta rad. Med ellips såg en seende på 375 px bara 24 av
   de 60 tecknen och kunde inte nå resten, medan skärmläsaren fick allt. */
.rollex {
  color: var(--dov); font: 400 var(--t-brod)/1.4 var(--font-manus);
  overflow-wrap: anywhere; padding-left: calc(18px + var(--s3));
}
/* Kryssrutan ritas i CSS. Tecknet appen skriver i span.radio göms. En ring
   lovar att man bara får välja en, och en ensemble väljer flera (2026-10-02),
   så rutan är en fyrkant med bock. */
.radio {
  flex: none; width: 18px; height: 18px; font-size: 0;
  border-radius: 4px; border: 2px solid var(--kant);
  display: grid; place-items: center;
}
.rollval[aria-pressed="true"] .radio {
  border-color: var(--ljus);
  background: var(--ljus);
}
.rollval[aria-pressed="true"] .radio::after {
  content: "✓"; font-size: 13px; line-height: 1; font-weight: 700; color: var(--rum);
}
.rollval.kalla .radio { border-color: var(--ljus); border-style: dashed; }
/* I högkontrastläge tvingas färgerna och bakgrunden försvinner. Bocken och
   den tjocka ramen överlever. */
@media (forced-colors: active) {
  .rollval[aria-pressed="true"] .radio { border-width: 4px; }
  .rollval[aria-pressed="true"] .radio::after { color: CanvasText; }
}
/* Knappen sitter fast i tumzonen medan listan skrollas, så att namnen på de
   valda rollerna syns i samma stund hon kryssar. */
.knapprad {
  position: sticky; bottom: 0; z-index: 2;
  margin: var(--s4) calc(-1 * var(--s4)) 0; padding: var(--s3) var(--s4) max(var(--s3), env(safe-area-inset-bottom));
  background: var(--rum);
  /* Kanten och toningen gör att raden läses som en rad och inte som ett klipp
     när den lägger sig över listan mitt i en skrollning. Båda magrösterna
     läste den halvt täckta kryssraden som ett misstag (2026-10-02). */
  border-top: 1px solid var(--linje);
}
.knapprad::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px;
  background: linear-gradient(to bottom, transparent, var(--rum));
  pointer-events: none;
}
/* Sökrutan i rollvalet, bara vid långa listor. Gränssnittets typsnitt, inte
   manusets: det är hon som skriver, inte pjäsen. */
.rollsokrad { margin: 0 0 var(--s4); }
.rollsokrad input {
  width: 100%; font: inherit; background: var(--yta); color: var(--text);
  border: 1px solid var(--kant); border-radius: var(--radie); padding: var(--s3); min-height: 44px;
}
.rollsokrad .kvitto { margin: var(--s2) 0 0; }
.osaker-flagga { color: var(--text); font-weight: 700; }
.verktyg { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s3) 0 var(--s4); }
.rattning { margin: var(--s1) 0 var(--s4); color: var(--dov); }
.rattning .verktyg { margin-top: var(--s3); }
#rostrad select { max-width: 15rem; }
#rosthjalp { margin: var(--s1) 0 var(--s4); }
/* Lägesraden säger vad nästa tryck gör, så den får ljuset. */
.lagesrad {
  display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between;
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
  border-left: 3px solid var(--ljus); background: var(--yta);
}
.lagesrad .lank { flex: none; }

/* ---------- vy 3: pluggläget ---------- */

#vy-plugg { display: flex; flex-direction: column; min-height: 100dvh; }
.topplist {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 56px; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--linje);
  position: sticky; top: 0; background: var(--rum); z-index: 2;
}
.topplist-vanster { display: flex; gap: var(--s3); align-items: center; }
.topplist .steg { color: var(--dov); font-size: var(--t-fot); }
#avsluta { border: none; background: none; color: var(--dov); font-size: 1.3rem; min-width: 44px; padding: var(--s2); }
#avsluta:hover { color: var(--text); }
/* Ljudet är en brytare med ordet Ljud, inte en emoji. */
.ljudbrytare {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: none; background: none; color: var(--dov); font-size: var(--t-fot); font-weight: 600;
  padding: var(--s2) var(--s2); min-height: 44px;
}
.ljudbrytare:hover { background: none; color: var(--text); }
.ljudbrytare::after {
  content: ""; width: 38px; height: 22px; border-radius: 999px;
  border: 2px solid var(--kant); background: transparent; position: relative;
  box-shadow: inset 5px 0 0 -2px var(--kant); transition: box-shadow .2s, border-color .2s;
}
.ljudbrytare[aria-checked="true"] { color: var(--text); }
.ljudbrytare[aria-checked="true"]::after {
  border-color: var(--ljus); background: var(--ljus-svag);
  box-shadow: inset -5px 0 0 -2px var(--ljus);
}
/* Bara i demon: vem du spelar och vem appen läser. */
.banner {
  max-width: var(--scenspalt); margin: var(--s4) auto 0; padding: var(--s2) var(--s4);
  background: var(--yta); color: var(--dov); font-size: var(--t-fot); border-radius: var(--radie);
}
/* Röstbandet fäster under topplisten, så det aldrig hamnar halvt under den när
   scenen rullar till mitten. En halv textrad läses som ett fel. */
.rostband {
  position: sticky; top: 56px; z-index: 2; background: var(--rum);
  padding: var(--s2) var(--s4); font-size: var(--t-fot); color: var(--dov);
  border-bottom: 1px solid var(--linje); text-align: center;
}
.rostband.varning { color: var(--text); }

/* Spalten står mitt på skärmen, och den aktuella repliken landar i mitten:
   luften upptill och nedtill finns för att även första och sista repliken ska
   kunna centreras. */
#scenyta {
  flex: 1; width: 100%; max-width: var(--scenspalt); margin: 0 auto;
  text-align: left; border: none; background: none; color: inherit; font: inherit;
  padding: 12vh var(--s5) 38vh; cursor: pointer; display: block; border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
/* Pluggvyn är ett main som topplist och bottenrad ska få hela bredden i. */
main#vy-plugg { max-width: none; margin: 0; padding: 0; }
.historik { color: var(--dov); }

/* Replikens anatomi, som i ett manus. Allt ligger i halvdager, och det som
   lyser är motrepliken som läses samt stickrepliken, den du svarar på. */
.replik { margin: 0 0 var(--s5); color: var(--dov); transition: color .25s ease; }
.replik .vem {
  display: block; margin-bottom: var(--s1);
  font: 700 var(--t-fot)/1.3 var(--font-manus); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dov);
}
.replik .vad { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--t-brod)/1.45 var(--font-manus); }
.replik.aktuell .vad { font-size: var(--t-mellan); line-height: 1.4; }
#aktuellyta .replik:not(.min):last-child,
#aktuellyta .replik:not(.min):has(+ .replik.min) { color: var(--text); }
#aktuellyta .replik:not(.min):last-child .vem::after {
  content: "läses upp"; margin-left: var(--s3);
  font: 400 var(--t-fot)/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--dov);
}
/* Tyst läge släcker bara "läses upp", aldrig "din tur". */
#vy-plugg.tyst #aktuellyta .replik:not(.min) .vem::after,
#vy-plugg.slut #aktuellyta .replik .vem::after { content: none; }
/* Scenanvisning i parentes: kursiv och dov, aldrig något rollen säger. */
.replik .vad .regi { font-style: italic; color: var(--dov); }

/* Din replik: en linje i marginalen som blyertsmarkeringen en skådespelare
   drar vid sina egna rader. */
/* Linjen är en kant, inte en bakgrund: kanter överlever högkontrastläget. */
.replik.min { border-left: 2px solid var(--ljus); padding-left: calc(var(--s4) - 2px); }
.replik.min.aktuell { border-left-width: 3px; padding-left: calc(var(--s4) - 3px); color: var(--text); }
.replik.min.aktuell .vem { color: var(--ljus); }
/* Två egna repliker i rad: tystnad och direkt en ny dold replik. Ordet igen
   säger att ingenting hoppades över. */
#vy-plugg .replik.min.aktuell.igen .vem::after { content: "din tur igen"; }
#vy-plugg .replik.min.aktuell .vem::after {
  content: "din tur"; margin-left: var(--s3);
  font: 400 var(--t-fot)/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ljus);
}
#vy-plugg.slut .replik.min.aktuell .vem::after { content: none; }
.replik.klickbar { cursor: pointer; }

/* Maskningen ritas som luckor: ett streck lika långt som ordet, skiljetecknen
   kvar. Datalagret är orört, i DOM står fortfarande bara █. Strecket pekar på
   --ljus och inte currentColor, för texten är genomskinlig. */
.vad.maskerad { color: var(--ljus); }
.vad.maskerad .lucka {
  color: transparent;
  background: linear-gradient(var(--ljus), var(--ljus)) 0 100% / 100% .12em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (forced-colors: active) { .vad.maskerad .lucka { color: CanvasText; background: none; } }
.visaknapp {
  display: flex; align-items: center; width: fit-content;
  min-height: 44px; min-width: 64px; margin-top: var(--s3); padding: var(--s2) var(--s4);
  font: 600 var(--t-fot)/1 var(--font-ui);
}
/* En fokuserad knapp får inte hamna under topplisten eller bottenraden när
   webbläsaren rullar fram den (2.4.11). */
.visaknapp, .klartruta button { scroll-margin: 9rem 0 7rem; }

/* Tipsraden och bottenraden. Nästa är appens vanligaste handling och står i
   tumzonen som en riktig knapp. Tryck var som helst finns kvar som genväg. */
.tips {
  text-align: center; color: var(--dov); font-size: var(--t-fot);
  padding: var(--s4) var(--s4) var(--s2); transition: opacity .6s; pointer-events: none;
}
.bottenrad {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--rum); border-top: 1px solid var(--linje);
}
.bottenrad-inne { display: flex; gap: var(--s3); width: 100%; max-width: var(--scenspalt); margin: 0 auto; }
.bottenrad #omtag { flex: 0 0 auto; min-width: 9rem; }
.bottenrad #nasta { flex: 1 1 auto; min-height: 52px; width: auto; }
#vy-plugg.slut .bottenrad, #vy-plugg.slut .tips { display: none; }

.klartruta { text-align: center; padding: var(--s7) 0 var(--s5); max-width: var(--scenspalt); margin: 0 auto; }
.klartruta h2 { font-size: var(--t-rubrik); font-weight: 600; margin: 0 0 var(--s2); }
.klartruta button:not(.lank) { display: block; width: 100%; max-width: 22rem; margin: var(--s3) auto 0; }
.klartruta button.lank { margin-top: var(--s3); }
#vy-plugg .stodruta { max-width: var(--scenspalt); margin: 3.5rem auto 2rem; }

/* ---------- konto och bibliotek ---------- */

.bibliotekslista { list-style: none; padding: 0; margin: var(--s2) 0 var(--s5); display: grid; gap: var(--s2); }
.bibliotekspost { display: flex; align-items: center; gap: var(--s3); border-radius: var(--radie); background: var(--yta); }
.bibliotekspost .oppna { flex: 1 1 auto; text-align: left; border: none; background: none; padding: var(--s3) var(--s4); min-height: 52px; }
.bibliotekspost .oppna:hover { background: var(--yta-vald); }
.bibliotekspost .oppna .titel { display: block; font-weight: 600; }
.bibliotekspost .oppna .meta { display: block; color: var(--dov); font-size: var(--t-fot); }
.bibliotekspost .radera { border: none; background: none; color: var(--dov); padding: var(--s3) var(--s4); min-height: 44px; min-width: 44px; }
.bibliotekspost .radera:hover { color: var(--fel); background: none; }
.bibliotekspost .dopom {
  flex: none; min-width: 44px; min-height: 44px; margin-right: var(--s2);
  background: none; border: 1px solid transparent; color: var(--dov); font-size: 1rem; border-radius: var(--radie);
}
.bibliotekspost .dopom:hover { color: var(--text); border-color: var(--kant); background: none; }

.inloggsruta { background: var(--yta); border-radius: var(--radie); padding: var(--s4); margin: 0 0 var(--s5); }
.inloggsruta label { margin-bottom: var(--s2); }
.inloggsruta .valrad { margin: 0; gap: var(--s2); }
.inloggsruta input[type="email"] {
  flex: 1 1 14rem; min-width: 0; font: inherit; background: var(--rum); color: var(--text);
  border: 1px solid var(--kant); border-radius: var(--radie); padding: var(--s3); min-height: 44px;
}
.inloggsruta .primar.tajtknapp { width: auto; min-height: 44px; padding: var(--s2) var(--s4); }
.inloggsruta .eller { text-align: center; margin: var(--s4) 0 var(--s3); text-transform: uppercase; letter-spacing: .08em; }
#googleknapp { width: 100%; }
#mejlbesked { margin-bottom: var(--s2); }
@media (max-width: 26rem) {
  .inloggsruta .valrad { display: block; }
  .inloggsruta input[type="email"] { width: 100%; margin-bottom: var(--s2); }
  .inloggsruta .primar.tajtknapp { width: 100%; }
}

/* Integritetssidan är ren text och ska läsa som text, inte som app. */
#vy-manus + main, main > h2.rubrik2 { margin-top: var(--s6); }