/* Mirrors the look of howsadisthischapter.com: Archivo Black + DM Sans,
   2px ink borders, hard offset shadows, a pink hero and highlighter
   badges. The colour tokens below are the only thing to change if you
   want an exact match with the site's palette. */
:root {
  /* Light mode: derived from the site's dark palette (same hues), until
     the exact light values are confirmed. */
  --background: oklch(98% .008 350);
  --foreground: oklch(16% .012 350);
  --card: oklch(100% 0 0);
  --muted: oklch(93% .012 350);
  --muted-foreground: oklch(45% .015 350);
  --primary: oklch(74% .21 350);
  --primary-foreground: oklch(16% .012 350);
  --highlight: oklch(85% .18 101);
  --highlight-foreground: oklch(16% .012 350);

  /* mood verdicts, as on the main site */
  --mood-go: #6cc47f;
  --mood-go-foreground: #0a0608;
  --mood-caution: #e5cd2c;
  --mood-caution-foreground: #0a0608;
  --mood-stop: #d4283f;
  --mood-stop-foreground: #ffffff;

  /* sadness scale, 1 (barely) to 5 (devastating) */
  --s1: #8fd694;
  --s2: #cde36b;
  --s3: #ffd93d;
  --s4: #ff9b42;
  --s5: #ff4a4a;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  color-scheme: light;
}
/* Dark mode: exact values from howsadisthischapter.com */
:root.dark {
  --background: oklch(13% .01 350);
  --foreground: oklch(97% .005 350);
  --card: oklch(19% .012 350);
  --muted: oklch(25% .012 350);
  --muted-foreground: oklch(75% .012 350);
  --primary: oklch(74% .21 350);
  --primary-foreground: oklch(13% .01 350);
  --highlight: oklch(85% .18 101);
  --highlight-foreground: oklch(13% .01 350);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Nothing should ever scroll sideways. */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
/* The installed app behaves like an app: no pinch zoom or sideways panning
   (the Me tab has text sizes instead). In the browser, zooming stays on. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html { touch-action: pan-y; }
}
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--background); color: var(--foreground);
  font: 1rem/1.5 var(--font);
}
main { flex: 1; outline: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img { display: block; }

.font-display { font-family: var(--display); font-weight: 400; }
.upper { text-transform: uppercase; }
.small { font-size: .78rem; }
.bold { font-weight: 700; }
.dim { opacity: .8; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
.loading, .empty { text-align: center; color: var(--muted-foreground); font-weight: 700; padding: 56px 16px; }

/* Nav */
.nav { border-bottom: 2px solid var(--foreground); padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
.nav-inner { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.brand { font-family: var(--display); text-transform: uppercase; font-size: .9rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unofficial { display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: middle; border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground); font-family: var(--font); font-size: .62rem; font-weight: 900; letter-spacing: .04em; }
.disclaimer { padding-bottom: 6px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: .9rem; text-decoration: none; min-height: 44px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 16px; border-radius: 6px;
  border: 2px solid var(--foreground); background: var(--background);
  font-weight: 900; font-size: .9rem; text-decoration: none; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 3px 3px 0 var(--foreground); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--foreground); }
.btn-outline { border-width: 1px; }
.btn-sm { min-height: 36px; padding: 4px 12px; font-size: .78rem; }
.btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); box-shadow: 3px 3px 0 var(--foreground); }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--primary); color: var(--primary-foreground);
  border-bottom: 2px solid var(--foreground);
  padding: 40px 16px 44px;
}
.hero-mark {
  position: absolute; right: -16px; top: -14px; transform: rotate(12deg);
  font-family: var(--display); font-size: 140px; line-height: 1;
  color: var(--background); opacity: .3; pointer-events: none;
}
.hero-inner { position: relative; max-width: 56rem; margin: 0 auto; }
.badge {
  display: inline-block; margin: 0 0 14px; padding: 4px 10px;
  border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground);
  font-size: .72rem; font-weight: 900; text-transform: uppercase;
}
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 11vw, 5.5rem); line-height: .98; margin: 0; overflow-wrap: anywhere; }
.hero .lede { margin: 16px 0 0; font-size: 1.1rem; font-weight: 700; max-width: 36rem; }
.search-box {
  display: flex; align-items: center; gap: 8px; margin-top: 26px; max-width: 42rem;
  padding: 6px 10px; border: 2px solid var(--foreground);
  background: var(--background); color: var(--foreground);
  box-shadow: 6px 6px 0 var(--foreground);
}
.search-box svg { flex: none; }
.search-box input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 1rem; outline: none; }

