/* Library, book covers, adding books, and the settings dialog.
   Composes the shared components from base.css; only layout and the pieces that are
   unique to the shelf live here. */

/* ══════════ Covers (src/library/cover.js) ══════════ */

.cover {
  --cover-ratio: 0.7;
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--cover-ratio);
  border-radius: var(--r-book);
  background: var(--surface-2);
  box-shadow: var(--shadow-book);
  overflow: hidden; isolation: isolate;
}
.cover__img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-2) ease-out;
  -webkit-user-drag: none; user-select: none;
}
.cover--ready .cover__img { opacity: 1; }
/* Page 1 of most PDFs is bright white; take the glare off at night. */
:root[data-theme="dark"] .cover__img { filter: brightness(.84) contrast(1.03); }

/* The spine hinge and a hairline edge, so the cover reads as a bound object
   (and a white cover still has an outline on pale paper). */
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .20) 0, rgba(0, 0, 0, .05) 1.8%,
    rgba(255, 255, 255, .26) 2.9%, rgba(0, 0, 0, .09) 4.6%,
    rgba(0, 0, 0, 0) 8%);
}

/* Fit a cover inside a fixed box, standing on its bottom edge like a book on a shelf.
   Give the stage a size (width + aspect-ratio, or width + height). */
.cover-stage { container-type: size; display: grid; place-items: end center; }
.cover-stage > .cover { width: min(100cqw, calc(100cqh * var(--cover-ratio))); }

/* Generated cloth cover (books without a page-1 thumbnail). */
.cover--generated {
  --cloth: hsl(var(--cloth-hue, 152) 24% 27%);
  --cloth-ink: hsl(var(--cloth-hue, 152) 40% 91%);
  container-type: inline-size;
  background-color: var(--cloth);
  /* a faint weave */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
  color: var(--cloth-ink);
}
:root[data-theme="dark"] .cover--generated { --cloth: hsl(var(--cloth-hue, 152) 22% 24%); --cloth-ink: hsl(var(--cloth-hue, 152) 32% 86%); }
.cover__cloth {
  position: absolute; inset: 6cqw 6cqw 6cqw 10cqw;
  display: flex; flex-direction: column; gap: 5cqw;
  padding: 9cqw 8cqw 8cqw;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  border-radius: 1px;
}
.cover__title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.14;
  font-size: clamp(11px, 10.5cqw, 40px);
  overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.cover--generated[data-title="medium"] .cover__title { font-size: clamp(10px, 8.8cqw, 34px); }
.cover--generated[data-title="long"] .cover__title { font-size: clamp(9px, 7.4cqw, 28px); -webkit-line-clamp: 8; line-clamp: 8; }
.cover__rule { flex: none; width: 16cqw; height: 1px; background: currentColor; opacity: .55; }
.cover__author {
  margin-top: auto;
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3;
  font-size: clamp(8px, 5.4cqw, 16px);
  opacity: .82; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cover__lock { position: absolute; right: 7cqw; top: 8cqw; width: clamp(10px, 8cqw, 18px); height: auto; opacity: .7; }
.cover__cloth:has(.cover__lock) .cover__title { padding-right: 10cqw; }
.cover__initial {
  position: absolute; inset: 0; display: none; place-items: center; padding-left: 6cqw;
  font-family: var(--font-display); font-weight: 600; font-size: 50cqw; line-height: 1;
}
@container (max-width: 84px) {
  .cover__cloth { display: none; }
  .cover__initial { display: grid; }
}

/* ══════════ Library view ══════════ */

.library {
  display: flex; flex-direction: column;
  max-width: var(--content-max); min-height: 100%; margin: 0 auto;
  padding: var(--s-8) var(--s-10) 96px;
}
.library[data-state="loading"] > * { visibility: hidden; }
.library[data-state="empty"] { justify-content: center; padding-bottom: var(--s-10); }

.library__header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.library__heading { min-width: 0; }
.library__title { font-size: var(--text-2xl); }
.library__summary { margin-top: 6px; color: var(--ink-3); font-size: var(--text-sm); }

/* ---------- Continue reading ---------- */
.hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-10);
  margin-bottom: var(--s-10); padding: var(--s-6) var(--s-10) var(--s-6) var(--s-8);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.hero:has(.hero__quote:not([hidden])) { grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1fr); }
