/* Reader tools: shared styles for the three doors.
   Started from the CYCLE186-CX-BOOKTOOL-MOCKUP styles.css (2026-09-24), with
   the mockup-only control bar removed.
   Mobile first. System fonts only (nothing fetched). Colors are tokens so the
   brand decision (an open question for the owner) is a one-block change. Contrast ratios, computed with the WCAG 2 formula
   (CYCLE186 build, 2026-09-24): --ink/--bg 15.8 · --muted/--bg 6.7 ·
   --muted/#ecebe6 (toggle track) 5.8 · #fff/--accent 6.3 · --accent/--bg 6.1 ·
   --accent/--accent-soft 5.5 · --start-ink/--start-bg 8.5 ·
   --warn-ink/--warn-bg 8.1 · --line-strong/#fff (field and button borders,
   non-text, needs 3.0) 3.9. */

:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --ink: #1d1f23;
  --muted: #555a61;
  --line: #d9d6cf;
  --line-strong: #858178;
  --accent: #0d6b66;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1ef;
  --start-bg: #fff2cc;
  --start-ink: #5a4200;
  --warn-bg: #fdecea;
  --warn-ink: #8a1c12;
  --focus: #1a56db;
  --radius: 12px;
  --tap: 44px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--font);
}
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* Gate D10: [hidden] always hides, whatever display a class sets (the Print
   button showed before any sheet existed). */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 10px 14px; border: 2px solid var(--focus); z-index: 50; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------------ header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1040px; margin: 0 auto; padding: 12px 16px 4px;
}
.wordmark { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--accent); }
.header-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; color: var(--muted); font-weight: 600; text-decoration: none; }
.header-link:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------ tool panel */
main { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }
.tool { max-width: 720px; margin: 8px auto 0; }
.tool h1.home-title { font-size: 26px; line-height: 1.2; margin: 12px 0 6px; letter-spacing: -.01em; }
.tool .home-sub { margin: 0 0 16px; color: var(--muted); }

.toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: #ecebe6; border-radius: 999px; border: 1px solid var(--line); margin: 0 0 12px;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle label {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 999px; font-weight: 700; font-size: 16px; color: var(--muted); cursor: pointer; user-select: none;
}
.toggle input:checked + label { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.toggle input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* CYCLE203-LD-RT-BOOKS-HOTFIX-2 (I-32): a book page's switch is two links drawn as the same two-state control */
.toggle-links a {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 999px; font-weight: 700; font-size: 16px; color: var(--muted); text-decoration: none;
}
.toggle-links a.on { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.toggle-links a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.search { position: relative; }
.search label.field-label { display: block; font-weight: 700; margin: 0 0 6px; }
.search-row { display: flex; gap: 8px; }
.input-wrap { position: relative; flex: 1; }
.search input[type="text"] {
  width: 100%; min-height: 52px; padding: 12px 48px 12px 14px; font: inherit; font-size: 17px;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.search input[type="text"]:focus { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft); }
.clear-btn {
  position: absolute; right: 4px; top: 4px; width: var(--tap); height: var(--tap); border: 0; background: transparent;
  font-size: 22px; color: var(--muted); border-radius: 8px; cursor: pointer;
}
.clear-btn[hidden] { display: none; }
.go-btn {
  min-height: 52px; min-width: 76px; padding: 0 18px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer;
}
.hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.try { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; align-items: center; }
.try span { color: var(--muted); font-size: 14px; }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* autocomplete */
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14);
  max-height: 60vh; overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
  min-height: 56px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--accent-soft); }
.suggest .t { font-weight: 700; line-height: 1.25; }
.suggest .s { color: var(--muted); font-size: 14px; }
.suggest .badge { font-size: 12px; }
.suggest .foot { display: block; min-height: 0; padding: 8px; color: var(--muted); font-size: 13px; cursor: default; }
.suggest .foot:hover { background: transparent; }

/* cover placeholders: CSS only, never a real cover in the mockup */
.cover {
  width: 34px; height: 50px; border-radius: 3px; display: flex; align-items: flex-end; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 800; padding-bottom: 3px; letter-spacing: .03em;
  box-shadow: inset -3px 0 0 rgba(0,0,0,.18);
}
.cover.lg { width: 52px; height: 76px; font-size: 12px; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: #eeece6; color: var(--muted); white-space: nowrap;
}
/* C186.29: an adult book on a young adult list (--warn-ink/--warn-bg 8.1) */
.badge.adult-badge { background: var(--warn-bg); color: var(--warn-ink); vertical-align: 2px; margin-left: 4px; }

/* ----------------------------------------------------- summary / edit bar */
.summary {
  position: sticky; top: 0; z-index: 15; background: var(--bg); padding: 8px 0; margin: 0 auto 4px; max-width: 820px;
}
.summary[hidden] { display: none; }
.summary-inner {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 4px 4px 4px 12px; box-shadow: var(--shadow);
}
.summary .mode { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); white-space: nowrap; }
.summary .what { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary .what small { font-weight: 500; color: var(--muted); }
.edit-btn {
  min-height: var(--tap); min-width: 64px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--accent);
  background: var(--surface); color: var(--accent); font: inherit; font-weight: 800; cursor: pointer;
}

