/* Shared by the bookshelf and both reader renderers. Nested radii use outer − inset. */
:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-sheet: var(--radius-xl);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-press: 100ms;
  --duration-fast: 160ms;
  --duration-normal: 200ms;
  --duration-panel: 250ms;
}

html [hidden] { display: none !important; }
body { font-optical-sizing: auto; }
button, a, input, select, textarea { touch-action: manipulation; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
}

/* The highlight is ONE shared surface. Its position/velocity survive re-selection. */
.has-selection { position: relative; isolation: isolate; }
.selection-indicator {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent));
}
.has-selection > button { position: relative; }
.has-selection > :is(.is-active, [aria-pressed="true"]) { background: transparent !important; box-shadow: none; }

/* Motion owns transforms only on the surface itself, never inherited custom properties. */
[data-motion-panel] { transition: none !important; }
.motion-leaving { position: absolute !important; inset: 0 0 auto !important; pointer-events: none; }
body.has-modal { overflow: hidden; }

@media (prefers-reduced-transparency: reduce) {
  :is(.navbar, .tabbar, .topbar, .bottombar, .sheet) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface-solid, var(--sheet)) !important;
    color: var(--text) !important;
  }
}
@media (prefers-contrast: more) {
  :root { --border: currentColor; }
  :is(.navbar, .tabbar, .topbar, .bottombar, .sheet) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface-solid, var(--sheet)) !important;
    border: 1px solid currentColor !important;
    color: var(--text) !important;
  }
}