/* ------------------------------------------------------------------
   Flipbook viewer
   The catalogue is the hero. Everything around it stays quiet:
   a muted Mirage navy desk, soft light, and tools that step back.
   Mirage red (--accent, from config.php) is kept for the Contact button.
   ------------------------------------------------------------------ */

/* Roboto, served from this site rather than Google's servers.
   One variable file covers every weight we use (400, 500, 700), latin characters only.
   Apache License 2.0 - see assets/fonts/LICENSE.txt. */
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap; /* text shows in the fallback font straight away, then swaps */
  src: url(../fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --desk: #1b2a41;
  --desk-light: #253856;
  --desk-dark: #121d2e;
  --on-desk: #eef2f7;
  --on-desk-muted: #aab6c8;
  --hover: rgba(255, 255, 255, 0.09);
  --accent: #af1f28;
  --accent-ink: #ffffff;
  --paper: #ffffff;
  --ink: #0a2040;
  --ink-muted: #56627a;
  --line: #d8dee8;
  --focus: #9cc3ff;
  --bar-h: 56px;
  font-family: Roboto, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--desk);
  color: var(--on-desk);
  font-size: 15px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 6px; font-weight: 600;
}
.skip:focus { top: 12px; }

.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Layout ------------------------------------------------------------ */

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--bar-h) 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* Only shown to signed-in admins, never in an embed. Sits above the viewer's own bars. */
.app.has-adminbar { grid-template-rows: auto var(--bar-h) 1fr auto; }
.adminbar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; background: var(--desk-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px; color: var(--on-desk-muted);
}
.adminbar__note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adminbar__link {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px 4px 8px;
  border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: var(--on-desk);
  font-weight: 600; text-decoration: none;
}
.adminbar__link:hover { background: rgba(255, 255, 255, 0.18); }
.adminbar__link .i { width: 16px; height: 16px; stroke-width: 2; }

.bar { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-width: 0; }
.bar--top { justify-content: space-between; }
.bar--top .bar__group { flex: none; } /* the title shortens instead of the buttons being cut off */
.bar--bottom {
  min-height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
  justify-content: space-between;
}
.bar__group { display: flex; align-items: center; gap: 4px; min-width: 0; }

/* Logo, a thin rule, then the catalogue title, set on one baseline:
   the logo image sits on the text baseline at the foot of the "mirage" wordmark
   (22 of its 71 units are below the baseline), so it lines up in any font. */
.brand {
  --logo-h: 28px;
  flex: 1 1 auto; min-width: 0; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__logo { display: inline-block; height: var(--logo-h); width: auto; vertical-align: calc(var(--logo-h) * -0.31); }
/* The logo doubles as a link home. Padding gives it the same hit area and hover as the toolbar
   buttons; the extra 5px in vertical-align keeps the wordmark on the title's baseline. */
.brand__home {
  --pad-y: 5px; /* kept in the vertical-align sum below, so the baseline doesn't move */
  display: inline-block; padding: var(--pad-y) 8px; margin-right: -2px; line-height: 0;
  border-radius: 8px; vertical-align: calc(var(--logo-h) * -0.31 - var(--pad-y));
  transition: background-color 0.15s;
}
@media (pointer: coarse) {
  .brand__home { --pad-y: 9px; } /* a finger-sized target, like the toolbar buttons */
}
.brand__home:hover { background: var(--hover); }
.brand__home .brand__logo { display: block; vertical-align: baseline; }
.brand__rule { display: inline-block; width: 1px; height: calc(var(--logo-h) * 0.78); margin: 0 calc(var(--logo-h) * 0.45); background: rgba(255, 255, 255, 0.3); vertical-align: calc(var(--logo-h) * -0.2); }
.brand__title { display: inline; margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: 0.005em; }

.tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--on-desk);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tool:hover { background: var(--hover); }
.tool:disabled { opacity: 0.35; cursor: default; background: transparent; }
.tool__label { display: none; font-size: 13.5px; }
.tool--labelled span { font-size: 13.5px; }
.tool__note { color: var(--on-desk-muted); }

.contact-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  font-weight: 650; cursor: pointer; white-space: nowrap;
}
.contact-btn:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.14); }
.contact-btn .i { width: 18px; height: 18px; }

