/* ─── Reset, fonts, and design tokens ─────────────────────────
   Neutral grey surfaces, maroon as the lone accent, ink-black
   structure. Flat — no offset shadows, no border-radius. Type
   does the heavy lifting (Pliego, served from the local font
   directory the InDesign export already ships). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* These match the @font-face rules in idGeneratedStyles.css so the
   chrome doesn't FOUT-flash while the lazy engine stylesheet loads. */
@font-face {
  font-family: Pliego;
  src: url("../../font/Pliego-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pliego Bold";
  src: url("../../font/Pliego-Bold.otf") format("opentype");
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pliego Book";
  src: url("../../font/Pliego-Book.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pliego Italic";
  src: url("../../font/Pliego-Italic.otf") format("opentype");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Pliego Bold Italic";
  src: url("../../font/Pliego-BoldItalic.otf") format("opentype");
  font-weight: bold; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Pliego Book Italic";
  src: url("../../font/Pliego-BookItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}

:root {
  --ink:           #0a0a0a;
  --bg:            #1a1a1a;
  --surface:       #e5e5e5;
  --surface-deep:  #c4c4c4;
  --surface-dark:  #2a2a2a;
  --paper:         #f5f5f5;
  --blood:         #6e1418;
  --blood-hot:     #8c1a1f;
  --blood-bright:  #ae232a;

  --tap:           110ms cubic-bezier(0.4, 0, 0.6, 1);
  --reveal:        220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

html, body {
  width: 100%;
  background: var(--bg);
  overflow-x: hidden;
  font-family: "Pliego Bold", Pliego, Georgia, serif;
  font-weight: bold;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

#scroll-container {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* No `scroll-behavior: smooth` — programmatic zoom-anchoring jumps must be instant. */
  padding-bottom: 96px;
}
#pages-wrapper { display: flex; flex-direction: column; align-items: center; }
.page-wrapper  { position: relative; flex-shrink: 0; overflow: hidden; width: 100%; }
.page-canvas   { width: 1920px; transform-origin: top left; display: block; position: relative; }


/* ─── Loader: opacity pulse, no transforms ──────────────────── */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  z-index: 99999;
  transition: opacity 0.25s ease-out;
}
#loader.hidden { opacity: 0; pointer-events: none; }
#loader .dot {
  width: 14px;
  height: 14px;
  background: var(--blood);
  border: 2px solid var(--ink);
  animation: loaderPulse 1.1s ease-in-out infinite both;
}
#loader .dot:nth-child(2) { animation-delay: 0.16s; }
#loader .dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes loaderPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}


/* ═════════════════════════════════════════════════════════════
   CONTROL BAR — flat tiles
   Each control is a bordered rectangle with no shadow. Hover
   shifts background color; press taps a scale(0.96).
   ═════════════════════════════════════════════════════════════ */
@keyframes barEnter {
  0%   { opacity: 0; transform: translate(-50%, 16px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
#control-bar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  z-index: 9000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
  /* `backwards` (not `both`) — keeps the pre-animation state during
     the 0.2s delay but releases the property after the animation
     ends, so the `.bar-hidden` transform can actually slide. With
     `both`, the animation's end-state would stay glued and bar-
     hidden's translateY would be ignored. */
  animation: barEnter 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
#control-bar.bar-hidden {
  opacity: 0;
  transform: translate(-50%, calc(100% + 60px));
  pointer-events: none;
}

/* Shared base — flat, bordered, no shadow. */
.ctrl-btn, #zoom-group {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--blood);
  color: var(--paper);
  font-family: inherit;
  user-select: none;
  transition: background var(--tap), color var(--tap),
              border-color var(--tap), transform var(--tap);
}
.ctrl-btn:hover, #zoom-group:hover, #zoom-group:focus-within {
  background: var(--blood-hot);
}
.ctrl-btn:active { transform: scale(0.96); }

/* ─── Page button ─────────────────────────────────────────── */
.ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.ctrl-btn.active {
  background: var(--surface);
  color: var(--ink);
}
.ctrl-btn.active:hover { background: var(--surface-deep); }
.ctrl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
}
.ctrl-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.ctrl-static { font-weight: bold; }
/* Counter is always visible — no max-width animation that would
   shift the centered bar when the user hovers in. */
.ctrl-detail {
  white-space: nowrap;
  font-family: "Pliego Book", Pliego, Georgia, serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  font-feature-settings: "tnum";
  opacity: 0.85;
}


/* ═════════════════════════════════════════════════════════════
   ZOOM CLUSTER
   ═════════════════════════════════════════════════════════════ */
.zoom-cluster {
  display: flex;
  flex-direction: column-reverse;  /* DOM: [group, panel] → visual: panel above group */
  align-items: flex-end;
  gap: 12px;
}

/* Idle width hugs leading icon + ZOOM label tightly.
   Hover/focus expands to fit the value chip + plus button. */
#zoom-group {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  width: 120px;
  padding: 0 8px;
  cursor: text;
  overflow: hidden;
  transition: width var(--reveal), background var(--tap);
}
#zoom-group:hover, #zoom-group:focus-within {
  width: 156px;
}

/* Inner side-buttons — leading on left, plus on right.
   Flat, no own border; hover inverts to ink. */
.zoom-leading, .zoom-step.plus {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--tap), color var(--tap), transform var(--tap);
}
.zoom-leading   { position: relative; }
.zoom-step.plus {
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out 60ms,
              background var(--tap), color var(--tap), transform var(--tap);
}
.zoom-leading:hover, .zoom-step.plus:hover  { background: var(--ink); color: var(--paper); }
.zoom-leading:active, .zoom-step.plus:active { transform: scale(0.88); }
#zoom-group:hover .zoom-step.plus,
#zoom-group:focus-within .zoom-step.plus {
  opacity: 1;
  pointer-events: auto;
}