.hero__cover { display: block; width: 156px; border-radius: var(--r-book); transition: transform var(--dur-2) var(--ease); }
.hero__cover:hover { transform: translateY(-2px); }
.hero__main { min-width: 0; }
.hero__title {
  margin-top: var(--s-3);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  padding-bottom: .08em; /* room for descenders inside the clamp */
}
.hero__author { margin-top: 6px; color: var(--ink-2); font-size: var(--text-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__progress { max-width: 460px; margin-top: var(--s-5); }
.hero__numbers { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.hero__page { font-size: var(--text-lg); color: var(--ink-2); }
.hero__page strong { color: var(--ink); font-weight: 680; }
.hero__pct { color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.hero__bar { height: 8px; margin-top: var(--s-2); border-radius: 2px; }
.hero__when { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--text-sm); }
.hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.hero__resume { min-width: 148px; }

.hero__quote {
  align-self: center; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 3px solid var(--hl, var(--accent));
  color: inherit; text-decoration: none;
}
.hero__quote .eyebrow { display: block; }
.hero__quote-text {
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.hero__quote-text--note { font-family: var(--font-ui); font-size: var(--text-md); }
.hero__quote-note {
  color: var(--ink-2); font-size: var(--text-sm);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.hero__quote:hover .hero__quote-text { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* ---------- Toolbar ---------- */
.library__toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-8);
}
.library__filters { display: flex; gap: 6px; }
.library__filters .chip { min-height: 32px; padding: 0 13px; }
.chip__count { font-weight: 500; color: var(--ink-3); }
.chip[aria-pressed="true"] .chip__count { color: var(--ink-2); }
.library__tools { display: flex; align-items: center; gap: var(--s-2); }
.library__search { width: 250px; }
.library__search .input { padding-right: 36px; }
.library__search .input::-webkit-search-cancel-button { display: none; }
.search__clear { position: absolute; right: 4px; }
.library__sort { padding: 0 var(--s-3); font-weight: 600; }
.library__sort svg { color: var(--ink-2); }

/* ---------- Shelf: shared ---------- */
.shelf { margin: 0; padding: 0; }
.book {
  position: relative; min-width: 0;
  -webkit-touch-callout: none; user-select: none;
}
.book__text { grid-area: text; min-width: 0; }
.book__title {
  font-family: var(--font-display); font-weight: 580; font-size: var(--text-md); line-height: 1.28; letter-spacing: -0.005em;
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* The title link is stretched over the whole card: one target, one tab stop. */
.book__title::after { content: ""; position: absolute; inset: -6px; border-radius: var(--r-md); }
.book__title:focus-visible { outline: none; }
.book__title:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 1px; }
.book__author {
  margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book__author:empty { display: none; }
.book__stage { grid-area: stage; }
.book__status {
  grid-area: status; display: flex; align-items: center; gap: var(--s-2); min-height: 18px;
  color: var(--ink-3); font-size: var(--text-xs); font-weight: 600;
}
.book__status .progress { flex: 1; min-width: 24px; height: 4px; }
.book[data-status="finished"] .book__status { color: var(--brand); gap: 5px; }
.book__marks { grid-area: marks; display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; }
.book__marks:empty { display: none; }
.book__mark { display: inline-flex; align-items: center; gap: 3px; }
.book__mark[data-type="bookmark"] svg { color: var(--ribbon); }
.book__when { grid-area: when; display: none; }
.book__more { grid-area: more; position: relative; z-index: 1; color: var(--ink-3); }

.book--new { animation: book-in var(--dur-3) var(--ease); }
@keyframes book-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Shelf: covers ---------- */
.shelf[data-layout="grid"] {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: var(--s-10) var(--s-8);
}
.shelf[data-layout="grid"] .book {
  display: grid; align-content: start;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "stage stage" "text more" "status status" "marks marks";
}
.shelf[data-layout="grid"] .book__stage { aspect-ratio: 5 / 7; margin-bottom: var(--s-3); }
/* Room for a two-line title and the author, so progress and counts line up along a shelf row. */
.shelf[data-layout="grid"] .book__text { min-height: calc(2 * 1.28 * var(--text-md) + 2px + 1.45 * var(--text-sm)); }
.shelf[data-layout="grid"] .cover { transition: transform var(--dur-2) var(--ease); }
.shelf[data-layout="grid"] .book__more { margin: -5px -7px 0 2px; }
.shelf[data-layout="grid"] .book__status { margin-top: var(--s-2); }
.shelf[data-layout="grid"] .book__marks { margin-top: 6px; }
.shelf[data-layout="grid"] .book__pages { display: none; }
@media (hover: hover) {
  .shelf[data-layout="grid"] .book:hover .cover { transform: translateY(-3px); }
}

/* ---------- Shelf: list ---------- */
.shelf[data-layout="list"] { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.shelf[data-layout="list"] .book {
  display: grid; align-items: center; column-gap: var(--s-5);
  grid-template-columns: 38px minmax(0, 2.2fr) minmax(170px, 1.3fr) 104px 128px auto;
  grid-template-areas: "stage text status marks when more";
  padding: 10px var(--s-2) 10px var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-1);
}
.shelf[data-layout="list"] .book__stage { width: 38px; aspect-ratio: 5 / 7; }
.shelf[data-layout="list"] .cover { box-shadow: var(--shadow-1); border-radius: 1px 2px 2px 1px; }
.shelf[data-layout="list"] .book__title { -webkit-line-clamp: 1; line-clamp: 1; }
.shelf[data-layout="list"] .book__title::after { inset: 0; border-radius: var(--r-sm); }
.shelf[data-layout="list"] .book__pct { display: none; }
.shelf[data-layout="list"] .book__pages { flex: none; min-width: 96px; text-align: right; font-weight: 500; }
.shelf[data-layout="list"] .book__when { display: block; color: var(--ink-3); font-size: var(--text-sm); text-align: right; white-space: nowrap; }
@media (hover: hover) {
  .shelf[data-layout="list"] .book:hover { background: var(--hover); }
}

/* ---------- No results ---------- */
.library__none {
  display: grid; justify-items: center; gap: var(--s-2);
  max-width: 440px; margin: 0 auto; padding: var(--s-16) var(--s-4);
  color: var(--ink-2); text-align: center;
}
.library__none > svg { color: var(--ink-3); margin-bottom: var(--s-2); }
.library__none-title { font-size: var(--text-xl); color: var(--ink); overflow-wrap: anywhere; }
.library__none-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }
.library__none-actions:empty { display: none; }

/* ---------- First run ---------- */
.welcome { width: 100%; max-width: 680px; margin: 0 auto; }
.welcome__drop {
  display: grid; justify-items: center; gap: var(--s-4);
  padding: var(--s-12) var(--s-8) var(--s-10);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); text-align: center;
}
.welcome__art { margin-bottom: var(--s-2); }
.welcome__title { font-size: var(--text-2xl); }
.welcome__lead { max-width: 44ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.welcome__drop .btn { margin-top: var(--s-3); }
.welcome__hint { color: var(--ink-3); font-size: var(--text-sm); }
.welcome__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-6); padding: 0 var(--s-2); }
.welcome__facts li { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--ink-2); font-size: var(--text-sm); }
.welcome__facts svg { flex: none; margin-top: 1px; color: var(--brand); }
.welcome__facts strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: var(--text-md); font-weight: 650; }