/* Stage and book ------------------------------------------------------ */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 65% at 50% 48%, var(--desk-light) 0%, var(--desk) 60%, var(--desk-dark) 100%);
}

.loading {
  position: absolute; margin: 0; color: var(--on-desk-muted); font-size: 14px;
  transition: opacity 0.3s;
}
.app.is-ready .loading { opacity: 0; pointer-events: none; }

.sizer {
  position: relative;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.app.is-ready .sizer { opacity: 1; }

.book-shadow {
  position: absolute; top: 1.2%; height: 97.6%; left: 0; width: 100%;
  box-shadow: 0 22px 44px -10px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.22);
  transition: left 0.5s ease, width 0.5s ease;
  pointer-events: none;
}

/* Fore-edge: the stack of paper you can see beside an open book.
   It grows on the left and shrinks on the right as you read. */
.edge {
  position: absolute; top: 0.5%; height: 99%; width: 0;
  background: repeating-linear-gradient(to right, #fbfbf8 0 1px, #cdd2cc 1px 2px);
  transition: width 0.5s ease;
  pointer-events: none;
}
.edge--left { right: 100%; border-radius: 3px 0 0 3px; box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.25); }
.edge--right { left: 100%; border-radius: 0 3px 3px 0; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25); }

.turn {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 48px; height: 72px; border: 0; border-radius: 10px;
  display: grid; place-items: center;
  background: transparent; color: var(--on-desk); cursor: pointer;
  transition: background 0.15s, opacity 0.2s;
}
.turn .i { width: 30px; height: 30px; stroke-width: 1.5; }
.turn:hover { background: var(--hover); }
.turn:disabled { opacity: 0; pointer-events: none; }
.turn--prev { left: 10px; }
.turn--next { right: 10px; }

/* StPageFlip base styles */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.stf__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }
.book .stf__parent, .book { touch-action: none; }

.page {
  background: var(--paper);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.page__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.page__img.is-loaded { opacity: 1; }
.page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.is-landscape .page--left::after {
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.06) 2.5%, rgba(0, 0, 0, 0) 8%),
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0) 1.5%);
}
.is-landscape .page--right::after {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.06) 2.5%, rgba(0, 0, 0, 0) 8%),
    linear-gradient(to left, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0) 1.5%);
}

.hotspots { position: absolute; inset: 0; z-index: 2; }
.hotspot {
  position: absolute; display: block; padding: 0; margin: 0;
  border: 0; border-radius: 3px; background: transparent; cursor: pointer;
}
@media (hover: hover) {
  .hotspot:hover {
    background: rgba(175, 31, 40, 0.12);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: 0 0 0 2px var(--accent);
  }
}
.hotspot:focus-visible { outline: 3px solid #1f6feb; outline-offset: 1px; }

/* Page scrubber ------------------------------------------------------- */

.scrub { flex: 1; display: flex; align-items: center; gap: 14px; max-width: 520px; min-width: 0; padding: 0 8px; }
.scrub__count { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--on-desk-muted); white-space: nowrap; min-width: 64px; text-align: right; }
.scrub input[type="range"] {
  --p: 0%;
  flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--on-desk) var(--p), rgba(255, 255, 255, 0.2) var(--p));
}
.scrub input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.scrub input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--on-desk); }
.scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.18);
}
.scrub input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--paper); }
/* Touch screens: a taller slider and a bigger handle, easier to grab with a thumb. */
@media (pointer: coarse) {
  .scrub input[type="range"] { height: 40px; }
  .scrub input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .scrub input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
}

/* Panels -------------------------------------------------------------- */

