/* ── Inkwell Reader — Stylesheet ────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;600&family=DM+Mono:wght@300;400&display=swap');

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --bg:          #0e0e0f;
  --surface:     #161618;
  --surface2:    #1e1e21;
  --border:      #2a2a2e;
  --text:        #e8e6e1;
  --text-dim:    #a8a5a0;
  --text-dimmer: #7a7875;
  --accent:      #c9a84c;
  --accent-dim:  #7a6430;
  --danger:      #c0392b;
  --panel-glow:  rgba(201, 168, 76, 0.15);

  --chrome-h:    56px;
  --radius:      6px;
  --radius-lg:   12px;
  --mono:        'DM Mono', 'Courier New', monospace;
  --serif:       'Crimson Pro', Georgia, serif;

  --trans-fast:  120ms ease;
  --trans:       240ms ease;

  /* Control sizing — scales with viewport on touch devices (see below).
     --chrome-b derives from --ctrl-size so overlaid elements (palette,
     action bar, toast) automatically clear the bottom chrome. */
  --ctrl-size:   36px;
  --ctrl-icon:   20px;
  --chrome-b:    calc(56px + var(--ctrl-size));
}

/* Touch-primary devices: scale controls to stay finger-friendly across
   phone and tablet screen sizes. 7.5vmin gives ~46px on a typical
   phone (fits within clamp min) and ~60px on a 10" tablet. */
@media (hover: none), (pointer: coarse) {
  :root {
    --ctrl-size: clamp(42px, 7.5vmin, 54px);
    --ctrl-icon: clamp(20px, 3.5vmin, 26px);
  }
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ── App layout ─────────────────────────────────────────────────────────── */
#app {
  display: grid;
  height: 100dvh;
  width: 100%;
  position: relative;
}

/* ── Landing screen ─────────────────────────────────────────────────────── */
#landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No justify-content: center — use margin:auto on .landing-inner instead so
     short viewports scroll rather than squish the content. */
  min-height: 100dvh;
  padding: 1rem;
  background: var(--bg);
  position: relative;
  overflow-y: auto;
}

/* Flex-shrink:0 + margin:auto = centers when space allows, scrolls when not. */
.landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin: auto;
  width: 100%;
  padding: 1rem 1rem;
}

#landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(201,168,76,0.03) 0%, transparent 60%);
  pointer-events: none;
}

.landing-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.25rem;
  position: relative;
}

.landing-logo span {
  color: var(--accent);
}

.landing-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3rem;
}

.landing-version {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--text-dimmer);
  margin-top: 0.6rem;
}

.landing-version #build-id-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-dimmer);
  font-family: var(--mono);
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--trans-fast);
}

.landing-version #build-id-btn:hover {
  color: var(--accent);
}

.landing-version #build-id-btn:disabled {
  cursor: default;
  text-decoration: none;
}

#drop-zone {
  width: min(480px, 90vw);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

#drop-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--panel-glow), transparent);
  opacity: 0;
  transition: opacity var(--trans);
  pointer-events: none;
}

#drop-zone.drag-over,
#drop-zone:hover {
  border-color: var(--accent-dim);
}

#drop-zone.drag-over::before,
#drop-zone:hover::before {
  opacity: 1;
}

.drop-icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
  opacity: 0.7;
}

.drop-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  text-align: center;
}

.drop-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dimmer);
  letter-spacing: 0.08em;
}

#open-btn {
  margin-top: 0.5rem;
  padding: 0.65rem 1.6rem;
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}

#open-btn:hover {
  background: rgba(201, 168, 76, 0.08);
  border-color: var(--accent);
}

#open-btn:active {
  background: rgba(201, 168, 76, 0.15);
}

.landing-hint {
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dimmer);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.8;
}

/* ── Landing corner buttons (info + refresh) ────────────────────────────── */
.landing-corner-btns {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

#refresh-btn,
#info-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dimmer);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
  opacity: 0.5;
}
#refresh-btn:hover,
#info-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(201, 168, 76, 0.06);
  opacity: 1;
}
#refresh-btn:active svg {
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}

/* ── Library / recent files ─────────────────────────────────────────────── */
#library-section {
  width: min(560px, 92vw);
  margin-bottom: 2rem;
}

/* Hidden until JS sets a state (e.g. OPFS not available) */
#library-section:not([data-lib-state]) { display: none; }

/* Scroll-wrap always visible — ghost cards show in all states */
/* Empty-state overlay hidden except when state is "empty" */
#library-section:not([data-lib-state="empty"]) .lib-empty-state { display: none; }
/* Error-state overlay hidden except when state is "error" */
#library-section:not([data-lib-state="error"]) .lib-error-state { display: none; }

.library-heading-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.library-heading {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 0; /* handled by .library-heading-row */
}

/* ── Low-space lozenge ──────────────────────────────────────────────────── */
#storage-lozenge {
  display: none; /* shown via .visible class */
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  border-radius: 20px;
  border: 1px solid rgba(192, 57, 43, 0.45);
  background: rgba(192, 57, 43, 0.12);
  color: #e07060;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  cursor: default;
  white-space: nowrap;
  transition: opacity var(--trans);
}
#storage-lozenge.visible {
  display: flex;
}
#storage-lozenge svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Stacks the scroll-wrap and the empty-state overlay */
.lib-body {
  position: relative;
}

.lib-scroll-wrap {
  position: relative;
}

/* Edge fades: paint var(--bg) directly over content so the fade always reaches
   the exact page background colour regardless of what is behind the element.
   z-index 1 keeps fades above the grid but below the chevron icons (z-index 2). */
