/* =========================================================================
   Läsaren — zoombar skanning med hOCR-textlager ovanpå.
   Egen fullskärmslayout utan sidans vanliga huvud.
   ========================================================================= */

.reader{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--scan-bg);
  color:#E8EAED;
}

/* ── ÖVRE VERKTYGSRAD ─────────────────────────────────────────────────── */

.reader-bar{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.5rem .9rem;
  background:#1E2126;border-bottom:1px solid #3A3E45;
  flex-shrink:0;
}

.reader-title{min-width:0;line-height:1.3}
.reader-title .date{font-weight:600;font-size:1.02rem;color:#fff}
.reader-title .sub{font-size:.87rem;color:#A8AEB6}

.reader-tools{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-wrap:wrap}

/* Knapparna har text, inte bara ikoner — publiken är äldre */
.rbtn{
  font:inherit;font-size:.95rem;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;min-width:44px;padding:.4rem .8rem;
  background:#2B2F36;border:1px solid #454A52;border-radius:var(--r);
  color:#E8EAED;cursor:pointer;text-decoration:none;white-space:nowrap;
}
.rbtn:hover{background:#363B43;border-color:#5A6069;color:#fff}
.rbtn:disabled,.rbtn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.rbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.reader :focus-visible{outline:3px solid #8FB8DE;outline-offset:2px}

.zoom-group{display:flex;align-items:center;gap:.3rem}
/* Kort etikett bara på mobil — panelens egna flikar säger vad den innehåller */
.btn-short{display:none}
.zoom-level{
  min-width:62px;text-align:center;font-size:.92rem;color:#C6CBD2;
  font-variant-numeric:tabular-nums;
}

/* Träffräknare */
.hit-nav{
  display:flex;align-items:center;gap:.35rem;
  padding:.15rem .35rem .15rem .75rem;
  background:#3A3218;border:1px solid #6B5A1E;border-radius:var(--r);
}
.hit-nav .count{font-size:.92rem;color:#F0D97A;font-variant-numeric:tabular-nums}
.hit-nav .rbtn{min-height:36px;min-width:36px;padding:.2rem .5rem;background:transparent;border-color:transparent}
.hit-nav .rbtn:hover{background:#4A3F1E}

/* ── MITTEN ───────────────────────────────────────────────────────────── */

.reader-body{flex:1;display:flex;min-height:0}

/* Miniatyrräls */
.rail{
  width:196px;flex-shrink:0;overflow-y:auto;overflow-x:hidden;
  background:#1E2126;border-right:1px solid #3A3E45;
  padding:0 .75rem .75rem;
  scrollbar-color:#5A6069 #1E2126;scrollbar-width:thin;
}
.rail-head{
  position:sticky;top:0;z-index:1;background:#1E2126;
  padding:.75rem 0 .5rem;margin-bottom:.25rem;
  border-bottom:1px solid #3A3E45;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#8B929B;
}
.rail-item{
  display:block;margin-top:.85rem;text-decoration:none;
  border:2px solid transparent;border-radius:4px;position:relative;
}
/* height:auto är nödvändigt — height-attributet i <img> är en
   presentational hint som sätter en fast höjd, och då faller både
   aspect-ratio och bildens egen proportion bort. Utan detta blir
   miniatyren utdragen på höjden och beskuren i sidled. */
.rail-item img{
  width:100%;height:auto;background:#3A3E45;border-radius:2px;display:block;
}
.rail-item .n{
  display:block;text-align:center;font-size:.9rem;color:#A8AEB6;padding-top:.3rem;
}
.rail-item:hover{border-color:#5A6069}
.rail-item:hover .n{color:#fff}
.rail-item[aria-current="true"]{border-color:var(--accent)}
.rail-item[aria-current="true"] img{box-shadow:0 0 0 1px var(--accent)}
.rail-item[aria-current="true"] .n{color:#fff;font-weight:700}
.rail-item.has-hit::after{
  content:"";position:absolute;top:.35rem;right:.35rem;
  width:12px;height:12px;border-radius:50%;
  background:#F0C020;border:2px solid #1E2126;
}

/* Scenen där skanningen ligger */
.stage{
  flex:1;overflow:auto;position:relative;
  padding:1.25rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:#5A6069 #2B2E33;
}
.stage.is-panning{cursor:grabbing;user-select:none}

.scan{
  position:relative;margin:0 auto;
  background:#fff;box-shadow:0 3px 18px rgba(0,0,0,.5);
  width:800px;                    /* sätts av JS */
}
.scan img{width:100%;height:auto;display:block}

/* ── TEXTLAGRET ───────────────────────────────────────────────────────── */

/* Lagrets font-size sätts av JS till skanningens bredd i px. Varje ord
   anger sin storlek i em (andel av sidbredden), så en enda ändring på
   lagret skalar om all text vid zoom — inget behöver räknas om per ord. */
.text-layer{
  position:absolute;inset:0;
  line-height:1;
  font-size:800px;
}
.text-layer w{
  position:absolute;
  display:block;
  color:transparent;
  white-space:pre;
  cursor:text;
  border-radius:1px;
}
.text-layer w::selection{background:rgba(31,78,121,.35);color:transparent}

/* mix-blend-mode: multiply fungerar som en överstrykningspenna — pappret
   färgas gult men den svarta trycktexten står kvar oförändrad. Utan den
   lägger sig markeringen som en täckande platta över ordet man vill läsa.
   Färgerna har alfa, så en webbläsare utan blend-stöd ändå släpper igenom. */
.text-layer w.hit{
  background:var(--hit);
  mix-blend-mode:multiply;
}
.text-layer w.hit-current{
  background:var(--hit-current);
  mix-blend-mode:multiply;
}

/* Utan JavaScript finns inget textlager — då är bara bilden kvar,
   vilket fortfarande är fullt användbart. */

/* ── SIDOPANEL ────────────────────────────────────────────────────────── */

.side-panel{
  width:370px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);border-left:1px solid #3A3E45;
}
.side-panel[hidden]{display:none}

.panel-tabs{display:flex;border-bottom:1px solid var(--line);flex-shrink:0}
.panel-tabs button{
  font:inherit;font-size:.95rem;font-weight:600;flex:1;
  min-height:48px;padding:.5rem;
  background:var(--surface);border:none;border-bottom:3px solid transparent;
  color:var(--ink-2);cursor:pointer;
}
.panel-tabs button:hover{background:var(--surface-2);color:var(--ink)}
.panel-tabs button[aria-selected="true"]{
  background:var(--paper);color:var(--accent);border-bottom-color:var(--accent);
}

/* Stäng-knappen är ingen flik: den ska inte växa med flex:1 och inte se
   ut som ett val. På mobil är den enda vägen ut ur panelen. */
.panel-close{
  flex:0 0 auto;min-width:72px;
  font-weight:500;color:var(--ink-3);
  border-left:1px solid var(--line);
}
.panel-close:hover{background:var(--surface-2);color:var(--ink)}

.panel-body{flex:1;overflow-y:auto;padding:1.25rem}
.panel-body[hidden]{display:none}
.panel-body h2,.panel-body h3{font-size:1.08rem;font-weight:700;line-height:1.3;margin-bottom:.35rem}
.panel-body article{border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}
.panel-body article:last-child{border-bottom:none;margin-bottom:0}
.panel-body p{color:var(--ink-2);font-size:.98rem;line-height:1.6}
.panel-note{color:var(--ink-3);font-size:.9rem;font-style:italic}

.ocr-text{
  white-space:pre-wrap;word-break:break-word;
  font-size:.92rem;line-height:1.7;color:var(--ink-2);
}

/* ── UNDRE RAD ────────────────────────────────────────────────────────── */

.reader-foot{
  display:flex;align-items:center;gap:1rem;
  padding:.5rem .9rem;flex-shrink:0;
  background:#1E2126;border-top:1px solid #3A3E45;
}
.reader-foot .spacer{margin-left:auto}
.reader-foot .pos{font-size:.92rem;color:#A8AEB6;font-variant-numeric:tabular-nums}

/* ── KORTKOMMANDON ────────────────────────────────────────────────────── */

.shortcuts{
  border:none;border-radius:var(--r);padding:0;
  background:var(--paper);color:var(--ink);max-width:420px;width:calc(100% - 2rem);
}
.shortcuts::backdrop{background:rgba(0,0,0,.55)}
.shortcuts-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);
}
.shortcuts-head h2{font-size:1.15rem}
.shortcuts dl{padding:1rem 1.25rem;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem}
.shortcuts dt{text-align:right}
.shortcuts dd{color:var(--ink-2)}
kbd{
  display:inline-block;font:inherit;font-size:.85rem;
  background:var(--surface);border:1px solid var(--line-strong);
  border-bottom-width:2px;border-radius:4px;padding:.1rem .45rem;
  font-variant-numeric:tabular-nums;
}

/* ── RESPONSIVT ───────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .side-panel{width:320px}
}
@media (max-width:900px){
  .rail{width:132px}
  .side-panel{
    position:absolute;right:0;top:0;bottom:0;z-index:20;width:min(360px,88vw);
    box-shadow:-4px 0 20px rgba(0,0,0,.4);
  }
}
@media (max-width:640px){
  .rail{display:none}
  .reader-title .sub{display:none}
  .stage{padding:.5rem}

  /* Verktygsraden tog 34 % av skärmen vid aktiv sökning. Tre kontroller
     döljs — inte för att göra plats åt en ikonmeny, utan för att de är
     meningslösa eller dubblerade just här:
       ?              listar tangentbordsgenvägar, och det finns inget
                      tangentbord på en pekmobil
       Ladda ner PDF  finns på nummersidan, ett tryck bort
       Bredd          ger nästan samma resultat som Hela sidan på en
                      stående tidningssida vid 390 px
     De ligger kvar i HTML:en och syns på desktop och för skärmläsare. */
  #shortcuts-open,
  .reader-pdf,
  #zoom-width{display:none}

  /* "Träff 1 av 3" -> "1 av 3" på den rad som är trängst */
  .hit-word{display:none}

  .reader-bar{gap:.5rem;padding:.45rem .6rem}
  .reader-tools{gap:.35rem}
  .rbtn{padding:.4rem .6rem;font-size:.92rem}
  .btn-long{display:none}
  .btn-short{display:inline}
  .zoom-level{min-width:48px;font-size:.88rem}
}

/* ── PROVREGLAGE FÖR BILDJUSTERING ────────────────────────────────────── */

.img-tune{
  display:flex;align-items:center;gap:.75rem;margin-left:auto;
  font-size:.85rem;color:#A8AEB6;
}
.img-tune label{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.img-tune input[type=range]{width:96px;accent-color:var(--accent);cursor:pointer}
.img-tune .rbtn{min-height:32px;min-width:32px;padding:.15rem .4rem;font-size:.9rem}

/* Nästa-knappen ska inte längre knuffas ut av spacer när reglagen finns */
.reader-foot .img-tune ~ .spacer{margin-left:0}

@media (max-width:900px){
  .img-tune{display:none}   /* undre raden är för trång på små skärmar */
}


/* ── RAPPORTERA ETT PROBLEM ───────────────────────────────────────────── */

/* Länken i undre fältet. Låg tyngd med avsikt — den ska finnas när man
   behöver den utan att konkurrera med navigeringen, som används på varje
   sida. */
.report-link{
  background:none;border:none;padding:.35rem .2rem;
  font:inherit;font-size:.88rem;color:#A8AEB6;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;white-space:nowrap;
}
.report-link:hover,
.report-link:focus-visible{color:var(--accent)}

.report-dialog{
  border:none;border-radius:var(--r);padding:0;
  background:var(--paper);color:var(--ink);
  max-width:520px;width:calc(100% - 2rem);
}
.report-dialog::backdrop{background:rgba(12,14,17,.6)}
.report-dialog form{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}

.report-head{display:flex;align-items:center;gap:1rem}
.report-head h2{margin:0;font-size:1.2rem}
.report-head .btn{margin-left:auto}

.report-where{
  margin:0;font-size:.9rem;color:var(--ink-2,#5A6070);
  background:var(--band,#F1EEE8);border-radius:var(--r);padding:.6rem .8rem;
}

.report-field{display:flex;flex-direction:column;gap:.35rem;font-size:.93rem}
.report-field .opt{color:var(--ink-3,#8A8F9C);font-weight:400}
.report-field textarea,
.report-field input{
  font:inherit;padding:.6rem .7rem;
  border:1px solid var(--line-strong,#C9C6BF);border-radius:var(--r);
  background:#fff;color:var(--ink);
}
.report-field textarea{resize:vertical;min-height:110px}

/* Honungsfällan ska vara osynlig men inte display:none — en del robotar
   hoppar över fält som är helt borttagna ur layouten. */
.report-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.report-status{margin:0;font-size:.9rem;min-height:1.2em}
.report-status.is-fel{color:#B4453C}
.report-status.is-ok{color:#1B7A3D}
.report-actions{display:flex;justify-content:flex-end}

/* Mobil: navknapparna behåller sina 44 px och rapportlänken får en egen
   rad under. Undre fältet är för trångt för fem element på 430 px. */
@media (max-width:900px){
  .reader-foot{flex-wrap:wrap;row-gap:.15rem}
  .report-link{
    flex-basis:100%;order:5;text-align:center;
    padding:.5rem .2rem .35rem;
    border-top:1px solid #3A3E45;
  }
}