/* ---------------------------------------------------------------- results */
.results { max-width: 820px; margin: 8px auto 0; }
.results h1 { font-size: 24px; line-height: 1.2; margin: 14px 0 4px; letter-spacing: -.01em; }
.meta { color: var(--muted); margin: 0 0 12px; }
.start-here { margin: -4px 0 10px; font-weight: 600; }   /* CYCLE198-LD-RT-BL-DRAW-1 (D-154) */
.notice {
  background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; font-size: 15px;
}
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.mock { background: #fff7e0; border: 1px dashed #c99a00; color: #4a3b00; }
.order-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; }
.order-switch input { position: absolute; opacity: 0; pointer-events: none; }
.order-switch label {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface); font-weight: 700; cursor: pointer; text-align: center; padding: 0 8px;
}
.order-switch input:checked + label { border: 2px solid var(--accent); color: var(--accent); background: var(--accent-soft); }
.order-switch input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.order-note { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.disclosure { font-size: 13px; color: var(--muted); margin: 0 0 10px; }

.book-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.book {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  display: grid; grid-template-columns: 30px 52px 1fr; gap: 4px 12px; align-items: start;
}
.book.is-start { border: 2px solid #c99a00; }
.book-list.unordered .book { grid-template-columns: 52px 1fr; }
.content-note { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; margin: 8px 0 12px; }
.book.is-searched { box-shadow: 0 0 0 3px var(--accent-soft); }
.pos { font-size: 22px; font-weight: 800; color: var(--muted); text-align: center; line-height: 1.2; padding-top: 2px; }
.book .body { min-width: 0; }
.book .title { font-weight: 800; font-size: 17px; line-height: 1.3; margin: 0; }
.book .sub { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.start-flag {
  display: inline-block; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--start-bg);
  color: var(--start-ink); font-weight: 800; font-size: 13px;
}
.start-why { display: block; font-size: 14px; color: var(--start-ink); margin-top: 2px; }
.searched-flag { display: inline-block; margin: 6px 6px 0 0; font-size: 13px; font-weight: 700; color: var(--accent); }
.buy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.buy a {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px;
  text-decoration: none; text-align: center; padding: 0 6px;
}
.buy a:hover { border-color: var(--accent); color: var(--accent); }
.edition-note {
  margin: 14px 0 0; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 15px;
}
.edition-note strong { display: block; margin-bottom: 2px; }
.group-title { font-size: 19px; margin: 22px 0 6px; }
.report { margin: 14px 0 0; font-size: 15px; }
.report a, .crosslink a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.crosslink { margin: 6px 0 0; }

/* read-alike cards */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; align-items: center; }
.filters .lbl { font-size: 14px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.filters select {
  min-height: var(--tap); border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  font: inherit; font-size: 15px; padding: 0 12px; color: var(--ink);
}
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px;
}
.card .title { font-weight: 800; font-size: 17px; margin: 0; line-height: 1.3; }
.card .sub { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.card .alt { color: var(--muted); font-size: 13px; margin: 2px 0 0; font-style: italic; }
.why { grid-column: 1 / -1; margin: 8px 0 0; font-size: 16px; }
.why b { color: var(--accent); }
details.grounds { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; }
details.grounds summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 700; }
details.grounds ul { margin: 4px 0 6px; padding-left: 18px; }
details.grounds .ev { color: var(--muted); }
.card .buy { grid-column: 1 / -1; }
.excluded { color: var(--muted); font-size: 15px; margin: 12px 0 0; }
.excluded a, .notice a, .hint a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ambiguous / no-result / error */
.choices { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.choices button {
  width: 100%; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; text-align: left;
  min-height: 88px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); font: inherit; color: var(--ink); cursor: pointer;
}
.choices button:hover { border-color: var(--accent); }
.choices .t { font-weight: 800; }
.choices .s { color: var(--muted); font-size: 14px; }
.choices .prov { display: block; font-size: 12px; color: var(--warn-ink); }
.retry { min-height: var(--tap); padding: 0 18px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }

/* ------------------------------------------------------------------- FAQ */
.faq { max-width: 720px; margin: 40px auto 0; border-top: 1px solid var(--line); padding-top: 8px; }
.faq h2 { font-size: 21px; margin: 12px 0 6px; }
/* CYCLE210-B-LD-FAQ-UNROLL-1 (R-261-B): no accordion - each question is an h3 under the FAQ h2, its answer always shown */
.faq .qa { border-bottom: 1px solid var(--line); }
.faq .qa h3 { font-size: inherit; line-height: 1.35; font-weight: 700; margin: 0; padding: 14px 0 6px; }
.faq .a { padding: 0 0 12px; color: var(--ink); }
.faq .pending { display: inline-block; font-size: 12px; font-weight: 800; background: #fff7e0; color: #5a4200; border: 1px dashed #c99a00; padding: 1px 6px; border-radius: 6px; }
.faq .more { display: inline-flex; min-height: var(--tap); align-items: center; font-weight: 700; }

footer.site-footer { max-width: 1040px; margin: 24px auto 0; padding: 16px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
footer.site-footer p { margin: 4px 0; }

.toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: min(92vw, 520px);
  background: #1d1f23; color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 14px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.toast[hidden] { display: none; }

.shelf { margin: 18px 0 0; }
.shelf h2 { font-size: 17px; margin: 0 0 6px; }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  .site-header { padding: 18px 24px 6px; }
  main { padding: 0 24px 64px; }
  .tool h1.home-title { font-size: 34px; margin-top: 32px; }
  .tool .home-sub { font-size: 18px; }
  .results h1 { font-size: 30px; }
  .book { grid-template-columns: 36px 52px 1fr 330px; align-items: center; }
  .book .buy { grid-column: 4; margin-top: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .summary { top: 0; }
}

/* ------------------------------------------------------ reader-tools additions */
.buy .pending {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); border-radius: 10px;
  border: 1px dashed var(--line-strong); background: var(--bg); color: var(--muted); font-weight: 700; font-size: 14px;
  text-align: center; padding: 0 6px; cursor: not-allowed;
}
.buy-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.last-checked { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.sample-note { background: #fff7e0; border: 1px dashed #c99a00; color: #4a3b00; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 12px 0; }
.search .hidden-mode { display: none; }
.js .search.collapsed { display: none; }
.nojs-go { margin: 6px 0 0; }
.js .nojs-go { display: none; }
.card[hidden] { display: none; }
.inline-form { display: inline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 700; cursor: pointer; min-height: var(--tap); text-decoration: underline; }
.dev-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.dev-list a { display: flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ------------------------------------------------------------ name tracing */
.tracing { max-width: 720px; margin: 8px auto 0; }
.tracing h1 { font-size: 26px; line-height: 1.2; margin: 12px 0 6px; letter-spacing: -.01em; }
.tracing .home-sub { margin: 0 0 16px; color: var(--muted); }
.name-row { display: flex; gap: 8px; }
.name-row input[type="text"], .opt-grid input[type="text"] {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 17px;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.name-row input[type="text"]:focus, .opt-grid input[type="text"]:focus { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft); }
.field-label { display: block; font-weight: 700; margin: 0 0 6px; }
.error { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; font-size: 15px; }
.error[hidden], .notice[hidden] { display: none; }
.options { margin: 14px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.js .options.pre-first { display: none; }
.options h2 { font-size: 17px; margin: 0 0 8px; }
.opt-grid { display: grid; gap: 12px; }
.opt-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt-group legend { font-weight: 700; margin: 0 0 6px; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: 15px; cursor: pointer;
}
.seg input:checked + label { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.sheet-area { margin: 16px 0 0; }
.sheet-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow);
  aspect-ratio: 612 / 792; width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; position: relative;
}
.sheet-wrap svg { display: block; width: 100%; height: 100%; }
.sheet-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 150px; padding: 0 18px;
  border-radius: var(--radius); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; text-decoration: none;
}
.btn-primary { border: 0; background: var(--accent); color: var(--accent-ink); }
.btn-secondary { border: 2px solid var(--accent); background: var(--surface); color: var(--accent); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.status-line { text-align: center; color: var(--muted); font-size: 14px; min-height: 20px; margin: 8px 0 0; }
.more { margin: 28px 0 0; }
.more h2 { font-size: 21px; margin: 0 0 4px; }
.more .sub { color: var(--muted); margin: 0 0 10px; font-size: 15px; }
.more-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.more-card {
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 12px;
  min-height: 120px; display: flex; flex-direction: column; gap: 6px;
}
.more-card .t { font-weight: 800; margin: 0; }
.more-card .d { color: var(--muted); font-size: 14px; margin: 0; flex: 1; }
.more-card.live { border-style: solid; }
.more-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.more-form select { min-height: var(--tap); font: inherit; font-size: 15px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 8px; background: var(--surface); }
.more-btn { min-height: var(--tap); font-size: 15px; }
.field-label.small { font-size: 13px; margin: 0; }
.library-link { margin: 18px 0 0; font-weight: 700; }
.library-link a, .section-label a { color: inherit; }
.library-link a, .section-label a, .site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); }
.lib-group h2 { font-size: 20px; margin: 22px 0 6px; }
.lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lib-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: var(--tap); }
.lib-list a { font-weight: 700; min-height: var(--tap); display: inline-flex; align-items: center; }
.lib-list .facts { color: var(--muted); font-size: 14px; }
.custom-ws textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; }
.soon { align-self: flex-start; font-size: 12px; font-weight: 800; background: #eeece6; color: var(--muted); border-radius: 999px; padding: 3px 10px; }
.forget { text-align: center; font-size: 14px; margin: 6px 0 0; }
@media (min-width: 900px) {
  .tracing h1 { font-size: 34px; margin-top: 32px; }
  .tracing .home-sub { font-size: 18px; }
  .more-cards { grid-template-columns: repeat(5, 1fr); }
  .opt-grid { grid-template-columns: 1fr 1fr; }
  .opt-grid .wide { grid-column: 1 / -1; }
}
/* Print (gate D04): only the sheet, exactly one US Letter page. Everything
   else is display:none, so it takes no space (visibility:hidden kept its
   height and printed a blank second page). */
@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff; margin: 0; padding: 0; }
  .skip, .site-header, .site-footer, .tracing > :not(form), #nameForm > :not(.sheet-area),
  .sheet-area > :not(.sheet-wrap) { display: none !important; }
  main, .tracing, #nameForm, .sheet-area { margin: 0 !important; padding: 0 !important; border: 0 !important;
    max-width: none !important; width: auto !important; box-shadow: none !important; }
  .sheet-wrap { width: 8.5in; height: 11in; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none;
    border-radius: 0; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
  .sheet-wrap svg { display: block; width: 8.5in; height: 11in; }
}
html:not(.js) .edit-btn { display: none; }
.choices .choice-link {
  width: 100%; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; text-align: left;
  min-height: 88px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.choices .choice-link:hover { border-color: var(--accent); }
.options.pre-first, .more.pre-first { display: none; }
.sheet-area + .options { margin-top: 18px; }

/* ------------------------------------------------ Q2: catalog pages */
.checking { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-weight: 700; margin: 12px 0; }
.scope { color: var(--muted); font-size: 14px; margin: -6px 0 12px; }
.order-switch.many { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.book .alt { color: var(--muted); font-size: 13px; margin: 2px 0 0; font-style: italic; }
.owner-line { font-size: 13px; font-weight: 700; color: var(--ink); margin: 4px 0 0; }
.coming, .companions { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 14px 0 0; }
.coming ul, .companions ul { margin: 6px 0 0; padding-left: 18px; }
.companions h2 { font-size: 18px; margin: 0 0 2px; }
.companions .meta { font-size: 14px; margin: 0 0 4px; }
.companions li { margin: 4px 0; }
.companions .title { font-weight: 700; }
.companions .sub { color: var(--muted); font-size: 14px; }
.also { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.group-title a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.group-title a:hover { text-decoration: underline; }
/* BOOKS-POLISH-1 (GIM-272 / LD-5205): these links sit inside a sentence. As inline-flex boxes they could not wrap
   (a long author credit took a line of its own and pushed "· 14 books" to the next) and stood 44 px tall on the line
   they wrapped to (the tall gap under "Last checked ... against"). Inline, with the 44 px tap height from padding. */
.meta a, .last-checked a { display: inline; padding: 13px 0; }
.author-about a { display: inline; padding: 13px 0; }   /* CYCLE203-LD-RT-CURATE-LOAD-2: the About line's source link, same tap height */
.nw { white-space: nowrap; }
details.other-books { margin: 14px 0 0; }
details.other-books summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--accent); }
.suggest img.cover { object-fit: cover; padding: 0; }
.report-form textarea { width: 100%; min-height: 132px; padding: 12px 14px; font: inherit; font-size: 17px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); margin: 8px 0 0; }
.report-form textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-soft); }
.report-form .send-btn { margin: 12px 0 0; }
.report-form .error { color: var(--warn-ink); font-weight: 700; margin: 6px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* read-alike cards (Q4): a real cover replaces the placeholder after the page
   has loaded (book.js), never on load; no referrer; RT_COVERS=off removes it */
.cover-box { display: block; width: 52px; }
.cover-box img.cover { object-fit: cover; padding: 0; background: var(--line); }
.cover-box .cover[hidden] { display: none; }
.card .hint-line { font-size: 13px; }
details.grounds li { margin: 0 0 6px; }
details.grounds .ev a { color: var(--accent); display: inline-flex; align-items: center; min-height: var(--tap); }

/* Gate D17: every text field and select shows the focus color as an outline
   (not only a border change and a pale halo). */
select:focus-visible, textarea:focus-visible, input[type="text"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.forget.done { color: var(--ink); font-weight: 700; }
.crosslink { margin: 18px 0 0; }

/* ------------------------------------------------ Q5: library pages (nametracing.app) */
.section-label { max-width: 720px; margin: 0 auto; padding: 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.library { max-width: 720px; margin: 8px auto 0; }
.library h1 { font-size: 26px; line-height: 1.2; margin: 8px 0 12px; letter-spacing: -.01em; }
.lib-preview { margin: 0; }
.lib-preview img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.personalize, .lib-end { margin: 16px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-soft); }
.personalize p, .lib-end p { margin: 0 0 10px; }
.lib-end h2 { font-size: 19px; margin: 0 0 6px; }
.downloads { margin: 16px 0 0; text-align: center; }
.downloads .facts { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.downloads .parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.downloads .part { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.downloads .part .btn { width: 100%; }
.part-personalize { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
#printBtn { margin-top: 10px; }
.lib-body { margin: 20px 0 0; }
.lib-body .intro { font-size: 17px; margin: 0; }
.lib-body .source { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.related { margin: 22px 0 0; }
.related h2 { font-size: 19px; margin: 0 0 6px; }
.related ul { margin: 0; padding-left: 18px; }
.related li a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.library .crosslink { margin: 16px 0 0; }
.prefill .from, .prefill .change { font-size: 15px; margin: 4px 0 12px; }
.prefill h1 { font-size: 24px; }
.prefill .facts { text-align: center; color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.sheet-wrap img { display: block; width: 100%; height: 100%; }
.sheet-wrap.landscape { aspect-ratio: 792 / 612; }
@media (min-width: 900px) {
  .library h1 { font-size: 34px; margin-top: 24px; }
  .library .lib-preview img { max-width: 480px; }
  .downloads .parts { grid-template-columns: 1fr 1fr; }
}
/* Print a one-page library file from its page: only the preview, one US Letter page. */
@media print {
  .section-label { display: none !important; }
  .library > :not(.lib-preview) { display: none !important; }
  .library, .lib-preview { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .lib-preview img { width: 8.5in !important; height: 11in !important; max-width: none !important; border: 0 !important;
    box-shadow: none !important; border-radius: 0 !important; break-inside: avoid; }
}
.prefill .from a, .prefill .change a, .library .crosslink a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ------------------------------------------- PRELAUNCH-1 (D-78, aesthetic top-10 #1-#7) */
/* Compact book rows: a 7-10 book series in the first screen at 1,280 x 800, 4 or more rows at 390 x 844, with
   every row's data kept (number, title, year, kind, other titles, Start here and its reason, store links). */
.book-list { gap: 2px; }
.book { grid-template-columns: 22px 26px 1fr; gap: 0 10px; padding: 4px 10px; align-items: start; }
.book-list.unordered .book { grid-template-columns: 26px 1fr; }
.book .pos { font-size: 17px; padding-top: 1px; }
.cover.row-tile { width: 26px; height: 38px; font-size: 9px; padding-bottom: 2px; border-radius: 2px; }
/* series and author rows (COVERS-1, D-103): the tile reserves the box; the checked cover is laid over it,
   invisible until it has loaded (book.js, after the page's load event, lazy below the fold); a 404 removes it */
.row-box { position: relative; width: 26px; height: 38px; }
.row-box img.row-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: 2px; opacity: 0; }
.row-box img.row-img.is-loaded { opacity: 1; }
.book .title { font-size: 16px; line-height: 1.25; }
.book .sub { font-size: 13px; line-height: 1.35; margin: 1px 0 0; }
.book .alt { font-size: 12px; margin: 0; }
.book .start-flag { margin: 2px 6px 0 0; padding: 0 8px; font-size: 12px; }
.book .start-why { display: inline; font-size: 12px; line-height: 1.35; }
.book .searched-flag { margin: 2px 6px 0 0; font-size: 12px; }
.book .owner-line { font-size: 12px; margin: 1px 0 0; }
/* store links keep their column whatever is missing (a 979 ISBN has no Amazon link) */
.book .buy, .card .buy { margin-top: 5px; grid-template-columns: repeat(3, 1fr); }
.buy a[data-retailer="library"] { grid-column: 1; }
.buy a[data-retailer="bookshop"] { grid-column: 2; }
.buy a[data-retailer="amazon"] { grid-column: 3; }
.book .buy a { font-size: 14px; }   /* keeps the 44 px tap height (commonChecks) */
.order-note { font-size: 14px; margin: 0 0 8px; }
.disclosure { font-size: 12px; margin: 0 0 6px; }
.results h1 { font-size: 22px; margin-top: 10px; }
.results .meta { margin-bottom: 6px; }
/* the "still being checked" line is a neutral note, not a red warning (existing copy string) */
.checking { background: none; color: var(--muted); border: 0; border-left: 3px solid var(--line-strong); font-weight: 400;
  font-size: 13px; line-height: 1.35; padding: 0 0 0 8px; margin: -2px 0 8px; border-radius: 0; }
/* author pages: jump links to each series section (one scrolling line on a phone) */
.jump ul { list-style: none; margin: 0 0 10px; padding: 0 0 2px; display: flex; gap: 6px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
.jump li { flex: none; }
.jump a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px;
  font-weight: 700; text-decoration: none; white-space: nowrap; }
.jump a:hover { border-color: var(--accent); color: var(--accent); }
.group-title { scroll-margin-top: 72px; }
/* home pages: a text-only strip of published, demand-ranked pages */
.popular { margin: 18px 0 0; }
.popular h2 { font-size: 17px; margin: 0 0 6px; }
.popular ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
.popular a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
/* name tracing: the actions sit above the sheet; the sample sheet is greyed and labeled */
.actions.top-actions { margin: 0 0 12px; align-items: stretch; }
.actions.top-actions #printBtn { margin-top: 0; }
.sheet-wrap.is-sample svg { opacity: .42; }
.sample-tag { position: absolute; top: 10px; left: 10px; background: var(--start-bg); color: var(--start-ink);
  font-size: 13px; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
@media print { .sample-tag { display: none !important; } }
@media (min-width: 900px) {
  .results h1 { font-size: 28px; }
  .jump ul { flex-wrap: wrap; overflow: visible; }
  .book { grid-template-columns: 30px 22px 1fr auto; padding: 0 0 0 10px; align-items: center; min-height: 44px; overflow: hidden; }
  .book-list.unordered .book { grid-template-columns: 22px 1fr auto; }
  .cover.row-tile { width: 22px; height: 32px; font-size: 8px; }
  .row-box { width: 22px; height: 32px; }
  .book .title { display: inline; }
  .book .sub { display: inline; margin-left: 8px; white-space: nowrap; }
  .book .alt, .book .owner-line { display: block; }
  .book .start-flag { margin: 0 6px 0 8px; }
  .book .buy { grid-column: -2 / -1; margin-top: 0; grid-template-columns: 76px 116px 84px; gap: 4px; }
  .book .buy a { border-width: 0 0 0 1px; border-radius: 0; border-color: var(--line); }
  .book .buy a:hover { background: var(--accent-soft); }
  .disclosure { margin-bottom: 4px; }
  .book .buy a { padding: 0 8px; font-size: 14px; }
}
/* A-Z index pages (AZ-META-1, audit LD-4301): the jump bar wraps; a letter with nothing under it is plain text */
.az-home-link { margin: 10px 0 0; }
.az-home-link a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.az { margin: 0 0 18px; }
.az-heading { font-size: 20px; margin: 18px 0 6px; }
.az-jump-label { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.az-jump ul { flex-wrap: wrap; overflow: visible; }
.az-jump .az-off { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: 0 12px; color: var(--muted); font-size: 14px; opacity: .6; }
.az-letter { font-size: 18px; margin: 16px 0 4px; scroll-margin-top: 72px; }
.az-list { list-style: none; margin: 0; padding: 0; }
.az-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: var(--tap); border-bottom: 1px solid var(--line); }
.az-list a { font-weight: 700; overflow-wrap: anywhere; }
.az-sub { color: var(--muted); font-size: 14px; }
.az-back { margin: 4px 0 0; font-size: 14px; }
.az-back a { display: inline-flex; align-items: center; min-height: var(--tap); }
.az-stale:target { display: block !important; scroll-margin-top: 72px; }

/* MULTISEED-1 (D-102): the Books like mix page */
.mix-home-link { margin: 10px 0 0; }
.mix-home-link a, .mix-choices a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.mix-seeds { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mix-seed { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 6px 6px 12px; border: 1px solid var(--line, #d0d4da); border-radius: 999px; overflow-wrap: anywhere; }
.mix-seed small { color: var(--muted); }
.mix-remove { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border-radius: 50%; text-decoration: none; font-size: 20px; }
.mix-choices { margin: 6px 0 0; padding-left: 20px; }
.mix-h { margin: 18px 0 6px; font-size: 20px; }
.card .mix-why { grid-column: 1 / -1; margin: 4px 0 0; padding-left: 18px; font-size: 15px; }
.card .mix-matches { margin-top: 8px; }

/* SEO-FIX-1 (D-107): an author page's count badge sits beside its heading, outside the H2 (BIO-8) */
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 22px 0 6px; }
.group-head .group-title { margin: 0; }
.group-head .pen-name { color: var(--muted); font-size: .92rem; }   /* LD-6408: "written as J. D. Robb" */
/* a match with its own Books like list links to it (BL-2) */
.card .title a.own-list { color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center; min-height: var(--tap); }   /* a 44 px tap target, as every control */

/* ------------------------------------------------ COVERS-BUILD-1 (D-125; Pippin's CYCLE190-CX-RT-BOOKS-AESTHETIC-1) */
/* Covers people can see: series and author rows 64 x 96 on a phone, 88 x 132 on a desktop; Books like cards
   80 x 120 and 96 x 144. One variable sets the cover box AND its grid column, and the box clips what is inside
   it, so no stylesheet state can draw a cover over the title (Pippin #3). */
:root { --row-cov-w: 64px; --row-cov-h: 96px; --card-cov-w: 80px; --card-cov-h: 120px; --paper: #f1eee6; }
.cover-box { position: relative; display: block; flex: none; overflow: hidden; border-radius: 4px; }
.cover-box.row-box { width: var(--row-cov-w); height: var(--row-cov-h); }
.cover-box.card-box { width: var(--card-cov-w); height: var(--card-cov-h); }
/* the title card (Pippin D2 a): paper tone, thin border, the title and author in the site's type, top-aligned.
   It is what shows while a cover loads and, when no source has one, instead of it. --ink on --paper 14.9:1,
   --muted on --paper 6.0:1. */
.cover-ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 7px 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-align: left; overflow: hidden; }
.cover-ph .ph-t { font-weight: 800; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cover-ph .ph-a { font-size: 10px; line-height: 1.2; color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.js .cover-img { opacity: 0; transition: opacity .2s ease-in; }
.js .cover-img.is-loaded { opacity: 1; }
/* Google Books (LD-5181): a per-book link where Google's image shows, and one "powered by Google" per list */
.gb-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 13px; color: var(--muted); }
.gb-attrib { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* series and author rows */
.book-list { gap: 6px; }
.book { grid-template-columns: 22px var(--row-cov-w) minmax(0, 1fr); gap: 0 12px; padding: 8px 10px; align-items: start; }
.book-list.unordered .book { grid-template-columns: var(--row-cov-w) minmax(0, 1fr); }
/* HOTFIX-4E (E-136): an unnumbered row's empty number cell holds column 1 in a numbered list; an unordered list has no number column */
.book-list.unordered .book .pos { display: none; }
.book .body { min-width: 0; }
.book .title { font-size: 17px; line-height: 1.25; }
.book .sub { font-size: 14px; }
.book .start-why { display: block; margin-top: 2px; }
.book .buy { grid-column: 1 / -1; margin-top: 8px; }

/* Books like cards: a head (cover + text) and the store row pinned to the card's foot, so rows line up (Pippin #6) */
.card { display: flex; flex-direction: column; gap: 2px; }
.card-head { display: flex; gap: 14px; align-items: flex-start; }
.card-text { flex: 1; min-width: 0; }
.card .title { font-size: 18px; line-height: 1.25; }
.card .sub { line-height: 1.35; }
.card .aud { white-space: nowrap; }
.card .buy { margin-top: auto; padding-top: 8px; }
.own-list-line { margin: 2px 0 0; font-size: 14px; }
.own-list-line a.own-list { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* one column, one left edge (Pippin #5): header, toggle, results, FAQ and footer share the 820 px column */
.tool-row { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.tool-row .toggle { flex: 1; margin: 0; min-width: 0; }
.change-btn { flex: none; min-height: 48px; border-radius: 999px; white-space: nowrap; }
body.book-tool .tool, body.book-tool .faq { max-width: 820px; }
body.book-tool footer.site-footer { max-width: 820px; padding-left: 0; padding-right: 0; }
body.book-tool .site-header { max-width: 852px; }

@media (max-width: 599px) {   /* a phone: the toggle keeps the full width; "Change book" sits under it, right */
  .tool-row { flex-wrap: wrap; gap: 6px; }
  .tool-row .toggle { flex: 1 1 100%; }
  .change-btn { margin-left: auto; min-height: var(--tap); padding: 0 16px; font-size: 15px; }
}
/* A to Z indexes (Pippin #9): letters with nothing under them are not drawn; three columns on a desktop */
.az-jump .az-off, .az-jump li:has(> .az-off) { display: none; }

@media (min-width: 900px) {
  :root { --row-cov-w: 88px; --row-cov-h: 132px; --card-cov-w: 96px; --card-cov-h: 144px; }
  .book { grid-template-columns: 30px var(--row-cov-w) minmax(0, 1fr) auto; gap: 0 16px; padding: 8px 0 8px 10px;
    align-items: center; min-height: calc(var(--row-cov-h) + 16px); overflow: visible; }
  .book-list.unordered .book { grid-template-columns: var(--row-cov-w) minmax(0, 1fr) auto; }
  .book .title { display: block; font-size: 18px; }
  .book .sub { display: block; margin: 2px 0 0; white-space: normal; }
  .book .start-flag { margin: 6px 6px 0 0; }
  .book .buy { grid-column: -2 / -1; margin-top: 0; align-self: center; }
  body.book-tool .site-header { padding-left: 16px; padding-right: 16px; }
  body.book-tool main { padding-left: 16px; padding-right: 16px; }
  .az-groups { columns: 3; column-gap: 32px; }
  .az-group { break-inside: avoid; }
  .az-group .az-letter { margin-top: 0; padding-top: 12px; }
  .az-back { display: none; }
  .az-jump { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0; }
  .az-list li { min-height: 36px; }
  .az-list a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* BL-AUTHOR-TROPE-1 (D-131): bookslike.app book, author and trope pages and the proof block */
.bl-head { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 8px; }
.bl-head-text { flex: 1; min-width: 0; }
/* CYCLE196-LD-RT-BL-ABOUT-1 (D-148): About this book, under the title */
.bl-about { margin: 14px 0 4px; }
.bl-about-h { font-size: 1rem; margin: 0 0 4px; }
.bl-about-text { margin: 0; line-height: 1.5; }
.bl-about-src { margin: 4px 0 0; font-size: .85rem; opacity: .85; }
.bl-head h1 { margin-top: 0; }
.bl-h2 { font-size: 19px; margin: 24px 0 8px; }
.card .title a.bl-title { color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center; min-height: var(--tap); }
.proof { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 15px; }
.proof p { margin: 4px 0; }
.proof a { display: inline; padding: 13px 0; }
.bl-links, .bl-tags { list-style: none; margin: 0; padding: 0; }
.bl-links li, .bl-tags li { margin: 0 0 4px; }
.bl-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.bl-tags .chip { display: inline-flex; align-items: center; min-height: var(--tap); }
.bl-tags .ev { color: var(--muted); font-size: 14px; }
.bl-tags .ev a, .card .why a, .content-note a { display: inline; padding: 13px 0; }
.card .sub a { color: var(--ink); }
/* the home rows: the popular strip's look, their own class (the strip's checks read .popular only) */
.bl-browse { margin: 18px 0 0; }
.bl-browse h2 { font-size: 17px; margin: 0 0 6px; }
.bl-browse ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
.bl-browse a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
/* rc-st7-9 UX pass (CYCLE191-LD-RT-RC-ST7-9-MERGE-1): the author page's Start here line keeps an even line height (its
   link was a 44 px inline-flex box inside running text; the padding keeps the tap area, as .proof a); the A-Z links
   fill their 44 px row on phones too (they were 24 px tall below 900 px) */
.notice.bl-start a { display: inline; min-height: 0; padding: 13px 0; }
.az-list a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ------------------------------------------------------------------ rc-st7-10 (CYCLE191-LD-RT-RC-ST7-10-1)
   Pippin's UX-BENCHMARK-1 fix list for the two book doors. Words unchanged (no title, meta or H1 text changed). */
/* H5 (CYCLE191-CX-1603): one header row, the wordmark left and the search button right; the toggle under it; no
   "Change book" row of its own */
.header-right { display: inline-flex; align-items: center; gap: 4px; }
.hdr-search { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--tap);
  min-height: var(--tap); padding: 0 12px; border-radius: 999px; }
.hdr-search svg { flex: none; }
body.book-tool .toggle { margin: 0 0 6px; }
@media screen and (max-width: 599px) {
  .site-header { padding-top: 6px; padding-bottom: 0; }
  .hdr-search { width: var(--tap); padding: 0; }
  .hdr-search .hs-label { display: none; }
  body.book-tool .tool { margin-top: 2px; }
  .toggle { padding: 3px; gap: 3px; }
  .toggle label, .toggle-links a { min-height: var(--tap); font-size: 15px; }
}
/* H10: the H1 reads as a title: 26 px on a phone, 32 px on a desktop */
.results h1 { font-size: 26px; line-height: 1.2; margin-top: 8px; }
@media (min-width: 900px) { .results h1 { font-size: 32px; } }
/* H7 (CYCLE191-CX-1608): Books like covers 96 x 144 on a phone (were 80 x 120), 112 x 168 on a desktop (the design direction's list size; at 120 x 180 the first cover outgrew the first text line and became the largest paint, so the list's desktop Lighthouse score followed the cover host: median 95); series and
   author rows 80 x 120 on a phone (were 64 x 96), 88 x 132 on a desktop (unchanged; the benchmark's 72 x 108 would be
   smaller). The box and its grid column read the same variables, so a cover never covers the title (CX-1500). */
:root { --row-cov-w: 80px; --row-cov-h: 120px; --card-cov-w: 96px; --card-cov-h: 144px; }
@media (min-width: 900px) { :root { --row-cov-w: 88px; --row-cov-h: 132px; --card-cov-w: 112px; --card-cov-h: 168px; } }
/* H6 (CYCLE191-CX-1608): the book page's cover 128 x 192 on a phone, 200 x 300 at 960 px and up beside the title,
   the store row and the proof block */
.bl-cover.card-box { width: 128px; height: 192px; }
@media (min-width: 960px) {
  .bl-hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .bl-hero > .bl-head { display: contents; }
  .bl-hero .bl-cover.card-box { grid-column: 1; grid-row: 1 / span 8; width: 200px; height: 300px; }
  .bl-hero > :not(.bl-head), .bl-hero .bl-head-text { grid-column: 2; }
}
/* M1: the desktop column is wider (820 -> 960 px); the bookslike.app author page shows its books as a 3-across cover
   grid; booksinorder.app keeps one row per book (order matters) */
@media (min-width: 900px) {
  body.book-tool .tool, body.book-tool .faq, body.book-tool .results { max-width: 960px; }
  body.book-tool footer.site-footer { max-width: 960px; }
  body.book-tool .site-header { max-width: 992px; }
  .cards.bl-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards.bl-works .card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* M4: the A-Z letter chips on one scrolling row on a phone (they took four rows) */
@media screen and (max-width: 899px) {
  .az-jump ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .az-jump ul::-webkit-scrollbar { display: none; }
}
/* M5: the Books like list's Audience / Genre controls on one scrolling row on a phone */
@media screen and (max-width: 599px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex: none; }
}
/* L2: the trope page's content note in a muted style, so it does not out-shout the title */
.content-note.muted-note { background: none; border: 0; border-left: 3px solid var(--line-strong); border-radius: 0;
  padding: 0 0 0 8px; color: var(--muted); font-size: 14px; margin: 6px 0 8px; }
.content-note.explicit-note { font-size: 14px; font-weight: 700; margin: 6px 0 8px; padding: 6px 10px; }
.card .title a.bl-title { min-width: 24px; }   /* rc-st7-10: a one-word title ("It") keeps a 24 px wide tap target */
/* CYCLE194 (BL-FIXES-POOL-4): the genre card's "Matched to N books here" link gets a 44 px tap target (was 19 px) */
.card .bl-matched a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ================================================================== CYCLE203-LD-RT-BOOKS-UIUX-BUILD-1
   The visual system of the two book sites (BOOKS-UIUX-SPEC-2026-10-20 section 5; Andrew R-75, R-81, R-96). One pass,
   scoped to body.book-tool, laid over the rules above. Palette unchanged. Measured by tools/audit/uiux_sweep.js:
   nothing under 14 px, every link and button >= 44 px tall, one H2 size, no horizontal overflow at 390 px.
   Type 390 / 1280: H1 28 / 36 | H2 21 / 24 | card title 18 / 19 | body 17 | secondary 15 | smallest 14.
   Spacing steps 4-8-12-16-24-32-48. Chip fills, ink #1d1f23 on each: 13.8-14.4 : 1 (AA). */
body.book-tool { --h1: 28px; --h2: 21px; --card-t: 18px; --body: 17px; --small: 15px; --least: 14px;
  --card-line: #ecebe6;
  --chip-genre: #e3f1ef; --chip-trope: #f1e8f6; --chip-about: #e6eefa; --chip-where: #e7f3e1; --chip-when: #e7f3e1;
  --chip-form: #efede6; --chip-era: #f6efdc; --chip-ages: #fdebe2; --chip-heads: #fbe6e6;
  font-size: var(--body); line-height: 1.45; }
@media (min-width: 900px) { body.book-tool { --h1: 36px; --h2: 24px; --card-t: 19px; } }
body.book-tool .results h1, body.book-tool .tool h1.home-title { font-size: var(--h1); line-height: 1.2; font-weight: 700; margin: 8px 0 8px; }
/* one H2 size for every section head on both sites (X9: 16, 17, 18, 19 and 21 px before) */
body.book-tool h2 { font-size: var(--h2) !important; line-height: 1.2; font-weight: 700; }
body.book-tool h3 { font-size: var(--card-t); line-height: 1.2; }
body.book-tool .meta, body.book-tool .order-note, body.book-tool .last-checked, body.book-tool .excluded,
body.book-tool .report, body.book-tool .notice, body.book-tool .content-note, body.book-tool .hint,
body.book-tool .why, body.book-tool details.grounds, body.book-tool .also, body.book-tool .scope { font-size: var(--small); }
/* X6 / X12: everything that was 10 to 13.6 px is 14 px or more */
body.book-tool .badge, body.book-tool .suggest .badge, body.book-tool .suggest .foot, body.book-tool .summary .mode,
body.book-tool .card .alt, body.book-tool .book .alt, body.book-tool .owner-line, body.book-tool .book .owner-line,
body.book-tool .choices .prov, body.book-tool .faq .pending, body.book-tool .gb-link, body.book-tool .gb-attrib,
body.book-tool .searched-flag, body.book-tool .book .searched-flag, body.book-tool .cover, body.book-tool .cover.lg,
body.book-tool .cover.row-tile, body.book-tool footer.site-footer, body.book-tool .bl-tags .ev,
body.book-tool .content-note.muted-note, body.book-tool .content-note.explicit-note, body.book-tool .az-sub,
body.book-tool .try span, body.book-tool .filters .lbl, body.book-tool .group-head .pen-name, body.book-tool .disclosure,
body.book-tool .hs-label { font-size: var(--least); }
body.book-tool .card .hint-line, body.book-tool .bl-about-src, body.book-tool .book .sub, body.book-tool .card .sub,
body.book-tool .companions .sub, body.book-tool .companions .meta { font-size: var(--small); opacity: 1; }
body.book-tool .cover-ph .ph-t { font-size: var(--least); line-height: 1.2; }
body.book-tool .cover-ph .ph-a { font-size: var(--least); line-height: 1.2; }
body.book-tool .book .title, body.book-tool .card .title { font-size: var(--card-t); }
/* "Start here": the gold flag, 14 px bold, and the gold card border (kept) */
body.book-tool .start-flag, body.book-tool .book .start-flag { font-size: var(--least); font-weight: 800; padding: 2px 10px;
  margin: 6px 8px 0 0; line-height: 1.45; }
body.book-tool .start-why, body.book-tool .book .start-why { font-size: var(--small); }
/* the basis line: 15 px, muted, under the byline, "Order:" in bold; "Last checked" after it */
body.book-tool .order-basis { font-size: var(--small); color: var(--muted); margin: 0 0 4px; }
body.book-tool .order-basis b { color: var(--ink); }
body.book-tool .last-checked.top { margin: 0 0 12px; }
/* still being checked (noindex pages; logic unchanged): 15 px with a 3 px muted left border */
body.book-tool .checking { font-size: var(--small); line-height: 1.45; border-left: 3px solid var(--muted); padding: 0 0 0 8px;
  margin: 0 0 12px; color: var(--muted); background: none; font-weight: 400; }
/* every link and button >= 44 px tall (X7): a link inside a sentence keeps its line and takes the height from padding */
body.book-tool .card .sub a, body.book-tool .bl-about-src a, body.book-tool .why a, body.book-tool .last-checked a,
body.book-tool .meta a, body.book-tool .author-about a, body.book-tool .bl-tags .ev a, body.book-tool .content-note a,
body.book-tool .proof a, body.book-tool .notice.bl-start a, body.book-tool .sources-line a, body.book-tool .byline a,
body.book-tool .series-line a, body.book-tool .source-line a, body.book-tool .notice a, body.book-tool footer.site-footer a,
body.book-tool .excluded a, body.book-tool .crosslink a, body.book-tool .hint a, body.book-tool .faq .a a,
body.book-tool details.grounds .ev a, body.book-tool .row-title a, body.book-tool .az-near a, body.book-tool .reading-level a,
body.book-tool .source-tag a, body.book-tool .bl-about a, body.book-tool .order-note a, body.book-tool .edition-note a {
  display: inline; padding: 13px 0; min-height: 0; }   /* inside a sentence: the line stays whole, the tap height comes from padding (BOOKS-POLISH-1) */
body.book-tool .card .sub a { color: var(--ink); }
body.book-tool .row-title a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 13px 0; }
body.book-tool .book .title.row-title { line-height: 20px; }
/* buttons: >= 44 x 44, 15 px bold, never pill-shaped (pills are chips); filter and jump buttons in the teal outline */
body.book-tool .buy a { font-size: var(--small); min-height: 44px; }   /* the store row as today (spec section 5) */
body.book-tool .fbtn, body.book-tool .jump a, body.book-tool .filter-box > summary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--accent);
  font: inherit; font-size: var(--small); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
body.book-tool .fbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
body.book-tool .jump ul { flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0 0 16px; }
/* RELEASE-42 (BU, LIVE-41-1 028): a long series name ("Sookie Stackhouse (Southern Vampire Mysteries)") made its jump button
   378 px wide from x=16 on a 390 px phone: the page scrolled sideways by 4 px. A button never grows past the column; its
   label wraps inside it. */
body.book-tool .jump li { max-width: 100%; min-width: 0; }
body.book-tool .jump a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
/* X3: the Books like filters fold into one "Filter" button; inside, the controls wrap (no row off the phone screen) */
body.book-tool .filter-box { margin: 0 0 16px; }
body.book-tool .filter-box > summary { list-style: none; }
body.book-tool .filter-box > summary::-webkit-details-marker { display: none; }
body.book-tool .filter-box[open] > summary { background: var(--accent-soft); }
body.book-tool .filter-box .filters { flex-wrap: wrap; overflow: visible; margin: 12px 0 0; padding: 0; }
body.book-tool .filter-box .filters > * { flex: 0 1 auto; }
/* the A-Z letters wrap too (no row runs off a phone screen) */
body.book-tool .az-jump ul { flex-wrap: wrap; overflow: visible; }
/* chips: one style. A 44 px tap box around a 36 px pill, 15 px text, a 1 px border a shade darker than the fill */
body.book-tool .chip-group { margin: 0 0 8px; }
body.book-tool .chip-label { margin: 8px 0 0; font-size: var(--small); font-weight: 700; color: var(--ink); }
body.book-tool .chip-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
body.book-tool .chip-row li { margin: 0; }
body.book-tool .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink); text-decoration: none; font-size: var(--small); cursor: default; }
body.book-tool a.chip { cursor: pointer; }
body.book-tool .chip-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(29,31,35,.18); background: var(--chip-fill, #f1eee6); color: #1d1f23; line-height: 1.2; }
body.book-tool a.chip .chip-pill { text-decoration: underline; text-decoration-color: rgba(29,31,35,.35); text-underline-offset: 3px; }
body.book-tool a.chip:hover .chip-pill { border-color: var(--accent); }
body.book-tool .chip-genre { --chip-fill: var(--chip-genre); }
body.book-tool .chip-trope { --chip-fill: var(--chip-trope); }
body.book-tool .chip-about { --chip-fill: var(--chip-about); }
body.book-tool .chip-where { --chip-fill: var(--chip-where); }
body.book-tool .chip-when { --chip-fill: var(--chip-when); }
body.book-tool .chip-form { --chip-fill: var(--chip-form); }
body.book-tool .chip-era { --chip-fill: var(--chip-era); }
body.book-tool .chip-ages { --chip-fill: var(--chip-ages); }
body.book-tool .chip-award { --chip-fill: var(--chip-era); }   /* BL-RULES-1 (E-156): awards share the "Came out" fill */
body.book-tool .chip-heads { --chip-fill: var(--chip-heads); }
body.book-tool .why-chips { margin: 0; }
/* the home "Try" links keep a button look (they are jump links, not facts) */
body.book-tool .try .chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); }
/* cards: white, 1 px #ecebe6 border, 8 px radius, 12 px inside, 24 px between blocks */
body.book-tool .card, body.book-tool .book { border: 1px solid var(--card-line); border-radius: 8px; }
body.book-tool .book.is-start { border: 2px solid #c99a00; }
body.book-tool .card { padding: 12px; }
body.book-tool .bl-h2, body.book-tool .group-head, body.book-tool .faq h2 { margin-top: 24px; }
/* breadcrumbs: one line, 14 px, links 44 px tall, ">" between steps, the last step is not a link */
body.book-tool .breadcrumb { margin: 4px 0 0; font-size: var(--least); }
body.book-tool .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow: hidden; }
body.book-tool .breadcrumb li { flex: none; white-space: nowrap; }
body.book-tool .breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
body.book-tool .breadcrumb li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.book-tool .breadcrumb li { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
body.book-tool .breadcrumb li + li::before { content: ">"; margin: 0 8px; color: var(--muted); }
body.book-tool .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
body.book-tool .breadcrumb [aria-current] { color: var(--ink); }
body.book-tool .breadcrumb + h1 { margin-top: 0; }
/* the book page: cover + title, byline, series line, "Get this book" and the store row above the fold */
body.book-tool .byline, body.book-tool .series-line { margin: 0 0 4px; font-size: var(--small); color: var(--muted); }
body.book-tool .get-h { margin: 12px 0 0; font-size: var(--small); font-weight: 700; }
body.book-tool .bl-hero .buy { margin-top: 4px; }
body.book-tool .sources-line { font-size: var(--small); color: var(--muted); margin: 16px 0 0; }
body.book-tool .reading-level { font-size: var(--small); color: var(--muted); margin: 4px 0 0; }
/* compact lists that open with "Show more" (spec E-2 f, X8) */
body.book-tool details.more { margin: 8px 0 0; }
body.book-tool details.more > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700;
  color: var(--accent); cursor: pointer; }
body.book-tool details.more[open] > summary { margin-bottom: 8px; }
body.book-tool .each-links { list-style: none; margin: 0; padding: 0; }
body.book-tool .each-links a, body.book-tool .bl-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
body.book-tool .bl-browse ul { gap: 0 8px; }
/* the trope and genre count line, and the genre page sort line */
body.book-tool .bl-count, body.book-tool .sort-line { font-size: var(--small); color: var(--muted); margin: 0 0 8px; }
body.book-tool .source-line { margin: 0 0 4px; font-size: var(--small); color: var(--muted); }
/* the disclosure line (Andrew R-98): near the bottom of the page, in the footer */
body.book-tool .site-footer .disclosure { font-size: var(--least); margin: 4px 0; color: var(--muted); }
body.book-tool .source-chips { margin: 0 0 4px; }
body.book-tool .start-here { margin: 4px 0 8px; font-size: var(--small); }
/* CYCLE203-LD-RT-BOOKS-BOOKPAGE-1 (Andrew R-104, D-170): the book box selects, the underlined title navigates. book.js
   marks each box (.box, tabindex 0, aria-pressed); the lit state is an inset ring and a tint (box-shadow and background
   only: no border, size or position changes, so nothing on the page moves). The focus ring stays the site's own. */
body.book-tool .results .box { cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.book-tool .results .box.is-selected { box-shadow: inset 0 0 0 3px var(--accent); background: var(--accent-soft); }
body.book-tool .results .box.is-start.is-selected { box-shadow: inset 0 0 0 3px var(--accent); }
body.book-tool .results .box .box-link { cursor: pointer; }
/* the booksinorder.app book page (D-170): the edition line, "Other books in <series>" */
body.book-tool .edition-line { margin: 4px 0 0; font-size: var(--small); color: var(--muted); }
body.book-tool .also-list { list-style: none; margin: 0; padding: 0; }
body.book-tool .also-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 44px; font-size: var(--small); }
body.book-tool .also-list .also-n { color: var(--muted); white-space: nowrap; }
/* a companion title is a link now (D-170): inside its sentence it keeps its line and takes the 44 px tap height from padding */
body.book-tool .also a, body.book-tool .companions .title a { display: inline; padding: 13px 0; min-height: 0; }
body.book-tool .also-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; }
body.book-tool .bio-also .crosslink { margin: 4px 0 0; }
/* CYCLE203-LD-RT-BOOKS-DASHBOARD-1 (R-54, R-96; spec section 5): /about-the-data/ - the numbers first, one column of short
   lines; type 17 / 15 / 14 px, 4-8-12-16-24 spacing, cards white with the #ecebe6 line, links in a 44 px tap box */
body.book-tool .about-data .ad-lead { font-size: var(--body); margin: 0 0 16px; }
body.book-tool .about-data .ad-tiles { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body.book-tool .about-data .ad-tile { background: var(--surface); border: 1px solid var(--card-line); border-radius: 8px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.book-tool .about-data .ad-num { font-size: var(--h1); font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
body.book-tool .about-data .ad-label { font-size: var(--small); color: var(--muted); }
body.book-tool .about-data .ad-sec { margin: 0 0 24px; }
body.book-tool .about-data .ad-sec p { margin: 0 0 8px; font-size: var(--body); }
body.book-tool .about-data h3 { margin: 16px 0 8px; }
body.book-tool .about-data .ad-list { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--card-line); }
body.book-tool .about-data .ad-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 4px 0; border-bottom: 1px solid var(--card-line); font-size: var(--body); }
body.book-tool .about-data .ad-name { min-width: 0; overflow-wrap: anywhere; }
body.book-tool .about-data .ad-name a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
body.book-tool .about-data .ad-count { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
body.book-tool .about-data .ad-pending { font-size: var(--small); color: var(--muted); border-left: 3px solid var(--muted); padding-left: 12px; }
body.book-tool .faq .faq-link a, body.book-tool footer.site-footer .footer-data a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* CYCLE203-LD-RT-BOOKS-FRANCHISE-1 (D-171): the franchise page's series-order line, start line, per-series order lines and
   the "Not listed here yet" line, in the series page's basis-line style (R-96: plain, one job per block) */
body.book-tool .franchise-basis, body.book-tool .arc-basis { font-size: var(--small); color: var(--muted); margin: 0 0 4px; }
body.book-tool .franchise-basis b, body.book-tool .arc-basis b { color: var(--ink); }
body.book-tool .franchise-start { margin: 8px 0 4px; }
body.book-tool .franchise-start a { display: inline; padding: 13px 0; }
body.book-tool .not-listed { font-size: var(--small); color: var(--muted); margin: 18px 0 0; }
/* D-172: a genre page's sub-genre chips */
.sub-filters { border: 0; padding: 0; margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sub-filters legend { float: left; margin: 0 8px 0 0; font-size: var(--small); font-weight: 700; color: var(--ink); }
.sub-filters[hidden], #cards > li.card[hidden] { display: none; }
body.book-tool .arc-checked { margin: 0 0 6px; }

/* CYCLE210-B-LD-BL-DEPTH-1 (R-262-B): bookslike.app depth blocks (catalog/bookdepth.py; _bl_depth_book.html,
   _bl_depth_author.html, _bl_fact_src.html). Mobile first: the fact file is one column at 390 px, label above sentence;
   from 640 px the label sits in a left column. The comparison table scrolls sideways inside its own box (never the page),
   with the book column sticky. */
.dp { margin: 8px 0 4px; }
.dp-sub { margin: 0 0 10px; color: var(--muted); font-size: var(--small); }
.dp-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 14px; }
.dp-row { padding: 10px 0; border-top: 1px solid var(--line); }
.dp-row:first-child { border-top: 0; }
.dp-row dt { font-size: var(--least); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 2px; }
.dp-row dd { margin: 0; line-height: 1.5; }
.dp-src { display: block; margin-top: 3px; font-size: var(--least); color: var(--muted); }
.dp-src a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: var(--tap); }
.dp-q { font-style: italic; }
.dp-differ { display: block; margin-top: 8px; font-size: var(--least); font-weight: 700; color: var(--ink); }
.dp-alt { display: block; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--accent-soft); }
.dp-for { font-weight: 700; color: var(--ink); }   /* CYCLE210-B-LD-BL-FACTS-SHOW-1-FIX: the years a grouped award line's source covers */
.dp-steps { list-style: none; margin: 0; padding: 0 0 0 4px; counter-reset: dp-step; }
.dp-steps li { position: relative; padding: 0 0 14px 34px; line-height: 1.5; counter-increment: dp-step; }
.dp-steps li::before { content: counter(dp-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--least); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dp-steps li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--accent-soft); }
.dp-more { margin: 8px 0 0; }
.dp-cmp-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dp-cmp-wrap:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.dp-cmp-t { border-collapse: collapse; width: 100%; font-size: var(--small); }
.dp-cmp-t th, .dp-cmp-t td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.dp-cmp-t tbody tr:last-child th, .dp-cmp-t tbody tr:last-child td { border-bottom: 0; }
.dp-cmp-t .dp-cmp-book { text-align: left; position: sticky; left: 0; background: var(--surface); min-width: 120px; max-width: 46vw; font-weight: 600; line-height: 1.3; }
.dp-cmp-t thead th { font-size: var(--least); font-weight: 700; color: var(--ink); vertical-align: bottom; }
.dp-cmp-col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 9em; overflow: hidden; text-overflow: ellipsis; }
.dp-mark { color: var(--accent); text-decoration: none; font-size: var(--body); display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; }
.dp-none { color: var(--line-strong); }
.dp-note { margin: 6px 0 0; font-size: var(--least); color: var(--muted); }
@media (min-width: 640px) {
  .dp-row { display: grid; grid-template-columns: 11rem 1fr; gap: 12px; }
  .dp-row dt { margin: 3px 0 0; }
  .dp-cmp-col span { writing-mode: horizontal-tb; transform: none; white-space: normal; max-height: none; }
}

/* CYCLE210-B-LD-BL-CHIP-PAGES-1 (R-262-B): bookslike.app topic pages (bl_topic.html). The lead and "Often found with" row
   above the groups; each group (reading age) a heading; each book its record line and its other chips. No FAQ rule. */
.tp-lead { margin: 0 0 10px; line-height: 1.55; max-width: 46rem; }
.tp-with { margin: 0 0 14px; }
.tp-n { font-weight: 400; opacity: .75; margin-left: 2px; }
.tp-band { margin: 18px 0 0; }
.tp-band h2 { font-size: var(--body); margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.tp-src { font-size: var(--small); color: var(--muted); overflow-wrap: anywhere; }
.tp-src a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: var(--tap); }
.tp-src q { font-style: italic; }
.tp-other { grid-column: 1 / -1; }
.tp-other .chip-label { margin: 6px 0 0; }