/* Phone polish: stop iOS Safari's unwanted zooming and tap artifacts. */

/* Don't let iOS inflate text on rotation. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* No double-tap-to-zoom (and no 300ms tap delay); no rubber-band scroll of the whole app. */
html, body { touch-action: manipulation; overscroll-behavior: none; }

/* iOS zooms the page when focusing a text field whose font is under 16px. */
input, select, textarea { font-size: max(16px, 1em) !important; }

/* No grey flash when tapping words and buttons. */
* { -webkit-tap-highlight-color: transparent; }

/* Long-pressing controls shouldn't pop the iOS copy/look-up callout. */
button, [role="button"], .player, .playerbar, img { -webkit-touch-callout: none; }

/* Long-pressing a word to seek shouldn't open the iOS callout or the text magnifier. */
@media (pointer: coarse) {
  .pages.has-audio .flow, .spot-track { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* Sheets lock the page behind them (iOS 16+ honours overflow on the root). */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  html.sheet-lock, html.sheet-lock body, html.drawer-lock, html.drawer-lock body { overflow: hidden; }
}

/* grab handle on bottom sheets; desktop never shows it */
.sheet-grab { display: none; }
.search-x { display: none; }
.pl-mini-prog { display: none; }

/* edge-swipe-back strip: a finger's width at the left edge of the reader */
.edge-back { display: none; }
@media (pointer: coarse) {
  body[data-view="reader"]:not(.spot-on) .edge-back {
    display: block; position: fixed; z-index: 22; left: 0; top: 0; bottom: 0;
    width: max(16px, env(safe-area-inset-left)); touch-action: pan-y;
  }
}

/* ============================================================
   Phones
   ============================================================ */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  :root { --gutter: 20px; }

  /* library */
  .wordmark { min-height: 44px; }
  .hero-prog .bar { flex: 1 1 auto; }
  .hero-prog span { white-space: nowrap; }

  /* top bar: when it tucks away, a strip of its colour stays behind the status bar */
  body[data-view="reader"]::after {
    content: ""; position: fixed; z-index: 19; top: 0; left: 0; right: 0; height: env(safe-area-inset-top);
    background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none;
  }
  body.spot-on::after { opacity: 0; }
  .rbar .ibtn { width: 44px; height: 44px; }
  .rbar { -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }

  /* ---------- mini player ---------- */
  .player {
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    cursor: pointer;
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  }
  body.has-player { --player-h: calc(66px + env(safe-area-inset-bottom)); }
  .pl-scrub, .pl-opts, #plBack { display: none !important; }
  .player .pl-mini-prog { display: block; position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; pointer-events: none; }
  .pl-mini-prog i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--crimson), color-mix(in oklab, var(--crimson) 55%, var(--gold))); }
  .pl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0; }
  .pl-now { width: 100%; min-height: 50px; gap: 12px; justify-self: stretch; }
  .pl-now .pl-text { display: flex; }
  .pl-cover { display: block !important; width: 46px; height: 46px; border-radius: 7px; }
  .pl-chap { font-size: 15px; }
  .pl-ctrls { gap: 2px; justify-self: end; }
  .pl-left { display: none; }
  .pl-play { width: 50px; height: 50px; }
  #plFwd { width: 48px; height: 48px; }

  /* ---------- bottom sheets: contents, text settings ---------- */
  .drawer {
    top: auto; right: 0; width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - 28px);
    border-radius: 22px 22px 0 0;
    padding-top: 0; padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    transform: translateY(104%);
    box-shadow: 0 -16px 50px -18px rgba(var(--shade), .45);
  }
  .drawer.in { transform: none; }
  .drawer:has(.toc) { height: min(86dvh, calc(100dvh - env(safe-area-inset-top) - 28px)); } /* steady height across tabs */
  .drawer::before { top: 100%; bottom: auto; left: 0; right: 0; width: auto; height: 80px; } /* covers the spring's overshoot */
  .sheet-grab { display: block; flex: none; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line); }
  .drawer-head { padding: 12px 12px 10px 22px; }
  .drawer-head h2 { font-size: 22px; }
  .drawer .ibtn[data-close] { width: 44px; height: 44px; background: var(--bg-2); }
  .toc-eds { margin: 0 20px 12px; }
  .toc-eds button { height: 40px; }
  .tabs { margin: 0 20px; }
  .tabs button { min-height: 44px; font-size: 15px; }
  .toc { padding-bottom: 24px; }
  .toc-item { min-height: 50px; padding: 12px; align-items: center; }
  .toc-t { font-size: 17px; }
  .bm-del { width: 44px; height: 44px; opacity: .75; }
  .bm-go { padding: 12px; }
  .drawer .btn.sm { height: 44px; }

  /* text settings as a sheet: big, roomy rows */
  .type-sheet { display: flex; flex-direction: column; gap: 18px; padding: 6px 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
  .type-sheet .type-row.themes { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .type-sheet .swatch { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 6px 10px; font-size: 14px; background: var(--bg-2); border-radius: 12px; }
  .type-sheet .swatch[aria-checked="true"] { background: color-mix(in oklab, var(--crimson) 12%, var(--bg-2)); }
  .type-sheet .sw-dot { width: 26px; height: 26px; flex: none; }
  .type-sheet .ibtn.sm { width: 48px; height: 48px; background: var(--bg-2); }
  .type-sheet .seg button { height: 44px; font-size: 14px; }
  .type-sheet .seg { border-radius: 12px; }
  .type-sheet input[type="range"] { height: 44px; }
  .type-sheet .focus-row .btn { height: 48px; padding: 0 20px 0 16px; font-size: 15px; }

  /* ---------- search as a sheet ---------- */
  .modal-search { padding: 0; }
  .modal-search .modal-card {
    position: absolute; left: 0; right: 0;
    top: calc(var(--vvt, 0px) + env(safe-area-inset-top) + 10px);
    width: 100%; max-height: none;
    height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top) - 10px);
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%); opacity: 1;
    transition: transform .42s var(--spring, var(--ease-out));
  }
  .modal-search.in .modal-card { transform: none; }
  .search-box { padding: 10px 12px 12px 18px; }
  .search-box kbd { display: none; }
  .search-box .search-x { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font: 600 15px/1 var(--ui); color: var(--crimson); }
  .results { flex: 1; padding-bottom: 20px; }
  .result { padding: 12px; }

  /* menus (speed, sleep, version) sit above the sheets and get finger-sized rows */
  .pop { z-index: 90; }
  .menu-item { min-height: 46px; font-size: 15px; }

  /* ---------- spotlight: same room, fewer expensive layers ---------- */
  /* blurring the whole (very tall) page is the costly part on a phone; let it sink into the dark instead */
  body.spot-on .pages { filter: none; opacity: 0; } /* light ink on dark paper ghosts through even when faint: let it go dark */
  :root[data-theme="light"] body.spot-on .pages,
  :root[data-theme="sepia"] body.spot-on .pages { filter: none; opacity: .14; }
  .pages { transition: transform .62s var(--ease-out), opacity .5s ease; }
  .su, .su.near, .su.cur { filter: none; }
  .spot-glow { mix-blend-mode: normal; }
  .spot.on .spot-glow { opacity: .42; }
  .spot-grain { display: none; }
  .spot-pill { -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
  .sp-btn { width: 46px; height: 46px; }
  .sp-play { width: 52px; height: 52px; }
}

