/* Katalog motoru — the viewer's chrome (screen only); the book itself is styled by the book's own stylesheet.
   Source: ~/Developer/norm-shopify/katalog-motoru/viewer.css. Every book carries an identical copy as
   assets/css/viewer.css, written and checked by katalog-motoru/sync.py: never edit a copy.
   A book's colours, faces and corners are the --ui-* variables below, set on :root in that book's own stylesheet
   (README.md lists them). The defaults here have no specificity (:where), so the book's values win whatever the order. */
:where(:root) {
  --ui-bg: #ECECEE; --ui-bg-hi: #F7F7F8; --ui-bg-lo: #DFDFE3;     /* the backdrop: centre, middle and edge of its glow */
  --ui-ink: #222; --ui-ink-hover: #3A3A3A; --ui-on-ink: #fff;
  --ui-mute: #727278;
  --ui-card: rgba(255, 255, 255, .8);                               /* the dock, the language switch, the round buttons */
  --ui-card-hover: #fff;
  --ui-line: rgba(0, 0, 0, .12);
  --ui-focus: var(--ui-ink);
  --ui-shadow-rgb: 34, 34, 34;                                      /* drop shadows of pages, dock and menu */
  --ui-spine-rgb: 24, 24, 24;                                       /* the shading at the spine and on a turning leaf */
  --ui-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ui-title: 500 15px/1 var(--ui-font);                            /* the book's name in the bar */
  --ui-title-tracking: -.01em;
  --ui-heading: 600 15px/1.15 var(--ui-font);                       /* the PDF menu's two choices */
  --ui-grid-heading: 600 18px/1 var(--ui-font);                     /* «all pages» */
  --ui-btn: 600 13.5px/1 var(--ui-font);
  --ui-btn-tracking: 0;
  --ui-pos: 600 13px/1 var(--ui-font);                              /* the dock's page number */
  --ui-pos-small: 500 10.5px/1.2 var(--ui-font);
  --ui-logo-h: 30px;
  --ui-menu-bg: #fff; --ui-menu-hover: #F2F2F4;
  --ui-mi: #ECECEF; --ui-mi-ink: var(--ui-ink);                     /* the menu's icon discs: screen PDF… */
  --ui-mi2: var(--ui-ink); --ui-mi2-ink: var(--ui-on-ink);          /* …and print PDF */
  --ui-r-btn: 99px;                                                 /* buttons and icon discs (99px: round) */
  --ui-r-pill: 99px;                                                /* the dock and the toast */
  --ui-r-menu: 18px; --ui-r-item: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 45%, var(--ui-bg-hi) 0%, var(--ui-bg) 56%, var(--ui-bg-lo) 100%);
  color: var(--ui-ink); font-family: var(--ui-font); overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:is(.bar, .dock, .menu) .ico { flex: none; display: block; }      /* the chrome's icons only: pages keep their own .ico sizes */
:is(.btn, .icon-btn, .lang button, .lang a, .menu button, .thumb):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

