/* Seitenmodus -- ergaenzt board.css um alles, was eine PDF-Seite braucht.
   Leisten, Zonen, Minikarte und Fehlerbox kommen unveraendert aus board.css. */

/* Dieselbe mitlaufende Rasterflaeche wie im Kartenmodus, nur leiser: auf dem
   grauen Grund und neben weissen Blaettern traegt schon wenig Kontrast. */
#viewport {
  background-color: #eef0f2;
  --grid-dot: rgba(60, 64, 67, .2);
  --grid-dot-coarse: rgba(60, 64, 67, .14);
}

/* Kapiteltitel sind Welt-Beschriftung, keine Bildschirmschrift: sie muessen
   noch bei 12 % Zoom lesbar sein, wenn der ganze Band ins Bild passt. */
/* Der Titel bekommt die Breite seiner Zone und bricht darin um -- sonst
   laufen lange Kapitelnamen ins Nachbarkapitel hinein. */
.zone-title {
  font-size: 100px;
  line-height: 1.06;
  white-space: normal;
}
.zone { background: rgba(255, 255, 255, .6); }

/* --- Seite ---------------------------------------------------------------- */

.page {
  position: absolute;
  background: #fff;
  box-shadow: var(--shadow);
  outline: 1px solid rgba(60, 64, 67, .12);
}
.page.is-opener { outline: 2px solid var(--blue); }
.page.is-focus { box-shadow: var(--shadow-lift), 0 0 0 3px rgba(26, 115, 232, .45); }
.page.is-match { box-shadow: var(--shadow-lift), 0 0 0 3px rgba(249, 171, 0, .65); }
.page.is-dimmed { opacity: .3; }

/* Beide Rasterebenen liegen deckungsgleich. Das Thumbnail bleibt dauerhaft
   liegen, die scharfe Fassung blendet sich darueber ein, sobald sie fertig
   ist -- so gibt es beim Zoomen nie eine weisse Flaeche. */
.raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.raster-thumb { opacity: 0; transition: opacity .18s ease; }
.raster-detail { opacity: 0; }
.raster.is-ready { opacity: 1; }

.page-no {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  text-align: center;
  font-size: 17px;
  color: var(--muted);
  pointer-events: none;
}

/* --- Textebene ------------------------------------------------------------ */

.overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.overlay span {
  position: absolute;
  white-space: pre;
  transform-origin: 0 0;
  font-family: serif;
  color: transparent;
  line-height: 1;
}
.overlay span::selection { background: rgba(26, 115, 232, .35); }
.overlay span.is-hit { background: rgba(249, 171, 0, .5); border-radius: 2px; }

#world.is-selectable .overlay { pointer-events: auto; user-select: text; }
#world.is-selectable .page { cursor: text; }

/* Linkflaechen bleiben immer klickbar; sie decken nur einen kleinen Teil der
   Seite ab, und interne Verweise sind der eigentliche Gewinn gegenueber Papier. */
.page-link {
  position: absolute;
  display: block;
  border-radius: 2px;
}
.page-link:hover { background: rgba(26, 115, 232, .18); }

/* --- Semantischer Zoom ---------------------------------------------------- */

#world.zoom-far .page-no,
#world.zoom-overview .page-no { display: none; }

#world.zoom-far .overlay,
#world.zoom-overview .overlay { display: none; }

#world.zoom-overview .zone { border-color: var(--border); }
#world.zoom-overview .page { box-shadow: none; }

/* --- Leiste --------------------------------------------------------------- */

#status { color: var(--muted); font-size: 12px; min-width: 110px; }
#chapters { max-width: 230px; }
#path-label { min-width: 300px; }