/* ==========================================================
  The Bohemians flipbook กค style.css
  Brand colours: cyan #00AFEF กค coral #CA5F46 กค green #00A859
   ========================================================== */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  --green: #00A859;
  --blue: #00AFEF;
  --coral: #CA5F46;
  --primary: var(--green);
  --secondary: var(--blue);
  --accent-text: var(--primary);

  --bg: #E8EEEA;
  --stage: #DDE5E0;
  --chrome: #FFFFFF;
  --chrome-2: #F2F5F3;
  --line: #D3DCD6;
  --text: #0F2417;
  --muted: #5A6B60;
  --paper: #FFFFFF;
  --ink: #16261C;
  --ink-muted: #66756B;
  --drawer-shadow: 0 18px 40px rgba(8, 40, 18, .18);

  --ui: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --dur: 800ms;
  --u: 4px;            /* 1% of page width, set by app.js */
  --book-shadow: .5;   /* 0..1, set by app.js */
}

[data-bs-theme="dark"] {
  --bg: #0B1510;
  --stage: #0F1C15;
  --chrome: #13221A;
  --chrome-2: #1A2D22;
  --line: #26402F;
  --text: #E6F0E9;
  --muted: #93A89A;
  --accent-text: #00A859;
  --drawer-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
[data-accent="blue"] { --primary: var(--blue); --secondary: var(--green); }
[data-bs-theme="dark"][data-accent="blue"] { --accent-text: #00AFEF; }
[data-paper="soft"] { --paper: #F3F6F2; }
[data-paper="black"] { --paper: #121614; --ink: #EEF2EF; --ink-muted: #9AA79F; }

/* Bootstrap theming with brand colours */
.btn-outline-primary {
  --bs-btn-color: var(--accent-text);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--chrome-2);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-border-color: var(--line);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 0, 175, 239;
}
.btn-check:checked + .btn-outline-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.12); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(0, 175, 239, .2); }
.form-range::-webkit-slider-thumb { background: var(--secondary); }
.form-range::-moz-range-thumb { background: var(--secondary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bg), 0 0 0 .25rem rgba(0, 175, 239, .25); }

html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- App shell ---------- */
.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.mark { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.brand-text { min-width: 0; line-height: 1.25; }
.brand-text strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer; color: var(--text);
  transition: background .15s;
}
.icon-btn.d-none { display: none; }
@media (min-width: 576px) { .icon-btn.d-sm-grid { display: grid; } }
.icon-btn:hover { background: var(--chrome-2); }
.icon-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.icon-btn svg { width: 20px; height: 20px; }
.zoom-label { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 38px; text-align: center; }
.sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }

/* ---------- Stage ---------- */
.stage {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, var(--stage), var(--bg));
}
.stage.zoomed { overflow: auto; }
.stage-inner { min-width: 100%; min-height: 100%; display: grid; place-items: center; padding: 36px 48px; }
.frame { position: relative; flex: none; }
.shift {
  position: absolute; inset: 0;
  transition: transform var(--dur) cubic-bezier(.45, .05, .25, 1);
  filter: drop-shadow(0 calc(14px * var(--book-shadow)) calc(22px * var(--book-shadow)) rgba(6, 30, 14, calc(.38 * var(--book-shadow))));
}
.no-shadow .shift { filter: none; }
.book { touch-action: none; user-select: none; -webkit-user-select: none; }
.book .turn-page { background: var(--paper); }
.stage.zoomed .book { touch-action: auto; }

/* loader shown until the first images are ready */
.loader { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .3s; }
.loader span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--secondary); animation: spin .8s linear infinite; }
.loader.done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; font-size: 12.5px; color: var(--muted); pointer-events: none; transition: opacity .4s; white-space: nowrap; }

/* ---------- Pages ---------- */
.fb-page {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: calc(var(--u) * 3.5); line-height: 1.5;
}
/* spine shading */
.fb-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fb-page.right::after { background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.04) 4%, transparent 10%); }
.fb-page.left::after  { background: linear-gradient(270deg, rgba(0,0,0,.16), rgba(0,0,0,.04) 4%, transparent 10%); }
.single-mode .fb-page::after { background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 3%); }
.no-grad .fb-page::after { display: none; }

.fb-page img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.fb-page .num { position: absolute; bottom: calc(var(--u) * 3.6); font-family: var(--ui); font-size: calc(var(--u) * 2.7); color: var(--ink-muted); z-index: 3; }
.fb-page.right .num { right: calc(var(--u) * 6); }
.fb-page.left .num { left: calc(var(--u) * 6); }
.hide-num .fb-page .num { display: none; }

/* photo page: printed-photobook look */
.photo figure { position: absolute; inset: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 7); margin: 0; display: flex; flex-direction: column; }
.photo .ph { flex: 1; min-height: 0; overflow: hidden; background: #c9d2cc; }
.photo figcaption { padding-top: calc(var(--u) * 3); display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u) * 3); align-items: baseline; }
.photo .plate { font-family: var(--ui); font-weight: 800; font-size: calc(var(--u) * 3); color: var(--blue); }
.photo strong { font-family: var(--ui); font-weight: 600; font-size: calc(var(--u) * 4.2); letter-spacing: -.01em; line-height: 1.15; }
.photo em { grid-column: 2; color: var(--ink-muted); font-size: calc(var(--u) * 3.2); line-height: 1.35; margin-top: calc(var(--u) * .6); }
[data-paper="black"] .photo .plate { color: #CA5F46; }
.hide-cap .photo figure { inset: calc(var(--u) * 6.5) calc(var(--u) * 6) calc(var(--u) * 6); }
.hide-cap .photo figcaption { display: none; }

/* cover */
.cover { color: #fff; background: #0b2a17; }
.cover img { position: absolute; inset: 0; object-fit: cover; }
.cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,16,40,.35) 0, rgba(4,16,40,0) 30%, rgba(4,22,12,.8) 100%); }
.cover .c-top, .cover .c-title, .cover .c-foot { position: absolute; left: 0; right: 0; z-index: 2; padding: 0 calc(var(--u) * 8); }
.cover .c-top { top: calc(var(--u) * 7); display: flex; justify-content: space-between; align-items: center; font-family: var(--ui); font-size: calc(var(--u) * 2); font-weight: 600; }
.hide-cover-meta .cover .c-top { display: none; }
.cover .pill { background: var(--blue); padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 5); }
.cover .c-title { bottom: calc(var(--u) * 17); font-size: calc(var(--u) * 7); }
.cover h1 { margin: 0; font-family: Cambria, Georgia, 'Times New Roman', serif; font-size: inherit; font-weight: 700; line-height: .98; text-wrap: balance; }
.cover .c-title p { margin: calc(var(--u) * 3) 0 0; font-style: italic; font-size: calc(var(--u) * 2.6); max-width: 30ch; opacity: .92; line-height: 1.3; }
.cover .c-foot { bottom: calc(var(--u) * 7); font-family: var(--ui); font-size: calc(var(--u) * 2.8); opacity: .85; }