/* ══════════ Adding books ══════════ */

.import-tray {
  position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: var(--z-toast);
  width: min(380px, calc(100vw - 24px)); max-height: min(70dvh, 520px); overflow: auto;
  padding: 14px 12px 14px 16px;
  border-radius: var(--r-md);
  background: var(--raised); color: var(--ink);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
  animation: toast-in var(--dur-2) var(--ease);
}
.import-tray--leaving { animation: toast-out var(--dur-2) var(--ease-in) forwards; }
.import-tray__row { display: flex; align-items: center; gap: var(--s-3); }
.import-tray__row > svg { flex: none; }
.import-tray__ok { color: var(--brand); }
.import-tray__info { color: var(--ink-2); }
.import-tray__spinner { flex: none; width: 18px; height: 18px; }
.import-tray__text { flex: 1; min-width: 0; }
.import-tray__title { font-weight: 650; }
.import-tray__file { color: var(--ink-2); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-tray__bar { height: 4px; margin: var(--s-3) 4px 2px 0; }
.import-tray__group { margin: var(--s-3) 4px 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.import-tray__label { color: var(--ink-2); font-size: var(--text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.import-tray__group--failed .import-tray__label { color: var(--danger); }
.import-tray__list { margin-top: 6px; display: grid; gap: 6px; font-size: var(--text-sm); }
.import-tray__list li { overflow-wrap: anywhere; }
.import-tray__name { display: block; font-weight: 600; }
.import-tray__reason { display: block; color: var(--ink-2); }

.drop-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; padding: var(--s-5);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  pointer-events: none;
  animation: fade-in var(--dur-1) ease-out;
}
.drop-overlay__frame {
  display: grid; place-content: center; justify-items: center; gap: var(--s-2);
  border: 2px dashed var(--brand); border-radius: var(--r-lg);
  color: var(--ink); text-align: center;
}
.drop-overlay__frame > svg { color: var(--brand); margin-bottom: var(--s-2); }
.drop-overlay__title { font-size: var(--text-xl); }
.drop-overlay__hint { color: var(--ink-2); }

.form-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.form-stack > p { color: var(--ink-2); }

/* ══════════ Settings dialog (src/views/settings.js) ══════════ */

dialog.settings-dialog { width: min(780px, var(--dialog-room)); height: min(620px, calc(100dvh - 32px)); }
.settings-dialog .dialog__header { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.settings-dialog .dialog__body { display: flex; padding: 0; overflow: hidden; }
.settings { flex: 1; display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 0; min-width: 0; }

.settings__nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4) var(--s-3); overflow: auto;
  border-right: 1px solid var(--line); background: var(--surface);
}
.settings__tab {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--ink-2); font-size: var(--text-md); font-weight: 600; text-align: left; white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1);
}
.settings__tab svg { flex: none; }
.settings__tab:hover { background: var(--hover); color: var(--ink); }
.settings__tab[aria-selected="true"] { color: var(--ink); }
/* The active section carries the highlighter stroke, like the active item in the rail. */
.settings__tab[aria-selected="true"] .settings__tab-label {
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat; background-size: 100% 46%; background-position: 0 88%;
  padding-inline: 3px; margin-inline: -3px; border-radius: 2px;
}