.lib-scroll-wrap::before,
.lib-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  height: calc(100% - 0.5rem);
  width: 80px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--trans);
}
.lib-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.lib-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
/* Right fade: ghost-peek present (not full) or can scroll right (partial book) */
.lib-scroll-wrap:has(#library-grid .lib-ghost-peek)::after,
.lib-scroll-wrap:has(.lib-chevron-right.visible)::after { opacity: 1; }
/* Left fade: user has scrolled, partial book peeks from left */
.lib-scroll-wrap:has(.lib-chevron-left.visible)::before  { opacity: 1; }

#library-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
#library-grid::-webkit-scrollbar { display: none; }

.lib-chevron {
  position: absolute;
  top: 0;
  /* stop before the scrollbar padding at the bottom */
  height: calc(100% - 0.5rem);
  width: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans), color var(--trans-fast);
  z-index: 2;
}
.lib-chevron.visible {
  opacity: 1;
  pointer-events: all;
}
.lib-chevron:hover { color: var(--accent); }

.lib-chevron-left  { left: 0; }
.lib-chevron-right { right: 0; }

.lib-card {
  flex: 0 0 auto;
  width: 90px;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--trans-fast);
}
.lib-card:hover { border-color: var(--accent-dim); }

.lib-thumb {
  width: 90px;
  height: 126px;
  object-fit: cover;
  display: block;
  background: var(--surface2);
}
.lib-thumb-placeholder {
  width: 90px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  color: var(--text-dimmer);
}

.lib-info {
  padding: 0.4rem 0.45rem 0.5rem;
}
.lib-title {
  font-family: var(--serif);
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 400;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.lib-progress {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--text-dimmer);
}

.lib-menu-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(14,14,15,0.75);
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--trans-fast), color var(--trans-fast);
}
.lib-card:hover .lib-menu-btn { opacity: 1; }
.lib-menu-btn:hover { color: var(--accent); }

/* Always show menu button on touch devices */
@media (hover: none) {
  .lib-menu-btn { opacity: 0.6; }
}

/* ── Library context menu ────────────────────────────────────────── */
.lib-ctx-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
  z-index: 800;
  min-width: 192px;
  padding: 4px 0;
}
.lib-ctx-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: var(--mono);
  white-space: nowrap;
}
.lib-ctx-menu button:hover { background: var(--surface2); }
.lib-ctx-menu button.danger { color: var(--danger); }
.lib-ctx-menu button.danger:hover { background: rgba(192,57,43,0.1); color: var(--danger); }
.lib-ctx-menu hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.lib-approved-badge {
  position: absolute;
  top: 108px; /* sits at the bottom of the 126px thumbnail */
  left: 0;
  right: 0;
  padding: 0.18rem 0;
  background: rgba(201, 168, 76, 0.88);
  color: #0e0e0f;
  font-size: 0.52rem;
  font-family: var(--mono);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* ── Processing-state overlays ─────────────────────────────────────────────
   Cards display a small badge in the top-right and a thin determinate bar
   across the bottom of the thumbnail while a book is being processed. */
.lib-card[data-proc-state="processing"] {
  border-color: var(--accent-dim);
}
.lib-card[data-proc-state="queued"],
.lib-card[data-proc-state="paused"] {
  border-style: dashed;
}
.lib-card[data-proc-state="error"] {
  border-color: var(--danger);
}

.lib-proc-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 123px; /* just inside the bottom edge of the 126px thumbnail */
  height: 3px;
  background: rgba(0,0,0,0.45);
  pointer-events: none;
  overflow: hidden;
}
.lib-proc-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: var(--accent);
  transition: width 0.25s ease-out;
}

.lib-proc-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  font-size: 0.5rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  pointer-events: none;
  background: rgba(14,14,15,0.78);
  color: var(--text);
}
.lib-card[data-proc-state="queued"]  .lib-proc-pill { color: var(--accent-dim); }
.lib-card[data-proc-state="paused"]  .lib-proc-pill { color: #c9a84c; }
.lib-card[data-proc-state="error"]   .lib-proc-pill { color: var(--danger); background: rgba(40,12,12,0.85); }

/* ── Import progress modal ────────────────────────────────────────────────── */
#import-progress-dialog .deep-detect-track {
  margin: 0.5rem 0 0.25rem;
}
#import-progress-dialog .deep-detect-bar {
  transition: width 0.2s ease-out;
}

/* ── Decorator badge stack (top-left of card thumbnail) ─────────────────── */
.lib-decorator-stack {
  position: absolute;
  left: 4px;
  top: 0;
  width: 20px;
  pointer-events: auto;
  z-index: 2;
}

.lib-decorator-badge {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Second badge in the stack is clipped so only the peek shows */
  overflow: hidden;
}

/* Show only the peeking strip of the second badge */
.lib-decorator-badge:nth-child(2) {
  clip-path: inset(15px 0 0 0); /* reveals only the bottom peek strip */
}

.lib-decorator-chip {
  position: absolute;
  left: 0;
  width: 20px;
  height: 14px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.42rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

/* ── Ghost / shimmer placeholder cards ──────────────────────────────────── */
.lib-ghost {
  opacity: 0.18;
  pointer-events: none;
  cursor: default;
  border-style: dashed;
  /* fixed height so ghost cards match a typical real card */
  height: 182px;
}

.lib-ghost .lib-thumb-placeholder {
  background: var(--surface);
}

/* Shimmer variant: used while the library is loading */
.lib-ghost.lib-shimmer {
  opacity: 0.35;
  overflow: hidden;
  position: relative;
}

.lib-ghost.lib-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.09) 40%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.09) 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lib-shimmer-sweep 1.8s ease-in-out infinite;
  animation-delay: var(--shimmer-delay, 0s);
}

