/* Readshark — one stylesheet. Tokens first, then components.
   Colour, type, spacing and motion are all read from the tokens below. */

@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/literata-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/literata-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/literata-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* colour — light ("paper") */
  --bg: #f5f3ee;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --surface-2: #ebe8e1;
  --ink: #1c1b18;
  --ink-2: #57534b;
  --ink-3: #6f6a61;
  --line: rgba(28, 27, 24, 0.1);
  --line-strong: rgba(28, 27, 24, 0.2);
  --accent: #1f5f72;
  --accent-ink: #ffffff;
  --accent-soft: rgba(31, 95, 114, 0.11);
  --mark: #dfa53c;
  --scrim: rgba(18, 17, 15, 0.32);
  --shadow-cover: 0 1px 1px rgba(0, 0, 0, 0.06), 0 12px 24px -12px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 20px 40px -24px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 48px -16px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* type */
  --font-serif: 'Literata Variable', Literata, Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-title: 30px;
  --fs-h2: 22px;
  --fs-body: 16px;
  --fs-meta: 14px;
  --fs-caption: 12px;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --gutter: 20px;

  /* shape */
  --r-cover: 3px;
  --r-control: 12px;
  --r-card: 22px;
  --r-sheet: 24px;
  --r-pill: 999px;

  /* motion (lifted from transitions-dev: modal, panel, dropdown, text swap) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --panel-translate-y: 24px;
  --modal-scale: 0.96;
  --dropdown-pre-scale: 0.97;

  /* speed mode */
  --band-h: 116px;
  --band-top: 10px; /* the band's gap below the top of the screen when it sits above the page */
  --word-size: 44px;
  /* the focus letter: each colour is tuned per theme to stay at least 3.8:1 on the page */
  --focus-red: #d4302a;
  --focus-orange: #c9620a;
  --focus-blue: #1f63d6;
  --focus-green: #17844a;
  --focus-color: currentColor;
}
:root[data-focus='red'] { --focus-color: var(--focus-red); }
:root[data-focus='orange'] { --focus-color: var(--focus-orange); }
:root[data-focus='blue'] { --focus-color: var(--focus-blue); }
:root[data-focus='green'] { --focus-color: var(--focus-green); }

:root[data-theme='sepia'] {
  --bg: #efe5d3;
  --paper: #f5ecdc;
  --surface: #fbf6ec;
  --surface-2: #e5d8c0;
  --ink: #33291d;
  --ink-2: #66563f;
  --ink-3: #7a6852;
  --line: rgba(51, 41, 29, 0.12);
  --line-strong: rgba(51, 41, 29, 0.22);
  --accent: #8a4b1f;
  --accent-soft: rgba(138, 75, 31, 0.12);
  --mark: #d0902f;
  --focus-red: #c22d22;
  --focus-orange: #b35a0e;
  --focus-blue: #2a5bb8;
  --focus-green: #1c7a45;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #111112;
  --paper: #161617;
  --surface: #202022;
  --surface-2: #2b2b2e;
  --ink: #e8e4dc;
  --ink-2: #b0aba2;
  --ink-3: #8f8a82;
  --line: rgba(232, 228, 220, 0.1);
  --line-strong: rgba(232, 228, 220, 0.2);
  --accent: #7cc4d4;
  --accent-ink: #0d262c;
  --accent-soft: rgba(124, 196, 212, 0.14);
  --mark: #d6a03e;
  --scrim: rgba(0, 0, 0, 0.5);
  --shadow-cover: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 26px -12px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 18px 48px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --focus-red: #ff6a5a;
  --focus-orange: #ffa04a;
  --focus-blue: #78a8ff;
  --focus-green: #5fd08f;
}

/* first paint before the app sets data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #111112;
    --paper: #161617;
    --surface: #202022;
    --surface-2: #2b2b2e;
    --ink: #e8e4dc;
    --ink-2: #b0aba2;
    --ink-3: #8f8a82;
    --line: rgba(232, 228, 220, 0.1);
    --line-strong: rgba(232, 228, 220, 0.2);
    --accent: #7cc4d4;
    --accent-ink: #0d262c;
    --accent-soft: rgba(124, 196, 212, 0.14);
    --mark: #d6a03e;
    --focus-red: #ff6a5a;
    --focus-orange: #ffa04a;
    --focus-blue: #78a8ff;
    --focus-green: #5fd08f;
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --fs-title: 34px;
    --band-h: 132px;
    --word-size: 52px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --fs-title: 38px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; flex: none; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.view[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-tonal { background: var(--accent-soft); color: var(--accent); }
.btn-quiet { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: #b3261e; color: #fff; }
.btn-light { background: #fff; color: #171512; }
.btn-glass {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (hover: hover) {
  .btn-primary:hover { opacity: 0.92; }
  .btn-tonal:hover { background: color-mix(in srgb, var(--accent) 17%, transparent); }
  .btn-glass:hover { background: rgba(255, 255, 255, 0.24); }
  .btn-quiet:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink) 8%); }
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) {
  .icon-btn:hover { background: var(--line); }
}

/* ---------- Library ---------- */
.library {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) var(--gutter) calc(env(safe-area-inset-bottom) + 56px);
}
.lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 72px;
}
.wordmark {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: 640;
  letter-spacing: -0.022em;
  line-height: 1;
}
.lib-header .btn[hidden] { display: none; }

/* Your books | Summaries */
.lib-intro {
  max-width: 46ch;
  margin: 0 0 var(--s-4);
  font: 15px / 1.45 var(--font-ui);
  color: var(--ink-2);
  text-wrap: pretty;
}
.lib-intro[hidden] { display: none; }
.lib-tabs { max-width: 420px; margin: 0 0 20px; }
.lib-tabs.segmented button { min-height: 44px; font-size: 15px; }
#library-body[hidden], #summaries-body[hidden] { display: none; }
.lib-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s-4);
  margin-top: 40px;
  font: var(--fs-meta) / 1.4 var(--font-ui);
}
.lib-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink-3);
  text-decoration: none;
}
.lib-footer a:hover { color: var(--ink); text-decoration: underline; }
.lib-footer button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-3);
  cursor: pointer;
}
.lib-footer button:hover { color: var(--ink); text-decoration: underline; }

/* Safari keeps a website's books for a week without a visit: said once, on the shelf */
.keep-note {
  margin: 0 0 var(--s-4);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.keep-note p { margin: 0 0 12px; font: 15px / 1.45 var(--font-ui); color: var(--ink-2); text-wrap: pretty; }
.keep-note-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Back up your library */
.backup-body { padding: 0 8px 4px; font: 15px / 1.5 var(--font-ui); color: var(--ink-2); }
.backup-body p { margin: 0 0 12px; text-wrap: pretty; }
.backup-lead { color: var(--ink); }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 4px; }
.backup-actions .btn { flex: 1 1 160px; }
.backup-body .import-msg { margin: 10px 2px 12px; }
.backup-note { margin-top: 14px; font-size: 14px; }
.backup-apple { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.backup-apple h3 { margin: 0 0 6px; font: 600 15px / 1.35 var(--font-ui); color: var(--ink); }
.backup-apple ol { margin: 0; padding-left: 20px; font-size: 14px; }
.backup-apple li { margin: 0 0 6px; }

/* Continue reading: the cover's own colours, blurred, carry the card */
.continue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px 18px;
  margin-top: 4px;
  padding: 18px;
  border-radius: var(--r-card);
  background: #2b2723;
  color: #fff;
  box-shadow: var(--shadow-card);
}
.continue-bg {
  position: absolute;
  inset: -48px;
  z-index: -2;
  background-position: center;
  background-size: cover;
  filter: blur(34px) saturate(1.35);
  transform: scale(1.15);
}
.continue::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(12, 11, 10, 0.42), rgba(12, 11, 10, 0.68));
}
.continue-cover {
  display: block;
  width: 96px;
  border-radius: var(--r-cover);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  align-self: start;
}
.continue-cover img, .continue-cover .cover-fallback { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.continue-body { min-width: 0; }
.eyebrow {
  margin: 0 0 6px;
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
}
.continue-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.continue-author {
  margin: 4px 0 0;
  font-size: var(--fs-meta);
  opacity: 0.86;
}
.continue-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.continue-progress .bar { background: rgba(255, 255, 255, 0.24); height: 4px; }
.continue-progress .bar > span { background: #fff; }
.continue-meta {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.9;
  overflow-wrap: anywhere;
}
.continue-len { display: flex; align-items: center; gap: 6px; }
.continue-len svg { width: 14px; height: 14px; color: #9fd6e2; }
.continue-progress + .continue-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continue-actions {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.continue-actions .btn-glass { padding: 0 20px; }
@media (min-width: 640px) {
  .continue {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 28px;
    padding: 28px;
  }
  .continue-cover { width: 132px; }
  .continue-title { font-size: 30px; }
  .continue-actions {
    grid-column: 2;
    display: flex;
    gap: 12px;
    margin-top: -6px;
  }
  .continue-actions .btn { padding: 0 22px; }
}
/* wide screens: cover on the left, the words and both buttons in one column beside it */
@media (min-width: 1024px) {
  .continue {
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 0;
    padding: 32px 40px 32px 36px;
  }
  .continue-cover { width: 148px; grid-row: 1 / span 2; align-self: center; }
  .continue-body { align-self: end; }
  .continue-title { max-width: 18em; }
  .continue-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    gap: 12px;
    margin-top: 22px;
  }
  .continue-actions .btn { min-width: 172px; min-height: 48px; }
}

/* Shelf */
.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 40px 0 18px;
}
.shelf-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.shelf-count { color: var(--ink-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 18px;
}
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 34px 24px; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 44px 32px; }
}
.book { position: relative; min-width: 0; display: flex; flex-direction: column; }
.book-cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-cover) 5px 5px var(--r-cover);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-cover);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.book-cover img, .book-cover .cover-fallback { width: 100%; height: 100%; object-fit: cover; }
/* a hint of spine on the left edge */
.book-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0, rgba(255, 255, 255, 0.12) 2.4%, rgba(255, 255, 255, 0) 6.5%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.07) 100%);
}
/* a summary on the shelf: a small label inside the frame of its cover */
.book-badge {
  position: absolute;
  z-index: 1;
  top: 6.5%;
  left: 10%;
  padding: 3px 7px 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.93);
  color: #1c1b18;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* the title link covers the whole tile, so the cover and the text are one big tap target */