.settings__panel { min-width: 0; overflow: auto; padding: var(--s-6) var(--s-8) var(--s-8); }
.settings__panel:focus-visible { outline-offset: -2px; }
.settings__heading { font-size: var(--text-xl); }
.settings__intro { margin-top: var(--s-2); max-width: 56ch; color: var(--ink-2); }
.settings__section > .setting:first-of-type, .settings__section > .meter { margin-top: var(--s-2); }

.setting {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.setting:last-child { border-bottom: 0; }
.setting--stacked { flex-direction: column; align-items: stretch; gap: var(--s-3); }
.setting__text { flex: 1; min-width: 0; }
.setting__title { font-weight: 650; color: var(--ink); }
.setting__hint { margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); text-wrap: pretty; }
.setting__control { flex: none; display: flex; align-items: center; }
.setting--stacked .setting__control { display: block; }
/* In a column the phone layout's flex-basis would become a height. */
.setting--stacked .setting__text { flex: none; }
.setting__select { width: auto; min-width: 168px; padding-right: 32px; }
.seg--fill { display: flex; }
.seg--fill > button { flex: 1; padding: 0 6px; white-space: nowrap; }

/* Radio cards */
.choices { display: grid; gap: var(--s-2); }
.choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent; color: var(--ink); text-align: left;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.choice:hover { background: var(--hover); }
.choice[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); }
.choice__dot {
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
}
.choice[aria-checked="true"] .choice__dot { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); }
.choice__text { display: grid; gap: 2px; min-width: 0; }
.choice__title { font-weight: 650; }
.choice__hint { color: var(--ink-2); font-size: var(--text-sm); }

/* Page theme preview. These colors stand in for PDF pages, so they are fixed rather than tokens. */
.page-style { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-top: var(--s-4); }
.page-style__preview { display: grid; gap: var(--s-2); justify-items: center; }
.page-style__choice .choices { margin-top: var(--s-3); }
.page-preview {
  --pp-paper: #FFFFFF; --pp-ink: #23282B; --pp-accent: #B4472E; --pp-mark: #FFD23F;
  flex: none; width: 132px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--reader-bg);
}
/* Paper and ink are the reader's own page colors (see "Page themes" in reader.css). */
.page-preview[data-theme="sepia"] { --pp-paper: #F4ECD8; --pp-ink: #2D2511; --pp-accent: #A8452C; --pp-mark: #F0C24A; }
.page-preview[data-theme="dark"] { --pp-paper: #131A17; --pp-ink: #CDD4D1; --pp-accent: #F09A85; --pp-mark: rgba(255, 210, 63, .42); }
/* Recolor: one ink for everything that is not a picture. */
.page-preview[data-theme="dark"][data-style="recolor"] { --pp-accent: var(--pp-ink); }
.page-preview__page {
  display: flex; flex-direction: column; gap: 5px; padding: 12px 11px 13px;
  border-radius: 2px; background: var(--pp-paper); box-shadow: var(--shadow-1);
  transition: background var(--dur-2);
}
.page-preview__heading { margin-bottom: 2px; font-family: var(--font-display); font-size: 9px; font-weight: 650; line-height: 1; color: var(--pp-accent); transition: color var(--dur-2); }
.page-preview__line { display: block; height: 3px; border-radius: 1px; background: var(--pp-ink); opacity: .55; }
.page-preview__line--marked { opacity: 1; background: linear-gradient(var(--pp-ink), var(--pp-ink)) 0 50% / 100% 3px no-repeat, var(--pp-mark); height: 7px; margin: -2px 0; }
.page-preview__picture {
  position: relative; display: block; height: 34px; margin: 3px 0; border-radius: 1px; overflow: hidden;
  background: #9CCBEA;
}
.page-preview__sun { position: absolute; top: 6px; right: 14px; width: 11px; height: 11px; border-radius: 50%; background: #FFD769; }
.page-preview__hill { position: absolute; left: -12%; right: -12%; bottom: -34px; height: 52px; border-radius: 50%; background: #3F8F5F; }
.page-preview[data-theme="sepia"] .page-preview__picture { filter: sepia(.45) saturate(.85); }
.page-preview__caption { max-width: 132px; color: var(--ink-3); font-size: var(--text-xs); text-align: center; text-wrap: balance; }

/* Storage */
.meter { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.meter__bar { position: relative; height: 10px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter__bar::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--value, 0));
  background: var(--brand); transition: transform var(--dur-3) var(--ease);
}
.meter__text { margin-top: var(--s-3); color: var(--ink-2); }
.meter__text strong { color: var(--ink); font-weight: 650; }
.meter .setting__hint { margin-top: 4px; }

.protect { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) 0; }
.protect > svg { flex: none; margin-top: 1px; }
.protect__ok { color: var(--brand); }
.protect__warn { color: var(--ink-2); }
.protect > .btn { flex: none; align-self: center; }

/* Backup */
.backup-result {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-4); padding: 14px var(--s-4);
  border-radius: var(--r-md); background: var(--brand-soft); color: var(--ink-2); font-size: var(--text-sm);
}
.backup-result > svg { flex: none; color: var(--brand); }
.backup-result[data-kind="error"] { background: var(--danger-soft); }
.backup-result[data-kind="error"] > svg { color: var(--danger); }
.backup-result__body { display: grid; gap: 6px; min-width: 0; }
.backup-result__title { color: var(--ink); font-size: var(--text-md); font-weight: 650; }
.backup-result__label { margin-top: 4px; color: var(--ink); font-weight: 600; }
.backup-result__list { display: grid; gap: 3px; padding-left: var(--s-4); list-style: disc; overflow-wrap: anywhere; }

/* Install + about */
.install { padding-top: var(--s-4); }
.install > .setting { padding-top: 0; }
.install > .protect { padding-top: 0; }
.steps { display: grid; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); padding-left: 0; counter-reset: step; }
.steps li { display: flex; gap: var(--s-3); align-items: baseline; color: var(--ink); counter-increment: step; }
.steps li::before {
  content: counter(step); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-2);
  font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums;
}
.about { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.about__mark { color: var(--ink); }
.about__name { font-size: var(--text-xl); }
.about__version { color: var(--ink-3); font-size: var(--text-sm); }
.about__line { margin-top: var(--s-4); color: var(--ink-2); }
.settings__section > .protect { margin-top: var(--s-2); }
.settings__section > .protect + .protect { margin-top: 0; padding-top: 0; }
.about__credits { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-sm); }

/* ══════════ Narrow screens ══════════ */

@media (max-width: 1020px) {
  .hero__quote { display: none; }
  .hero:has(.hero__quote:not([hidden])) { grid-template-columns: auto minmax(0, 1fr); }
  .shelf[data-layout="list"] .book {
    grid-template-columns: 38px minmax(0, 2fr) minmax(150px, 1.2fr) auto;
    grid-template-areas: "stage text status more";
  }
  .shelf[data-layout="list"] .book__marks, .shelf[data-layout="list"] .book__when { display: none; }
}