@keyframes lib-shimmer-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ── Empty-shelf state ───────────────────────────────────────────────────── */
.lib-empty-state,
.lib-error-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--text-dimmer);
  /* transparent — ghost cards show through from behind */
}

/* Ghost cards are slightly more visible in the empty/error states so they read
   through behind the message without needing a background overlay. */
#library-section[data-lib-state="empty"] .lib-ghost,
#library-section[data-lib-state="error"] .lib-ghost {
  opacity: 0.28;
}

.lib-empty-icon {
  width: 38px;
  height: 38px;
  opacity: 0.55;
}

.lib-empty-text {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: center;
  max-width: 220px;
}

/* ── Load overlay ────────────────────────────────────────────────────────── */
#load-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--bg);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#load-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
#load-msg {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
#load-track {
  width: min(280px, 55vw);
  height: 2px;
  background: var(--surface2);
  border-radius: 1px;
  overflow: hidden;
}
#load-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  width: 0%;
  transition: width 150ms ease;
}
#load-overlay-cancel {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--surface2);
  border-radius: 4px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: color 150ms, border-color 150ms;
}
#load-overlay-cancel:hover { color: var(--text); border-color: var(--text-dim); }

/* ── Processing bar (unpack + panel detection aggregate) ─────────────── */
#processing-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  z-index: 101;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
#processing-bar.active {
  opacity: 1;
  transition: opacity 150ms ease;
}
#processing-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 400ms ease;
  border-radius: 0 2px 2px 0;
}

/* ── Loading progress bubble ──────────────────────────────────────────── */
/* Fixed top-right speech bubble.  The triangular pointer is a separate SVG
   polygon (#bubble-pointer-svg) updated every rAF so the tip can freely angle
   toward the fill's leading edge while both feet stay on the bubble perimeter. */

/* Full-viewport SVG that renders the speech bubble pointer triangle */
#bubble-pointer-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 149; /* below bubble div so text renders on top */
  overflow: visible;
  opacity: 0;
  transition: opacity 250ms ease;
}
#bubble-pointer-svg.visible { opacity: 1; }
/* Single path fills and outlines the entire speech bubble shape (rounded rect + pointer).
   The bubble div is transparent so this is the only paint source — no seam possible. */
#bubble-pointer-path {
  fill: var(--surface);
  stroke: var(--accent-dim);
  stroke-width: 1;
  stroke-linejoin: round;
}

@keyframes bubble-bob {
  0%   { transform: translateY(0);   }
  20%  { transform: translateY(5px); }
  45%  { transform: translateY(1px); }
  65%  { transform: translateY(4px); }
  85%  { transform: translateY(0);   }
  100% { transform: translateY(0);   }
}

#loading-bubble {
  position: fixed;
  top: 32px;
  right: 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text);
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease, top 200ms ease;
  z-index: 150;
}
#loading-bubble.show    { opacity: 1; pointer-events: auto; }
#loading-bubble.bobbing { animation: bubble-bob 750ms ease; }

/* When chrome top-bar is visible, slide bubble below it */
#reader-view:has(#reader-chrome:not(.hidden)) #loading-bubble {
  top: calc(var(--chrome-h) + 32px);
}

#loading-bubble-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  white-space: nowrap;
}
#loading-bubble-line1 {
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
#loading-bubble-line2 {
  font-size: 0.75rem;
  color: var(--text);
  letter-spacing: 0.03em;
}

#loading-bubble-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}
#loading-bubble-actions button {
  background: none;
  border: 1px solid var(--surface2);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
#loading-bubble-actions button:hover { color: var(--text); border-color: var(--text-dim); }
#loading-bubble-cancel { color: var(--accent-dim); border-color: var(--accent-dim); }
#loading-bubble-cancel:hover { color: var(--accent) !important; border-color: var(--accent) !important; }

/* ── Reader view ────────────────────────────────────────────────────────── */
#reader-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

#reader-view.hidden, #landing.hidden { display: none !important; }

#reader-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.reader-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ── Pan-mode indicator ─────────────────────────────────────────────────── */
#pan-mode-indicator {
  position: absolute;
  pointer-events: none;
  z-index: 200;
  width: 0;
  height: 0;
  display: none;
}
#pan-mode-indicator.active { display: block; }

.pan-arrow {
  position: absolute;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%);
  animation: pan-arrow-pulse 0.45s ease-in-out infinite alternate;
}
.pan-arrow-n { top: -34px; left: 0; }
.pan-arrow-s { top:  34px; left: 0; }
.pan-arrow-w { top: 0; left: -34px; }
.pan-arrow-e { top: 0; left:  34px; }

@keyframes pan-arrow-pulse {
  from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.75); }
  to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.2); }
}

/* ── Panel focus overlay ─────────────────────────────────────────────────── */
#panel-focus-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#panel-focus-overlay.active {
  opacity: 1;
}

/* ── Panel bracket layer (hover preview) ────────────────────────────────── */
#panel-bracket-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 16;
}