.sheet {
  width: min(520px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 0; border-radius: 12px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet--wide { width: min(980px, calc(100vw - 32px)); }
.sheet::backdrop, .zoom::backdrop { background: rgba(8, 16, 30, 0.62); }
.sheet .tool { color: var(--ink); }
.sheet .tool:hover { background: #eef2f7; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 6px 22px; }
.sheet__head h2 { margin: 0; font-size: 17px; }
.sheet__head form { margin: 0; }
.sheet__intro { margin: 0 22px 12px; color: var(--ink-muted); max-width: 60ch; }
.sheet__foot { margin: 0; padding: 12px 22px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.sheet__foot a { display: inline-flex; align-items: center; gap: 8px; }
.sheet__foot .i { width: 18px; height: 18px; }

.thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 14px; padding: 8px 22px 24px; overflow-y: auto;
}
.thumb { display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: var(--ink-muted); font-size: 13px; }
.thumb img { width: 100%; height: auto; display: block; background: #f0f2f6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.thumb:hover img { box-shadow: 0 0 0 2px var(--ink); }
.thumb[aria-current="true"] img { box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px var(--ink); }
.thumb[aria-current="true"] { color: var(--ink); font-weight: 650; }

.search { padding: 4px 22px 8px; }
.search input, .share-link input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid #b3bdcc; border-radius: 8px; background: #fff; color: var(--ink);
}
.search input:focus, .share-link input:focus { border-color: var(--ink); }
.search__status { margin: 0; padding: 2px 22px 8px; font-size: 13.5px; color: var(--ink-muted); min-height: 1.4em; }
.results { list-style: none; margin: 0; padding: 0 12px 12px; overflow-y: auto; }
.results button {
  display: block; width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.results button:hover { background: #f0f3f8; }
.results strong { display: block; font-size: 14px; }
.results span { display: block; color: var(--ink-muted); font-size: 14px; }
.results mark { background: #fbe3a4; color: inherit; border-radius: 2px; padding: 0 1px; }

.share-link { display: flex; gap: 8px; padding: 4px 22px 4px; }
.share-link .contact-btn { height: 44px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 22px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 6px 22px 22px; }
.share-grid__item {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  text-decoration: none; font-weight: 600; cursor: pointer;
}
.share-grid__item:hover { border-color: var(--ink); }
.share-grid__item .i { width: 19px; height: 19px; }

.contact-list { list-style: none; margin: 0; padding: 0 12px 16px; }
.contact-list a { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 8px; text-decoration: none; }
.contact-list a:hover { background: #f0f3f8; }
.contact-list .i { width: 24px; height: 24px; }
.contact-list strong { display: block; }
.contact-list span span { color: var(--ink-muted); word-break: break-all; }

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

.zoom {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--desk-dark); color: var(--on-desk);
}
.zoom[open] { display: block; }
.zoom__scroll { position: absolute; inset: 0; overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.zoom__canvas { display: flex; justify-content: center; align-items: center; min-width: 100%; min-height: 100%; padding: 24px 24px 96px; width: max-content; margin: 0 auto; }
.zoom__canvas img { display: block; height: var(--zh, 80vh); width: auto; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-drag: none; }
.zoom__bar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px;
  background: rgba(18, 29, 46, 0.94); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.zoom__bar form { margin: 0; }
.zoom__level { min-width: 64px; height: 44px; border: 0; background: none; color: var(--on-desk); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 8px; }
.zoom__level:hover { background: var(--hover); }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: var(--desk); padding: 24px; }

/* Responsive ---------------------------------------------------------- */

.show-s { display: none; }

@media (min-width: 1080px) {
  .tool__label { display: inline; }
  .bar--bottom .tool { padding: 0 12px; }
}

@media (max-width: 760px) {
  :root { --bar-h: 52px; }
  .hide-s { display: none; }
  .show-s { display: inline-flex; }
  .turn { display: none; }
  .bar { padding: 0 8px; }
  .bar--bottom { flex-wrap: wrap; justify-content: space-around; row-gap: 0; padding-top: 4px; }
  .scrub { order: -1; flex: 1 0 100%; max-width: none; padding: 0; gap: 6px; }
  .scrub__count { min-width: 52px; }
  .bar__group--left, .bar__group--right { gap: 0; }
  .contact-btn { height: 36px; padding: 0 12px; font-size: 14px; }
  .brand { --logo-h: 22px; }
  .brand__title { font-size: 14px; }
  .sheet { width: 100vw; max-width: 100vw; max-height: 86vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .sheet--wide { width: 100vw; }
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); padding: 8px 14px 24px; }
}

.is-embed .brand__home, .is-embed .brand__logo, .is-embed .brand__rule { display: none; }

@media (max-width: 380px) {
  .brand__rule { margin: 0 8px; }
  .contact-btn { padding: 0 10px; }
}

/* Phones turned sideways: every pixel of height goes to the pages. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bar-h: 46px; }
  .brand { --logo-h: 22px; }
  .bar--bottom { min-height: 50px; }
  .contact-btn { height: 34px; }
  .tool { height: 40px; }
  .turn { width: 40px; }
}

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