@media (max-width: 720px) {
  .library { padding: var(--s-5) var(--s-4) var(--s-12); }
  .library__header { align-items: center; margin-bottom: var(--s-5); }
  .library__title { font-size: 1.75rem; }
  .library__summary { margin-top: 2px; }

  .hero { align-items: start; gap: var(--s-4); margin-bottom: var(--s-8); padding: var(--s-4); }
  .hero__cover { width: 104px; }
  .hero__title { margin-top: 6px; font-size: 1.375rem; }
  .hero__author { margin-top: 2px; font-size: var(--text-md); }
  .hero__progress { margin-top: var(--s-3); }
  .hero__page { font-size: var(--text-md); }
  .hero__bar { height: 6px; }
  .hero__actions { margin-top: var(--s-4); }
  .hero__resume { flex: 1; min-width: 0; min-height: 44px; }

  .library__toolbar { gap: var(--s-3); margin-bottom: var(--s-5); }
  .library__tools { order: -1; width: 100%; }
  .library__search { flex: 1; width: auto; min-width: 0; }
  .library__sort-label { display: none; }
  .library__sort { gap: 2px; padding: 0 var(--s-2); }
  /* Chips scroll sideways, bleeding to the screen edges. */
  .library__filters {
    width: calc(100% + 2 * var(--s-4)); margin: 0 calc(-1 * var(--s-4)); padding: 2px var(--s-4);
    overflow-x: auto; scrollbar-width: none;
  }
  .library__filters::-webkit-scrollbar { display: none; }
  .library__filters .chip { padding: 0 10px; }

  .shelf[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
  .shelf[data-layout="grid"] .book__more { width: 36px; height: 36px; margin: -8px -10px 0 0; }

  .shelf[data-layout="list"] .book {
    grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 6px;
    grid-template-areas: "stage text more" "stage status more";
    padding: 12px 0;
  }
  .shelf[data-layout="list"] .book__stage { width: 42px; }
  .shelf[data-layout="list"] .book__more { width: 36px; height: 36px; }
  .shelf[data-layout="list"] .book__pages { min-width: 0; }

  .welcome__drop { padding: var(--s-10) var(--s-5) var(--s-8); }
  .welcome__title { font-size: 1.75rem; }
  .welcome__facts { grid-template-columns: 1fr; gap: var(--s-4); }

  .import-tray { left: 12px; right: 12px; width: auto; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
  #app[data-route="reader"] ~ .import-tray { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* Like toasts, the tray stays above the reader's bottom bar while it shows. */
#app[data-route="reader"]:not(:has(.reader--chrome-hidden)) ~ .import-tray { bottom: calc(var(--reader-bottombar-h) + 12px + env(safe-area-inset-bottom)); }

/* Touch: the small controls of the shelf and its toolbar (see "Touch" in base.css). */
@media (pointer: coarse) {
  .library__filters .chip { min-height: 40px; }
  .library__search .input { padding-right: 46px; }
  .search__clear { right: 2px; }
  .shelf .book .book__more { width: 40px; height: 40px; }
  .shelf[data-layout="grid"] .book__more { margin: -8px -10px 0 0; }
}

/* Settings as a bottom sheet */
@media (max-width: 640px) {
  dialog.settings-dialog { width: 100vw; height: min(680px, 90dvh); }
  .settings-dialog .dialog__header { padding-bottom: var(--s-3); border-bottom: 0; }
  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings__nav {
    flex-direction: row; gap: var(--s-1); padding: 0 var(--s-4) var(--s-2);
    border-right: 0; border-bottom: 1px solid var(--line); background: none;
    overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--s-4);
  }
  .settings__nav::-webkit-scrollbar { display: none; }
  .settings__tab { flex: none; min-height: 40px; padding: 0 10px; }
  .settings__tab svg { display: none; }
  .settings__panel { padding: var(--s-4) var(--s-5) var(--s-8); }
  .settings__section > .setting:first-of-type { margin-top: 0; padding-top: var(--s-2); }
  .settings__heading { display: none; } /* the selected tab already names the section */
  .settings__intro { margin-top: 0; }
  .page-style { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .page-style__preview { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: var(--s-4); }
  .page-preview__caption { max-width: none; font-size: var(--text-sm); text-align: left; }
  /* Wide controls (segmented) drop under their label; small ones (switch, select) stay beside it. */
  .setting { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  .setting__text { flex: 1 1 170px; }
  .setting__select { min-width: 132px; }
  .seg--fill > button { padding: 0 4px; }
  .protect { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .protect > .btn { grid-column: 2; justify-self: start; }
}

@media (pointer: coarse) {
  .settings__tab { min-height: 44px; }
}