.stretched::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.stretched:focus-visible { outline: none; }
.stretched:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.continue .stretched:focus-visible::after { outline-color: #fff; border-radius: var(--r-card); outline-offset: -3px; }
.book:active .book-cover { transform: scale(0.975); }
@media (hover: hover) {
  .book:hover .book-cover { transform: translateY(-3px); }
}
.book-info {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: 2px;
  margin-top: 12px;
}
.book-title {
  grid-column: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.book-author {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-more {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: -11px -13px -24px 0;
  color: var(--ink-3);
}
.book-more svg { width: 20px; height: 20px; }
.book-progress {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  min-height: 16px;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}
.tag-new { color: var(--accent); font-weight: 650; letter-spacing: 0.02em; }
.book-len { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.book-len > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-len svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.tag-done { color: var(--ink-2); font-weight: 600; }

.bar {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: inherit;
  background: var(--accent);
}

.cover-fallback {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8%;
  padding: 14% 12%;
  background: hsl(var(--hue, 200) 32% 30%);
  color: #fff;
  text-align: left;
  container-type: inline-size; /* its words scale with the cover, small on the Continue card */
}
.cover-fallback b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(11px, 13.5cqi, 22px);
  line-height: 1.15;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.cover-fallback small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(9px, 7cqi, 12px);
  opacity: 0.8;
  letter-spacing: 0.04em;
}

.empty {
  margin: 48px auto 0;
  max-width: 420px;
  text-align: center;
  color: var(--ink-2);
}
.empty h2 { font-family: var(--font-serif); color: var(--ink); font-weight: 600; margin: 0 0 8px; }
.empty .btn { margin-top: 18px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; }

.drop-hint {
  position: fixed;
  inset: 12px;
  z-index: 60;
  display: grid;
  place-items: center;
  border: 2px dashed var(--accent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  color: var(--accent);
  font-weight: 650;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.drop-hint.is-on { opacity: 1; }

/* ---------- Summaries ---------- */
.sum-intro { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; line-height: 1.45; text-wrap: balance; }
/* the categories: one row that scrolls sideways on a phone, edge to edge */
.chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--gutter) * -1) 24px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips[data-more] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.chip {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
@media (hover: hover) {
  .chip[aria-pressed='false']:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink) 8%); }
}
.sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 760px) {
  .sum-list { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 36px 32px; }
}
/* a card: the cover, then title, author, the one-line promise and the length */
.sum-card {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (min-width: 760px) {
  .sum-card { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
}
.sum-card:active .book-cover { transform: scale(0.975); }
@media (hover: hover) {
  .sum-card:hover .book-cover { transform: translateY(-3px); }
}
.sum-info { min-width: 0; padding-top: 2px; }
.sum-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sum-author {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sum-line {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.sum-meta { margin: 8px 0 0; color: var(--ink-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.sum-none { color: var(--ink-3); font-size: 15px; }

/* the sheet a card opens */
.sum-sheet { padding: 4px 8px 4px; }
.sum-sheet-top {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.sum-sheet-facts { min-width: 0; }
.sum-sheet-author { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.sum-sheet-meta { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.sum-sheet-note { margin: 10px 0 0; color: var(--accent); font-size: 13px; font-weight: 650; }
.sum-sheet-line {
  margin: 20px 0 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.sum-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sum-sheet-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}
.sum-sheet-link svg { width: 17px; height: 17px; }
.sum-sheet-paid {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
@media (hover: hover) {
  .sum-sheet-link:hover { background: var(--accent-soft); }
}

/* ---------- Menus, sheets, dialogs ---------- */
.menu {
  position: fixed;
  z-index: 50;
  min-width: 212px;
  padding: 6px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transform-origin: top right;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.menu.is-open { transform: none; opacity: 1; }
.menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 15px;
  text-align: left;
}
.menu button svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-2); }
.menu button.has-hint { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.menu .menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu .menu-text small { color: var(--ink-3); font-size: 13px; line-height: 1.35; text-wrap: pretty; }
.menu button.is-danger, .menu button.is-danger svg { color: #c4362c; }
@media (hover: hover) {
  .menu button:hover { background: var(--line); }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.scrim.is-open { opacity: 1; }

.sheet {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: var(--kb, 0px);
  max-height: min(78dvh, 640px, calc(100dvh - var(--kb, 0px) - 16px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.sheet.is-open { transform: none; opacity: 1; pointer-events: auto; }
/* a closed sheet is gone, not just invisible: nothing in it can take keyboard focus or be read out */
.sheet[hidden] { display: none; }
.sheet::before {
  content: '';
  align-self: center;
  width: 36px;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--line-strong);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 6px 20px;
}
.sheet-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}
.sheet-body { overflow: auto; padding: 4px 12px 16px; overscroll-behavior: contain; }
@media (min-width: 760px) {
  .sheet {
    left: auto;
    right: 16px;
    top: 72px;
    bottom: auto;
    width: 380px;
    max-height: calc(100dvh - 96px);
    border-radius: var(--r-sheet);
    transform: translateY(-8px) scale(var(--modal-scale));
    transform-origin: top right;
  }
  .sheet::before { display: none; }
  .sheet-head { padding-top: 14px; }
}

.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px 10px calc(12px + var(--depth, 0) * 16px);
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: left;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
.toc-list button.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (hover: hover) {
  .toc-list button:hover { background: var(--line); }
  .toc-list button.is-current:hover { background: var(--accent-soft); }
}

.field { padding: 10px 8px 14px; }
.field + .field { border-top: 1px solid var(--line); }
.field-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.field-note { margin: 8px 2px 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.field-note[hidden] { display: none; }
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface-2);
}
.stepper button {
  width: 56px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper output { font-variant-numeric: tabular-nums; font-weight: 600; }
.stepper .a-small { font-family: var(--font-serif); font-size: 15px; }
.stepper .a-big { font-family: var(--font-serif); font-size: 22px; }

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface-2);
}
.segmented button {
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.field-value { color: var(--ink-3); font-weight: 500; }

/* focus letter colours: round swatches, the chosen one ringed */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.swatches button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--ink); }
.swatches i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.swatches .dot-red { background: var(--focus-red); }
.swatches .dot-orange { background: var(--focus-orange); }
.swatches .dot-blue { background: var(--focus-blue); }
.swatches .dot-green { background: var(--focus-green); }
/* "off": an empty ring with a slash through it */
.swatches .dot-none {
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-3) calc(50% - 1px), var(--ink-3) calc(50% + 1px), transparent calc(50% + 1px));
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
/* the speed reading sheet holds five settings and a preview, so it may grow taller than the others */
#look-sheet { max-height: min(90dvh, 760px); }
/* the sheet's preview: a small band on the page colour, playing the next words */
.look-preview .rsvp { height: 100px; }
.look-preview {
  margin: 2px 4px 6px;
  padding: 10px 16px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
/* Auto follows the phone: half light, half dark */
.swatch-auto { background: linear-gradient(135deg, #fbfaf6 50%, #161617 50%); }
/* word size shown as the letter itself, small to large */
.a-size { font-family: var(--font-serif); font-weight: 500; line-height: 1; }

.dialog {
  position: fixed;
  z-index: 46;
  left: 50%;
  top: 50%;
  width: min(360px, calc(100vw - 40px));
  padding: 22px 20px 18px;
  border-radius: var(--r-sheet);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, -50%) scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.dialog.is-open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.dialog h2 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.dialog p { margin: 0; color: var(--ink-2); font-size: 15px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }

/* Toasts */
.toasts {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
/* paused speed reading keeps its controls at the bottom, so a message (Undo) rises above them */
:root:has(#reader[data-speed='paused']:not([hidden]) .speed-panel[data-pos='bottom']) .toasts {
  bottom: calc(env(safe-area-inset-bottom) + var(--sp-panel-h, 200px) + 24px);
}
:root:has(#reader[data-mode='listen']:not([hidden])) .toasts {
  bottom: calc(env(safe-area-inset-bottom) + var(--lp-h) + 28px);
}
.toast {
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  text-align: center;
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.toast.is-in { transform: none; opacity: 1; }
.toast:has(.toast-action) {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px 2px 18px;
  text-align: left;
}
.toast-action {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  pointer-events: auto;
}
@media (hover: hover) { .toast-action:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }

/* ---------- Reader ---------- */
.reader {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.reader-stage { position: absolute; inset: 0; }
.reader-stage foliate-view { display: block; width: 100%; height: 100%; }
.reader-stage.is-pointer-prev { cursor: w-resize; }
.reader-stage.is-pointer-next { cursor: e-resize; }
foliate-view::part(head),
foliate-view::part(foot) {
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  opacity: 1;
}
.reader[data-mode='speed'] foliate-view::part(head),
.reader[data-mode='speed'] foliate-view::part(foot) { visibility: hidden; }
/* Above the page (the default): in speed mode the band has its own strip at the top of the screen
   and the page is laid out underneath it, so no line is ever covered and the band never moves.
   The page's empty header space (its 48px margin) tucks under the band's lower edge. */
:root:not([data-band='over']) .reader[data-mode='speed'] .reader-stage {
  top: calc(env(safe-area-inset-top) + var(--band-top) + var(--band-h) - 36px);
}
/* a PDF page has no empty header to tuck under the band, so it starts just below it */
:root:not([data-band='over']) .reader[data-layout='fixed'][data-mode='speed'] .reader-stage {
  top: calc(env(safe-area-inset-top) + var(--band-top) + var(--band-h) + 8px);
}

.reader-loading {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  background: var(--paper);
  text-align: center;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.reader-loading.is-done { opacity: 0; pointer-events: none; }
.reader-loading h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.reader-loading p { margin: 0; color: var(--ink-3); font-size: 14px; }
.loading-line {
  position: relative;
  width: 120px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  overflow: hidden;
}
.loading-line::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--accent);
  animation: loading 1.1s var(--ease-in-out) infinite;
}
@keyframes loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.chrome {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.reader-top {
  top: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 6px 0;
  border-bottom: 1px solid var(--line);
}
.reader-title {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.back-label { display: none; }
@media (min-width: 760px) {
  .btn-back { width: auto; padding: 0 14px 0 8px; border-radius: var(--r-pill); gap: 2px; display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; }
  .back-label { display: inline; }
}
.reader-bottom {
  bottom: 0;
  padding: 6px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.reader-bottom-inner { max-width: 760px; margin: 0 auto; }
.reader-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}
.reader-loc { min-width: 0; display: grid; gap: 1px; }
.reader-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.reader-actions .btn[hidden] { display: none; }
/* a phone has no room for both buttons beside the chapter name, so they share a row of their own */
@media (max-width: 599px) {
  .reader-bottom-row { flex-wrap: wrap; row-gap: 12px; }
  .reader-loc { flex: 1 1 100%; }
  .reader-actions { flex: 1 1 100%; }
  .reader-actions .btn { flex: 1 1 0; min-height: 48px; }
}
.loc-chapter {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-pages { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.reader[data-chrome='off'] .chrome {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur-slow);
}
/* the bars fade and settle a short way rather than sliding off-screen, so a hidden bar never
   sits outside the reader where nothing could reach it */
.reader[data-chrome='off'] .reader-top { transform: translateY(calc(var(--panel-translate-y) * -1)); }
.reader[data-chrome='off'] .reader-bottom { transform: translateY(var(--panel-translate-y)); }
.reader[data-mode='speed'] .chrome,
.reader[data-mode='listen'] .chrome {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.reader[data-mode='speed'] .reader-top,
.reader[data-mode='listen'] .reader-top { transform: translateY(calc(var(--panel-translate-y) * -1)); }
.reader[data-mode='speed'] .reader-bottom,
.reader[data-mode='listen'] .reader-bottom { transform: translateY(var(--panel-translate-y)); }

.scrubber-wrap { position: relative; padding: 8px 0 2px; }
.scrubber {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --p: 0%;
}
.scrubber::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ink-2) 0 var(--p), var(--line-strong) var(--p) 100%);
}
.scrubber::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
.scrubber::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink-2); }
.scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.14);
}
.scrubber::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.scrub-tip {
  position: absolute;
  bottom: 40px;
  left: var(--x, 50%);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.scrub-tip.is-on { opacity: 1; }

/* ---------- Speed mode ---------- */
/* paper behind the band, stretched to whole lines so no line shows cut in half */
.speed-mat {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 14;
  width: var(--mat-w, 100%);
  height: var(--mat-h, var(--band-h));
  background: var(--paper);
  transform: translate(var(--mat-x, 0px), var(--mat-y, 50vh));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-in-out), height 360ms var(--ease-in-out);
}
.reader[data-speed='playing'] #speed-mat { opacity: 1; }
.speed-mat.no-move { transition: opacity 220ms var(--ease-out); }
.panel-mat { z-index: 24; transition: opacity var(--dur) var(--ease-out); }
.reader[data-speed='paused'] .panel-mat { opacity: 1; }
/* The band is a line of the page itself: whole lines are cleared around it (the mat), a hairline
   sits above it and the chapter's progress runs along its foot, the same width as the text column.
   .rsvp is the band's look, shared with the preview in the speed reading sheet. */
.rsvp {
  position: relative;
  height: var(--band-h);
  display: grid;
  place-items: center;
  padding: 0 8px 12px; /* lifts the word to sit optically centred between the rules */
}
.rsvp::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-strong);
}
.speed-band {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  width: var(--band-w, calc(100% - 48px));
  transform: translate(var(--band-x, 24px), var(--band-y, 50vh));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-in-out);
}
.band-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.band-rule > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: inherit;
  background: var(--mark);
  transition: width 400ms linear;
}
.reader[data-speed='playing'] .speed-band { opacity: 1; }
/* above the page it covers nothing, so it stays in view while paused, showing the word you stopped on */
:root:not([data-band='over']) .reader[data-mode='speed'] .speed-band {
  --band-y: calc(env(safe-area-inset-top) + var(--band-top));
  opacity: 1;
}
:root:not([data-band='over']) #speed-mat { display: none; }
.speed-band.no-move { transition: opacity 220ms var(--ease-out); }
.speed-word {
  font-family: var(--word-font, var(--font-serif));
  font-size: calc(var(--word-size) * var(--word-scale, 1));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
}
.w-orp { color: var(--focus-color); }
/* Fixed letter: the word sits in a box centred on the focus point, in three columns, so the
   focus letter's middle always lands exactly there, whatever its width. Long endings run on
   past the box to the right; focus.js shrinks a word that would leave the band. */
:root[data-focus-align='fixed'] .rsvp .speed-word:not([data-plain]) {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 12px;
  width: calc(var(--focus-x, 38%) * 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  text-align: left;
}
:root[data-focus-align='fixed'] .rsvp .w-pre { text-align: right; }
/* two ticks point at the focus spot, one from each rule */
.rsvp-tick {
  position: absolute;
  left: var(--focus-x, 38%);
  width: 2px;
  height: 9px;
  margin-left: -1px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  display: none;
}
.rsvp-tick.is-top { top: 0; }
.rsvp-tick.is-bottom { bottom: 3px; transition: opacity var(--dur) var(--ease-out); }
:root[data-focus-align='fixed'] .rsvp-tick { display: block; }
/* words two or three at a time show centred, so there is no focus spot to point at */
:root:not([data-phrase='1']) .rsvp-tick { display: none; }
/* the first-play hint sits just above the lower rule; its tick steps aside while it shows */
.speed-band:has(.speed-hint.is-on) .rsvp-tick.is-bottom { opacity: 0; }

.speed-strip {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  z-index: 16;
  max-width: 536px;
  margin: 0 auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.reader[data-speed='playing'] .speed-strip { opacity: 1; }
.strip-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.strip-chapter {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-style: italic;
}
.strip-left { flex: none; margin-left: auto; white-space: nowrap; color: var(--ink-2); }
.strip-pause { flex: none; align-self: center; margin-left: -6px; color: var(--ink-3); }
.strip-pause svg { width: 13px; height: 13px; }
/* in speed mode the amber means "where you are": the marked word and the chapter's progress */
.sp-line .bar > span { background: var(--mark); }
/* the first time speed mode plays, the card itself says how to pause, in place of the amber rule */
.speed-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  line-height: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.speed-hint.is-on { opacity: 1; }

.speed-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 25;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 16px 16px;
  border-radius: var(--r-sheet);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.speed-panel[data-pos='bottom'] { bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(var(--panel-translate-y)); }
.speed-panel[data-pos='top'] { top: calc(12px + env(safe-area-inset-top)); transform: translateY(calc(var(--panel-translate-y) * -1)); }
.reader[data-speed='paused'] .speed-panel { transform: none; opacity: 1; pointer-events: auto; }
.sp-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-meta { flex: 1; min-width: 0; display: grid; gap: 3px; margin-right: 4px; }
/* the speed reader's look (colours, alignment, size): the "Aa" every reading app uses */
.sp-look {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
}
.sp-look svg { width: 22px; height: 22px; }
@media (hover: hover) { .sp-look:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--ink) 7%); } }
.sp-chapter { font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-left { color: var(--ink-2); font-family: var(--font-serif); font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; }
.sp-line { margin-top: 10px; display: flex; }
.sp-line .bar { height: 4px; }
.sp-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.sp-back,
.sp-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.sp-back svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) {
  .sp-back:hover,
  .sp-done:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--ink) 7%); }
}
@media (max-width: 379px) {
  .sp-back span { display: none; }
}
.sp-end { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-end .sp-done { flex: 1 1 auto; padding: 0 10px; }
.sp-mark {
  flex: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out);
}
.sp-mark svg { width: 22px; height: 22px; }
.sp-mark:active { transform: scale(0.94); }
@media (hover: hover) { .sp-mark:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--ink) 7%); } }
@media (max-width: 379px) {
  .sp-controls, .sp-end { gap: 10px; }
  .sp-mark { width: 44px; height: 44px; }
  .sp-end .sp-done { padding: 0 8px; }
}
.sp-play {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.sp-play:active { transform: scale(0.95); }
.sp-play svg { width: 28px; height: 28px; }
.sp-wpm {
  flex: none;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 2px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.sp-wpm button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
}
.sp-wpm button svg { width: 18px; height: 18px; }
@media (hover: hover) { .sp-wpm button:hover { background: var(--surface); } }
.sp-wpm button:disabled { opacity: 0.35; cursor: default; }
.sp-wpm output {
  display: grid;
  justify-items: center;
  min-width: 38px;
  line-height: 1;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.sp-wpm output small { margin-top: 3px; color: var(--ink-2); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }
/* the recommended speed, under the speed buttons: ticked inside the range, and it says so above it; a tap opens
   the reading speed sheet */
.sp-advice {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  margin: 6px 0 -6px auto;
  padding: 0 4px 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.sp-advice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-advice i { flex: none; display: grid; }
.sp-advice svg { width: 14px; height: 14px; }
.sp-tick { color: var(--accent); }
.sp-advice .sp-tick svg { width: 16px; height: 16px; stroke-width: 2.4; }
.sp-more { color: var(--ink-3); }
.sp-advice[data-zone='above'] { color: var(--ink); }
@media (hover: hover) { .sp-advice:hover { background: var(--surface-2); } }

/* the reading speed sheet: the range, why, and the reader's own page speed */
.pace { padding: 2px 8px 0; }
.pace-range .field-label { margin-bottom: 2px; }
.pace-range p { margin: 0; color: var(--ink-2); font-family: var(--font-serif); font-size: 16px; }
.pace-range b {
  margin-right: 4px;
  color: var(--ink);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pace-why { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.pace-mine { margin-top: 16px; padding: 14px 0 2px; border-top: 1px solid var(--line); }
.pace-mine .field-label { margin-bottom: 0; }
.pace-mine .field-note { margin: 8px 0 0; }
.pace-use { width: 100%; margin-top: 16px; }
.pace-sources { margin: 14px 0 2px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.pace-sources a { color: inherit; }

/* ---------- Listening ---------- */
/* The controls sit in a strip of their own under the page, and the page is laid out above them,
   so no line is ever covered; the page's own foot (pages left, how far in) stays in view. */
:root { --lp-h: 72px; }
.reader[data-mode='listen'] .reader-stage {
  bottom: calc(env(safe-area-inset-bottom) + var(--lp-h) + 14px);
}
.listen-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 25;
  max-width: 520px;
  height: var(--lp-h);
  margin: 0 auto;
  padding: 0 8px;
  display: grid;
  /* equal sides, so play sits in the middle of the screen */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sheet);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(var(--panel-translate-y));
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.reader[data-mode='listen'] .listen-panel {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: none;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.lp-start { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lp-transport { display: flex; align-items: center; gap: 6px; }
.lp-btn {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out);
}
.lp-btn svg { width: 21px; height: 21px; }
.lp-btn:active { transform: scale(0.94); }
.lp-play.sp-play { width: 54px; height: 54px; }
.lp-play svg { width: 26px; height: 26px; }
.lp-rate {
  flex: none;
  min-width: 44px;
  height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lp-done.sp-done { justify-self: end; height: 42px; padding: 0 14px; font-size: 15px; }
@media (hover: hover) {
  .lp-btn:hover,
  .lp-rate:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--ink) 7%); }
}
@media (max-width: 379px) {
  .lp-start, .lp-transport { gap: 4px; }
  .lp-btn { width: 40px; height: 40px; }
  .lp-play.sp-play { width: 50px; height: 50px; }
  .lp-rate { min-width: 40px; height: 40px; padding: 0 6px; font-size: 14px; }
  .lp-done.sp-done { height: 40px; padding: 0 12px; }
}
/* the voices to choose from in the "Read aloud" sheet */
.voice-list { display: grid; gap: 2px; }
.voice-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
}
.voice-list button[aria-checked='true'] { background: var(--surface-2); }
@media (hover: hover) { .voice-list button:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } }
.vl-check { flex: none; width: 20px; height: 20px; color: var(--accent); visibility: hidden; }
.vl-check svg { width: 20px; height: 20px; }
.voice-list button[aria-checked='true'] .vl-check { visibility: visible; }
.vl-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.vl-place { flex: none; max-width: 45%; color: var(--ink-2); font-size: 13px; text-align: right; }
.stepper button svg { width: 18px; height: 18px; }

/* ---------- Highlights ---------- */
/* the four colours as solid swatches; inside a page they are see-through (reader.js PAGE_THEMES) */
:root {
  --hl-yellow: #f0bf2e;
  --hl-green: #58b467;
  --hl-blue: #4a90e8;
  --hl-pink: #e566a1;
}
.hl-dot[data-color='yellow'], .hl-mark[data-color='yellow'] { background: var(--hl-yellow); }
.hl-dot[data-color='green'], .hl-mark[data-color='green'] { background: var(--hl-green); }
.hl-dot[data-color='blue'], .hl-mark[data-color='blue'] { background: var(--hl-blue); }
.hl-dot[data-color='pink'], .hl-mark[data-color='pink'] { background: var(--hl-pink); }

/* the bar by selected words or a tapped highlight: four colours, then note, copy and remove */
.hl-bar {
  position: fixed;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(6px) scale(var(--dropdown-pre-scale));
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.hl-bar[hidden] { display: none; }
.hl-bar[data-side='below'] { transform: translateY(-6px) scale(var(--dropdown-pre-scale)); }
.hl-bar.is-open { opacity: 1; transform: none; }
.hl-bar button {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
}
.hl-bar button svg { width: 20px; height: 20px; }
.hl-bar button:active { background: var(--line); }
@media (hover: hover) { .hl-bar button:hover { background: var(--line); } }
.hl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.hl-swatch[aria-pressed='true'] .hl-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.hl-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--line-strong); }

/* the contents sheet's two tabs */
.toc-tabs { flex: none; margin: 2px 20px 14px; }
.segmented button[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.tab-count { margin-left: 6px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tab-count:empty { display: none; }
.toc-list[hidden], .hl-panel[hidden] { display: none; }

/* the Highlights tab: each highlight with its colour, note and place */
.hl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 0 12px; }
.hl-head > span { color: var(--ink-2); font-size: 13px; font-weight: 600; }
/* a quiet text button, so it does not read as a third tab */
.hl-export { padding: 0 12px; background: none; color: var(--accent); font-size: 14px; }
@media (hover: hover) { .hl-export:hover { background: var(--accent-soft); } }
.hl-list { list-style: none; margin: 0; padding: 0; }
.hl-item {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  text-align: left;
}
@media (hover: hover) { .hl-item:hover { background: var(--line); } }
.hl-mark { border-radius: 2px; }
.hl-body { display: grid; gap: 6px; min-width: 0; }
.hl-text, .hl-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl-text { -webkit-line-clamp: 4; font-family: var(--font-serif); font-size: 15px; line-height: 1.45; }
.hl-note { -webkit-line-clamp: 3; color: var(--ink-2); font-size: 14px; line-height: 1.4; white-space: pre-line; }
.hl-meta { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hl-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 24px 32px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.hl-empty svg { width: 28px; height: 28px; margin-bottom: 4px; }
.hl-empty p { max-width: 300px; margin: 0; }
.hl-empty .hl-empty-title { color: var(--ink); font-family: var(--font-serif); font-size: 17px; font-weight: 600; }

/* the note sheet: the highlighted words, then the note */
.note-edit { padding: 0 8px 4px; }
.note-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 2px 0 2px 12px;
  border-left: 4px solid var(--hl-yellow);
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
}
.note-quote[data-color='green'] { border-left-color: var(--hl-green); }
.note-quote[data-color='blue'] { border-left-color: var(--hl-blue); }
.note-quote[data-color='pink'] { border-left-color: var(--hl-pink); }
.note-input {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
}
.note-input::placeholder { color: var(--ink-3); }
.note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.note-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- Text or web link ---------- */
.import-edit { padding: 0 8px 4px; }
.import-input { min-height: 150px; }
.import-title {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.import-title[hidden] { display: none; }
.import-title::placeholder { color: var(--ink-3); }
.import-title:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.import-msg { min-height: 20px; margin: 10px 2px 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.import-msg:empty { min-height: 0; margin: 0; }
.import-msg[data-error] { color: #b3261e; }
:root[data-theme='dark'] .import-msg[data-error] { color: #ff8a7f; }
.import-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.import-actions [data-go] { margin-left: auto; min-width: 128px; }
.sheet[aria-busy='true'] [data-go] { opacity: 0.7; }

/* ---------- Readshark Plus ---------- */
.link-btn {
  display: inline;
  /* a thumb-sized target around a word in a sentence; the negative margin keeps the line where it was */
  padding: 12px 6px;
  margin: -12px -6px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* the guides, above the summaries: a heading for each part once there are two */
.sum-guides { margin-bottom: 30px; }
.sum-head { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sum-guides .sum-plus-line { margin: 0 0 16px; }
/* a guide's sheet: the books it draws on, each with its summary here and its link out */
.sum-sources { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sum-sources-head { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.sum-sources-list { list-style: none; margin: 0; padding: 0; }
.sum-source { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sum-source:last-child { border-bottom: 0; }
.sum-source-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sum-source-title .link-btn { color: var(--ink); text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sum-source-author { grid-column: 1; margin: 0; color: var(--ink-3); font-size: 13px; }
.sum-source-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.sum-source-link svg { width: 15px; height: 15px; }
.sum-sources .sum-sheet-paid { margin-top: 8px; }
.sum-plus-line { margin: -6px 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.sum-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px 2px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}
.sum-sheet-plus {
  margin-top: 18px;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;
  background: var(--accent-soft);
}
.sum-sheet-plus p { margin: 0 0 12px; color: var(--ink); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.sum-sheet-plus .btn { width: 100%; background: var(--surface); }

.plus-sheet { padding: 0 8px 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.plus-sheet p { margin: 0; }
.plus-lead { margin-bottom: 6px !important; color: var(--accent); font-size: 14px; font-weight: 650; }
.plus-pitch {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.plus-list { margin: 12px 0 18px; padding: 0; list-style: none; }
.plus-list li { position: relative; margin: 0 0 8px; padding-left: 26px; color: var(--ink); text-wrap: pretty; }
.plus-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.32em;
  width: 13px;
  height: 7px;
  border: solid var(--accent);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}
.plus-price { margin-top: 2px !important; color: var(--ink-2); font-size: 15px; }
.plus-amount { margin-right: 4px; color: var(--ink); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.plus-go { width: 100%; margin-top: 16px; }
.plus-go:disabled { opacity: 0.7; }
.plus-small { margin-top: 10px !important; color: var(--ink-3); font-size: 13px; text-align: center; text-wrap: balance; }
.plus-restore { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.plus-restore-head { margin-bottom: 8px !important; color: var(--ink); font-weight: 600; }
.plus-restore-form { display: flex; flex-wrap: wrap; gap: 8px; }
.plus-email {
  flex: 1 1 180px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.plus-email::placeholder { color: var(--ink-3); }
.plus-email:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plus-restore-form .btn { flex: 0 0 auto; }
.plus-msg { min-height: 0; margin-top: 10px !important; font-size: 14px; }
.plus-msg:empty { display: none; }
.plus-msg[data-error] { color: #b3261e; }
:root[data-theme='dark'] .plus-msg[data-error] { color: #ff8a7f; }
.plus-state { margin-top: 8px !important; color: var(--ink-2); }
.plus-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.plus-actions .btn { flex: 1 1 140px; }

/* ---------- Dark adjustments ---------- */
:root[data-theme='dark'] .segmented button[aria-pressed='true'],
:root[data-theme='dark'] .segmented button[aria-selected='true'],
:root[data-theme='dark'] .stepper button { background: #3b3b40; box-shadow: none; }
:root[data-theme='dark'] .menu button.is-danger,
:root[data-theme='dark'] .menu button.is-danger svg { color: #ff8a7f; }
:root[data-theme='dark'] .btn-danger { background: #d9473c; }

/* ---------- Motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}