:root { --ui-h: 52px; }
html, body { height: 100%; }
body { margin: 0; background: #0a0a0a; color: #eaeaea; font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Layout (behöver inte matcha exakt din inline, detta kör bara när länken är med) */
.viewer { position: relative; overflow: auto; background: #121212; }
#pdfContainer { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
canvas { background: #000; box-shadow: 0 6px 24px rgba(0,0,0,.45); border-radius: 8px; }

/* ---- PDF-effekter ---- */
#viewer.contrast-high .page canvas { filter: invert(1) hue-rotate(180deg); }
#viewer.monochrome    .page canvas { filter: grayscale(100%); }

/* ---- Textvy – bas ---- */
#textContainer { 
  max-width: 900px; 
  margin: 0 auto; 
  padding: 16px 20px; 
  white-space: normal !important; /* skriv över inline pre-wrap */
  line-height: 1.8; 
  hyphens: auto; 
}
#textContainer p { margin: 0 0 1rem; }
#textContainer .page-mark { font-size: .9rem; opacity:.6; margin: 1rem 0 .5rem; }

/* ---- Läsbarhet (Textvy) ---- */
#textContainer.readability{
  max-width: 68ch;               /* kortare rader */
  font-size: 1.12rem;
  line-height: 1.9;
  letter-spacing: .02em;
  word-spacing: .02em;
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

/* ---- Dyslexi (Textvy) ---- */
#textContainer.dyslexic{
  max-width: 60ch;               /* ännu kortare rader */
  font-family: 'OpenDyslexic','OpenDyslexic3','Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.95;
  letter-spacing: .04em;
  word-spacing: .12em;
  hyphens: none;                  /* undvik avstavningar */
}
#textContainer.dyslexic em,
#textContainer.dyslexic i{
  font-style: normal; 
  text-decoration: underline;     /* ersätt kursiv, mer stabil form */
}

/* ---- Läsmask (reading mask) ---- */
#readMask{
  position: fixed;
  top: var(--maskTopOffset, 0px);           /* viktigt: lägg under verktygsraden */
  left: 0; right: 0;
  height: calc(100vh - var(--maskTopOffset, 0px));
  pointer-events: none;
  display: none;
  z-index: 9;                                /* toolbar har högre z-index i din HTML */
}
#readMask.active{ display:block; }
#readMask::before, #readMask::after{
  content: "";
  position:absolute; left:0; right:0;
  background: rgba(0,0,0,.6);                /* skuggor ovan/under */
}
#readMask::before{ top:0;    height: var(--maskTop, 40%); }
#readMask::after { bottom:0; height: var(--maskBottom, 40%); }

/* (valfritt) Accessido-kompatibla klasser om du vill trigga dem samtidigt */
body.tam-main-body.tam-high-contrast  #pdfContainer canvas { filter: invert(1) hue-rotate(180deg); }
body.tam-main-body.tam-monochrome     #viewer { filter: grayscale(100%); }
body.tam-main-body.tam-readability    #textContainer { letter-spacing: .02em; }
body.tam-main-body.tam-dyslexia       #textContainer { font-family: 'OpenDyslexic','OpenDyslexic3','Atkinson Hyperlegible', system-ui, sans-serif; }

/* Grupp av lägesknappar */
.a11y-modes{ display:flex; gap:8px; align-items:center; }
.a11y-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px; border:1px solid #444;
  background:#1b1b1b; color:#fff; cursor:pointer; user-select:none;
  font: 500 14px/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.a11y-btn .ico{ font-weight:700; width:1.2em; text-align:center; }