.pf-bracket {
  position: absolute;
  width:  20px;
  height: 20px;
  opacity: 0;
  transform: translate(var(--snap-x), var(--snap-y));
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.pf-bracket.active {
  opacity: 0.8;
  transform: translate(0, 0);
}

.pf-bracket-tl { border-top:  3px solid #fff; border-left:  3px solid #fff; }
.pf-bracket-tr { border-top:  3px solid #fff; border-right: 3px solid #fff; }
.pf-bracket-bl { border-bottom: 3px solid #fff; border-left:  3px solid #fff; }
.pf-bracket-br { border-bottom: 3px solid #fff; border-right: 3px solid #fff; }

/* ── Chrome (HUD) ───────────────────────────────────────────────────────── */
#reader-chrome {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity var(--trans);
  z-index: 100;
}

#reader-chrome.hidden {
  opacity: 0;
}

#reader-chrome:not(.hidden) .chrome-top,
#reader-chrome:not(.hidden) .chrome-bottom {
  pointer-events: auto;
}

/* Top bar */
.chrome-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  height: var(--chrome-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#reader-title {
  flex: 1;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* Three-dots button glows when editor is open */
#btn-reader-menu.editing {
  color: var(--accent);
}

/* Bottom bar */
.chrome-bottom {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Progress */
.progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#progress-bar {
  flex: 1;
  height: 3px;
  background: var(--surface2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

/* Unpack range — grows bidirectionally from the start page while unpacking */
#unpack-range {
  position: absolute;
  top: -1px;
  height: 5px;
  background: rgba(255, 255, 255, 0.11);
  border-radius: 2px;
  display: none;
  pointer-events: none;
}

#progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--trans-fast);
  position: relative;
  z-index: 1;
}

#progress-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--trans-fast);
}

#progress-bar:hover #progress-fill::after { opacity: 1; }

/* Touch devices: always show a larger knob — no hover to reveal it, bigger for easy grabbing */
@media (hover: none), (pointer: coarse) {
  #progress-fill::after {
    width: 18px;
    height: 18px;
    right: -9px;
    top: -8px;   /* re-centre on the 3px bar: -(18/2 - 3/2) = -7.5 → -8px */
    opacity: 1;
  }
}

/* Knob always visible while dragging, no width transition (instant feedback) */
#progress-bar.scrubbing { cursor: grabbing; }
#progress-bar.scrubbing #progress-fill { transition: none; }
#progress-bar.scrubbing #progress-fill::after { opacity: 1; }

/* ── Scrubber thumbnail strip ──────────────────────────────────────────────── */
/*
 * Frame dimensions are driven by CSS custom properties set by _initThumbDimensions()
 * in app.js at startup.  Fallback values (used before JS runs) match the desktop defaults.
 *
 *   --scrub-side-w / --scrub-side-h    : non-centre frame size
 *   --scrub-center-w / --scrub-center-h: centre (target page) frame size
 *
 * The strip is positioned: absolute inside #reader-chrome (which is position:fixed,inset:0).
 * JS sets strip.style.left to keep the centre frame above the scrubber knob, clamped to the
 * viewport edges.
 */

#scrub-thumb-strip {
  position: absolute;
  /* bottom clears the full bottom-chrome height (controls row + progress row) */
  bottom: calc(var(--chrome-b) + 18px);
  /* horizontally centred in the viewport (#reader-chrome is position:fixed inset:0) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  /* drop-shadow so frames read against any page background */
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.75));
}

#scrub-thumb-strip.hidden { display: none; }

.scrub-thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0.5;
}

.scrub-thumb-item.scrub-thumb-center { opacity: 1; }

.scrub-thumb-item.scrub-thumb-oob { visibility: hidden; }

.scrub-thumb-img {
  width:  var(--scrub-side-w, 42px);
  height: var(--scrub-side-h, 59px);
  background-color: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  flex-shrink: 0;
}

/* Centre thumbnail: accent border, slightly larger (JS inflates the CSS var by ~40%) */
.scrub-thumb-item.scrub-thumb-center .scrub-thumb-img {
  width:  var(--scrub-center-w, 58px);
  height: var(--scrub-center-h, 81px);
  border: 2px solid var(--accent);
  border-radius: 3px;
}

.scrub-thumb-label {
  font-family: var(--mono);
  font-size: 0.52rem;
  color: var(--text-dim);
  line-height: 1;
  white-space: nowrap;
}

.scrub-thumb-item.scrub-thumb-center .scrub-thumb-label {
  color: var(--accent);
  font-size: 0.58rem;
}

/* On touch / narrow screens show only 5 thumbnails (hide the outermost pair) */
@media (hover: none), (pointer: coarse) {
  .scrub-thumb-item:first-child,
  .scrub-thumb-item:last-child { display: none; }
  #scrub-thumb-strip { gap: 3px; }
}

#progress-text {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  min-width: 4.5rem;
  text-align: right;
  letter-spacing: 0.05em;
}

#page-input {
  font-family: var(--mono);
  font-size: 0.68rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  width: 3rem;
  text-align: center;
  padding: 0.15rem 0.25rem;
  cursor: text;
}

#page-input:focus {
  outline: none;
  border-color: var(--accent-dim);
}

/* Controls row */
.controls-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
}

.ctrl-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 0.35rem;
}

/* Chrome buttons */
.ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  position: relative;
  flex-shrink: 0;
}

.ctrl-btn svg {
  width: var(--ctrl-icon);
  height: var(--ctrl-icon);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
}

@media (hover: hover) {
  .ctrl-btn:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border);
  }
  .ctrl-btn.danger:hover {
    color: var(--danger);
  }
}

.ctrl-btn:active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

.ctrl-btn.active {
  color: var(--accent);
  background: rgba(201, 168, 76, 0.08);
  border-color: var(--accent-dim);
}

#btn-prev, #btn-next {
  width: calc(var(--ctrl-size) + 4px);
  height: calc(var(--ctrl-size) + 4px);
}