.bar { position: fixed; inset: 0 0 auto 0; height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 22px; z-index: 50; }
.bar .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.bar .brand img { height: var(--ui-logo-h); width: auto; display: block; }
.bar .brand span { font: var(--ui-title); letter-spacing: var(--ui-title-tracking); padding-left: 14px; border-left: 1px solid var(--ui-line); }
.bar .sp { flex: 1; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--ui-card); }
.lang[hidden] { display: none; }
.lang button, .lang a { font: 700 11px/1 var(--ui-font); letter-spacing: .08em; padding: 8px 11px; border-radius: 99px; color: var(--ui-mute); text-decoration: none; }
.lang button[aria-pressed='true'], .lang a[aria-current] { background: var(--ui-ink); color: var(--ui-on-ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--ui-r-btn); font: var(--ui-btn); letter-spacing: var(--ui-btn-tracking); }
.btn .ico, .icon-btn .ico { width: 18px; height: 18px; }
.btn.primary { background: var(--ui-ink); color: var(--ui-on-ink); }
.btn.primary:hover { background: var(--ui-ink-hover); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--ui-r-btn); display: grid; place-items: center; background: var(--ui-card); }
.icon-btn:hover { background: var(--ui-card-hover); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* A click on the right half of the stage turns forward, on the left half back (viewer.js); the pages hold no links. The
   halves lie over the whole stage, the margins beside the book included, and show which way a click turns. No tap
   flash, no double-tap zoom and no text selected by a quick double press. */
.stage { position: fixed; left: 0; right: 0; top: 60px; bottom: 74px; display: grid; place-items: center; z-index: 1; overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.stage::before, .stage::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 45; }
.stage::before { left: 0; cursor: w-resize; }
.stage::after { right: 0; cursor: e-resize; }
.stage.at-start::before, .stage.at-end::after { cursor: default; }
.book-wrap { position: relative; }
/* The book is laid out at its size on screen (--pg, one page's side in whole device pixels, set by layout()) and each page
   is scaled into its slot or onto a turning leaf with a 2D transform (--s), so text sets at 210 mm in every browser, as in
   the PDF. Scaling the whole book made a turning leaf a resampled copy: a page went soft the moment it lifted and snapped
   sharp when it landed; CSS zoom cured that in Chromium but moved line breaks in WebKit. No perspective: with one, on a
   real 2x screen (Chromium launched with --force-device-scale-factor=2) a lifting page fell to 0.73-0.86 of its still
   sharpness and a landing one snapped from 0.78-0.86 to 1.00 in its slot; without one both ends of a turn stay at
   0.93-1.00. Playwright's emulated scale factor exaggerates this and a 1x screencast hides it. Measured on 2026-10-19 by
   the Lacinia, Herbaclean, Tanura, Rose Candy and MelomyPet sessions. The page still turns about the spine. */
.book { --pg: 210mm; --s: 1; position: absolute; left: 0; top: 0; width: calc(2 * var(--pg)); height: var(--pg); }
.book.single { width: var(--pg); }
.slot { position: absolute; top: 0; width: var(--pg); height: var(--pg); }
.slot.l { left: 0; }
.slot.r { left: var(--pg); }
.book.single .slot.r { left: 0; }
.slot .page, .leaf .page { transform: scale(var(--s)); transform-origin: 0 0; }
.slot .page { box-shadow: 0 2px 6px rgba(var(--ui-shadow-rgb), .08), 0 18px 40px rgba(var(--ui-shadow-rgb), .16); }
/* Each page's shadow stops at the spine: spilling onto the facing page, it darkened that page's gutter, which jumped darker
   the moment a turning leaf landed there and uncovered it. */
.book:not(.single) .slot.l .page { clip-path: inset(-80px 0 -80px -80px); }
.book:not(.single) .slot.r .page { clip-path: inset(-80px -80px -80px 0); }
/* Spine shading, viewer only, never printed. A scaled page is a stacking context, so a slot's shading never paints over a
   turning leaf; each leaf carries the shading of the side its page lies on when flat (a right-hand page turns on a .fwd
   leaf, a left-hand one on a .back leaf), so nothing pops on at the gutter when a turn starts or ends. */
.slot .page::after, .leaf .page::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22mm; pointer-events: none; z-index: 40; }
.slot.l .page::after, .leaf.back .page::after { right: 0; background: linear-gradient(270deg, rgba(var(--ui-spine-rgb), .16), rgba(var(--ui-spine-rgb), .05) 30%, rgba(var(--ui-spine-rgb), 0)); }
.slot.r .page::after, .leaf.fwd .page::after { left: 0; background: linear-gradient(90deg, rgba(var(--ui-spine-rgb), .14), rgba(var(--ui-spine-rgb), .04) 26%, rgba(var(--ui-spine-rgb), 0)); }
.book.single .slot .page::after { display: none; }

/* page turn: two leaves, one for the page that lifts and one for the page that lands (viewer.js, flip) */
.leaf { position: absolute; top: 0; width: var(--pg); height: var(--pg); transform-style: preserve-3d; z-index: 30; will-change: transform; }
.leaf.fwd { left: var(--pg); transform-origin: 0 50%; }
.leaf.back { left: 0; transform-origin: 100% 50%; }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
/* WebKit draws the pictures on a turning leaf softer than in a slot, so a photo page snapped sharp as it landed (0.82 of
   the still page at DPR 1, 0.90 at DPR 2). will-change on the leaf's page cures that in WebKit but makes Chrome raster the
   page unscaled and resample it (0.76 at DPR 1), so the rule is WebKit-only: only WebKit knows -apple-system-body. */
@supports (font: -apple-system-body) { .leaf .page { will-change: transform; } }
.leaf .face::before { content: ''; position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity var(--dur) ease; }
.leaf.fwd .face::before { background: linear-gradient(90deg, rgba(var(--ui-spine-rgb), 0), rgba(var(--ui-spine-rgb), .28)); }
.leaf.back .face::before { background: linear-gradient(270deg, rgba(var(--ui-spine-rgb), 0), rgba(var(--ui-spine-rgb), .28)); }
.leaf.go .face::before { opacity: 1; }

.dock { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--ui-r-pill);
  background: var(--ui-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 24px rgba(var(--ui-shadow-rgb), .12); z-index: 50; }
