/* Shared reading system: loaded after each surface stylesheet, including shelf shadows. */
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/static/fonts/atkinson-hyperlegible-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/static/fonts/atkinson-hyperlegible-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root, :root[data-theme='light'] {
  /* Deep harbour: sea-mist ground, foam-white reading sheets, harbour-teal actions.
     Every foreground/background pair below is measured at WCAG 2.1 AAA (7:1 text,
     3:1 non-text) against every surface it can land on. See docs/oceanic-light-palette.md. */
  --bg: #eef4f6; --surface: #ffffff; --surface-2: #dde9ed;
  --want-bg: #e3e9e5; --want-fg: #2c4038; --reading-bg: #cfe6ec; --reading-fg: #123c47;
  --read-bg: #d8e8da; --read-fg: #1d4229; --dnf-bg: #e8e1ea; --dnf-fg: #43334d;
  --text: #0d2a33; --muted: #28454e; --accent: #0b3d4d; --on-accent: #ffffff;
  --accent-hover: #06272f; --accent-soft: #dbeaee; --accent-line: #4f7783;
  --border: #9fbcc5; --border-strong: #5d7c86; --danger: #8a1c2e; --danger-soft: #f7e2e4;
  --sidebar: #eef4f6; --star: #7a5512; --star-empty: #6d8891; --ring: #0b3d4d;
  --ground: #eef4f6; --halo-fg: var(--text); --halo-muted: var(--muted); --halo-accent: var(--accent);
  --halo-shadow: none; --shadow: none; --shadow-lift: none;
  --font-ui: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-display: var(--font-ui);
  --font-mono: 'IBM Plex Mono', monospace;
  --r: 12px; --r-sm: 6px; --fs-3xs: .875rem; --fs-2xs: .875rem; --fs-xs: .9375rem;
  --fs-sm: 1rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem;
  --fs-2xl: 2.25rem; --fs-3xl: 2.75rem; --fs-pill: .875rem;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: var(--ease-out);
  --t-fast: 180ms; --t: 280ms;
  --nav-text: #0d2a33; --nav-label: #28454e; --nav-hover: #e2edf0;
  --nav-selected: #cbe0e6; --nav-selected-text: #0f313b; --nav-focus: #0b3d4d;
  --tidepool: #e2eef1; --sand: #f0e7d7;
}
:root[data-theme='dark'] {
  --want-bg: #2b3545; --want-fg: #e0e7f3; --reading-bg: #322f43; --reading-fg: #e5d9fa;
  --read-bg: #243b48; --read-fg: #ceecf8; --dnf-bg: #3b2e41; --dnf-fg: #eed9f0;
  --bg: #151e2b; --surface: #1d2838; --surface-2: #29364a;
  --text: #edf2fa; --muted: #c4d0e1; --accent: #c6d8f2; --on-accent: #1c2b42;
  --accent-hover: #e0eafa; --accent-soft: #28364b; --accent-line: #869bb9;
  --border: #46556b; --border-strong: #8495ae; --danger: #fac6d5; --danger-soft: #432e40;
  --sidebar: #151e2b; --star: #e1d5b9; --star-empty: #9babbe; --ring: #c6d8f2;
  --ground: #151e2b; --halo-fg: var(--text); --halo-muted: var(--muted); --halo-accent: var(--accent);
  --halo-shadow: none; --shadow: none; --shadow-lift: none;
  --nav-text: #edf2fa; --nav-label: #c4d0e1; --nav-hover: #243247;
  --nav-selected: #2c3d56; --nav-selected-text: #edf2fa; --nav-focus: #c6d8f2;
  --tidepool: #293449; --sand: #303549;
}
html { scroll-padding-block: 6rem 3rem; scrollbar-color: var(--border-strong) var(--bg); }
body { font-family: var(--font-ui); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); }
body::before, .aurora, .stage-note, .reading-note, .status-dot { display: none; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea { caret-color: var(--accent); }
a { text-underline-offset: .22em; text-decoration-thickness: .09em; }
p { max-width: 75ch; }
h1, h2, h3, .display, .page-head h1, .feature-heading h1, .settings-heading h1 {
  font-family: var(--font-ui); font-weight: 700; letter-spacing: -.025em; text-wrap: balance; line-height: 1.2;
}
h1, .page-head h1, .feature-heading h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
h2 { margin-block: 2rem .75rem; }
button, input, select, textarea { font-family: inherit; }
button, .btn, button.btn, .btn.small, .icon-btn, .seg, .segmented button, select,
input:not([type='checkbox']):not([type='radio']), summary, .settings-tab, .menu-item {
  min-height: 44px; font-size: max(.9375rem, 14px);
}
button, .icon-btn { min-width: 44px; }
.btn, button.btn { border-radius: 6px; padding: .6rem 1rem; box-shadow: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }
.btn.ghost { color: var(--accent); background: transparent; }
input:not([type='checkbox']):not([type='radio']), select, textarea { border-color: var(--border-strong); background-color: var(--surface); color: var(--text); border-radius: 6px; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label, .muted, .small, small { color: var(--muted); }
label:has(input[type='checkbox']), label:has(input[type='radio']) { min-height: 44px; align-content: center; cursor: pointer; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--accent); width: 22px; height: 22px; flex: 0 0 22px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; scroll-margin-block: 6rem; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
.skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 1000; padding: .8rem 1rem; background: var(--surface); color: var(--text); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.eyebrow { display: none; }
.card, .panel, .notice, .filter-panel, .interest-editor, .sharing-settings, .settings-card { background: var(--surface); border-radius: 12px; box-shadow: none; }
.card .card, .panel .panel { border: 0; background: transparent; }
.notice.error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.page-head, .feature-heading, .feature-page, .settings-workspace, .crumb, .book-main .titles { color: var(--text); text-shadow: none; }
.page-head, .feature-heading { padding-bottom: 1.5rem; margin-bottom: 1.5rem; animation: none; }
.page-head::after, .feature-heading::after, .nav-item.active::before { display: none; }
.page-head p, .feature-heading p { margin-top: .75rem; }
.toolbar { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; gap: .75rem; }
.toolbar .search { min-width: min(100%, 16rem); }
.toolbar label { margin: 0; }
.app { gap: 0; }
.app > main { flex: 1; min-width: 0; padding: 2.5rem clamp(1rem,3vw,3rem) 4rem; }
.sidebar { width: 250px; flex: 0 0 250px; padding: 1.5rem 1rem; background: var(--sidebar); color: var(--nav-text); border: 0; }
.sidebar .brand { display: flex; align-items: center; gap: .65rem; padding: .25rem .5rem 1.5rem; margin: 0; color: var(--nav-text); }
.brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; }
.sidebar .brand-mark { width: 34px; height: 34px; --bg: var(--sidebar); flex: none; }
.sidebar .nav { gap: 1.5rem; }
.sidebar .nav-label { display: block; font: 700 .875rem var(--font-ui); letter-spacing: .02em; color: var(--nav-label); margin: .5rem .75rem; }
.sidebar .nav-box { background: transparent; border: 0; padding: 0; }
.sidebar .nav-list { margin: 0; }
.sidebar .nav-item { color: var(--nav-text); border-radius: 6px; min-height: 48px; padding: .65rem .75rem; gap: .7rem; font-size: 1rem; }
.sidebar .nav-item:hover { background: var(--nav-hover); color: var(--nav-text); }
.sidebar .nav-item.active { background: var(--nav-selected); color: var(--nav-selected-text); font-weight: 700; }
.sidebar .nav-item .count { color: inherit; background: transparent; font: inherit; }
.sidebar :focus-visible { outline-color: var(--nav-focus); }
.sidebar .account { color: var(--nav-text); }
.sidebar .who { color: var(--nav-text); }
.sidebar .new-library { margin-top: .6rem; }
.sidebar-foot { border-color: var(--border); }
.sidebar .menu { background: var(--surface); color: var(--text); }
.sidebar .menu :focus-visible { outline-color: var(--ring); }
.nav-mobile-head, .mobile-app-header { display: none; }
.library-appearance-tools { justify-content: flex-start; margin: .75rem 0 1.5rem; }
.library-canvas { padding: 0; }
.library-canvas > .reading-scene { display: none; }
.book:not(.add-tile), .book-row, .now-row, .add-tile, .add-row {
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border: 1px solid var(--border); border-radius: 12px; color: var(--text);
}
.book:not(.add-tile) { padding: .65rem; }
.book .body { padding: .85rem .15rem .25rem; }
.book .title, .book .author, .library-canvas .book .title, .library-canvas .book .author { opacity: 1; color: var(--text); }
.book .author, .library-canvas .book .author { color: var(--muted); }
.book .title { font-size: 1rem; line-height: 1.35; }
.book .cover, .book-jacket .cover-lg { border-radius: 5px; box-shadow: none; border-left-width: 1px; }
.cover .placeholder, .cover-lg .placeholder { font-family: var(--font-ui); font-weight: 700; color: var(--text); padding: 1rem; }
.now-row { padding: 1.25rem; gap: 1rem; }
.now-row .now-actions { gap: .6rem; }
.now-row .now-actions .btn:last-child { margin-left: .6rem; }
.now-head h2 { font-family: var(--font-ui); font-size: 1.5rem; text-shadow: none; }
.status, .pill { background: var(--accent-soft); color: var(--text); font: 700 .875rem var(--font-ui); letter-spacing: 0; }
.stars, .stars-fill { color: var(--star); }
.stars-base { color: var(--star-empty); }
.star-track { min-height: 44px; }
.book-section-head { flex-wrap: wrap; gap: .5rem; }
.book-main .input-title { font-family: var(--font-ui); letter-spacing: -.025em; color: var(--text); }
.book-main .input-author { color: var(--muted); }
.book-page-title { font-size: clamp(1.75rem,3vw,2.5rem); margin: 0 0 1rem; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.book-main .card, .book-main .panel { padding: 1.5rem; }
.book-jacket { transform: none; }
.save-bar, .book-savebar, .atelier-savebar { position: static; margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: none; padding: 1rem; border-radius: 12px; }
.stats-grid { gap: 0; background: var(--surface); border-radius: 12px; padding: .75rem; }
.stats-grid .card { border: 0; margin: 0; background: transparent; }
.stats-grid .stat { text-shadow: none; padding: 1rem; }
.discover-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 2rem 1.25rem; }
.discover-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; }
.discover-card h3 { font-size: 1.125rem; }
.discover-card h3 a { display: flex; min-height: 44px; align-items: center; text-decoration: underline; }
.discover-cover { border: 0; border-radius: 6px; box-shadow: none; }
.discover-author, .recommendation-reason, .feature-tags span { font-size: .9375rem; color: var(--muted); }
.discover-card .feature-actions { align-items: stretch; }
.discover-card .feature-actions .btn { flex: 1; }
.feature-tags span { color: var(--text); }
.dismiss-book { width: 44px; height: 44px; background: var(--surface); color: var(--text); }
.settings-layout { grid-template-columns: 220px minmax(0,1fr); gap: 2rem; }
.settings-tabs { position: static; background: var(--surface); border-radius: 12px; padding: .5rem; }
.settings-tab { color: var(--text); padding: .8rem; }
.settings-tab[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.settings-card { border: 0; padding: 1.5rem; }
.setting-row { gap: 1rem; padding: 1.25rem 0; }
.setting-row p { font-size: .9375rem; }
.setting-switch { min-height: 44px; }
.atelier-layout { grid-template-columns: minmax(250px,1fr) minmax(0,1.5fr); }
.atelier-paper, .atelier-editor { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; position: static; }
.appearance-atelier { --desk-paper: var(--surface); --desk-ink: var(--text); --desk-muted: var(--muted); --desk-rule: var(--border-strong); }
.atelier-options { border: 0; background: transparent; padding: 0; }
.atelier-options .preset-card { background: var(--surface); border-radius: 12px; padding: 1rem; }
.atelier-options .preset-card > .muted, .css-byte-count, .atelier-proof-label { font-size: .875rem; }
.atelier-scope { max-width: 100%; }
.appearance-atelier .feature-field select { width: 100%; }
.atelier-advanced > summary { margin-block: 1.5rem; }
.reading-dialog { width: min(540px,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 12px; padding: 1.5rem; }
.reading-dialog::backdrop { background: #061b21a8; }
.reading-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.reading-dialog h2 { margin: 0; }
.reading-dialog label { margin: 1.25rem 0 .35rem; }
.reading-dialog select { width: 100%; }
.reading-dialog .reading-check { display: flex; gap: .75rem; align-items: center; }
.reading-dialog p { line-height: 1.6; }
.reading-options { white-space: nowrap; }
html[data-reading-size='large'] { font-size: 125% !important; }
html[data-reading-size='larger'] { font-size: 150% !important; }
html[data-reading-spacing='wide'] p { line-height: 2; margin-block: 1em 2em; letter-spacing: .025em; word-spacing: .08em; }
html[data-reading-spacing='wide'] textarea { line-height: 2; }
/* The book record arrives only after its data. Its text is visible in the base state. */
@keyframes guide-arrive { from { transform: translateY(5px); } to { transform: none; } }
#view.guide-arrival { animation: guide-arrive 320ms var(--ease-out); }
.btn, .nav-item, .shelf-btn, .settings-tab { transition: transform var(--t-fast) var(--ease-out); }
.landing .wrap { max-width: 1260px; }
.landing .topbar { position: static; background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: none; }
.landing .topbar .wrap { flex-wrap: wrap; gap: 1rem; padding-block: 1rem; }
.landing .nav-links { flex-wrap: wrap; gap: .75rem; }
.landing .nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.landing .nav-links .primary { color: var(--on-accent); }
.landing .hero { background: var(--bg); padding: 4rem 0; overflow: visible; }
.landing .two-col { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 3rem; align-items: center; }
.landing .display { font-family: var(--font-ui); font-size: clamp(2.5rem,5.2vw,4.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.landing .display em { font-style: normal; color: var(--accent); }
.landing .lede { font-size: 1.2rem; color: var(--muted); max-width: 48ch; }
.landing .credit { color: var(--muted); font-size: .9375rem; }
.landing .shelf-stage { background: var(--tidepool); padding: 1.5rem; border-radius: 16px; }
.landing .shelf-stage::before, .landing .shelf-stage::after { display: none; }
.landing .mock { transform: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: .25rem; }
.landing .mock-heading { padding-bottom: 1rem; gap: .75rem; flex-wrap: wrap; }
.landing .mock-caption, .landing .shelf-sub { color: var(--muted); font: .9375rem var(--font-ui); }
.landing .mock-body { grid-template-columns: 1fr; gap: 1rem; }
.landing .mock-body > div:first-child { display: flex; flex-wrap: wrap; gap: .5rem; }
.landing .rail-label { display: none; }
.landing .rail-box, .landing .rail-list { display: contents; }
.landing .shelf-btn { width: auto; min-height: 44px; border-radius: 6px; padding: .5rem .75rem; font-size: 1rem; }
.landing .shelf-btn[aria-pressed='true'] { color: var(--on-accent); background: var(--accent); }
/* The selected shelf's count was translucent white over the accent, which measured 6.07:1
   against its own white label — under the 7:1 floor the rest of the light theme holds to.
   A solid deeper well is measurable and reads as recessed rather than washed. */
.landing .shelf-btn[aria-pressed='true'] .ct { background: var(--accent-hover); color: var(--on-accent); }
.landing .tile { background: transparent; border: 0; box-shadow: none; padding: 0; }
.landing .tile .t { font-size: 1rem; line-height: 1.4; }
.landing .tile .a { font-size: .875rem; color: var(--muted); }
.landing .tile .cover { border-radius: 4px; box-shadow: none; }
.landing .promise-strip { background: var(--accent-soft); color: var(--text); border: 0; padding: 1.5rem; border-radius: 12px; gap: 1rem; }
.landing .sect { padding-block: 4rem; }
.landing .h-sect { font-size: clamp(2rem,3.5vw,3rem); }
.landing .feature-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; }
.landing .feature-card { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.landing .feature-card h3 { font: 700 1.75rem/1.2 var(--font-ui); }
.landing .feature-card p { color: var(--muted); }
.landing .rating-demo, .landing .progress-demo { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.landing .theme-art { display: none; }
.landing .plan { box-shadow: none; background: var(--surface); border-radius: 12px; }
.landing .plan.pro { border-color: var(--accent); }
.landing .tier { background: var(--surface); color: var(--text); box-shadow: none; border-radius: 12px; }
.landing .tier.featured { background: var(--accent-soft); border-color: var(--accent); }
.landing .tier .badge { background: var(--accent); color: var(--on-accent); }
.landing .faq-q { color: var(--text); }
.landing .mock, .landing .feature-card.entered { animation: none; }
.landing .grid:not([hidden]) .tile { animation: guide-arrive 320ms var(--ease-out); }
.landing .plan li, .landing .plan p, .landing .fineprint { color: var(--muted); }
.landing .faq-item { box-shadow: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); }
.landing .faq-item summary { padding-block: 1rem; }
.landing .bottom-cta { background: var(--accent-soft); }
.landing footer { background: var(--surface); }
@media (max-width: 1050px) {
  .sidebar { width: 220px; flex-basis: 220px; }
  .landing .two-col { grid-template-columns: 1fr; }
  .landing .hero .display { max-width: 18ch; }
  .landing .shelf-stage { max-width: 760px; }
  .settings-layout, .atelier-layout { grid-template-columns: 1fr; }
  .settings-tabs { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 820px) {
  .app { display: block; padding: 0; }
  .app > main { padding: 1.5rem 1rem 3rem; }
  .mobile-app-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--sidebar); color: var(--nav-text); padding: .75rem 1rem; }
  .mobile-app-header a { color: inherit; font-size: 1.2rem; font-weight: 700; }
  .mobile-app-header .btn { background: var(--nav-selected); color: var(--nav-selected-text); }
  .mobile-app-header[hidden] { display: none; }
  .sidebar { display: none; }
  .sidebar[data-open='true'] { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 100; width: min(360px,100%); height: 100dvh; overflow: auto; padding: 1rem; box-shadow: 0 0 0 100vmax #061b21a8; }
  .nav-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .sidebar .brand, .sidebar .sidebar-foot { position: static; background: transparent; border: 0; padding: .5rem; }
  .sidebar .nav { position: static; inset: auto; flex-direction: column; overflow: auto; padding: .5rem 0; border: 0; background: transparent; flex: 1; gap: 1rem; }
  .sidebar .nav-group, .sidebar .nav-group.shelves { display: flex; flex-direction: column; align-items: stretch; flex: none; overflow: visible; }
  .sidebar .nav-box, .sidebar .nav-list { display: flex; flex-direction: column; gap: .25rem; }
  .sidebar .nav-item { flex-direction: row; flex: none; text-align: left; width: 100%; }
  .sidebar .nav-item .nav-text { display: block; white-space: normal; overflow: visible; }
  .sidebar .nav-item .count { position: static; margin: 0; font-size: .9375rem; }
  .sidebar .sidebar-foot { flex-direction: column; align-items: stretch; }
  .sidebar-foot #theme .nav-text, .sidebar-foot #ambient-control .nav-text { display: block; }
  .sidebar .sidebar-foot .account-wrap { flex: none; }
  .sidebar .menu { top: auto; bottom: 100%; left: 0; right: 0; }
  .sidebar .shelf-scroll-next { display: none; }
  .toolbar { padding: .75rem; }
  .toolbar select { min-width: 0; flex: 1; }
  .now-row { flex-wrap: wrap; }
  .now-row .now-actions { width: 100%; justify-content: flex-end; }
  .setting-row { grid-template-columns: 1fr; gap: .5rem; }
  .setting-row select, .setting-row input[type='number'], .setting-switch { justify-self: start; width: auto; max-width: 100%; }
  .landing .hero { padding: 2rem 0; }
  .landing .feature-grid { grid-template-columns: 1fr; }
  .landing .shelf-stage { padding: .75rem; }
  .landing .mock { padding: 1rem; }
  .landing .mock .grid { gap: .75rem; }
  .landing .promise-strip { flex-direction: column; align-items: flex-start; }
  .landing .sect { padding-block: 2.5rem; }
  .landing .nav-links .btn { display: inline-flex; }
}
@media (max-width: 440px) {
  .discover-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem .75rem; }
  .discover-card .feature-actions { flex-direction: column; }
  .landing .mock .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing .mock .grid .tile:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 90px 1fr; gap: 1rem; }
  .landing .cta-row { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
:root[data-motion='reduced'] *, :root[data-motion='reduced'] *::before, :root[data-motion='reduced'] *::after,
:root[data-reading-motion='reduced'] *, :root[data-reading-motion='reduced'] *::before, :root[data-reading-motion='reduced'] *::after,
:host([data-motion='reduced']) *, :host([data-motion='reduced']) *::before, :host([data-motion='reduced']) *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (forced-colors: active) {
  .btn, .nav-item, .shelf-btn, .settings-tab, .bar { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
  .nav-item.active, [aria-pressed='true'], [role='radio'][aria-checked='true'] { outline: 2px solid Highlight; }
}

/* Settled theme colours also stay readable while navigation moves. */
body, .btn, .nav-item, .shelf-btn, .settings-tab, .seg, .rating-row {
  transition-property: transform;
}
.topbar { background: var(--surface); color: var(--text); }
.topbar a:not(.primary) { color: var(--text); }
.landing .band.rail { background: var(--accent-soft); color: var(--text); }
.landing .band.rail .lede { color: var(--muted); }
.seg.active { background: var(--accent); color: var(--on-accent); }
.book-ratings .rating-row.overall { background: var(--accent-soft); }
.sidebar .nav-item { background: transparent; }
.sidebar .nav-item:hover { background: var(--nav-hover); }
.sidebar .nav-item.active { background: var(--nav-selected); color: var(--nav-selected-text); }
.sidebar .account.active .who { color: var(--nav-text); }
.appearance-atelier .atelier-proof-label { color: var(--muted); }
.mobile-app-header a, .topbar .brand, footer .brand, footer nav a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.stepper .finish, .rating-clear, .discover-card .feature-actions .btn { min-height: 44px; }
.now-row .cover { flex-shrink: 0; }

/* Review corrections: open reading sheets, durable navigation and text reflow. */
.sidebar { overflow-y: auto; }
.sidebar .nav { flex: none; overflow: visible; gap: .75rem; }
.sidebar .sidebar-foot { flex: none; position: static; margin-top: 1rem; }
.sidebar .brand { padding-bottom: .75rem; }
.book-page > .book-page-title { grid-column: 1 / -1; margin: 0; }
.now-cover:not(:has(img)) { display: none; }
.book-ratings .stars-base, .book-ratings .stars-track:hover .stars-base { color: var(--muted); }
.book-ratings .aspects .rating-row { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 1rem 0; }
.book-ratings .aspects .rating-row:focus-within { background: var(--surface); }
.book-jacket { background: transparent; border: 0; padding: 0; }
.book-jacket .cover-lg, .book-jacket:hover .cover-lg { background: var(--accent-soft); transform: none; }
.book-jacket .cover-lg:not(:has(img)) { border: 1px solid var(--border); padding: 1rem; }
.jacket-spark, .book-sticker { display: none; }
.discover-page .discover-card, .discover-page .discover-card:hover { background: transparent; border: 0; padding: 0; box-shadow: none; transform: none; backdrop-filter: none; }
.discover-page .discover-card h3 { display: block; overflow: visible; }
.topbar .wrap, .topbar .nav-links { flex-wrap: wrap; gap: .75rem; }
.topbar .wrap { padding-block: 1rem; }
.topbar .nav-links a { display: inline-flex; min-height: 44px; align-items: center; }
.mobile-app-header { flex-wrap: wrap; }
.toolbar .search-wrap, .toolbar .search { min-width: 0; max-width: 100%; }
/* The add page's two columns need to WRAP, not collapse. A flat `min-width: 0` here (which is
   what this rule used to say) let the hint beside the shelf picker shrink to 14px while its
   sentence kept its own width, pushing the document to 448px against viewports between 401 and
   440 — measured in Chromium at 430px. `min()` keeps both intentions: styles.css's 12rem/14rem
   still force a wrap when there is room to wrap into, and nothing can exceed its container when
   there is not. */
.add-target .field { min-width: min(12rem, 100%); max-width: 100%; }
.add-target .small { min-width: min(14rem, 100%); max-width: 100%; }
.toolbar .sort-group { flex-wrap: wrap; }
input, select, textarea { min-width: 0; max-width: 100%; }
.book-page .rating-row { min-width: 0; }
.book-page .stars-track { max-width: 100%; font-size: 1.4rem; }
.book-ratings .rating-row.overall .stars-track { font-size: 1.5rem; }
.book-page .rating-row.overall { grid-template-columns: minmax(0,1fr); }
.book-page .rating-row.overall .rating-side { grid-column: 1; grid-row: 3; flex-direction: row; justify-content: space-between; }
.book-jacket .cover-lg .placeholder { overflow-wrap: anywhere; padding: 0; }
@media (max-width: 820px) {
  .book-page > .book-page-title { grid-row: 1; }
  .book-main > .titles { grid-row: 2; }
  .book-side { grid-row: 3; grid-template-columns: minmax(0,1fr); }
  .book-side .book-jacket { display: none; }
  .book-side .panel { height: auto; }
  .book-ratings .aspects { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 440px) {
  .landing .rating-row { flex-wrap: wrap; }
  .landing .mock .grid, .discover-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); }
  .landing .mock .grid .tile:last-child { display: block; }
  .landing .mock .grid .tile { min-width: 0; }
  .preset-grid { grid-template-columns: minmax(0,1fr); }
  .reading-options { white-space: normal; }
}
@media (max-width: 440px) {
  .topbar .brand { flex-wrap: wrap; max-width: 100%; }
  .topbar .brand-name { overflow-wrap: anywhere; }
  .search-wrap, .search-wrap.big, .sort-group { min-width: 0; max-width: 100%; }
  .sort-group { display: flex; flex-wrap: wrap; }
  .toolbar .sort-group select { width: 100%; flex-basis: 100%; }
  .book-page .stars-track, .book-ratings .rating-row.overall .stars-track { font-size: clamp(22px,6vw,1.4rem); letter-spacing: .05em; }
  .book-ratings .aspects .rating-row { grid-template-columns: minmax(0,1fr); }
  .atelier-options .preset-card { min-width: 0; overflow-wrap: anywhere; }
  .preset-swatch { max-width: 100%; }
  .landing .rating-demo { padding: .75rem; }
  .landing .rating-demo .stars-track { font-size: 22px; }
  .landing .rating-demo .val { min-width: 0; }
  .legal { overflow-wrap: anywhere; }
}
@media (max-width: 440px) {
  .landing .rating-demo .aspect { flex-wrap: wrap; }
  .landing .rating-demo .aspect .label { flex-basis: 100%; }
  .atelier-options .preset-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 820px) {
  .toolbar .search-wrap { flex: 1 0 100%; width: 100%; }
  .toolbar .search-wrap .search { width: 100%; }
  .toolbar .sort-group { flex: 1 1 auto; }
}

/* Pastel reading surfaces: colour and rules provide structure without elevation. */
.toolbar { background: transparent; border: 0; border-block: 1px solid var(--border); border-radius: 0; padding: 1rem 0; }
.book:not(.add-tile), .book:not(.add-tile):hover {
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 0 0 1rem; box-shadow: none; transform: none;
}
.book:hover .cover, .book:hover .cover img, .landing .tile:hover,
.landing .tile:hover .cover, .landing .feature-card:hover, .auth-books img {
  box-shadow: none; transform: none;
}
.now-row { background: var(--tidepool); border: 0; border-radius: 12px; }
.book-row { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.landing .rating-demo { background: var(--tidepool); border: 0; }
.landing .progress-demo { background: var(--sand); border: 0; }
/* The progress-bar track (--accent-soft) is a low-saturation near-white like every other
   light-theme surface, so its fill colour carries no boundary contrast of its own: 1.23:1
   against a card, 1.11:1 against the page ground, 1.04:1 against the current-reading row and
   the landing shelf-stage now that both are --tidepool. A border, not a token change, is the
   fix — G183/G195 rather than trying to make one pastel out-contrast another. */
.bar { box-shadow: inset 0 0 0 1px var(--border-strong); }
.landing .tier { border: 1px solid var(--border-strong); }
.landing .tier.featured { background: var(--accent-soft); }
.menu, .confirm, .toast, .reading-dialog { box-shadow: none; border: 1px solid var(--border-strong); }
.stars-track { min-height: 44px; display: inline-flex; align-items: center; }
.stars-track .stars-fill { display: flex; align-items: center; }
.landing .aspect { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem 1rem; }
.landing .aspect .label { grid-column: 1 / -1; width: auto; }
.landing .aspect .stars { min-width: 0; }
.landing .aspect select { min-width: 76px; width: auto; min-height: 44px; padding: .35rem .5rem; }
.landing .star { flex: 0 0 28px; }
/* Keep content fully opaque during movement, including its text contrast. */
.fold-body, .filter-panel, .sk { animation-name: guide-arrive; animation-duration: 280ms; }
.landing .grid .tile { animation-delay: 0ms; }
.btn:active:not(:disabled) { transform: translateY(1px); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ring); outline-offset: 4px;
}
:root[data-reading-motion='reduced']::view-transition-old(root),
:root[data-reading-motion='reduced']::view-transition-new(root),
:root[data-motion='reduced']::view-transition-old(root),
:root[data-motion='reduced']::view-transition-new(root) { animation: none !important; }
@media (max-width: 440px) {
  .landing .aspect { gap: .5rem; }
  .landing .stars { gap: 0; }
  .landing .star, .landing .star svg { width: 24px; }
  .landing .star { flex-basis: 24px; }
}
/* Final reflow and control corrections from the desktop / phone review. */
.landing .hero h1.display { font-size: clamp(2.5rem,4.4vw,4rem); line-height: 1.08; letter-spacing: -.035em; }
.book-page .stepper .finish, .book-ratings .rating-clear { min-height: 44px; }
.book-page .card, .book-page .panel { border-radius: 12px; box-shadow: none; }
.book-page .book-journal { background: var(--surface); }
.book-ratings .stars-fill { top: 0; transform: none; }
.book-main details[open] > .fold-body { animation: guide-arrive 280ms var(--ease-out); }
.book-page .btn:hover, .book-page .btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled) { transform: none; }
}
:root[data-reading-motion='reduced'] .btn:active:not(:disabled),
:root[data-motion='reduced'] .btn:active:not(:disabled),
:host([data-motion='reduced']) .btn:active:not(:disabled) { transform: none; }

/* Sign-in page: restore the two things this sheet was overriding by accident.
   `styles.css` makes the auth page full-bleed (`main:has(.auth-wrap)`) and makes
   `.auth-card` a bare form shell — transparent, no border, no shadow, no padding; it
   carries the `card` class for its width and field rules only. Both of those rules tie on
   specificity with the blanket `.card` and `.app > main` rules above and lose on load
   order, so the form was sitting in a 380px white box with zero padding inside an inset
   main. Invisible while the surface was cream on cream (1.03:1); the oceanic ground shows
   it. Scope beats order, so these say it explicitly. */
.app > main:has(.auth-wrap) { padding: 0; }
.card.auth-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }