/* flipMaker viewer — lean, dark, dependency-free (one StPageFlip vendor file).
   Design rationale + footguns: ~/Sites/HQ/Tools/flipBookMaker/NOTES.md */
:root {
  --bg: #1b1b1d;
  --bar: #312f34;
  --bar-fg: #e9e7e2;
  --accent: #9c7a50;      /* DBS brass */
  --hl: rgba(253, 198, 6, 0.38);
  --hl-active: rgba(255, 176, 0, 0.6);
  --panel: #2c2b2e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--bar-fg);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#fm-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
/* static crawlable / screen-reader content, visually hidden (sr-only) */
.fm-seo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%); padding: 0; border: 0; margin: -1px; }

/* ---- toolbar ---- */
#fm-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 6px 12px; margin-bottom: 6px; flex: 0 0 auto;
  background: linear-gradient(135deg, #3b3941, var(--bar) 55%, #25232a);      /* diagonal sheen (top-left → bottom-right) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);                            /* top highlight: separates from browser chrome */
  border-bottom: 1px solid rgba(255,255,255,.07); }                           /* crisp hairline vs the content below */
.fm-bar-left { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.fm-bar-right { display: flex; align-items: center; gap: 6px; justify-self: end; }
/* logo is now a dropdown-menu trigger (NOTES §menu) */
.fm-home { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  border: 0; background: transparent; padding: 2px 4px; border-radius: 6px;
  cursor: pointer; color: var(--bar-fg); transition: background .15s ease; }
.fm-home:hover, .fm-home[aria-expanded="true"] { background: #3a393d; }
.fm-logo { height: 21px; width: auto; flex: 0 0 auto; display: block; }
.fm-caret { width: 14px; height: 14px; color: #d6a94e; opacity: 1; position: relative; top: 4px;   /* rides a little lower on the logo (top, not transform — that's used for the open-flip) */
  transition: transform .18s ease; }
.fm-caret svg { width: 100%; height: 100%; display: block; }   /* size the inline-sprite icon (else it doesn't render at 12px); caret thickness is set on the sprite symbol */
.fm-home[aria-expanded="true"] .fm-caret { transform: rotate(180deg); }
#fm-bar .fm-title { font-weight: 400; font-size: 12px; margin-inline-start: 8px; padding-inline-end: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; flex: 0 1 auto; }
/* large screens: a slightly bigger logo/menu + title (after the base rules so it wins on equal specificity) */
@media (min-width: 1100px) {
  .fm-logo { height: 25px; }
  .fm-caret { width: 16px; height: 16px; }
  #fm-bar .fm-title { font-size: 14px; }
}
.fm-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent;
  color: var(--bar-fg); cursor: pointer; flex: 0 0 auto; }
.fm-btn:hover { background: #3a393d; }
.fm-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.fm-btn svg { width: 20px; height: 20px; }

/* ---- tooltips: caret + slide-in, matching the country-map rail ---- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap; background: #221910; color: #fff8eb;
  font-size: 12px; font-weight: 600; line-height: 1; padding: 7px 10px; border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(156,122,80,.75), 0 6px 18px rgba(0,0,0,.6);   /* brass ring + deep shadow → pops */
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .12s ease, transform .12s ease; }
[data-tip]::before {                                  /* caret pointing up at the button */
  content: ""; position: absolute; top: calc(100% + 3px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 6px solid transparent; border-bottom-color: #221910;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .12s ease, transform .12s ease; }
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0); }   /* no delay — matches the map */
/* right-hand group: anchor the chip to the right so wide labels don't clip the edge (caret stays on the button) */
.fm-bar-right [data-tip]::after { left: auto; right: 0; transform: translateY(-4px); }
.fm-bar-right [data-tip]:hover::after, .fm-bar-right [data-tip]:focus-visible::after { transform: translateY(0); }
/* big page-turn arrows sit at the stage edges — anchor inward */
.fm-side-prev[data-tip]::after { left: 0; transform: translateY(-4px); }
.fm-side-prev[data-tip]:hover::after { transform: translateY(0); }
.fm-side-next[data-tip]::after { left: auto; right: 0; transform: translateY(-4px); }
.fm-side-next[data-tip]:hover::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-tip]::after, [data-tip]::before { transition: opacity .12s ease; }
  [data-tip]:hover::after, [data-tip]:hover::before { transform: translateX(-50%); }
}
.fm-pageno { min-width: 62px; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums;
  direction: ltr;   /* numbers stay "2–3 / 65" even inside an RTL book */
  user-select: none; flex: 0 0 auto; cursor: pointer; border-radius: 5px;
  background: #000; border: 1px solid rgba(255,255,255,.18); margin: 0 5px;   /* black field, fine hairline */
  padding: 3px 8px; transition: background .15s, box-shadow .15s, border-color .15s; }
.fm-pageno:hover { background: #161618; border-color: rgba(255,255,255,.32); }   /* clickable hint */
.fm-pageno.is-editing { background: #000; border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); cursor: text; }                     /* active: brass-outlined field */
.fm-pageno-input { width: 3ch; background: transparent; border: 0; outline: none; padding: 0; margin: 0;
  color: var(--bar-fg); font: inherit; font-variant-numeric: tabular-nums; text-align: right;
  -moz-appearance: textfield; }
.fm-pageno-total { opacity: .85; }
.fm-pageno-sep { margin: 0 7px; opacity: .55; }   /* breathing room around the slash */
#fm-scrub-slot { display: flex; justify-content: center; align-items: center; gap: 12px; }
.fm-nav { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.fm-nav .fm-btn { width: 30px; }
.fm-nav .fm-btn svg { width: 30px; height: 30px; }

/* ---- stage / book ---- */
/* #fm-book needs a definite height + JS-sized width (fit()); 64px sides hold the arrows (NOTES §fit) */
#fm-stage { flex: 1 1 auto; position: relative; overflow: hidden; padding: 8px 64px; min-height: 0;
  display: flex; align-items: center; justify-content: center; }
#fm-book { flex: 0 0 auto; }

.fm-side { position: absolute; bottom: 42px; z-index: 15;
  width: 56px; height: 90px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--bar-fg); cursor: pointer;
  opacity: .4; transition: opacity .2s; }
.fm-side:hover { opacity: 1; }
.fm-side svg { width: 44px; height: 44px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
.fm-side-prev { left: 4px; }
.fm-side-next { right: 4px; }

/* ---- in-place reading zoom: drag-to-pan overlay + always-on gray scrubber ---- */
.fm-pan-overlay { position: absolute; inset: 0; z-index: 12; pointer-events: none; cursor: grab; touch-action: none; }
.fm-pan-overlay:active { cursor: grabbing; }
.fm-read-scrub { position: absolute; right: 19px; top: 50%; transform: translateY(-50%); z-index: 16;
  width: 30px; height: 231px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 5px 0; background: var(--bg); border-radius: 15px; }   /* matches the stage at rest (vanishes), still masks a zoomed page so controls read */
/* zoom controls: .3 idle · .5 while zoom is engaged (>1×, signals "active") · full on hover/use */
.fm-read-scrub-btn, .fm-read-scrub-track { opacity: .3; transition: opacity .18s ease; }
.fm-read-scrub.is-zoomed .fm-read-scrub-btn, .fm-read-scrub.is-zoomed .fm-read-scrub-track { opacity: .5; }
.fm-read-scrub:hover .fm-read-scrub-btn, .fm-read-scrub:focus-within .fm-read-scrub-btn,
.fm-read-scrub:hover .fm-read-scrub-track, .fm-read-scrub:focus-within .fm-read-scrub-track { opacity: 1; }
/* the zoom tool buttons (+ − reset grab) stacked inside the bubble */
.fm-read-scrub-btn { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 7px;
  background: transparent; color: var(--bar-fg); font-size: 19px; line-height: 1; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); user-select: none; }
.fm-read-scrub-btn:hover { background: rgba(255,255,255,.16); }
.fm-read-scrub-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fm-read-scrub-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.fm-read-scrub-btn svg { display: block; }
.fm-read-scrub-track { position: relative; flex: 1; width: 4px; min-height: 55px; border-radius: 999px;
  background: rgba(233,231,226,.25); cursor: pointer; touch-action: none; }
.fm-read-scrub-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fm-read-scrub-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: var(--bar-fg); }
.fm-read-scrub-handle { position: absolute; left: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bar-fg); transform: translate(-50%, 50%); cursor: grab;
  box-shadow: 0 1px 5px rgba(0,0,0,.45), 0 0 8px rgba(233,231,226,.5); }
.fm-read-scrub-handle:active { cursor: grabbing; }

.fm-page { background: #fff; overflow: hidden; }
.fm-page img.fm-img { width: 100%; height: 100%; display: block; object-fit: contain; }
.fm-page .fm-hl { position: absolute; inset: 0; pointer-events: none; }
.fm-hl-box { position: absolute; background: var(--hl); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,176,0,.5); }
.fm-hl-box.is-active { background: var(--hl-active); }

/* ---- select-text (T) layer: invisible, selectable words over the page ---- */
.fm-btn-text { font: 700 17px Georgia, "Times New Roman", serif; }
.fm-textlayer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
#fm-app.text-mode .fm-textlayer { pointer-events: auto; user-select: text; -webkit-user-select: text; cursor: text; }
.fm-textlayer span { position: absolute; color: transparent; white-space: pre; line-height: 1; }
.fm-textlayer span::selection { background: rgba(120,160,255,.45); }
.fm-textlayer span::-moz-selection { background: rgba(120,160,255,.45); }

/* ---- side panels ---- */
/* opens *below the toolbar* so the search button stays visible (active highlight) + clickable to re-close (NOTES §contents) */
#fm-find { position: absolute; top: var(--fm-bar-h, 44px); bottom: 0; inset-inline-end: 0;
  width: min(320px, 86vw); background: var(--panel); border-inline-start: 1px solid #000;
  z-index: 20; overflow-y: auto; padding: 10px; box-shadow: -4px 0 18px rgba(0,0,0,.4); }
#fm-thumbs[hidden], #fm-find[hidden], #fm-contents[hidden] { display: none; }

/* ---- contents: detected book/section TOC, slides in from the right *below the toolbar*
   so the TOC button stays visible (showing its active highlight) and clickable to re-close (NOTES §contents) ---- */
#fm-contents { position: absolute; top: var(--fm-bar-h, 44px); bottom: 0; inset-inline-end: 0;
  width: min(300px, 84vw); background: var(--panel); border-inline-start: 1px solid #000;
  z-index: 20; overflow-y: auto; padding: 10px; box-shadow: -4px 0 18px rgba(0,0,0,.4); }