/* text pages (contents, slide index) */
.fb-page .p-in { position: absolute; inset: calc(var(--u) * 8) calc(var(--u) * 7.5) calc(var(--u) * 9); display: flex; flex-direction: column; }
.fb-page .kicker { font-family: var(--ui); font-weight: 600; font-size: calc(var(--u) * 3); color: var(--blue); }
.fb-page h2 { font-family: Cambria, Georgia, 'Times New Roman', serif; font-weight: 700; font-size: calc(var(--u) * 7.2); line-height: 1; color: var(--green); margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); }
[data-paper="black"] .fb-page h2 { color: #00A859; }
[data-paper="black"] .fb-page .kicker { color: #00AFEF; }
.fb-page a { color: inherit; text-decoration: none; cursor: pointer; }
.fb-page a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 3px; }

.toc { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; font-family: var(--ui); }
.toc > li { border-top: 1px solid rgba(120,140,128,.3); padding: calc(var(--u) * 1.8) 0 calc(var(--u) * 2); }
.toc-sec { display: grid; grid-template-columns: calc(var(--u) * 6) 1fr auto; align-items: baseline; gap: calc(var(--u) * 2); }
.toc-sec .n { color: var(--coral); font-weight: 800; font-size: calc(var(--u) * 3.6); }
.toc-sec .t { font-weight: 600; font-size: calc(var(--u) * 4.2); line-height: 1.15; }
.toc-sec .t small { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: calc(var(--u) * 3); color: var(--ink-muted); margin-top: calc(var(--u) * .5); }
.toc-sec .p { font-size: calc(var(--u) * 3); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.toc-sec:hover .t { color: var(--blue); }
.toc-plates { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); margin: calc(var(--u) * 1.4) 0 0 calc(var(--u) * 8); }
.chip { font-size: calc(var(--u) * 2.5); line-height: 1; padding: calc(var(--u) * 1) calc(var(--u) * 1.7); border-radius: calc(var(--u) * 4); background: rgba(0,168,89,.08); color: var(--ink); transition: background .15s, color .15s; }
.chip b { color: var(--coral); font-weight: 800; margin-right: calc(var(--u) * .4); }
.chip:hover { background: var(--blue); color: #fff; }
.chip:hover b { color: #fff; }
[data-paper="black"] .chip { background: rgba(255,255,255,.08); }
.toc-foot, .idx-note { margin: auto 0 0; padding-top: calc(var(--u) * 2); font-size: calc(var(--u) * 3.1); font-style: italic; color: var(--ink-muted); }
.txt-link { color: var(--blue) !important; border-bottom: 1px solid currentColor; font-style: normal; font-family: var(--ui); font-weight: 600; }
[data-paper="black"] .txt-link { color: #00AFEF !important; }

.idx { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, minmax(calc(var(--u) * 10), 1fr)); grid-auto-rows: calc(var(--u) * 10); gap: calc(var(--u) * 1.3) calc(var(--u) * 1.4); }
.idx-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.idx-img { display: block; flex: 1; min-height: 0; overflow: hidden; background: #c9d2cc; border-radius: calc(var(--u) * .6); outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .15s; }
.idx-img img { transition: transform .3s; }
.idx-item:hover .idx-img { outline-color: var(--blue); }
.idx-item:hover .idx-img img { transform: scale(1.06); }
.idx-cap { display: block; flex: none; font-family: var(--ui); font-size: calc(var(--u) * 2.2); line-height: 1.2; margin-top: calc(var(--u) * .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx-cap b { color: var(--blue); font-weight: 800; }

/* section / index tags on photo pages */
.photo .ph-top { position: absolute; top: calc(var(--u) * 1.6); left: calc(var(--u) * 6); right: calc(var(--u) * 6); display: flex; justify-content: space-between; z-index: 3; font-family: var(--ui); font-size: calc(var(--u) * 2.5); line-height: 1; }
.sec-tag, .idx-tag { padding: calc(var(--u) * .8) 0; color: var(--ink-muted); transition: color .15s; }
.sec-tag.first { color: var(--green); font-weight: 800; }
[data-paper="black"] .sec-tag.first { color: #00A859; }
.sec-tag:hover, .idx-tag:hover { color: var(--blue); }
.photo figure { top: calc(var(--u) * 6.5); }

/* links on covers */
.cover .c-link { border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 1px; }
.cover .c-link:hover { border-color: #fff; }
.back .b-link { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); font-family: var(--ui); font-weight: 600; font-size: calc(var(--u) * 3); }

/* back cover */
.back { background: #14242D; color: #fff; }
.back > img { object-fit: cover; }
.back-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7, 14, 20, .9), rgba(7, 14, 20, .18) 78%); }
.back-content { position: absolute; z-index: 2; left: calc(var(--u) * 6); right: calc(var(--u) * 6); bottom: calc(var(--u) * 7); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(var(--u) * 5); }
.back-message { min-width: 0; }
.back-thanks { margin: 0; font-family: Cambria, Georgia, 'Times New Roman', serif; font-size: calc(var(--u) * 5.6); font-weight: 700; line-height: 1.05; text-wrap: balance; }
.back-credit { margin: calc(var(--u) * 2) 0 0; color: rgba(255, 255, 255, .88); font-size: calc(var(--u) * 2.6); }
.back-codes { display: flex; align-items: end; gap: calc(var(--u) * 3); }
.back-code { display: grid; justify-items: center; gap: calc(var(--u) * 1); font-family: var(--ui); font-size: calc(var(--u) * 1.5); line-height: 1.2; text-align: center; white-space: nowrap; }
.sample-barcode, .sample-qr { display: block; border: calc(var(--u) * .8) solid #fff; background-color: #fff; }
.sample-barcode { width: calc(var(--u) * 28); height: calc(var(--u) * 9); background-image: repeating-linear-gradient(90deg, #111 0 1px, #fff 1px 3px, #111 3px 6px, #fff 6px 8px, #111 8px 9px, #fff 9px 12px); }
.sample-qr { position: relative; width: calc(var(--u) * 17); aspect-ratio: 1; background-image: linear-gradient(90deg, #111 25%, transparent 25%, transparent 75%, #111 75%), linear-gradient(#111 25%, #fff 25%, #fff 75%, #111 75%); background-size: 12px 12px; }
.sample-qr::after { content: "DUMMY"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: 2px 3px; background: #fff; color: #111; font-size: calc(var(--u) * 1.2); font-weight: 800; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--chrome); border-top: 1px solid var(--line); z-index: 30; }
.pager { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.range { flex: 1; min-width: 60px; }
.page-ind { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); min-width: 92px; text-align: center; }
.page-ind b { color: var(--text); font-weight: 600; }
.primary-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--primary); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .12s, filter .15s; flex: none; }
.primary-btn:hover { filter: brightness(1.12); }
.primary-btn:active { transform: scale(.95); }
.primary-btn:disabled { opacity: .35; cursor: default; filter: none; transform: none; }
.primary-btn svg { width: 20px; height: 20px; }

/* ---------- Drawers (Bootstrap offcanvas, toggled by app.js) ---------- */
.fb-drawer { --bs-offcanvas-width: 360px; --bs-offcanvas-bg: var(--chrome); --bs-offcanvas-color: var(--text); box-shadow: var(--drawer-shadow); border: 0 !important; }
.fb-drawer .offcanvas-header { border-bottom: 1px solid var(--line); padding: 14px 18px 12px 20px; }
.fb-drawer .offcanvas-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.fb-drawer .offcanvas-body { padding: 4px 20px 28px; overscroll-behavior: contain; }
.offcanvas-backdrop.show { opacity: .35; }
.group { padding: 16px 0 8px; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.group h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.row-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-bottom: 6px; font-size: 14px; }
.row-opt small { display: block; color: var(--muted); font-size: 12px; }
.row-opt .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.slider-opt { display: block; margin-bottom: 10px; font-size: 14px; }
.slider-opt .top { display: flex; justify-content: space-between; margin-bottom: 2px; }
.slider-opt output { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.eventlog { font-size: 12.5px; background: var(--chrome-2); border-radius: 10px; padding: 10px 12px; max-height: 150px; overflow: auto; margin: 6px 0 0; list-style: none; font-variant-numeric: tabular-nums; }
.eventlog li { padding: 2px 0; color: var(--muted); }
.eventlog b { color: var(--accent-text); font-weight: 600; }
.readout { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 20px 28px; }
.thumb { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; color: var(--muted); font-size: 12.5px; }
.thumb .mini { position: relative; width: 100%; aspect-ratio: var(--ratio, .75); overflow: hidden; background: var(--paper); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); outline: 2px solid transparent; outline-offset: 2px; margin-bottom: 6px; transition: outline-color .15s; }
.thumb .mini .fb-page { position: absolute; inset: 0; }
.thumb .mini .num { display: none; }
.thumb.active .mini { outline-color: var(--secondary); }
.thumb.active { color: var(--text); font-weight: 600; }
.thumb:hover .mini { outline-color: var(--line); }

.toast-msg { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--text); color: var(--chrome); padding: 9px 16px; border-radius: 10px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: .25s; z-index: 1100; }
.toast-msg.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive breakpoints ---------- */
@media (max-width: 991.98px) {
  .stage-inner { padding: 28px 32px; }
}
@media (max-width: 767.98px) {
  .stage-inner { padding: 20px; }
}
@media (max-width: 575.98px) {
  .topbar { padding: 8px 10px; gap: 6px; }
  .brand-text span { display: none; }
  .mark { width: 30px; height: 30px; }
  .stage-inner { padding: 14px; }
  .toolbar { padding: 8px 10px; gap: 4px; }
  .pager { gap: 6px; }
  .page-ind { min-width: 60px; font-size: 12.5px; }
  .icon-btn { width: 38px; height: 38px; }
  .primary-btn { width: 40px; height: 40px; }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .hint { display: none; }
  .cover .c-title { bottom: calc(var(--u) * 14); font-size: calc(var(--u) * 5.4); }
  .cover .c-title p { font-size: calc(var(--u) * 2.8); max-width: 30ch; }
  .cover .c-top { top: calc(var(--u) * 5); font-size: calc(var(--u) * 2.8); }
  .back-content { left: calc(var(--u) * 4); right: calc(var(--u) * 4); bottom: calc(var(--u) * 4); grid-template-columns: 1fr; gap: calc(var(--u) * 2); }
  .back-thanks { font-size: calc(var(--u) * 4.4); }
  .back-codes { justify-content: flex-start; }
  .sample-qr { width: calc(var(--u) * 14); }
  .sample-barcode { width: calc(var(--u) * 24); }
  /* drawers become bottom sheets */
  .fb-drawer.offcanvas-start, .fb-drawer.offcanvas-end {
    top: auto; left: 0; right: 0; width: 100%; height: min(78vh, 620px);
    border-radius: 18px 18px 0 0; transform: translateY(100%);
  }
  .fb-drawer.offcanvas-start.show:not(.hiding), .fb-drawer.offcanvas-end.show:not(.hiding),
  .fb-drawer.showing { transform: none; }
}
@media (max-width: 379.98px) { .hide-xs { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .shift, .toast-msg { transition: none; } .loader span { animation: none; } }

/* wider page shapes: tighten the text pages so they still fit */
.ratio-wide .toc-sec .t small, .ratio-wide .toc-foot { display: none; }
.ratio-wide .fb-page h2 { font-size: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 2); }
.ratio-wide .idx { grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, minmax(calc(var(--u) * 10), 1fr)); }
.ratio-xwide .toc-plates { display: none; }
.ratio-xwide .toc > li { padding: calc(var(--u) * 1.2) 0; }
.ratio-wide .toc > li { padding: calc(var(--u) * 1.1) 0 calc(var(--u) * 1.3); }
.ratio-wide .toc-sec .t { font-size: calc(var(--u) * 3.6); }
.ratio-wide .toc-plates { margin-top: calc(var(--u) * .9); gap: calc(var(--u) * .8); }
.ratio-wide .chip { font-size: calc(var(--u) * 2.2); padding: calc(var(--u) * .8) calc(var(--u) * 1.4); }
.ratio-wide .fb-page .p-in { top: calc(var(--u) * 6); bottom: calc(var(--u) * 7); }
.toc-sec .n, .toc-sec .p, .ratio-wide .toc-sec .t { font-size: calc(var(--u) * 2.6); }