.dock .pos { min-width: 112px; text-align: center; font: var(--ui-pos); font-variant-numeric: lining-nums tabular-nums; }
.dock .pos small { display: block; font: var(--ui-pos-small); color: var(--ui-mute); margin-top: 3px; letter-spacing: .02em; }
.hint { position: fixed; right: 22px; bottom: 28px; font-size: 11px; color: var(--ui-mute); z-index: 40; }

.menu { position: fixed; top: 64px; right: 22px; width: 330px; max-width: calc(100vw - 28px); padding: 8px; border-radius: var(--ui-r-menu); background: var(--ui-menu-bg); box-shadow: 0 20px 60px rgba(var(--ui-shadow-rgb), .22); z-index: 60; }
.menu[hidden] { display: none; }
.menu button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; width: 100%; padding: 12px; border-radius: var(--ui-r-item); text-align: left; align-items: center; }
.menu button:hover { background: var(--ui-menu-hover); }
.menu .mi { width: 40px; height: 40px; border-radius: var(--ui-r-btn); background: var(--ui-mi); color: var(--ui-mi-ink); display: grid; place-items: center; }
.menu .mi .ico { width: 20px; height: 20px; }
.menu .mi.l { background: var(--ui-mi2); color: var(--ui-mi2-ink); }
.menu b { display: block; font: var(--ui-heading); }
.menu span { display: block; font-size: 12px; color: var(--ui-mute); margin-top: 3px; line-height: 1.35; }

.grid { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ui-bg) 97%, transparent); overflow: auto; padding: 84px 40px 60px; }
.grid[hidden] { display: none; }
.grid-head { position: fixed; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
  background: color-mix(in srgb, var(--ui-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; }
.grid-head b { font: var(--ui-grid-heading); }
.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px 26px; max-width: 1500px; margin: 0 auto; }
.thumb { cursor: pointer; }
.thumb .tb { position: relative; height: 0; padding-bottom: 50%; }
.thumb .tb-in { position: absolute; left: 0; top: 0; width: 420mm; height: 210mm; transform-origin: 0 0; display: flex; pointer-events: none; }
.thumb .tb-in > div { width: 210mm; height: 210mm; flex: none; }
.thumb .tb-in .page { box-shadow: 0 6px 20px rgba(var(--ui-shadow-rgb), .12); }
.thumb .cap { font-size: 12px; color: var(--ui-mute); margin-top: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.thumb.cur .cap { color: var(--ui-ink); font-weight: 700; }
.thumb:hover .tb-in .page { box-shadow: 0 10px 28px rgba(var(--ui-shadow-rgb), .24); }

.toast { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--ui-ink); color: var(--ui-on-ink); padding: 12px 18px; border-radius: var(--ui-r-pill); font-size: 13px; z-index: 80; box-shadow: 0 10px 30px rgba(var(--ui-shadow-rgb), .25); }
.toast[hidden] { display: none; }

@media (max-width: 760px) {
  .bar { height: 54px; padding: 0 14px; gap: 10px; }
  .bar .brand span, .hint, .lang { display: none; }
  .stage { top: 54px; bottom: 70px; }
  .btn { padding: 0 14px; }
}

/* labels in a right-to-left language: no tracking (viewer.js, rtlText) */
[dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; }

/* ---------- print / PDF layout ---------- */
.print-root { display: none; }
html.print-mode body { background: #fff; overflow: visible; }
html.print-mode .bar, html.print-mode .stage, html.print-mode .dock, html.print-mode .hint { display: none !important; }
html.print-mode .print-root { display: block; }
.sheet { position: relative; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
.sheet:last-child { break-after: auto; page-break-after: auto; }
.sheet.digital { width: 210mm; height: 210mm; }
.sheet.press { width: 226mm; height: 226mm; }
.sheet.press .bleedbox { position: absolute; left: 5mm; top: 5mm; width: 216mm; height: 216mm; overflow: hidden; }
.sheet.press .bleedbox > .page { position: absolute; left: 3mm; top: 3mm; overflow: visible; }
.sheet.press .marks { position: absolute; inset: 0; width: 226mm; height: 226mm; }
.sheet.press .slug { position: absolute; left: 8mm; bottom: 1.4mm; font: 400 5pt/1 var(--ui-font); color: #000; letter-spacing: .04em; }
@media print {
  html, body { background: #fff !important; overflow: visible !important; height: auto !important; }
  .bar, .stage, .dock, .hint, .menu, .grid, .toast { display: none !important; }
  .print-root { display: block !important; }
}

/* a page on a site: its title and its own text stay in the document for screen readers and search engines, out of sight */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }