/* vizmaya story formats: book@1.css. Source: packages/html-stories/formats. */
/*
 * Shared by every format stylesheet (book@1.css, board@1.css, deck@1.css
 * start with this). The runtime adds html.js and html.vz-on plus the
 * format's own class (html.book-on, html.board-on, html.deck-on) when it
 * takes the page over; without them, the same content reads as one column.
 *
 * Tokens the controls use, set from the page's vizmaya:theme by the runtime
 * (override any of them in your own :root): --vz-bg --vz-surface --vz-text
 * --vz-muted --vz-line --vz-accent. --vz-chrome-h is the site header's
 * height, which the site sets as --vizmaya-chrome-h.
 */
:where(:root) { --vz-chrome-h: var(--vizmaya-chrome-h, 64px) }
@media (max-width: 480px) { :where(:root) { --vz-chrome-h: var(--vizmaya-chrome-h, 56px) } }

/* A chart that drew nothing (no JS, or it failed) shows its data-alt text. */
:where(.chart:empty)::before { content: attr(data-alt); display: block; font-style: italic; font-size: 15px; line-height: 1.45; opacity: .75 }
html:not(.js) .chart { height: auto !important; aspect-ratio: auto !important }
html:not(.vz-on) .vz-only { display: none !important }

.vz-btn {
  appearance: none; -webkit-appearance: none; margin: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--vz-line, rgba(127, 127, 127, .35)); background: var(--vz-surface, #111820); color: var(--vz-text, #e0ddd5);
  font: inherit; font-size: 14px; line-height: 1; white-space: nowrap;
}
.vz-btn:hover { border-color: var(--vz-muted, #5a6a70) }
.vz-btn:disabled { opacity: .35; cursor: default }
.vz-btn[hidden] { display: none }
.vz-btn:focus-visible, .vz-seg button:focus-visible { outline: 2px solid var(--vz-accent, #D85A30); outline-offset: 2px }
.vz-btn.vz-primary { background: var(--vz-accent, #D85A30); border-color: var(--vz-accent, #D85A30); color: var(--vz-bg, #0a0e14); font-weight: 600 }
.vz-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }

.vz-controls {
  position: relative; z-index: 5; flex: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px 14px; font-size: 14px; color: var(--vz-muted, #5a6a70);
}
.vz-where { min-width: 132px; text-align: center; font-variant-numeric: tabular-nums; color: var(--vz-text, #e0ddd5); opacity: .8 }
.vz-sep { flex: 0 0 1px; height: 22px; background: var(--vz-line, rgba(127, 127, 127, .35)); margin: 0 4px }
.vz-hint {
  position: absolute; left: 50%; top: 18px; z-index: 11; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 8px 14px; border-radius: 18px; font-size: 14px; white-space: nowrap;
  background: var(--vz-surface, #111820); color: var(--vz-text, #e0ddd5); border: 1px solid var(--vz-line, rgba(127, 127, 127, .35));
  transition: opacity .25s, transform .25s;
}
.vz-hint.vz-show { opacity: 1; transform: translate(-50%, 0) }
/* Labels that fold away on phones stay readable to screen readers. */
@media (max-width: 560px) {
  .vz-controls { gap: 6px; padding-left: 8px; padding-right: 8px }
  .vz-controls .vz-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .vz-where { min-width: 64px }
}
/* The one-page view keeps the controls at the bottom of the screen. */
html.js:not(.vz-on) .vz-controls {
  position: sticky; bottom: 0; padding-top: 24px;
  background: linear-gradient(transparent, var(--vz-bg, #0a0e14) 40%);
}
@media (prefers-reduced-motion: reduce) { .vz-hint { transition: none } }

/*
 * vizmaya book format, v1. Pair with book@1.js.
 *
 * html.book-on: the pages are sheets in a book, two to a spread on wide
 * screens and one at a time on phones, each laid out at a fixed page size
 * and scaled to fit. Otherwise (no JS, or "Read as one page"): the same
 * pages stacked as one column.
 *
 * Tokens (set them in your own :root):
 *   --pw, --ph       the page size every page is designed at (400px × 580px)
 *   --book-paper     the colour of blank page backs (match your pages' paper)
 *   --book-table     what the book lies on: a colour or a gradient
 *   --book-head      running heads and folios (default: the page's text colour)
 */
:where(:root) {
  --pw: 400px; --ph: 580px;
  --book-paper: #f3ede1;
  --book-table: radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--vz-bg, #0a0e14) 92%, var(--vz-text, #e0ddd5)), var(--vz-bg, #0a0e14) 70%);
}

/* ── The book ────────────────────────────────────────────────────────── */
html.book-on .stage {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  height: calc(100svh - var(--vz-chrome-h)); min-height: 520px; overflow: hidden;
  margin: 0; padding: 0; max-width: none;
}
html.book-on .stage:fullscreen { height: 100vh }
html.book-on .stage > .pages { display: none }
html.vz-aura.book-on .stage { background: transparent !important }
.vz-table { position: absolute; inset: 0; pointer-events: none; background: var(--book-table) }
html.vz-aura .vz-table { display: none }
.vz-desk {
  position: relative; flex: 1 1 auto; min-height: 0;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.vz-desk:active { cursor: grabbing }
.vz-book-fit { position: absolute; left: 50%; top: 50%; transform-origin: 0 0 }
.vz-book {
  position: relative; width: calc(var(--pw) * 2); height: var(--ph);
  perspective: 2400px; transform: translateX(var(--vz-shift, 0px));
  transition: transform .7s cubic-bezier(.3, .1, .2, 1);
}
.vz-book.vz-single { width: var(--pw) }
.vz-book::before { /* the shadow the book throws on the table */
  content: ''; position: absolute; left: var(--vz-shadow-l, 50%); right: var(--vz-shadow-r, 0); top: 2%; bottom: -1.5%;
  border-radius: 6px; background: #000; filter: blur(22px); opacity: .5; transition: left .7s, right .7s;
}
.vz-sheet {
  position: absolute; top: 0; left: var(--pw); width: var(--pw); height: var(--ph);
  transform-origin: left center;
}
.vz-book.vz-single .vz-sheet { left: 0 }
.vz-sheet.vz-gone { visibility: hidden }
.vz-face { position: absolute; inset: 0; overflow: hidden; background: var(--book-paper) }
/* At rest a sheet is flat, with no 3D and no layer of its own: an unturned
   sheet shows its front where it lies, a turned one (.vz-left) its back on
   the left-hand side. Only a turning sheet (.vz-turning) is 3D, and only it
   is a compositing layer. book.js sets and clears these (see "rest" there). */
.vz-sheet:not(.vz-turning):not(.vz-left) > .vz-back,
.vz-sheet.vz-left:not(.vz-turning) > .vz-front { display: none }
.vz-sheet.vz-left:not(.vz-turning) { left: 0 }
.vz-sheet.vz-turning { transform-style: preserve-3d; will-change: transform }
.vz-sheet.vz-turning > .vz-face { backface-visibility: hidden; -webkit-backface-visibility: hidden }
.vz-sheet.vz-turning > .vz-back { transform: rotateY(180deg) }
.vz-blank { width: 100%; height: 100% }
/* gutter: right-hand pages darken towards the spine on their left, left-hand pages on their right */
.vz-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5 }
.vz-face.vz-front::before { background: linear-gradient(90deg, rgba(60, 40, 30, .26), rgba(60, 40, 30, 0) 9%), linear-gradient(270deg, rgba(0, 0, 0, .06), transparent 3%) }
.vz-face.vz-back::before { background: linear-gradient(270deg, rgba(60, 40, 30, .26), rgba(60, 40, 30, 0) 9%), linear-gradient(90deg, rgba(0, 0, 0, .06), transparent 3%) }
/* shading while a page turns: --vz-s is turn progress, 0 (flat right) to 1 (flat left) */
.vz-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; background: linear-gradient(90deg, rgba(20, 10, 15, 0), rgba(20, 10, 15, .5)) }
.vz-face.vz-front::after { opacity: calc(var(--vz-s, 0) * .9) }
.vz-face.vz-back::after { opacity: calc((1 - var(--vz-s, 1)) * .9); transform: scaleX(-1) }
html.book-on .vz-face > .page {
  position: relative; box-sizing: border-box; width: var(--pw); height: var(--ph);
  margin: 0; max-width: none; min-height: 0; aspect-ratio: auto; overflow: hidden;
  box-shadow: none; border-radius: 0;
}

/* running heads and folios, added by the runtime */
.vz-head, .vz-folio {
  position: absolute; left: 42px; right: 42px; z-index: 1; pointer-events: none;
  font-size: 13px; line-height: 1.2; color: var(--book-head, currentColor); opacity: .62;
}
.vz-head { top: 18px; font-style: italic }
.vz-folio { bottom: 18px; font-variant-numeric: lining-nums tabular-nums }
.page[data-side="left"] > .vz-head, .page[data-side="left"] > .vz-folio { text-align: left }
.page[data-side="right"] > .vz-head, .page[data-side="right"] > .vz-folio { text-align: right }
html:not(.book-on) .vz-head, html:not(.book-on) .vz-folio { display: none }

/* ── One column: no JS, or "Read as one page" ────────────────────────── */
:where(html:not(.book-on)) :where(.stage > .pages) {
  display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 32px 16px 48px;
}
:where(html:not(.book-on)) :where(.pages > .page) {
  box-sizing: border-box; width: min(100%, 620px); position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
html:not(.book-on) .book-only { display: none !important }
html.js:not(.book-on) .pages .chart { height: auto !important; aspect-ratio: var(--chart-ratio, 4 / 3) }

@media (prefers-reduced-motion: reduce) { .vz-book, .vz-book::before { transition: none } }