/* Panel indicator */
#panel-indicator {
  position: fixed;
  top: calc(var(--chrome-h) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: rgba(14, 14, 15, 0.85);
  border: 1px solid var(--accent-dim);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeInDown 200ms ease;
  z-index: 200;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Reader overflow menu ────────────────────────────────────────────── */
#reader-menu {
  position: fixed;
  z-index: 500;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  overflow: hidden;
  min-width: 180px;
  animation: ctxFadeIn 120ms ease;
}

#reader-menu.hidden { display: none; }

#reader-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

#reader-menu button:first-child { border-top: none; }

#reader-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

#reader-menu button.danger { color: var(--danger, #e05); }

@media (hover: hover) {
  #reader-menu button:not(:disabled):hover {
    background: var(--surface);
    color: var(--accent);
  }
  #reader-menu button.danger:not(:disabled):hover { color: var(--danger, #e05); }
}

#reader-menu button:not(:disabled):active { background: var(--surface); }

.reader-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Editor-mode visibility: swap regular items for Exit Editor */
#reader-menu:not(.editor-open) .reader-menu-editor { display: none; }
#reader-menu.editor-open .reader-menu-default { display: none !important; }

@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Unpack progress indicator in the top chrome */
#unpack-indicator {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-dimmer);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}
#unpack-indicator::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
#unpack-indicator.hidden { display: none; }

/* Generic utility — hides any element not covered by the id-specific rules above */
.ctrl-btn.hidden { display: none; }
.hidden { display: none; }

/* ── Compound spread button (ctrl-split) ─────────────────────────────────── */
.ctrl-split {
  display: flex;
  flex-shrink: 0;
}

.ctrl-split .ctrl-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ctrl-split-arrow {
  padding-left: 4px;
  padding-right: 4px;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ── Editor back-arrow swap on #btn-close ─────────────────────────────────── */
#btn-close .icon-back { display: none; }
#btn-close.editor-active .icon-default { display: none; }
#btn-close.editor-active .icon-back { display: block; }

/* ── Panel button — source variants (only meaningful when panel mode is active) ── */

/* Active + file panels: gold (same as base .active color, kept for clarity) */
.ctrl-btn.active.available.from-file {
  color: var(--accent);
}

/* Active + auto-detected panels: teal */
.ctrl-btn.active.available.from-detection {
  color: #4ecdc4;
}

/* Pulsing ring — only when panel mode is active AND panels came from auto-detection */
.ctrl-btn.active.available.from-detection::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius) + 3px);
  border: 1px solid #4ecdc4;
  opacity: 0.5;
  animation: ring-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* Red accent — panel mode active but detection failed or timed out */
.ctrl-btn.active.panel-error {
  color: #ff5566;
  border-color: rgba(255, 85, 102, 0.45);
  background: rgba(255, 85, 102, 0.08);
}

@keyframes ring-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.2; transform: scale(1.08); }
}

/* ── Detection status bar ───────────────────────────────────────────────── */
#detection-status {
  position: fixed;
  bottom: calc(var(--chrome-b) + 5.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface2);
  border: 1px solid #4ecdc4;
  border-radius: 20px;
  padding: 0.35rem 1rem 0.35rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.67rem;
  color: #4ecdc4;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--trans), transform var(--trans);
  z-index: 300;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#detection-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #4ecdc4;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#detection-status.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--chrome-b) + 4rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.5rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--trans), transform var(--trans);
  z-index: 300;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Unpack boundary callout ─────────────────────────────────────────────── */
/* Positioned just below the chrome-top; upward arrow points at the processing bar. */
#unpack-callout {
  position: fixed;
  top: calc(var(--chrome-h) + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease;
  z-index: 110;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#unpack-callout::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--border);
}

#unpack-callout::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--surface);
}

#unpack-callout.show { opacity: 1; }



/* ── Panel editor — SVG overlay ─────────────────────────────────────────── */
.editor-overlay {
  position: absolute;
  pointer-events: none;  /* empty SVG space passes through to canvas for pan/zoom */
  z-index: 90;
  overflow: visible;
  touch-action: none;    /* prevent browser scroll/zoom while boxes are being touched */
}

/* Interactive SVG children — explicitly hittable even when SVG background is transparent */
.ed-box,
.ed-handle,
.ed-hit-area,
.ed-ctrl-bg,
.ed-delete-bg {
  pointer-events: all;
  touch-action: none;
}

/* In draw mode the whole SVG surface must be hittable (user draws on empty areas) */
.editor-overlay.drawing {
  pointer-events: all;
}

.editor-overlay.drawing,
.editor-overlay.drawing * {
  cursor: crosshair !important;
}

.ed-box {
  fill: rgba(78, 205, 196, 0.06);
  stroke: #4ecdc4;
  stroke-width: 3;
  cursor: move;
}

.ed-box.selected {
  fill: rgba(78, 205, 196, 0.12);
  stroke: #fff;
  stroke-width: 3.5;
}

.ed-handle {
  fill: #fff;
  stroke: #4ecdc4;
  stroke-width: 1.5;
}

.ed-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: bold;
  fill: #fff;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.85);
  stroke-width: 4px;
}

/* Delete button — circle bg + × text */
.ed-delete-bg {
  fill: rgba(255, 60, 80, 0.9);
  stroke: rgba(255,255,255,0.35);
  stroke-width: 1.5;
  cursor: pointer;
}

.ed-delete-btn {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: bold;
  fill: #fff;
  pointer-events: none;
}

/* Order control — circle bg + ± text */
.ed-ctrl-bg {
  fill: rgba(78, 205, 196, 0.3);
  stroke: #4ecdc4;
  stroke-width: 1.5;
  cursor: pointer;
}