/* Section headings like "Recently added titles / Current Library" */
.section { padding-top: 36px; padding-bottom: 48px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--foreground); }
.eyebrow { margin: 0; font-size: .72rem; font-weight: 900; text-transform: uppercase; color: var(--primary); }
.section-head h2 { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
/* Four equal buttons that always fit the width; labels wrap rather than scroll. */
.sort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; padding: 2px 3px 4px 0; }
.sort .btn { min-width: 0; padding: 4px 4px; font-size: .74rem; line-height: 1.15; white-space: normal; text-align: center; }
@media (min-width: 560px) { .sort { display: flex; gap: 8px; } .sort .btn { flex: none; padding: 4px 12px; font-size: .78rem; } }

/* Book cards: compact, horizontal version of the site's cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; height: 100%;
  padding: 12px; border: 2px solid var(--foreground); background: var(--card);
  box-shadow: 5px 5px 0 var(--foreground); text-decoration: none;
  transition: transform .12s;
}
.card:hover { transform: translateY(-3px); }
.card:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--foreground); }
.cover {
  width: 100%; aspect-ratio: 2 / 3; object-fit: contain;
  border: 2px solid var(--foreground); background: var(--muted);
}
.cover-num { display: grid; place-items: center; font-family: var(--display); font-size: 1.6rem; }
.cover-num.v0 { background: var(--foreground); color: var(--background); }
.cover-num.v1 { background: var(--primary); color: var(--primary-foreground); }
.cover-num.v2 { background: var(--background); color: var(--foreground); }
.card-body { display: flex; flex-direction: column; min-width: 0; }
.card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; overflow-wrap: anywhere; }
.author { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); overflow-wrap: anywhere; }
.series-line { margin: 3px 0 0; font-size: .7rem; font-weight: 900; text-transform: uppercase; color: var(--primary); }
.card-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.card-foot .peak { padding: 1px 6px; border: 2px solid var(--foreground); color: var(--highlight-foreground); }
.more { display: flex; justify-content: center; margin-top: 28px; }

/* Book page */
.book-hero { padding: 24px 16px 36px; }
.book-hero .hero-inner { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 64rem; }
@media (min-width: 640px) { .book-hero .hero-inner { grid-template-columns: 180px minmax(0, 1fr); } }
.book-hero .cover { object-fit: cover; background: var(--foreground); box-shadow: 7px 7px 0 var(--background); }
.book-hero h1 { font-size: clamp(1.9rem, 8vw, 3.6rem); line-height: 1.05; }
.by { margin: 10px 0 0; font-size: 1.05rem; font-weight: 700; }
.part-of { margin: 8px 0 0; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.part-of a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-actions .btn { background: var(--background); color: var(--foreground); }

.book-body { max-width: 64rem; margin: 0 auto; padding: 28px 16px 48px; }
.note { margin: 0 0 22px; padding: 12px; border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground); font-size: .9rem; font-weight: 900; }
.panel { margin: 0 0 22px; padding: 14px; border: 2px solid var(--foreground); background: var(--card); box-shadow: 4px 4px 0 var(--foreground); }
.panel legend, .panel .legend-title { padding: 0 6px; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
fieldset.panel { min-width: 0; }
.panel h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.panel p { margin: 6px 0 0; font-size: .9rem; font-weight: 700; color: var(--muted-foreground); }
.panel select { width: 100%; min-height: 48px; margin-top: 10px; padding: 8px 10px; border: 2px solid var(--foreground); border-radius: 6px; background: var(--background); font-weight: 700; }
.ahead { margin-top: 12px !important; padding: 10px 12px; border: 2px solid var(--foreground); color: var(--foreground) !important; }
.ahead.hot { background: var(--s5); color: #110b0e !important; }
.ahead.ok { background: var(--s1); color: #110b0e !important; }
.ahead.unknown { background: var(--muted); }
.two { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .two { grid-template-columns: 1fr 1fr; } }
.two .btn { min-height: 48px; }

.moods { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .moods { grid-template-columns: 1fr 1fr; } }
.btn.mood { min-height: 56px; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.2; }
.mood-fine { background: var(--mood-go); color: var(--mood-go-foreground); }
.mood-fragile { background: var(--mood-caution); color: var(--mood-caution-foreground); }
.mood-devastated { background: var(--mood-stop); color: var(--mood-stop-foreground); }
.mood-enraged { background: var(--foreground); color: var(--background); }
.btn.mood[aria-pressed="true"] { box-shadow: 4px 4px 0 var(--foreground); outline: 3px solid var(--foreground); outline-offset: 2px; }
.btn.mood.mood-fine[aria-pressed="true"] { background: var(--mood-go); color: var(--mood-go-foreground); }
.btn.mood.mood-fragile[aria-pressed="true"] { background: var(--mood-caution); color: var(--mood-caution-foreground); }
.btn.mood.mood-devastated[aria-pressed="true"] { background: var(--mood-stop); color: var(--mood-stop-foreground); }
.btn.mood.mood-enraged[aria-pressed="true"] { background: var(--foreground); color: var(--background); }
.verdict { display: inline-block; margin: 14px 0 0; padding: 8px 12px; border: 2px solid var(--foreground); font-size: .85rem; font-weight: 900; text-transform: uppercase; }
.verdict.v-go { background: var(--mood-go); color: var(--mood-go-foreground); }
.verdict.v-caution { background: var(--mood-caution); color: var(--mood-caution-foreground); }
.verdict.v-stop { background: var(--mood-stop); color: var(--mood-stop-foreground); }
.verdict-hint { margin: 14px 0 0; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }
.chapters { display: grid; gap: 22px; }
.chapter { padding: 16px; border: 2px solid var(--foreground); background: var(--card); box-shadow: 5px 5px 0 var(--foreground); }
.chapter.here { outline: 4px solid var(--highlight); outline-offset: 3px; }
.chapter.past { opacity: .5; }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent); }
.chapter h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.chapter .count { margin: 4px 0 0; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }
.avg { text-align: right; }
.avg .num { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--primary); }
.avg .lbl { display: block; font-size: .6rem; font-weight: 900; text-transform: uppercase; color: var(--muted-foreground); }
.meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 12px; }
.meter span { height: 10px; border: 1.5px solid var(--foreground); background: var(--muted); }
.cw { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent); }
.cw-title { margin: 0; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.cw-hidden { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 6px 12px; border: 1px dashed var(--foreground); font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }
.cw-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cw-list span { padding: 3px 8px; border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground); font-size: .78rem; font-weight: 900; }
.cw-none { margin: 8px 0 0; font-size: .85rem; font-weight: 700; color: var(--muted-foreground); }
.rate-cta { margin-top: 30px; text-align: center; }