.a11y-btn:hover{ background:#222; border-color:#555; }
.a11y-btn.is-active, .a11y-btn[aria-pressed="true"]{
  background:#0ea5e9; border-color:#0ea5e9; color:#081018;
}

/* PDF-lägen (redan hos dig, men med klassnamn för tydlighet) */
#viewer.contrast-high .page canvas{ filter: invert(1) hue-rotate(180deg); }
#viewer.monochrome    .page canvas{ filter: grayscale(100%); }

/* Textvy – tydlig skillnad mellan lägen (du har redan basreglerna) */
#textContainer.readability{
  max-width:68ch; font-size:1.12rem; line-height:1.9;
  letter-spacing:.02em; word-spacing:.02em; hyphens:auto;
}
#textContainer.dyslexic{
  max-width:60ch; font-size:1.2rem; line-height:1.95;
  letter-spacing:.04em; word-spacing:.12em; hyphens:none;
  font-family:'OpenDyslexic','OpenDyslexic3','Atkinson Hyperlegible',system-ui,sans-serif;
}
/* Grupp + radio-knappar */
.a11y-modes{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.a11y-radio{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:6px 12px; border-radius:10px;
  background:#1b1b1b; color:#fff; border:1px solid #444; cursor:pointer;
  font: 500 14px/1 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.a11y-radio .ico{ width:1.2em; text-align:center; font-weight:700 }
.a11y-radio:hover{ background:#222; border-color:#555 }
.a11y-radio[aria-checked="true"], .a11y-radio.is-active{
  background:#0ea5e9; border-color:#0ea5e9; color:#081018;
}
.a11y-radio:focus-visible{
  outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px #0ea5e9;
}

/* (redan hos dig) PDF-lägen på canvas */
#viewer.contrast-high .page canvas{ filter: invert(1) hue-rotate(180deg) }
#viewer.monochrome    .page canvas{ filter: grayscale(100%) }

/* Textvy – tydligare skillnad (om du inte redan har) */
#textContainer.readability{ max-width:68ch; font-size:1.12rem; line-height:1.9; letter-spacing:.02em; word-spacing:.02em; hyphens:auto }
#textContainer.dyslexic   { max-width:60ch; font-size:1.2rem;  line-height:1.95; letter-spacing:.04em; word-spacing:.12em; hyphens:none;
  font-family:'OpenDyslexic','OpenDyslexic3','Atkinson Hyperlegible',system-ui,sans-serif }
/* små kapslar som visar genvägen */
.a11y-btn .kbd, #maskBtn .kbd, #toggleText .kbd{
  margin-left:.5rem; padding:1px 6px; border:1px solid #555; border-radius:6px;
  background:#121212; color:#ddd; font-size:12px; line-height:1.2;
  font-variant-numeric: tabular-nums;
}
.a11y-btn.is-active .kbd, .a11y-btn[aria-pressed="true"] .kbd{
  background:#0ea5e9; border-color:#0ea5e9; color:#081018;
}
/* Karaoke-markering i textvyn */
#textContainer .tts-sent { transition: background-color .15s ease; }
#textContainer .tts-current {
  background:#ffd54a; color:#000;
  outline:2px solid #ffbf00; border-radius:4px;
}
:root { --bg:#1e1e1e; --panel:#2a2a2a; --ink:#fff; }

html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

.toolbar{
  display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;
  padding:12px; background:#2b2b2b; border-bottom:1px solid #3a3a3a; position:sticky; top:0; z-index:10;
}
.toolbar input,.toolbar button,.toolbar select{
  height:36px; border-radius:8px; border:1px solid #444; background:#1b1b1b; color:#fff; padding:0 10px; cursor:pointer;
}

#viewer{
  min-height:calc(100vh - 60px);
  display:flex; flex-direction:column; align-items:center; gap:24px; padding:24px;
}
#pdfContainer[hidden], #textContainer[hidden]{ display:none !important; }

.page{
  position:relative; display:inline-block; background:#2a2a2a; border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.5); padding:12px;
}
.page canvas{display:block; border-radius:6px}

/* PDF-lägen (canvas) */
#viewer.contrast-high .page canvas{ filter: invert(1) hue-rotate(180deg); }  /* vit text/svart bakgrund */
#viewer.monochrome    .page canvas{ filter: grayscale(100%); }

/* Textvy – bas */
#textContainer{
  max-width:900px; margin:0 auto; padding:16px 20px; background:#222; border-radius:10px; white-space:pre-wrap;
  line-height:1.8; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
}
#textContainer p{ margin:0 0 1rem; }
#textContainer .page-mark{ font-size:.9rem; opacity:.6; margin:1rem 0 .5rem; }

/* Läsbarhet/Dyslexi – textvy */
#textContainer.readability { letter-spacing:.35px; line-height:1.8; font-size:1.08rem; }
#textContainer.dyslexic    { letter-spacing:.35px; word-spacing:.06em; }

/* Karaoke (TTS) i textvyn */
#textContainer .tts-sent { transition: background-color .12s linear; }
#textContainer .tts-current {
  background:#ffd54a; color:#000; outline:2px solid #ffbf00; border-radius:4px;
}

/* Läs-mask (overlay) */
#readMask{
  position:fixed; top:var(--maskTopOffset,0px); left:0; right:0;
  height:calc(100vh - var(--maskTopOffset,0px)); pointer-events:none; display:none; z-index:9;
}
#readMask.active{ display:block; }
#readMask::before, #readMask::after{ content:""; position:absolute; left:0; right:0; background:rgba(0,0,0,.6); }
#readMask::before{ top:0;    height:var(--maskTop, 40%); }
#readMask::after { bottom:0; height:var(--maskBottom, 40%); }

/* Små UI-detaljer */
.kbd{
  margin-left:.5rem; padding:1px 6px; border:1px solid #555; border-radius:6px;
  background:#121212; color:#ddd; font-size:12px; line-height:1.2; font-variant-numeric:tabular-nums;
}

.toast{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
  background:#1b1b1b; color:#fff; padding:10px 14px; border-radius:10px; border:1px solid #333;
  box-shadow:0 4px 18px rgba(0,0,0,.35); display:none; z-index:20;
}
#textContainer .tts-current { background:#ffd54a; color:#000; outline:2px solid #ffbf00; border-radius:4px; }
/* Voice listening state */
#voiceBtn.voice-listening {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #081018;
}
/* Tvåradig toolbar: fil överst, knappar under */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2b2b2b;
  border-bottom: 1px solid #3a3a3a;

  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  padding: 12px;
}

/* Rad 1: filvalet ligger vänsterst och får hela bredden */
.toolbar .file-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rad 2: knappraden, wrap vid behov */
.toolbar .controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;   /* ändra till flex-start om du vill vänsterjustera */
}

/* Befintlig stil för inputs/knappar kan vara kvar, men se till att de funkar i båda raderna */
.toolbar input,
.toolbar button {
  height: 36px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #1b1b1b;
  color: #fff;
  padding: 0 10px;
  cursor: pointer;
}