.ed-order-btn {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: bold;
  fill: #fff;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.6);
  stroke-width: 3px;
}

/* Transparent hit area for resize handles — larger touch target, visually invisible */
.ed-hit-area {
  fill: transparent;
  stroke: none;
}

/* ── Editor overlay scrollbars (pointer-device only, visible when zoomed) ── */
.editor-scroll-x,
.editor-scroll-y {
  position: absolute;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  z-index: 95;
  pointer-events: all;
  touch-action: none;
  display: none;
}

.editor-scroll-x {
  left: 4px;
  right: calc(8px + 6px); /* corner gap for Y track */
  bottom: calc(var(--ed-bottom-h, 0px) + 4px);
  height: 8px;
}

.editor-scroll-y {
  top: calc(var(--ed-top-h, 0px) + 4px);
  bottom: calc(var(--ed-bottom-h, 0px) + 8px + 6px); /* above X track + gap */
  right: 4px;
  width: 8px;
}

.editor-scroll-x-thumb,
.editor-scroll-y-thumb {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  cursor: grab;
  transition: background 0.12s;
}

.editor-scroll-x-thumb { top: 0; bottom: 0; }
.editor-scroll-y-thumb { left: 0; right: 0; }

.editor-scroll-x-thumb:hover,
.editor-scroll-y-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.editor-scroll-x-thumb.dragging,
.editor-scroll-y-thumb.dragging {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.65);
}

/* Pill background behind the order-number badge */
.ed-label-bg {
  fill: rgba(0, 0, 0, 0.55);
  stroke: rgba(78, 205, 196, 0.5);
  stroke-width: 1;
  pointer-events: none;
}

/* ── Contextual action bar ──────────────────────────────────────────────── */
#editor-action-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  z-index: 210;
  pointer-events: all;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  white-space: nowrap;
}

#editor-action-bar.bar-bottom {
  bottom: calc(var(--chrome-b) + env(safe-area-inset-bottom, 0px) + 0.5rem);
  top: auto;
}

#editor-action-bar.bar-top {
  top: calc(var(--chrome-h) + env(safe-area-inset-top, 0px) + 0.5rem);
  bottom: auto;
}

#editor-action-bar.hidden { display: none; }

#editor-action-bar.bar-dragged {
  transform: none;
}

.act-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1.4rem;
  cursor: grab;
  color: var(--text-dim);
  opacity: 0.5;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.act-drag-handle:hover { opacity: 0.9; }

@media (pointer: coarse) {
  .act-drag-handle {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem;
    margin: -0.65rem 0 -0.65rem -0.65rem;
  }
}

#editor-action-bar.bar-dragging .act-drag-handle,
.act-drag-handle:active { cursor: grabbing; opacity: 0.9; }

.act-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
  white-space: nowrap;
}

.act-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.act-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.act-btn.act-delete {
  color: #ff5566;
  border-color: rgba(255, 85, 102, 0.3);
}

.act-btn.act-delete:hover {
  background: rgba(255, 85, 102, 0.1);
  color: #ff7788;
}

.act-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Exposure slider popup ──────────────────────────────────────────────── */
/* Positioned dynamically from JS relative to the palette exposure button.  */
#exposure-panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  z-index: 210;
  pointer-events: all;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

#exposure-panel.hidden { display: none; }

.exposure-reset {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
  white-space: nowrap;
}
.exposure-reset:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent-dim);
}

.exposure-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dimmer);
  line-height: 1;
  user-select: none;
}

.exposure-readout {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  min-width: 2.5ch;
  text-align: center;
}

#exposure-slider {
  writing-mode: vertical-lr;
  direction: rtl;       /* top of slider = high value */
  height: 180px;
  width: 6px;
  cursor: ns-resize;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  padding: 0;
  margin: 0 11px;       /* half thumb-width padding so thumb doesn't clip panel */
}

#exposure-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--surface2);
  cursor: ns-resize;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

#exposure-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--surface2);
  cursor: ns-resize;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

#exposure-slider::-moz-range-track {
  background: var(--border);
  border-radius: 3px;
}

/* ── Editor tool palette ────────────────────────────────────────────────── */
#editor-palette {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: calc(var(--chrome-b) + 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 200;
  pointer-events: all;
}

#editor-palette.is-collapsed { display: none; }

/* Floating pill shown while palette is collapsed */
.pal-pill {
  display: none;
  position: fixed;
  left: max(1rem, env(safe-area-inset-left, 0px));
  bottom: calc(var(--chrome-b) + 5.5rem);
  z-index: 201;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-dim);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--trans-fast), color var(--trans-fast);
}

.pal-pill.visible { display: flex; }
.pal-pill:hover { background: var(--surface2); color: var(--text); }
.pal-pill svg { width: var(--ctrl-icon); height: var(--ctrl-icon); }

/* Collapse button inside the palette */
.pal-collapse-btn {
  padding: 0.4rem 0.6rem !important;
  min-width: 0;
}

.pal-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.pal-btn svg {
  width: var(--ctrl-icon);
  height: var(--ctrl-icon);
  flex-shrink: 0;
}

.pal-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent-dim);
}

.pal-btn.active {
  color: #4ecdc4;
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.08);
}