.s1 { background: var(--s1) !important; }
.s2 { background: var(--s2) !important; }
.s3 { background: var(--s3) !important; }
.s4 { background: var(--s4) !important; }
.s5 { background: var(--s5) !important; }

/* Footer, like the site's dark band */
.footer { border-top: 2px solid var(--foreground); background: var(--foreground); color: var(--background); padding: 28px 16px calc(92px + env(safe-area-inset-bottom)); }
.footer-inner { max-width: 72rem; margin: 0 auto; }
.footer p { margin: 0 0 8px; }
.tip { margin: 22px 0 16px; padding: 16px; border: 2px solid color-mix(in srgb, var(--background) 40%, transparent); }
.tip .btn { margin-top: 10px; }

dialog {
  width: min(92vw, 30rem); padding: 20px;
  border: 2px solid var(--foreground); background: var(--card); color: var(--foreground);
  box-shadow: 6px 6px 0 var(--foreground);
}
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog h2 { margin-top: 0; font-size: 1.5rem; }
dialog p { font-weight: 600; }

/* ---------- text size (Me tab) ---------- */
html.text-large { font-size: 112.5%; }
html.text-xl { font-size: 125%; }

/* ---------- bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--background); border-top: 2px solid var(--foreground);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 6px 4px;
  text-decoration: none; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted-foreground);
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--foreground); }
.tabbar a[aria-current="page"] svg { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 999px; padding: 2px 12px; width: 52px; height: 30px; box-shadow: 2px 2px 0 var(--foreground); }

/* The bottom bar is for phones only. Any window 768px or wider gets the tabs
   in a sticky header; a narrower window on a computer (mouse or trackpad)
   gets a hamburger menu instead. Width decides first, because some desktop
   browsers misreport their pointer. */
