:root {
  --bg-hi: #191919;
  --bg-lo: #101010;
  --line: rgba(255, 255, 255, 0.14);
  --txt: #9c9c9c;
  --txt-dim: #6f6f6f;
  --txt-hi: #f2f2f2;
  --blue: #3e8cff;
  /* w/h of the visible frame; app.js overwrites from the manifest. The frame
     shows exactly ONE page in both modes (a camera pans the spread on
     desktop), so this is always the page aspect. */
  --book-ratio: 1.7778;
  /* vertical chrome: bars + paddings + progress, used to fit the book height */
  --chrome-h: 138px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(180deg, var(--bg-hi) 0%, var(--bg-lo) 100%);
  color: var(--txt);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.stage {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 12px;
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.doc-title {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.title-short { display: none; }

.spacer { flex: 1; }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.btn:hover {
  color: var(--txt-hi);
  border-color: rgba(62, 140, 255, 0.75);
  background: rgba(62, 140, 255, 0.1);
}

.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.btn[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* SVG elements do not get the UA [hidden] rule; enforce it. */
.btn svg[hidden] { display: none; }

.book-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* The frame holds the final single-page aspect at all times; the intro
   spread renders at half height, vertically centered inside it, so the
   zoom into the left page lands exactly on the frame. StPageFlip measures
   its parent's width (the track) and writes inline sizes on the mount. */
.book-frame {
  width: min(100%, calc((100dvh - var(--chrome-h)) * var(--book-ratio)));
  aspect-ratio: var(--book-ratio);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.book-track {
  width: 100%;
  transform-origin: 0 50%;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#book {
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stage.ready #book { opacity: 1; }

.status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-dim);
  pointer-events: none;
}

.page {
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
}

/* Invisible, selectable text overlaid on the page renders. The layer lives in
   PDF-point coordinates and is scaled to the rendered page size by app.js. */
.text-layer {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  z-index: 2;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.text-layer span {
  position: absolute;
  color: transparent;
  white-space: pre;
  line-height: 1;
  transform-origin: 0 0;
  user-select: text;
  -webkit-user-select: text;
}

.text-layer span::selection {
  background: rgba(62, 140, 255, 0.35);
}

/* Soft-flip flaps are engine-made clones of the page; paper backs are white.
   The engine's fold shadows still draw over this, shading the white sheet. */
.page.is-flap { background: #ffffff; }

.page.is-flap img,
.page.is-flap .text-layer { visibility: hidden; }

.bar-bottom { justify-content: center; gap: 16px; }

.counter {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  text-align: center;
}

.progress {
  flex: none;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.noscript {
  position: fixed;
  inset: auto 16px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--txt-hi);
}

.noscript a { color: var(--blue); }

@media (max-width: 640px) {
  .stage { padding: 10px 12px 10px; gap: 6px; --chrome-h: 122px; }
  .title-long { display: none; }
  .title-short { display: inline; }
  .btn { width: 32px; height: 32px; }
  .bar-bottom { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.stage.noanim, .stage.noanim * { transition: none !important; }