.pal-btn.approved {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.pal-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.pal-sep {
  height: 1px;
  background: var(--border);
  margin: 0.1rem 0;
}

/* In non-portrait layouts the scroll wrapper is invisible — buttons flow as
   direct children of the palette column via display:contents. */
.pal-scroll-wrap,
.pal-scroll {
  display: contents;
}

/* ── Detect split button ────────────────────────────────────────────────── */
.pal-split {
  display: flex;
  flex-shrink: 0;
}

.pal-split-main {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.pal-split-arrow {
  flex-shrink: 0;
  padding: 0.4rem 0.45rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Keep the divider tinted when both halves are active (detecting) */
.pal-split-main.active + .pal-split-arrow {
  border-left-color: rgba(78, 205, 196, 0.4);
}

/* ── Detect options dropdown menu ───────────────────────────────────────── */
.pal-detect-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 250;
  min-width: 148px;
  padding: 4px 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pal-detect-menu.hidden { display: none; }

.pal-detect-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pal-detect-menu button:hover    { background: var(--surface2); }
.pal-detect-menu button:disabled { opacity: 0.38; cursor: default; pointer-events: none; }

.pal-detect-menu hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* ── Portrait orientation: palette becomes a horizontal bottom toolbar ───── */
@media (orientation: portrait) {
  /* Palette sits above the bottom chrome — never overlaps reader controls */
  #editor-palette {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    left: 50%;
    bottom: calc(var(--chrome-b) + env(safe-area-inset-bottom, 0px) + 0.5rem);
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 0.4rem;
    gap: 0.2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: calc(100vw - 2rem);
  }

  /* Icon-only in portrait: hide text labels */
  #editor-palette .pal-btn span { display: none; }

  /* Vertical divider between button groups */
  #editor-palette .pal-sep {
    width: 1px;
    height: 1.4rem;
    margin: 0 0.1rem;
    flex-shrink: 0;
  }

  /* Hamburger stays fixed; scroll wrapper fills the remaining width */
  .pal-scroll-wrap {
    display: block;
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    align-self: stretch;
  }

  /* Fade gradient at the right edge signals more content off-screen */
  .pal-scroll-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.15s;
  }

  /* Hide gradient once fully scrolled to the end */
  .pal-scroll-wrap.at-end::after {
    opacity: 0;
  }

  /* Scrollable row of tool buttons */
  .pal-scroll {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    height: 100%;
    padding: 0 0.2rem;
  }

  .pal-scroll::-webkit-scrollbar { display: none; }

  /* Portrait pill: bottom-right, same level as palette */
  .pal-pill {
    left: auto;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(var(--chrome-b) + env(safe-area-inset-bottom, 0px) + 0.5rem);
  }

  /* Action bar at bottom must clear the palette (~3rem tall) plus a gap */
  #editor-action-bar.bar-bottom {
    bottom: calc(var(--chrome-b) + env(safe-area-inset-bottom, 0px) + 4rem);
  }

  /* Exposure popup: horizontal slider, labels hidden */
  #exposure-panel {
    flex-direction: row;
    padding: 0.4rem 0.6rem;
    gap: 0.4rem;
  }

  #exposure-panel .exposure-label { display: none; }

  #exposure-slider {
    writing-mode: horizontal-tb;
    direction: ltr;
    width: 120px;
    height: 6px;
    margin: 0 6px;
    cursor: ew-resize;
  }

  #exposure-slider::-webkit-slider-thumb {
    cursor: ew-resize;
  }

  #exposure-slider::-moz-range-thumb {
    cursor: ew-resize;
  }
}

/* ── Landscape orientation: palette stays vertical, hide labels to save space */
@media (orientation: landscape) and (max-width: 900px) {
  #editor-palette .pal-btn span { display: none; }
}

/* ── Optimize Dialog ────────────────────────────────────────────────────── */
.optimize-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.optimize-options .dialog-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Save CBZ dialog / Editor save dialog ───────────────────────────────── */
#save-cbz-dialog,
#editor-save-dialog,
#optimize-dialog,
#resume-opt-dialog,
#order-warn-dialog,
#import-opt-dialog,
#incomplete-dialog,
#overwrite-dialog,
#deep-detect-confirm-dialog,
#deep-detect-dialog,
#import-progress-dialog,
#resume-reading-dialog,
#pdf-too-large-dialog,
#pdf-warn-dialog,
#close-book-dialog,
#protected-delete-dialog {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#reset-prefs-dialog {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 950;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#save-cbz-dialog.hidden,
#editor-save-dialog.hidden,
#optimize-dialog.hidden,
#resume-opt-dialog.hidden,
#order-warn-dialog.hidden,
#import-opt-dialog.hidden,
#incomplete-dialog.hidden,
#overwrite-dialog.hidden,
#deep-detect-confirm-dialog.hidden,
#deep-detect-dialog.hidden,
#import-progress-dialog.hidden,
#resume-reading-dialog.hidden,
#pdf-too-large-dialog.hidden,
#pdf-warn-dialog.hidden,
#close-book-dialog.hidden,
#protected-delete-dialog.hidden,
#reset-prefs-dialog.hidden { display: none; }

/* ── Stitch-pages dialog (transparent overlay, card at bottom) ──── */
#stitch-pages-dialog {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5rem;
  z-index: 600;
}
#stitch-pages-dialog.hidden { display: none; }

.stitch-shift-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.stitch-shift-btn {
  background: var(--surface2, #252525);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  min-width: 2.4rem;
}
.stitch-shift-btn:hover:not(:disabled) { background: var(--surface3, #2e2e2e); }
.stitch-shift-btn:disabled { opacity: 0.3; cursor: default; }

.stitch-overlap-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim, #888);
  min-width: 7rem;
  text-align: center;
}

/* ── Editor detection progress dialog (dynamically created) ─────── */
.editor-detection-dialog {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 620;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.editor-detection-dialog.hidden { display: none; }

.detection-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--surface3, #333);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ed-spin 0.75s linear infinite;
  margin: 0 auto 14px;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }

.detection-msg {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text);
}

/* ── Deep detect progress bar ───────────────────────────────────── */
.deep-detect-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.deep-detect-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.2s ease;
}