.menu-btn { display: none; }
@media (min-width: 768px), (hover: hover) and (pointer: fine) {
  .nav { position: sticky; top: 0; z-index: 50; background: var(--background); padding-top: 10px; padding-bottom: 10px; }
  .tabbar { position: static; display: flex; gap: 6px; padding: 0; border: 0; background: none; }
  .tabbar a { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 40px; padding: 6px 14px; font-size: .8rem; border: 2px solid transparent; border-radius: 999px; }
  .tabbar a:hover { color: var(--foreground); border-color: var(--foreground); }
  .tabbar svg { width: 18px; height: 18px; }
  .tabbar a[aria-current="page"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--foreground); box-shadow: 2px 2px 0 var(--foreground); }
  .tabbar a[aria-current="page"] svg { background: none; border: 0; padding: 0; width: 18px; height: 18px; box-shadow: none; color: inherit; }
  .brand { font-size: 1rem; }
  .footer { padding-bottom: 28px; }
  .toast { bottom: 24px; }
  [id^="ch-"] { scroll-margin-top: 84px; }
}
@media (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
  .nav-inner { position: relative; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px;
    border: 2px solid var(--foreground); background: var(--background); cursor: pointer; box-shadow: 2px 2px 0 var(--foreground);
  }
  .menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
  .menu-btn .icon-close, .nav.menu-open .menu-btn .icon-open { display: none; }
  .nav.menu-open .menu-btn .icon-close { display: block; }
  .tabbar {
    display: none; position: absolute; top: calc(100% + 12px); right: 0; bottom: auto; left: auto; z-index: 51; min-width: 200px;
    flex-direction: column; gap: 4px; padding: 8px;
    background: var(--background); border: 2px solid var(--foreground); box-shadow: 4px 4px 0 var(--foreground);
  }
  .nav.menu-open .tabbar { display: flex; }
  .tabbar a { font-size: .85rem; }
}

/* ---------- page heads for the tab pages ---------- */
.page-head { padding-top: 28px; padding-bottom: 8px; }
.page-head h1 { margin: 4px 0 6px; font-size: 2.4rem; line-height: 1; }
.muted { color: var(--muted-foreground); }
.muted a, .prompt a { color: inherit; font-weight: 900; }

/* ---------- library toolbar, filters ---------- */
.toolbar { margin: 0 0 18px; }
.toolbar:empty { display: none; }
.toolbar .sort { margin: 0; }
#filters-btn { flex: none; align-self: end; }
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .7rem; }
.preset-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 4px 6px 4px 12px; border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.preset-chip a { display: grid; place-items: center; width: 32px; height: 32px; color: inherit; }
.sheet { width: min(92vw, 26rem); }
.sheet form { margin-top: 16px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); font-weight: 700; cursor: pointer; }
.toggle:last-child { border-bottom: 0; }
.toggle input { flex: none; width: 24px; height: 24px; accent-color: var(--primary); }
.missing { margin-top: 28px; padding: 16px; border: 2px dashed var(--foreground); text-align: center; }
.missing p { margin: 0 0 6px; }
.missing .btn { margin-top: 8px; }

/* ---------- card extras ---------- */
.card .timeline { margin-top: 8px; }
.flag { padding: 1px 6px; border: 2px solid var(--foreground); }
.flag-avoid { background: var(--mood-stop); color: var(--mood-stop-foreground); }

/* ---------- sadness timeline ---------- */
.timeline { display: flex; gap: 1px; height: 10px; }
.timeline > * { flex: 1 1 0; min-width: 1px; border: 0; padding: 0; background: var(--muted); }
.timeline.interactive { height: 30px; gap: 2px; margin-top: 10px; }
.timeline.interactive > * { cursor: pointer; border: 1.5px solid var(--foreground); }
.timeline .t-none, .next .t-none { background: var(--muted); }
.timeline .v-go, .next .v-go { background: var(--mood-go); color: var(--mood-go-foreground); }
.timeline .v-caution, .next .v-caution { background: var(--mood-caution); color: var(--mood-caution-foreground); }
.timeline .v-stop, .next .v-stop { background: var(--mood-stop); color: var(--mood-stop-foreground); }
.timeline-key { font-size: .8rem !important; }
.legend-title { margin: 0; font-size: .72rem; font-weight: 900; text-transform: uppercase; font-family: var(--font); }