.fm-toc-list { display: flex; flex-direction: column; gap: 1px; }
.fm-toc-item { display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 7px 9px; border-radius: 6px; border: 1px solid transparent; }
.fm-toc-item:hover { background: #38373b; }
.fm-toc-item.is-current { background: #2f2a22; border-color: var(--accent); }
.fm-toc-item .t { flex: 1 1 auto; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-toc-item.is-current .t { color: #f3e9d8; font-weight: 600; }
.fm-toc-item .p { flex: 0 0 auto; font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }

/* ---- thumbnails: centered modal (3/4 of the viewport) over a dimmed backdrop ---- */
#fm-thumbs { position: absolute; inset: 0; z-index: 30; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,.6); }
.fm-thumbs-modal { display: flex; flex-direction: column; width: 75%; height: 75%;
  background: var(--panel); border: 1px solid #000; border-radius: 10px; padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.fm-thumbs-modal .fm-panel-head { flex: 0 0 auto; }
.fm-thumbs-modal .fm-thumb-grid { flex: 1 1 auto; overflow-y: scroll; align-content: start;
  scrollbar-gutter: stable; padding-inline-end: 6px;
  scrollbar-width: auto; scrollbar-color: #b8b2a6 #1d1c1f; }
/* bright, always-visible scrollbar sitting in its own gutter (not overlaying the thumbs) */
.fm-thumbs-modal .fm-thumb-grid::-webkit-scrollbar { width: 12px; }
.fm-thumbs-modal .fm-thumb-grid::-webkit-scrollbar-track { background: #1d1c1f; border-radius: 6px; }
.fm-thumbs-modal .fm-thumb-grid::-webkit-scrollbar-thumb { background: #b8b2a6; border-radius: 6px;
  border: 2px solid #1d1c1f; }
.fm-thumbs-modal .fm-thumb-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.fm-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fm-thumb { cursor: pointer; border: 1px solid #0c0a09; border-radius: 4px; background: #000; }   /* black tile, stone-950 border */
.fm-thumb:hover { border-color: rgba(59,130,246,.6); }                                            /* blue-500 hover hint */
.fm-thumb.is-current { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6, 0 0 10px rgba(59,130,246,.45); }  /* lit blue-500 */
.fm-thumb img { width: 100%; display: block; border-radius: 2px; }
.fm-thumb span { display: block; text-align: center; font-size: 11px; opacity: .7; padding: 2px 0; }

/* ---- find ---- */
.fm-find-input { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid #000;
  background: #1d1c1f; color: var(--bar-fg); font-size: 14px; }
.fm-find-meta { font-size: 12px; opacity: .65; margin: 8px 2px; }
.fm-result { padding: 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.fm-result:hover { background: #38373b; }
.fm-result .p { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.fm-result .s { display: block; opacity: .8; font-size: 12.5px; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
mark { background: var(--hl-active); color: inherit; border-radius: 2px; }
.fm-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fm-panel-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 auto 0 2px; }

/* ---- page scrubber: a centered "paper shelf" row beneath the toolbar ---- */
.fm-shelf { position: relative; height: 21px; width: 120px; max-width: 100%; cursor: pointer;
  border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255,255,255,.14), rgba(0,0,0,.32)),
              repeating-linear-gradient(90deg, #9c8f73 0 1px, #e2d9c2 1px 3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 4px rgba(0,0,0,.5); }
.fm-scrub-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(156,122,80,0), rgba(156,122,80,.55)); border-radius: 3px 0 0 3px; }
.fm-scrub-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; left: 0;
  transform: translateX(-50%); background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 5px rgba(0,0,0,.7); pointer-events: none; }
#fm-scrub-tip { position: absolute; top: 30px; width: 120px; pointer-events: none; z-index: 30;
  background: var(--bar); border: 1px solid #000; border-radius: 6px; padding: 5px; text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.5); }
#fm-scrub-tip[hidden] { display: none; }
#fm-scrub-tip img { width: 100%; display: block; border-radius: 3px; background: #fff; min-height: 58px; }
#fm-scrub-tip span { display: block; font-size: 13px; margin-top: 3px; color: var(--bar-fg);
  font-variant-numeric: tabular-nums; }

/* ---- logo dropdown menu (NOTES §menu) ---- */
#fm-menu { position: absolute; top: var(--fm-bar-h, 44px); inset-inline-start: 8px; z-index: 40;
  min-width: 224px; background: var(--panel); border: 1px solid #000; border-radius: 8px;
  padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#fm-menu[hidden] { display: none; }
.fm-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
  padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--bar-fg);
  font: inherit; font-size: 14px; cursor: pointer; }
.fm-menu-item:hover, .fm-menu-item:focus-visible { background: #38373b; outline: none; }
.fm-menu-item svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .9; }

/* ---- shared modal shell: backdrop + centered card (generalizes the thumbs modal) ---- */
.fm-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 16px; }
.fm-modal[hidden] { display: none; }
.fm-modal-card { display: flex; flex-direction: column; width: min(560px, 92vw); max-height: 86vh;
  background: var(--panel); border: 1px solid #000; border-radius: 10px; padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); overflow-y: auto; }
.fm-modal-card .fm-panel-head { flex: 0 0 auto; }
.fm-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
.fm-btn-primary:hover { background: #836540; }
.fm-btn-blue { background: linear-gradient(135deg, #4f9be8, #2563eb); }   /* DBS blue (About-DBS Visit button) */
.fm-btn-blue:hover { background: linear-gradient(135deg, #3f8bd8, #1d54cf); }
.fm-btn-primary svg { width: 18px; height: 18px; }   /* size the inline-sprite icon (else it balloons to 300×150) */
.fm-head-icon { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--accent); }
.fm-head-icon svg { width: 19px; height: 19px; }
#fm-about-dbs .fm-head-icon { color: #4f9be8; }   /* match the blue Visit-dbs.org button */

/* ---- print dialog ---- */
.fm-print-preview { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 4px 0 16px; }
.fm-print-shots { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 152px; }
.fm-print-shot { margin: 0; }
.fm-print-shot img { display: block; height: 150px; width: auto; max-width: 160px; object-fit: contain;
  background: #000; border: 1px solid #0c0a09; border-radius: 4px; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.fm-print-shot figcaption { text-align: center; font-size: 11px; opacity: .55; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fm-print-arrow { opacity: .45; font-size: 20px; }
.fm-print-empty { width: 116px; height: 150px; border: 1px dashed rgba(233,231,226,.25); border-radius: 4px; }
.fm-print-count { font-size: 12.5px; opacity: .7; }
.fm-print-controls { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; margin: 0 0 8px; }
.fm-print-opts { display: flex; flex-direction: column; gap: 11px; margin: 0; border: 0; padding: 0; }
.fm-print-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.fm-print-opt input[type=radio] { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }
.fm-print-range { flex: 0 0 auto; width: 13ch; margin-inline-start: 6px; padding: 6px 9px; border-radius: 6px;
  border: 1px solid #000; background: #1d1c1f; color: var(--bar-fg); font-size: 14px; }
.fm-print-range:disabled { opacity: .4; }
.fm-print-go-col { display: flex; align-items: center; justify-content: center; }   /* Print centered x+y in the right column */
.fm-print-err { color: #e0a04a; font-size: 12.5px; min-height: 16px; margin-bottom: 4px; }

/* ---- share ---- */
.fm-share-body { display: flex; flex-direction: column; gap: 16px; }
.fm-share-cols { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }   /* QR | buttons, top-aligned */
.fm-share-qr-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fm-qr { width: 150px; height: 150px; background: #fff; border-radius: 8px; padding: 8px; }
.fm-qr svg { width: 100%; height: 100%; display: block; }
.fm-qr-copy { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--bar-fg); cursor: pointer; }
.fm-qr-copy:hover { background: #3a393d; }
.fm-qr-copy svg { width: 15px; height: 15px; }
.fm-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  height: 150px; grid-auto-rows: 1fr; }   /* match the QR height: rows fill it top-to-bottom */
.fm-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px; border-radius: 8px; border: 0; background: var(--accent); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.fm-share-btn:hover { background: #836540; }
.fm-share-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }   /* brand glyph drives recognition */
.fm-copy-row { display: flex; gap: 8px; }
.fm-copy-input { flex: 1; padding: 8px 10px; border-radius: 7px; border: 1px solid #000;
  background: #1d1c1f; color: var(--bar-fg); font-size: 13px; }
.fm-copylink { flex: 0 0 auto; width: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #000; border-radius: 7px; background: #1d1c1f; color: #fff; cursor: pointer; }   /* icon-only */
.fm-copylink:hover { background: #3a393d; }
.fm-copylink svg { width: 19px; height: 19px; }

/* ---- about (per-book info.html via iframe; fallback dl from manifest) ---- */
/* About modal is wider/taller than the others: up to 2/3 of the viewport, capped at 800px. */
#fm-about .fm-modal-card { width: min(800px, 66vw); max-width: 800px; }
@media (max-width: 720px) { #fm-about .fm-modal-card { width: 92vw; } }
.fm-about-frame { width: 100%; height: 66vh; border: 0; border-radius: 8px; background: #fff; }
.fm-about-fallback { font-size: 14px; line-height: 1.6; margin: 0; }
.fm-about-fallback dt { opacity: .55; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 11px; }
.fm-about-fallback dd { margin: 2px 0 0; }

/* ---- about DBS (static) ---- */
.fm-aboutdbs { text-align: center; }
.fm-dbs-logo { display: inline-block; margin: 2px auto 16px; }   /* no chip — white-title logo sits on the dark panel */
.fm-dbs-logo img { display: block; width: 220px; max-width: 60vw; height: auto; }
.fm-aboutdbs .tagline { color: #5aa9f0; font-size: 17px; font-weight: 600; margin: 0 0 14px; }   /* bright blue, complements the logo */
.fm-aboutdbs p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; opacity: .92; }
.fm-aboutdbs .fm-note { font-size: 12.5px; opacity: .68; }

/* ---- print output: hidden on screen, shown only when printing (NOTES §print) ---- */
#fm-print-host { display: none; }
@media print {
  @page { margin: 0; }                       /* drop the browser's date/title/URL header+footer (NOTES §print) */
  #fm-app, #fm-menu, .fm-modal { display: none !important; }
  #fm-print-host { display: block; }
  /* one page image per sheet, scaled to fit — never split across sheets */
  #fm-print-host .fm-print-sheet { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;
    overflow: hidden; break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid; }
  #fm-print-host .fm-print-sheet:last-child { break-after: auto; page-break-after: auto; }
  #fm-print-host .fm-print-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
}

/* ---- small screens: single-page mode (JS switches the flip to portrait; NOTES §mobile) ---- */
@media (max-width: 560px) {
  #fm-stage { padding: 8px 8px; }                              /* reclaim side gutters for the page */
  .fm-side { display: none; }
  .fm-bar-right .fm-shelf, #fm-scrub-tip { display: none; }
  #fm-bar { gap: 4px; padding: 6px 8px; }
  #fm-bar .fm-title { display: none; }            /* reclaim width on phones — logo still links home */
}