.dialog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

.dialog-msg {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text);
  text-align: center;
}

.dialog-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  line-height: 1.5;
  text-align: center;
  max-width: 300px;
}

.dialog-btns {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.dialog-btn {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}

.dialog-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.dialog-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e0e0f;
}

.dialog-btn.primary:hover {
  opacity: 0.85;
  background: var(--accent);
  color: #0e0e0f;
}

.dialog-btn.danger {
  color: var(--danger);
  border-color: rgba(192, 57, 43, 0.35);
}
.dialog-btn.danger:hover {
  background: rgba(192, 57, 43, 0.1);
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Save CBZ in-dialog progress view ───────────────────────────────────── */
#save-cbz-prog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0;
}

#save-cbz-prog.hidden { display: none; }

#save-cbz-prog-msg {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  margin: 0 0 0.6rem;
}

#save-cbz-prog-track {
  width: min(260px, 50vw);
  height: 2px;
  background: var(--surface2);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

#save-cbz-prog-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 150ms ease;
}

#save-cbz-prog-track.indeterminate #save-cbz-prog-fill {
  width: 35%;
  transition: none;
  animation: cbz-save-sweep 1.6s ease-in-out infinite;
}

@keyframes cbz-save-sweep {
  0%   { transform: translateX(-100%); }
  70%  { transform: translateX(286%);  }
  100% { transform: translateX(286%);  }
}

#save-cbz-prog-cancel {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.22rem 0.65rem;
  cursor: pointer;
  margin-top: 0.7rem;
  transition: color 150ms, border-color 150ms;
}

#save-cbz-prog-cancel:hover { color: var(--text); border-color: var(--text-dim); }
#save-cbz-prog-cancel.hidden { display: none; }

/* ── Help view ──────────────────────────────────────────────────────────── */
#help-view {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#help-view.hidden { display: none !important; }

.help-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.help-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.help-title span { color: var(--accent); }

#help-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dimmer);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
  flex-shrink: 0;
}
#help-back-btn:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface2);
}

.help-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.help-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.help-section-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.help-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.help-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-dim);
}
.help-icon-gold { color: var(--accent); border-color: var(--accent-dim); background: rgba(201, 168, 76, 0.06); }
.help-icon-teal { color: #4ecdc4; border-color: #4ecdc4; background: rgba(78, 205, 196, 0.06); }

.help-text {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.65;
  padding-top: 0.35rem;
}
.help-text strong { color: var(--text); font-weight: 400; }
.help-text em { font-style: italic; }

.help-code {
  font-family: var(--mono);
  font-size: 0.68rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  color: var(--text-dim);
}

.help-kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  color: var(--text-dim);
  vertical-align: middle;
}

.help-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.help-shortcut {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.help-shortcut-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-left: 0.25rem;
}

/* ── Preferences view ───────────────────────────────────────────────────── */
#prefs-view {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#prefs-view.hidden { display: none !important; }

#prefs-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dimmer);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
  flex-shrink: 0;
}
#prefs-back-btn:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface2);
}

.prefs-footer {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Preference rows ────────────────────────────────────────────────────── */
.pref-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}
.pref-row:last-child { border-bottom: none; }

.pref-row--slave {
  padding-left: 1.25rem;
  border-left: 2px solid var(--border);
  margin-left: 0.375rem;
}

.pref-row--disabled {
  opacity: 0.4;
}

.pref-row--disabled .pref-toggle {
  pointer-events: none;
  cursor: default;
}

.pref-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pref-row-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text);
}

.pref-row-desc {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dimmer);
  line-height: 1.55;
}

/* ── Toggle switch ──────────────────────────────────────────────────────── */
.pref-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}

.pref-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pref-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: background var(--trans-fast), border-color var(--trans-fast);
}

.pref-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dimmer);
  transition: transform var(--trans-fast), background var(--trans-fast);
}

.pref-toggle input:checked + .pref-toggle-track {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--accent-dim);
}

.pref-toggle input:checked + .pref-toggle-track::after {
  transform: translateX(18px);
  background: var(--accent);
}

/* ── Stacked pref row (label above, control below) ──────────────────────── */
.pref-row--stacked {
  flex-direction: column;
  align-items: flex-start;
}

/* ── Segmented chip control ─────────────────────────────────────────────── */
.pref-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 0.5rem;
}

.pref-chip {
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dimmer);
  cursor: pointer;
  transition: border-color var(--trans-fast), color var(--trans-fast),
              background var(--trans-fast);
}

.pref-chip:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.pref-chip--selected {
  border-color: var(--accent-dim);
  background: rgba(201, 168, 76, 0.1);
  color: var(--accent);
}

#prefs-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dimmer);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--trans-fast), color var(--trans-fast), background var(--trans-fast);
  opacity: 0.5;
}
#prefs-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(201, 168, 76, 0.06);
  opacity: 1;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ctrl-sep { display: none; }
  .chrome-top { padding: 0 0.75rem; }
  .chrome-bottom { padding: 0.5rem 0.75rem 0.75rem; }
  #progress-text { display: none; }
}

@media (min-width: 768px) {
  .controls-row { gap: 0.5rem; }
}

/* ── Safe area insets (notch/home indicator) ────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chrome-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .chrome-top {
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(var(--chrome-h) + env(safe-area-inset-top));
  }
}