/* ============================================================
   Now playing sheet (phones)
   ============================================================ */
.np { position: fixed; inset: 0; z-index: 65; }
.np-scrim { position: absolute; inset: 0; background: rgba(var(--shade), .4); opacity: 0; transition: opacity .35s ease; touch-action: none; }
.np.in .np-scrim { opacity: 1; }
.np-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(100dvh - env(safe-area-inset-top) - 12px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 max(24px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background-color: var(--bg); background-image: var(--paper); color: var(--ink);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(var(--shade), .55);
  transform: translateY(104%);
  transition: transform .5s var(--spring, var(--ease-out));
  outline: none;
}
.np.in .np-sheet { transform: none; }
.np-sheet .sheet-grab { display: block; flex: none; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line); }
.np-head { align-self: stretch; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 4px -10px 0; }
.np-head .ibtn { width: 44px; height: 44px; }
.np-kicker { text-align: center; font: 600 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.np-art { width: min(68vw, 300px, 34dvh); aspect-ratio: 1; margin: 14px 0 22px; border-radius: 14px; overflow: hidden; background: var(--bg-2); box-shadow: 0 2px 6px rgba(var(--shade), .14), 0 28px 60px -22px rgba(var(--shade), .6); }
.np-art img { width: 100%; height: 100%; object-fit: cover; }
.np-titles { align-self: stretch; text-align: center; min-width: 0; }
.np-chap { margin: 0; font: 500 23px/1.2 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.np-book { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.np-scrub { position: relative; align-self: stretch; height: 44px; margin-top: 14px; display: flex; align-items: center; touch-action: none; cursor: pointer; }
.np-track { position: relative; width: 100%; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; transition: height .15s var(--ease); }
.np-scrub.is-drag .np-track { height: 8px; }
.np-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--crimson), color-mix(in oklab, var(--crimson) 55%, var(--gold))); }
.np-thumb { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--crimson); box-shadow: 0 1px 4px rgba(var(--shade), .35); transition: transform .25s var(--spring, var(--ease-out)); }
.np-scrub.is-drag .np-thumb { transform: scale(1.4); }
.np-times { align-self: stretch; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: -4px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.np-times > :last-child { text-align: right; }
.np-left { color: var(--gold); font-weight: 600; text-align: center; }

.np-transport { align-self: stretch; display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.np-transport .ibtn { color: var(--ink); }
.np-sm { width: 48px; height: 48px; }
.np-sm svg { width: 24px; height: 24px; }
.np-skip { width: 56px; height: 56px; }
.np-skip svg { width: 32px; height: 32px; }
.np-play {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--crimson); color: #FFF7F4;
  box-shadow: 0 10px 26px -8px color-mix(in oklab, var(--crimson) 75%, transparent);
  transition: transform .15s var(--ease), background-color .2s;
}
.np-play:active { transform: scale(.94); }
.np-play .pp, .np-play .pp svg { width: 34px; height: 34px; }

.np-opts { align-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 10px; }
.np-opt {
  min-width: 0; min-height: 60px; padding: 8px 4px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg-2); color: var(--ink);
  transition: background-color .2s, transform .15s var(--ease);
}
.np-opt:active { transform: scale(.97); }
.np-opt svg { width: 20px; height: 20px; color: var(--ink-2); }
.np-ov { font: 600 15px/1.1 var(--ui); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-ol { font-size: 11.5px; font-weight: 600; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-opt.is-on { background: color-mix(in oklab, var(--gold) 15%, var(--bg-2)); }
.np-opt.is-on svg, .np-opt.is-on .np-ol { color: var(--gold); }
.np-edn { font-size: 13px; }
@media (max-height: 560px) { /* landscape: drop the big art */
  .np-art { display: none; }
}
@media (prefers-reduced-motion: reduce) { .np-sheet, .np-scrim { transition-duration: .01s !important; } }

/* toggle switch (text settings) */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.toggle-t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.toggle-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 46px; height: 28px; border-radius: 999px; background: var(--line); cursor: pointer;
  transition: background-color .2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .25s var(--spring, var(--ease-out));
}
.switch:checked { background: var(--crimson); }
.switch:checked::after { transform: translateX(18px); }

/* tablets and other touch screens on the desktop layout: finger-sized chips */
@media (pointer: coarse) { .chip { height: 44px; } }