.leading-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease-out;
}
.leading-icon.minus { opacity: 0; }
#zoom-group:hover .leading-icon.idle,
#zoom-group:focus-within .leading-icon.idle { opacity: 0; }
#zoom-group:hover .leading-icon.minus,
#zoom-group:focus-within .leading-icon.minus { opacity: 1; }

/* ZOOM label sits in flex flow with an 8px gap from the leading
   icon — matches the page button's icon-to-label gap. On hover
   the chip (absolute-centered) crossfades in over the now-faded
   label; no width animation on the label itself. */
.zoom-label {
  display: inline-flex;
  align-items: center;
  height: 100%;
  margin-left: 8px;
  font-family: "Pliego Bold", Pliego, Georgia, serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.18s ease-out;
}
#zoom-group:hover .zoom-label,
#zoom-group:focus-within .zoom-label { opacity: 0; }

.zoom-value-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  background: var(--surface);
  border: 2px solid var(--ink);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out 60ms;
}
#zoom-group:hover .zoom-value-wrap,
#zoom-group:focus-within .zoom-value-wrap {
  opacity: 1;
  pointer-events: auto;
}
#zoom-input {
  width: 40px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: Pliego, "Pliego Book", Georgia, serif;
  font-size: 15px;
  font-weight: normal;
  font-feature-settings: "tnum";
  padding: 0;
  -moz-appearance: textfield;
}
#zoom-input::-webkit-outer-spin-button,
#zoom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#zoom-input:focus { outline: none; }
.zoom-pct {
  color: var(--ink);
  font-family: Pliego, "Pliego Book", Georgia, serif;
  font-size: 13px;
  font-weight: normal;
  font-feature-settings: "tnum";
}


/* ─── Zoom preset panel ───────────────────────────────────── */
#zoom-panel {
  width: 100%;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transform-origin: bottom right;
  pointer-events: none;
  transition: max-height var(--reveal),
              opacity 0.18s ease-out,
              transform var(--reveal);
}
#zoom-group:focus-within ~ #zoom-panel {
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.zoom-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  min-height: 38px;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Pliego, "Pliego Book", Georgia, serif;
  font-size: 14px;
  font-weight: normal;
  font-feature-settings: "tnum";
  cursor: pointer;
  transition: background var(--tap), color var(--tap);
}
.zoom-opt:last-child { border-bottom: none; }
.zoom-opt:hover  { background: var(--surface-deep); }
.zoom-opt.active {
  background: var(--blood);
  color: var(--paper);
}
.zoom-opt.active:hover { background: var(--blood-hot); }


/* ═════════════════════════════════════════════════════════════
   SIDEBAR — neutral grey slab with a single ink edge
   ═════════════════════════════════════════════════════════════ */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 252px;
  z-index: 10000;
  background: var(--surface-dark);
  border-right: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(-110%);
  transition: transform var(--reveal);
  will-change: transform;
}
#sidebar.open { transform: translateX(0); }
#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 2px solid var(--ink);
  background: var(--blood);
  color: var(--paper);
}
#sidebar-title {
  font-family: "Pliego Bold", Pliego, Georgia, serif;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}
#sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--tap), color var(--tap), transform var(--tap);
}
#sidebar-close:hover  { background: var(--ink); color: var(--paper); }
#sidebar-close:active { transform: scale(0.9); }

#sidebar-thumbs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface) transparent;
}
#sidebar-thumbs::-webkit-scrollbar { width: 6px; }
#sidebar-thumbs::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 0; }

.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--tap), border-color var(--tap),
              color var(--tap), transform var(--tap);
}
.thumb-item:hover  { background: var(--surface-deep); }
.thumb-item:active { transform: scale(0.98); }
.thumb-item.current {
  background: var(--blood);
  border-color: var(--ink);
  color: var(--paper);
}
.thumb-item.current .thumb-label { color: var(--paper); }

.thumb-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--paper);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}
.thumb-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  border-bottom: 1px solid var(--ink);
}
.thumb-page:last-child { border-bottom: none; }
.thumb-page img {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
}
.thumb-label {
  font-family: Pliego, "Pliego Book", Georgia, serif;
  font-size: 13px;
  font-weight: normal;
  font-feature-settings: "tnum";
  color: var(--ink);
  letter-spacing: 0.04em;
}

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.62);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
#sidebar-backdrop.open { display: block; opacity: 1; }


/* ═════════════════════════════════════════════════════════════
   MOBILE — vertical column anchored bottom-right
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  @keyframes barEnterMobile {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  #control-bar {
    bottom: 16px;
    right: 16px;
    left: auto;
    transform: none;
    transform-origin: bottom right;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
    animation: barEnterMobile 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards;
  }
  #control-bar.bar-hidden {
    transform: translateY(calc(100% + 80px));
  }

  /* Touch: no hover signal, so zoom pill stays in its hover layout. */
  #zoom-group         { width: 168px; }
  .leading-icon.idle  { opacity: 0; }
  .leading-icon.minus { opacity: 1; }
  .zoom-label         { opacity: 0; }
  .zoom-value-wrap    { opacity: 1; pointer-events: auto; }
  .zoom-step.plus     { opacity: 1; pointer-events: auto; }

  #sidebar            { width: min(300px, 84vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}