/* ---------- book page extras ---------- */
.segmented { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.segmented .btn { flex: 1; min-width: 90px; }
.next-title { margin: 14px 0 0 !important; font-size: .72rem !important; font-weight: 900; text-transform: uppercase; color: var(--foreground) !important; }
.next { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.next li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 2px solid var(--foreground); font-size: .85rem; font-weight: 800; color: #110b0e; }
.next li.t-none { color: var(--foreground); }
.next-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-score { flex: none; text-transform: uppercase; font-size: .75rem; }
.chapter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 10px; border: 2px solid var(--foreground); border-radius: 50%; background: var(--background); color: var(--foreground); cursor: pointer; }
.avoid-tag { margin-left: 6px; padding: 1px 6px; background: var(--mood-stop); color: var(--mood-stop-foreground); }
.cw-list span.is-avoided { background: var(--mood-stop); color: var(--mood-stop-foreground); }
.note.avoid-note { background: var(--mood-stop); color: var(--mood-stop-foreground); }
.note.dnf { background: var(--card); color: var(--foreground); }
.chapter.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 40% { outline: 4px solid var(--primary); outline-offset: 3px; } 100% { outline: 4px solid transparent; outline-offset: 3px; } }
.hero-actions .btn svg { flex: none; }

/* ---------- reading tab ---------- */
.shelf { padding-bottom: 40px; }
.reading-list { display: grid; gap: 18px; margin-top: 12px; }
.reading-card { padding: 14px; border: 2px solid var(--foreground); background: var(--card); box-shadow: 5px 5px 0 var(--foreground); }
.reading-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; text-decoration: none; }
.reading-top h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; }
.reading-top .timeline { margin-top: 10px; }
.progress { margin: 12px 0 0; font-weight: 800; font-size: .9rem; }
.reading-card .ahead { margin: 10px 0 0; padding: 10px 12px; border: 2px solid var(--foreground); font-size: .85rem; font-weight: 700; }
.shelf-title { margin: 32px 0 12px; font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.empty-shelf { margin-top: 12px; }
.empty-shelf .btn { margin-top: 14px; }

/* ---------- discover ---------- */
.discover { padding-bottom: 40px; }
.disc-section { margin-top: 26px; }
.disc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--foreground); }
.disc-head h2 { margin: 0; font-size: 1.4rem; line-height: 1.1; }
.disc-head p { margin: 4px 0 0; }
.prompt { margin: 0; font-weight: 700; }

/* ---------- me ---------- */
.settings { padding-top: 8px; padding-bottom: 40px; }
.settings .panel p { margin: 4px 0 10px; }
.checks { margin-top: 4px; }
.btn.danger { margin-top: 14px; width: 100%; border-color: var(--mood-stop); color: var(--mood-stop); background: transparent; }
.about p { color: var(--foreground) !important; font-weight: 600 !important; }
.about .btn { margin-top: 10px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground);
  font-weight: 900; box-shadow: 3px 3px 0 var(--foreground); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- installing the app ---------- */
.install-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  margin-top: 18px; padding: 10px 10px 10px 14px;
  border: 2px solid var(--foreground); background: var(--highlight); color: var(--highlight-foreground);
  box-shadow: 3px 3px 0 var(--foreground);
}
.install-banner p { margin: 0; font-size: .85rem; font-weight: 700; }
.install-banner .btn:not(.btn-primary) { background: var(--background); color: var(--foreground); }
.install-banner .icon-btn { margin: 0; width: 36px; height: 36px; }
.steps { margin: 8px 0 4px; padding-left: 1.4em; font-weight: 700; }
.steps li { margin: 0 0 8px; line-height: 1.6; }
.steps li::marker { font-weight: 900; color: var(--primary); }
.glyph {
  display: inline-block; width: 1.5em; height: 1.5em; margin: 0 2px; padding: 2px; vertical-align: -.45em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  border: 2px solid var(--foreground); border-radius: 6px; background: var(--background);
}
.glyph circle { fill: currentColor; stroke: none; }
.install .btn-primary { margin-top: 8px; }
.other-devices { margin-top: 10px; border-top: 2px solid var(--foreground); padding-top: 8px; }
.other-devices summary { cursor: pointer; font-weight: 900; font-size: .85rem; text-transform: uppercase; min-height: 32px; display: flex; align-items: center; }
.other-devices p.bold { margin: 10px 0 0; color: var(--foreground); }