:root {
  /* Primaire kleuren — Bold Renaissance */
  --c-bg: #FFF8EE;
  --c-bg-sunken: #F5EBD8;
  --c-bg-card: #FFFFFF;
  --c-bg-inverse: #1A0F0C;
  --c-ink: #1A0F0C;
  --c-ink-2: #3A2520;
  --c-ink-3: #8A6A60;
  --c-ink-mute: #74564E;
  --c-accent: #8A1F1A;
  --c-accent-2: #5E1411;
  --c-accent-soft: #F2D9C2;
  --c-gold: #C79A3B;

  /* Backward-compat aliassen */
  --c-cream: var(--c-bg);
  --c-panel: var(--c-bg-sunken);
  --c-muted: var(--c-ink-mute);
  --c-moss: var(--c-accent);
  --c-moss-dark: var(--c-accent-2);
  --c-moss-light: var(--c-accent-soft);
  --c-rule: rgba(26, 15, 12, 0.14);
  --c-terra: var(--c-accent);
  --c-terra-light: var(--c-accent-soft);
  --c-panel-2: var(--c-bg-sunken);
  --c-sky: #4e9fc5;
  --c-sky-soft: #dff2f8;
  --c-soil: var(--c-ink-2);
  --c-soil-dark: var(--c-bg-inverse);

  /* Typografie */
  --f-display: "DM Serif Display", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-ui: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", monospace;

  /* Aliassen voor bestaande CSS referenties */
  --font-display: var(--f-display);
  --font-reader: var(--f-display);
  --font-ui: var(--f-ui);
  --font-mono: var(--f-mono);

  /* Structuur */
  --r-card: 14px;
  --r-button: 999px;
  --r-input: 12px;
  --e-card: 0 12px 30px -18px rgba(26, 15, 12, 0.18);
}

@font-face {
  font-family: "DM Serif Display";
  src: url("/static/fonts/dm-serif-display/dm-serif-display-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("/static/fonts/dm-serif-display/dm-serif-display-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-ui);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 14%, rgba(138, 31, 26, 0.08), transparent 22rem),
    linear-gradient(180deg, var(--c-bg), var(--c-bg-sunken));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* New header layout */
.cv-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-rule);
}

.cv-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
}

.cv-header-left {
  flex: 0 0 auto;
}

.cv-header-center {
  flex: 0 0 auto;
}

.cv-brand {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  display: inline-block;
}

.cv-brand:hover {
  color: var(--c-accent);
}

.cv-header-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
}

.cv-navlink {
  font-size: 0.95rem;
  color: var(--c-ink-2);
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}

.cv-navlink:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.cv-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.account-name {
  font-size: 0.9rem;
  color: var(--c-ink-2);
}

.account-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-accent);
  overflow: hidden;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cv-icon-button {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-ink-2);
  padding: 0;
  transition: color 120ms;
}

.cv-icon-button:hover {
  color: var(--c-accent);
}

.cv-icon-button svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

.nav-icon-form {
  display: contents;
}

.cv-header-stripe {
  height: 4px;
  background: var(--c-accent);
}

/* Button component */
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-button);
  min-height: 2.5rem;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}

.cv-btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}

.cv-btn--primary:hover {
  background: var(--c-ink-2);
  border-color: var(--c-ink-2);
}

.cv-btn--accent {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.cv-btn--accent:hover {
  background: var(--c-accent-2);
  border-color: var(--c-accent-2);
}

.cv-btn--ghost {
  border-color: var(--c-ink);
  color: var(--c-ink);
  background: transparent;
}

.cv-btn--ghost:hover {
  background: var(--c-bg-sunken);
}

/* Card component */
.cv-card {
  background: var(--c-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--c-rule);
  box-shadow: var(--e-card);
  padding: 1.5rem;
}

/* Chip / Tag component */
.cv-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--c-rule);
  background: var(--c-bg);
  color: var(--c-ink);
  cursor: pointer;
  transition: all 120ms;
}

.cv-chip:hover,
.cv-chip[data-active="true"] {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.cv-chip--filled {
  background: var(--c-bg-sunken);
  border-color: var(--c-rule);
}

.cv-chip--accent {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* Eyebrow / Label */
.cv-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

/* Book cover component */
.ccov {
  aspect-ratio: 3 / 4.4;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: var(--f-display);
  line-height: 1;
}

.ccov::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
}

.ccov-title {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ccov-author {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  opacity: 0.9;
}

.ccov-card {
  transition: transform 150ms;
  cursor: pointer;
}

.ccov-card:hover {
  transform: translateY(-2px);
}

/* Progress bar */
.cv-progress {
  height: 4px;
  background: var(--c-rule);
  border-radius: 2px;
  overflow: hidden;
}

.cv-progress > * {
  height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
}

.edition-mode-grid {
  display: grid;
  gap: 0.85rem;
}

.edition-mode-row {
  display: grid;
  gap: 0.85rem;
  align-content: space-between;
  min-height: 8.5rem;
  border: 1px solid color-mix(in srgb, var(--c-moss-dark) 45%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      rgba(82, 143, 38, 0.24) 0 var(--mode-progress),
      rgba(241, 248, 229, 0.92) var(--mode-progress) 100%
    );
  padding: 1rem;
}

.edition-mode-row-main {
  display: grid;
  gap: 0.35rem;
}

.edition-mode-row-main strong {
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-weight: 900;
}

.edition-mode-row-main span {
  color: var(--c-ink-2);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Landing page hero */
.cv-landing-hero {
  padding: 4rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.cv-today-excerpt,
.cv-excerpt-page {
  display: grid;
  gap: 1rem;
  max-width: 54rem;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--c-rule);
  padding: clamp(1.4rem, 4vw, 3rem) 0;
}

.cv-today-excerpt blockquote,
.cv-excerpt-page blockquote {
  margin: 0;
  color: var(--c-ink);
  font: 1.24rem/1.7 var(--font-reader);
}

.cv-excerpt-page blockquote {
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
}

.cv-excerpt-intro {
  max-width: 46rem;
  margin: 0;
  color: var(--c-ink-2);
  font: italic 1.08rem/1.55 var(--font-reader);
}

.cv-excerpt-source,
.cv-excerpt-today,
.cv-excerpt-afterword {
  margin: 0;
  color: var(--c-ink-mute);
}

.cv-excerpt-source a {
  color: var(--c-ink);
  text-decoration-color: var(--c-gold);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

.cv-excerpt-page h1 {
  margin: 0;
  font-family: var(--font-reader);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
}

.cv-excerpt-archive ol {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.cv-excerpt-archive li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 16rem);
  gap: 1rem;
  border-top: 1px solid var(--c-rule);
  padding-top: 0.75rem;
}

.cv-excerpt-archive time,
.cv-excerpt-archive span {
  color: var(--c-ink-mute);
  font-size: 0.85rem;
}

.cv-hero-text {
  text-align: center;
  max-width: 720px;
}

.cv-hero-title {
  font-family: var(--f-display);
  font-size: clamp(4rem, 8vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0 0 1.5rem 0;
  color: var(--c-ink);
}

.cv-accent-c {
  color: var(--c-accent);
}

.cv-hero-tagline {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-style: italic;
  color: var(--c-ink-2);
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.cv-hero-tagline em {
  font-style: italic;
}

.cv-hero-subtitle {
  font-size: 1.05rem;
  color: var(--c-ink-mute);
  margin: 0 0 2rem 0;
  line-height: 1.5;
}

.cv-hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pillars section */
.cv-pillars {
  background: var(--c-bg-inverse);
  color: #fff;
  padding: 4rem clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
}

.cv-pillar {
  position: relative;
}

.cv-pillar-num {
  font-family: var(--f-mono);
  font-size: 3.5rem;
  font-weight: 700;
  opacity: 0.15;
  line-height: 1;
  margin-bottom: 1rem;
}

.cv-pillar h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  margin: 0 0 0.75rem 0;
  color: #fff;
}

.cv-pillar p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

/* Featured books section */
.cv-featured {
  padding: 4rem clamp(1rem, 4vw, 3rem);
  background: var(--c-bg);
}

.cv-section-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 2rem 0;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.cv-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem;
}

/* Dashboard */
.cv-dashboard {
  padding: 0;
}

.cv-dashboard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 2rem 0;
}

.cv-greeting {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--c-ink);
}

.cv-dashboard-head .cv-mode-toggle {
  margin-bottom: 0;
}

/* Profile page */
.cv-profile {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.cv-chart-block {
  margin-top: 1.25rem;
}

.cv-chart-legend {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-ink-mute);
}

.cv-chart-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cv-chart-key::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.cv-chart-key--wpm::before {
  background: #6f9a52;
}

.cv-chart-key--keys::before {
  background: #3d7f86;
}

.cv-chart-scroll {
  overflow-x: auto;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 76%, var(--c-bg));
  padding: 0.7rem 0.8rem 0.85rem;
}

.cv-bar-chart {
  display: block;
  width: auto;
  max-width: none;
  min-width: 420px;
  height: auto;
  overflow: visible;
}

.cv-bar-grid,
.cv-bar-axis-line {
  stroke: var(--c-rule);
  stroke-width: 1;
}

.cv-bar-grid {
  opacity: 0.72;
}

.cv-bar-axis {
  font-size: 9px;
  font-weight: 700;
  fill: var(--c-ink-mute);
}

.cv-bar-axis--wpm {
  fill: #6f9a52;
}

.cv-bar-axis--keys {
  fill: #3d7f86;
}

.cv-chart-axis-label {
  font-size: 10px;
  font-weight: 800;
}

.cv-bar-day-label {
  font-size: 9px;
  font-weight: 700;
  fill: var(--c-ink-mute);
}

.cv-chart-day {
  outline: none;
}

.cv-chart-day-hit {
  fill: transparent;
  stroke: transparent;
}

.cv-chart-bar {
  transition:
    filter 0.15s ease,
    opacity 0.15s ease;
}

.cv-chart-bar--wpm {
  fill: #6f9a52;
}

.cv-chart-bar--keys {
  fill: #3d7f86;
}

.cv-chart-day:hover .cv-chart-bar,
.cv-chart-day:focus .cv-chart-bar {
  filter: drop-shadow(0 2px 4px rgba(37, 32, 23, 0.22));
}

.cv-chart-day:focus .cv-chart-day-hit {
  stroke: color-mix(in srgb, var(--c-accent) 72%, var(--c-ink));
  stroke-width: 1;
}

.cv-chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.cv-chart-day:hover .cv-chart-tooltip,
.cv-chart-day:focus .cv-chart-tooltip {
  opacity: 1;
}

.cv-chart-tooltip-box {
  fill: color-mix(in srgb, var(--c-bg-card) 94%, white);
  stroke: var(--c-rule);
  stroke-width: 1;
  filter: drop-shadow(0 8px 18px rgba(37, 32, 23, 0.16));
}

.cv-chart-tooltip-text {
  font-size: 10px;
  font-weight: 700;
  fill: var(--c-ink);
}

.cv-chart-tooltip-title {
  font-weight: 800;
  fill: var(--c-ink);
}

.cv-profile-book {
  margin-bottom: 0.6rem;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 80%, var(--c-bg));
  overflow: hidden;
}

.cv-profile-book--complete {
  border-color: color-mix(in srgb, var(--c-accent) 38%, var(--c-rule));
  background: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg-card));
}

.cv-profile-book-head,
.cv-profile-book--read {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  list-style: none;
}

.cv-profile-book-head {
  cursor: pointer;
}

.cv-profile-book-head::-webkit-details-marker {
  display: none;
}

.cv-profile-book-cover {
  flex: 0 0 auto;
  width: 2.4rem;
}

.cv-profile-book-cover .book-cover {
  width: 2.4rem;
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
}

.cv-profile-book-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cv-profile-book-title {
  font-weight: 850;
  text-decoration: none;
  color: var(--c-ink);
}

.cv-profile-book-sub {
  color: var(--c-ink-mute);
  font-size: 0.82rem;
  font-weight: 700;
}

.cv-profile-book-stat {
  flex: 0 0 auto;
  min-width: 4rem;
  text-align: center;
}

.cv-profile-book-stat strong {
  display: block;
  font-size: 1.05rem;
}

.cv-profile-book-stat span {
  color: var(--c-ink-mute);
  font-size: 0.72rem;
  font-weight: 700;
}

.cv-profile-book-progress {
  display: block;
  height: 5px;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: var(--c-rule);
  overflow: hidden;
}

.cv-profile-book-progress span {
  display: block;
  height: 100%;
  background: var(--c-accent);
}

.cv-section-head-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cv-notes-filter {
  margin: 0 0 1rem;
}

.cv-notes-filter .cv-field {
  min-width: min(16rem, 100%);
}

.cv-notes-panel {
  margin-top: 1rem;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
  overflow: hidden;
}

.cv-notes-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-weight: 900;
}

.cv-notes-panel summary::-webkit-details-marker {
  display: none;
}

.cv-notes-panel summary strong {
  color: var(--c-ink-mute);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.cv-note-list {
  display: grid;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

.cv-note-list--profile {
  padding: 0;
}

.cv-note-card {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 90%, var(--c-bg));
  padding: 0.9rem;
}

.cv-note-book {
  color: var(--c-ink);
  font-weight: 900;
  text-decoration: none;
}

.cv-note-book:hover {
  text-decoration: underline;
}

.cv-note-card blockquote {
  margin: 0;
  border-left: 3px solid var(--c-moss);
  color: var(--c-ink-2);
  font-family: var(--font-reader);
  line-height: 1.55;
  padding-left: 0.75rem;
}

.cv-note-card p {
  margin: 0;
  color: var(--c-ink);
  line-height: 1.55;
}

.cv-note-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--c-ink-mute);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .cv-section-head-inline,
  .cv-note-card footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.cv-chapter-bests {
  display: grid;
  gap: 0.1rem;
  padding: 0.3rem 0.95rem 0.7rem;
  border-top: 1px solid var(--c-rule);
}

.cv-chapter-best {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.32rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 50%, transparent);
  font-size: 0.85rem;
}

.cv-chapter-best:last-child {
  border-bottom: 0;
}

.cv-chapter-best-name {
  font-weight: 700;
}

.cv-chapter-best-val {
  font-weight: 850;
}

.cv-chapter-best-val em {
  font-style: normal;
  margin-left: 0.15rem;
  color: var(--c-ink-mute);
  font-size: 0.72rem;
  font-weight: 700;
}

.cv-chapter-best-attempts {
  color: var(--c-ink-mute);
  font-size: 0.78rem;
  font-weight: 700;
}

.cv-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.cv-metric-card {
  background: var(--c-bg-card);
  border-radius: var(--r-card);
  padding: 1.5rem;
  border: 1px solid var(--c-rule);
}

.cv-metric-label {
  display: block;
  font-size: 0.85rem;
  color: var(--c-ink-mute);
  margin-bottom: 0.5rem;
}

.cv-metric-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  font-family: var(--f-display);
}

/* Hero book card */
.cv-hero-book {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  background: var(--c-bg-card);
  border-radius: var(--r-card);
  padding: 2rem;
  border: 1px solid var(--c-rule);
  margin-bottom: 3rem;
}

.cv-hero-book--complete {
  border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-rule));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-accent) 13%, var(--c-bg-card)) 0%,
    var(--c-bg-card) 100%
  );
}

.cv-hero-book-cover {
  display: block;
  aspect-ratio: 3 / 4.4;
  border-radius: var(--r-card);
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: var(--e-card);
}

.cv-hero-book-content h2 {
  font-family: var(--f-display);
  font-size: 1.8rem;
  margin: 0 0 0.5rem 0;
}

.cv-hero-book-author {
  color: var(--c-ink-mute);
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}

.cv-hero-book-quote {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--c-ink-2);
  margin: 1.5rem 0;
  line-height: 1.5;
}

.cv-progress-label {
  font-size: 0.85rem;
  color: var(--c-ink-mute);
  margin-top: 0.5rem;
}

.cv-hero-book .cv-btn {
  margin-top: 1rem;
}

.cv-for-you {
  display: grid;
  gap: 0.6rem;
  margin: 2rem 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding: 1.2rem 0;
}

.cv-for-you h2 {
  margin: 0;
  font-family: var(--font-reader);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.cv-for-you p:not(.cv-eyebrow) {
  max-width: 58ch;
  margin: 0;
  color: var(--c-ink-2);
}

.cv-today-foryou {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.cv-today-foryou > .cv-today-excerpt,
.cv-today-foryou > .cv-for-you {
  flex: 1;
  min-width: 0;
}

@media (max-width: 700px) {
  .cv-today-foryou {
    flex-direction: column;
  }
}

.cv-section-title-small {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 2rem 0 1rem 0;
}

.cv-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}

.cv-empty-state {
  text-align: center;
  color: var(--c-ink-mute);
  padding: 2rem;
  margin: 1rem 0;
}

/* Library page */
.cv-library-header {
  margin-bottom: 2rem;
}

.cv-book-count {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-accent);
  margin: 0;
}

/* Backward compat — old button classes alias to new ones */
.btn-primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  border-radius: var(--r-button);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--c-accent);
  display: inline-block;
  text-align: center;
}

.btn-soft {
  border: 1.5px solid var(--c-ink);
  color: var(--c-ink);
  background: transparent;
  border-radius: var(--r-button);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--c-rule);
  background: color-mix(in srgb, var(--c-cream) 92%, transparent);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-wordmark {
  display: block;
  width: 8.6rem;
  height: 2.35rem;
  object-fit: contain;
}

.nav-links,
.language-links,
.nav-actions,
.auth-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-actions {
  gap: 0.7rem;
  margin-left: auto;
}

.nav-link {
  border-radius: 8px;
  color: var(--c-ink-2);
  font-size: 0.88rem;
  padding: 0.55rem 0.8rem;
}

.nav-link:hover {
  background: var(--c-bg);
  color: var(--c-ink);
}

.auth-register {
  border: 1px solid var(--c-rule);
}

.account-menu {
  position: relative;
}

.account-menu summary {
  align-items: center;
  border-radius: 999px;
  color: var(--c-ink-2);
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
  list-style: none;
  padding: 0.22rem 0.28rem 0.22rem 0.75rem;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu summary:hover,
.account-menu[open] summary {
  background: var(--c-bg);
  color: var(--c-ink);
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.account-name {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.account-avatar {
  align-items: center;
  aspect-ratio: 1;
  background: var(--c-moss);
  border: 1px solid color-mix(in srgb, var(--c-moss) 50%, var(--c-rule));
  border-radius: 50%;
  color: var(--c-cream);
  display: inline-flex;
  flex: 0 0 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  height: 2.2rem;
  justify-content: center;
  overflow: hidden;
  width: 2.2rem;
}

.account-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.account-dropdown {
  background: var(--c-cream);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--c-ink) 12%, transparent);
  display: grid;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.4rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
}

.account-dropdown a,
.account-dropdown button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--c-ink-2);
  cursor: pointer;
  display: block;
  font-size: 0.9rem;
  padding: 0.58rem 0.7rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: var(--c-bg);
  color: var(--c-ink);
}

.nav-icon-form {
  margin: 0;
}

.nav-icon-button,
.nav-icon-form .nav-icon-button[type="submit"] {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  min-height: 0;
  place-items: center;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-ink-2);
  padding: 0;
  text-decoration: none;
}

.nav-icon-button svg {
  width: 1.12rem;
  height: 1.12rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.nav-icon-button:hover,
.nav-icon-button:focus-visible,
.nav-icon-form .nav-icon-button[type="submit"]:hover,
.nav-icon-form .nav-icon-button[type="submit"]:focus-visible {
  background: var(--c-panel);
  color: var(--c-moss-dark);
}

.lang-link {
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.32rem 0.55rem;
}

.page {
  margin: 0 auto;
  max-width: 1280px;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--c-rule);
  color: var(--c-ink-2);
  margin: 0 auto;
  max-width: 1280px;
  padding: 1.3rem clamp(1rem, 4vw, 3rem) 2rem;
}

.site-footer > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}

.site-footer p {
  color: var(--c-muted);
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem 0.9rem;
  justify-content: flex-end;
  white-space: nowrap;
  min-width: 0;
}

.site-footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.verify-banner {
  border: 1px solid color-mix(in srgb, var(--c-terra) 45%, var(--c-rule));
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-terra) 13%, var(--c-cream));
  color: var(--c-ink-2);
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
  min-height: calc(100svh - 6.5rem);
}

.eyebrow,
.label {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  background: var(--c-cream);
  color: var(--c-ink-2);
  padding: 0.35rem 0.75rem;
}

.hero h1,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.hero h1 {
  margin: 1.35rem 0 1.2rem;
  max-width: 12ch;
  font-size: clamp(3rem, 8vw, 5.3rem);
  line-height: 0.98;
}

.hero em {
  color: var(--c-moss);
  font-style: italic;
}

.hero-copy {
  max-width: 35rem;
  color: var(--c-ink-2);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.62;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn-primary,
.btn-ghost,
.btn-soft {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
}

.btn-primary {
  border: 1px solid var(--c-ink);
  background: var(--c-ink);
  color: var(--c-cream);
  font-weight: 600;
}

.btn-ghost {
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
}

.btn-soft {
  border: 1px solid var(--c-rule);
  background: var(--c-cream);
  color: var(--c-ink);
}

.home-dashboard {
  display: grid;
  gap: 1rem;
}

.continue-card {
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-cream);
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
}


.continue-art-slot {
  display: grid;
  place-items: center;
}

.continue-card h2 {
  margin: 0.45rem 0 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
}

.continue-stats {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
  margin: 1rem 0;
}

.continue-stats div {
  border-top: 1px solid var(--c-rule);
  padding-top: 0.5rem;
}

.continue-stats dt {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.continue-stats dd {
  margin: 0.2rem 0 0;
}

.continue-card {
  position: relative;
  overflow: hidden;
}

.continue-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6.5rem;
  background: linear-gradient(180deg, var(--c-sky-soft), transparent);
  content: "";
}

.continue-card > * {
  position: relative;
}

.book-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: 1.5rem;
}

.book-card {
  display: flex;
  min-height: 21rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-cream) 92%, white);
  box-shadow: 0 0.8rem 1.8rem rgba(38, 34, 26, 0.08);
  transition: transform 160ms ease, border-color 160ms ease;
}

.book-card:hover {
  border-color: var(--c-moss);
  transform: translateY(-0.22rem);
}

.book-cover {
  position: relative;
  overflow: hidden;
  height: clamp(12.5rem, 20vw, 15.75rem);
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 76% 22%, rgba(254, 199, 0, 0.34), transparent 4rem),
    linear-gradient(180deg, #dff4ff 0 52%, #cfeea7 52% 64%, #9d6a38 64%);
}

.book-cover-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.book-cover img,
.book-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.book-cover-plant {
  align-items: end;
  padding: 0.6rem 1rem 0.2rem;
}

.book-cover-plant img {
  height: 9.2rem;
  width: min(78%, 10rem);
  object-fit: contain;
}

.book-card-content {
  display: grid;
  gap: 0.38rem;
  padding: 1rem 1.15rem 1.15rem;
}

.book-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.32rem;
  padding: 1rem 1.15rem 1.15rem;
}

.book-card-content > *,
.book-card-body > *,
.book-card-body h3 {
  margin: 0;
}

.book-title {
  display: block;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.08;
}

.book-meta {
  color: var(--c-muted);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
}

.book-author {
  color: var(--c-muted);
  font-size: 0.84rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-book-card .btn-primary {
  margin-top: auto;
  width: 100%;
}

.catalog-filters {
  grid-template-columns: minmax(13rem, 1fr) minmax(9rem, 0.34fr) auto auto auto;
}

input,
select,
textarea {
  border: 2px solid var(--c-rule);
  border-radius: 16px;
  background: var(--c-cream);
  color: var(--c-ink);
  font-weight: 700;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-moss);
  outline: 3px solid rgba(88, 204, 2, 0.2);
}

.edition-item {
  display: grid;
  align-items: center;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--c-rule);
  border-bottom-width: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--c-moss-light) 18%, #f8fbf3);
  padding: 1rem;
}

.edition-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--edition-progress, 0%);
  background: color-mix(in srgb, var(--c-moss) 30%, var(--c-moss-light));
  content: "";
}

.edition-item:has(input:checked) {
  border-color: var(--c-moss-dark);
  background: rgba(135, 254, 69, 0.18);
}

.edition-item-main,
.edition-item-action {
  position: relative;
  z-index: 1;
}

.detail-grid {
  display: grid;
  align-items: start;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.45fr);
}

.detail-panel {
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-cream) 88%, white);
  padding: 1.2rem;
}

.detail-panel .book-cover {
  height: clamp(16rem, 42vw, 26rem);
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
}

.detail-panel dl {
  display: grid;
  gap: 0.35rem 0.8rem;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.detail-panel dt {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-panel dd {
  margin: 0;
}

.edition-list {
  display: grid;
  gap: 0.85rem;
}

.edition-item-main {
  display: grid;
  gap: 0.25rem;
}

.edition-item-main p,
.edition-progress-label {
  color: var(--c-muted);
  margin: 0;
}

.edition-item-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.detail-copy,
.about-page p,
.legal-page p,
.legal-page li,
.principle p,
.book-card p {
  color: var(--c-ink-2);
  font-weight: 600;
}

/* New shell layout — top header, no sidebar padding */
body.cv-shell {
  padding-left: 0;
}

body.cv-shell .page {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(2.3rem, 4.5vw, 3.8rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}

/* Old shell layout — keep for backward compat, will be cleaned up in step 13 */
/* Old site-shell sidebar layout removed — now using cv-shell top header */

body.is-authenticated .app-page > h1 {
  display: none;
}

.admin-tabs {
  border-bottom: 0;
}

.admin-tabs a.is-active,
.level-link.is-active,
.ai-tabs button.is-active {
  border-color: var(--c-moss-dark);
  border-bottom-width: 4px;
  background: var(--c-moss);
  color: #123b00;
}

.admin-table th {
  color: var(--c-moss-dark);
  font-family: var(--font-ui);
  font-weight: 900;
}

.admin-table th,
.admin-table td {
  border-bottom: 2px solid rgba(190, 203, 177, 0.8);
}

.status-running,
.status-generating {
  border-color: #d9a800;
  background: #fff4c5;
}

.status-queued,
.status-draft {
  border-color: var(--c-line);
  background: var(--c-paper);
}

.status-succeeded,
.status-generated,
.status-imported,
.status-ready,
.status-pass {
  border-color: var(--c-moss-dark);
  background: rgba(135, 254, 69, 0.22);
}

.status-warn,
.status-blocked,
.status-skip {
  border-color: #d9a800;
  background: #fff4c5;
}

.status-failed,
.status-canceled,
.status-fail {
  border-color: #ba1a1a;
  background: #ffdad6;
}

.reader-shell {
  --reader-size: 19px;
  --reader-line: 1.72;
  --reader-width: 66ch;
  background: #fbf9f8;
}

.reader-shell[data-reader-font="source-serif"] .reader-article,
.reader-shell[data-reader-font="dm-serif"] .reader-article,
.reader-article {
  font-family: var(--font-reader);
}

/* Header account link (name + avatar -> profile) */
.account-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.15rem 0.15rem 0.15rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  transition: background 140ms ease;
}

.account-link:hover {
  background: color-mix(in srgb, var(--c-bg-card) 70%, var(--c-bg));
}

/* Settings page */
.settings-page {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  max-width: 52rem;
}

.settings-message {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--c-accent) 35%, var(--c-rule));
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg-card));
  color: var(--c-ink);
  font-weight: 750;
  padding: 0.8rem 1rem;
}

.settings-panel {
  padding: clamp(1.25rem, 3vw, 1.85rem);
}

.settings-panel-title {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.05;
}

.settings-panel-desc {
  margin: 0 0 1rem;
  max-width: 48ch;
  color: var(--c-ink-2);
  font-weight: 600;
  line-height: 1.6;
}

.settings-fields {
  display: grid;
  gap: 1rem;
}

.settings-fields--two {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.settings-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.settings-field-label {
  color: var(--c-ink-mute);
  font-size: 0.82rem;
  font-weight: 800;
}

.settings-field-hint {
  color: var(--c-ink-mute);
  font-size: 0.78rem;
  font-weight: 600;
}

.settings-input--narrow {
  max-width: 9rem;
}

.settings-file {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-2);
}

.settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0;
}

.settings-avatar {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1rem;
}

.settings-avatar-row .settings-field {
  flex: 1 1 auto;
}

.settings-appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

.settings-range {
  width: 100%;
  margin-top: 0.5rem;
  accent-color: var(--c-accent);
}

.settings-language-checks {
  margin: 1rem 0 0;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-input);
  padding: 0.9rem 1.05rem 1rem;
  display: grid;
  gap: 0.5rem;
}

.settings-language-checks legend {
  padding: 0 0.35rem;
  color: var(--c-ink-mute);
  font-size: 0.82rem;
  font-weight: 800;
}

.settings-language-checks > p {
  margin: 0 0 0.25rem;
  color: var(--c-ink-mute);
  font-size: 0.8rem;
  font-weight: 600;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
}

.check-row input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-accent);
}

.settings-actions {
  margin-top: 1.4rem;
}

.settings-export-status {
  margin: 0 0 0.5rem;
  color: var(--c-ink-2);
  font-weight: 700;
}

.settings-export-error {
  margin: 0 0 0.5rem;
  color: #b1432f;
  font-weight: 700;
}

.settings-panel--danger {
  border-color: color-mix(in srgb, #b1432f 45%, var(--c-rule));
}

.settings-delete-btn {
  border: 1.5px solid color-mix(in srgb, #b1432f 55%, var(--c-rule));
  background: transparent;
  color: #b1432f;
}

.settings-delete-btn:hover {
  background: color-mix(in srgb, #b1432f 12%, transparent);
}

.settings-preview {
  margin: 1.1rem 0 0;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--c-bg-card) 76%, var(--c-bg));
  padding: 1rem 1.1rem;
  color: var(--c-ink);
  font-family: var(--font-reader);
  line-height: 1.6;
}

.reader-shell[data-reader-font="dm-serif"] .reader-article {
  font-family: var(--f-display);
}

.reader-side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 35;
  display: grid;
  align-content: start;
  gap: 0.65rem;
  width: 13.5rem;
  border-right: 3px solid var(--c-rule);
  background: var(--c-panel);
  padding: 1.4rem 1rem;
}

.reader-side-nav a,
.reader-side-nav span {
  border: 2px solid transparent;
  border-radius: 16px;
  color: var(--c-ink-2);
  font-weight: 900;
  padding: 0.75rem 0.85rem;
}

.reader-side-nav .reader-side-brand {
  display: grid;
  width: 4.7rem;
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto 1rem;
  border: 3px solid var(--c-moss-dark);
  border-bottom-width: 6px;
  border-radius: 50%;
  background: var(--c-moss);
  color: #123b00;
}

.reader-side-nav span {
  border-color: var(--c-moss-dark);
  border-bottom-width: 5px;
  background: var(--c-moss);
  color: #123b00;
}

.reader-topbar {
  left: 0;
  right: 0;
  border-bottom: 3px solid var(--c-rule);
  background: rgba(255, 255, 255, 0.94);
}

.reader-back {
  color: var(--c-moss-dark);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 900;
}

.reader-main {
  margin-left: auto;
  margin-right: auto;
}

.reader-article h1 {
  color: var(--c-ink);
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-align: center;
}

.reader-article h1::after {
  display: block;
  width: 4.5rem;
  height: 0.32rem;
  margin: 1rem auto 0;
  border-radius: 999px;
  background: var(--c-moss);
  content: "";
}

.reader-article p:first-of-type::first-letter {
  color: var(--c-moss-dark);
  font-family: var(--font-ui);
  font-weight: 900;
}

.reader-bottom-nav {
  left: 0;
  right: 0;
  border-top: 3px solid var(--c-rule);
  background: rgba(255, 255, 255, 0.95);
}

.chapter-progress div {
  height: 0.85rem;
  border: 2px solid var(--c-rule);
  background: var(--c-panel-2);
}

.chapter-progress i {
  background: var(--c-moss);
}

.info-bubble {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--c-sky);
  background: var(--c-sky-soft);
  color: #004a6b;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding-bottom: 0.02rem;
}

.bubble-popover {
  border: 2px solid var(--c-rule);
  border-bottom-width: 5px;
  border-radius: 18px;
  background: var(--c-cream);
}

.ai-panel {
  border-left-width: 3px;
}

.ai-panel-header h2 {
  color: var(--c-moss-dark);
  font-weight: 900;
}



@media (max-width: 1020px) {
  body.site-shell {
    padding-left: 0;
  }

  body.site-shell .site-nav,
  .reader-side-nav {
    position: sticky;
    inset: auto;
    width: auto;
    height: auto;
    max-height: none;
    flex-direction: row;
    border-right: 0;
    border-bottom: 3px solid var(--c-rule);
    padding: 0.8rem 1rem;
  }

  body.site-shell .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  body.site-shell .brand {
    justify-content: flex-start;
    margin: 0;
  }

  body.site-shell .nav-links,
  body.site-shell .nav-actions,
  body.site-shell .language-links {
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: calc(100vw - 2rem);
  }

  body.site-shell .nav-links {
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  body.site-shell .nav-links::-webkit-scrollbar {
    display: none;
  }

  body.site-shell .nav-link {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
  }

  body.site-shell .nav-actions {
    display: block;
    margin: 0;
  }

  body.site-shell .account-actions {
    flex-wrap: wrap;
  }

  body.site-shell .account-prompt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: min(100%, calc(100vw - 3rem));
    max-width: calc(100vw - 3rem);
    padding: 0.75rem;
  }

  body.site-shell .account-prompt p {
    grid-column: 1 / -1;
  }

  .reader-side-nav {
    display: none;
  }

  .reader-topbar,
  .reader-bottom-nav {
    left: 0;
  }

  .reader-main {
    width: min(var(--reader-width), calc(100vw - 2rem));
    margin: 0 auto;
  }

}

@media (max-width: 820px) {
  .site-nav {
    align-items: stretch;
  }

  body.site-shell .account-prompt {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-hero,
  .site-footer {
    display: grid;
  }

  .dashboard-streak {
    min-width: 0;
  }

  .catalog-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-shell.is-public .page > h1:first-child {
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
}

.site-shell.is-public .hero {
  min-height: auto;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.8rem) 0 clamp(3rem, 8vw, 5rem);
}






.reader-shell .install-banner {
  display: none;
}

@media (max-width: 820px) {
  .site-shell.is-public .page {
    width: 100%;
    padding-inline: 1.25rem;
  }

  .site-shell.is-public .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 1rem;
  }

  .site-shell.is-public .hero > *,
  .site-shell.is-public .hero-copy {
    min-width: 0;
    max-width: 100%;
  }

  .site-shell.is-public .hero-copy {
    overflow-wrap: break-word;
  }



  .install-banner {
    left: 1rem;
    right: 1rem;
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .site-shell.is-public .hero-copy {
    max-width: 22rem;
  }
}


/* Simplified reading experience */
.language-links {
  display: none !important;
}

.book-cover.book-cover-has-image::after,
.book-cover.book-cover-has-image::before {
  content: none;
}

.dashboard-book-grid,
.featured-book-grid,
.book-grid {
  align-items: stretch;
}

.dashboard-book-card .book-card-body,
.book-card-content {
  min-width: 0;
}

/* UI consistency pass: local Coltiva primitives and shared book surfaces */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.route-home .page > h1:first-child {
  display: none;
}

.route-book-detail .page > h1:first-child {
  display: none;
}

.route-genealogy .page > h1:first-child,
.route-genealogy-track .page > h1:first-child {
  display: none;
}

.route-home .page {
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

body.is-authenticated.route-home .page {
  padding-top: clamp(2.8rem, 5vw, 4.2rem);
}

body.cv-shell.route-library .page,
body.cv-shell.route-profile .page,
body.cv-shell.route-genealogy .page,
body.cv-shell.route-genealogy-track .page,
body.cv-shell.route-library-hall .page {
  padding-top: clamp(2.8rem, 5vw, 4.2rem);
}

body.cv-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

body.cv-shell .cv-header,
body.cv-shell .site-footer {
  flex: 0 0 auto;
}

body.cv-shell .page {
  width: 100%;
  flex: 1 0 auto;
}

.cv-btn,
.btn-primary,
.btn-ghost,
.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  border-radius: var(--r-button);
  border: 1.5px solid transparent;
  padding: 0.72rem 1.15rem;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.cv-btn:hover,
.btn-primary:hover,
.btn-ghost:hover,
.btn-soft:hover {
  transform: translateY(-1px);
}

.cv-btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-soft:focus-visible,
.cv-input:focus-visible,
.cv-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 24%, transparent);
  outline-offset: 3px;
}

.cv-btn--accent,
.btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

.cv-btn--accent:hover,
.btn-primary:hover {
  background: var(--c-accent-2);
  border-color: var(--c-accent-2);
  box-shadow: 0 12px 24px -18px rgba(26, 15, 12, 0.7);
}

.cv-btn--primary {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

.cv-btn--ghost,
.btn-ghost,
.btn-soft {
  background: color-mix(in srgb, var(--c-bg-card) 68%, transparent);
  border-color: color-mix(in srgb, var(--c-ink) 42%, var(--c-rule));
  color: var(--c-ink);
}

.cv-btn--ghost:hover,
.btn-ghost:hover,
.btn-soft:hover {
  background: var(--c-bg-card);
  border-color: var(--c-accent);
  color: var(--c-accent-2);
}

.cv-btn--sm {
  min-height: 2.35rem;
  padding: 0.58rem 0.9rem;
  font-size: 0.86rem;
}

.cv-toolbar {
  display: grid;
  align-items: center;
  gap: 0.8rem;
}

.cv-field {
  min-width: 0;
}

.cv-input,
.cv-select {
  width: 100%;
  min-height: 2.75rem;
  border: 1.5px solid color-mix(in srgb, var(--c-ink) 16%, var(--c-rule));
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--c-bg-card) 72%, var(--c-bg));
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.72rem 0.95rem;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.cv-input::placeholder {
  color: color-mix(in srgb, var(--c-ink-mute) 74%, transparent);
}

.cv-input:focus,
.cv-select:focus {
  border-color: var(--c-accent);
  background: #fff;
  outline: none;
}

.cv-select {
  appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - 0.7rem) 50%;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
}

.cv-action-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.catalog-filters {
  grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 0.28fr) auto;
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
}

.catalog-filter-actions {
  justify-content: flex-end;
}

.cv-cover-grid.cv-book-shelf,
.cv-featured .cv-cover-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.cv-books-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.book-card {
  border-radius: var(--r-card);
  border-color: color-mix(in srgb, var(--c-ink) 13%, transparent);
  background: color-mix(in srgb, var(--c-bg-card) 76%, var(--c-bg));
  box-shadow: 0 16px 35px -30px rgba(26, 15, 12, 0.55);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.book-card:hover,
.book-card:focus-within {
  border-color: color-mix(in srgb, var(--c-accent) 52%, var(--c-rule));
  box-shadow: 0 18px 38px -25px rgba(26, 15, 12, 0.42);
  transform: translateY(-0.22rem);
}

.book-card--shelf {
  display: flex;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}

.book-card--shelf:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 24%, transparent);
  outline-offset: 4px;
}

.book-card--shelf .book-cover,
.dashboard-book-card .book-cover {
  height: auto;
  aspect-ratio: 1;
  border-bottom: 1px solid var(--c-rule);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  background: var(--c-bg-sunken);
}

.book-card--shelf .book-cover-image,
.dashboard-book-card .book-cover-image {
  object-position: center;
  transition: transform 220ms ease;
}

.book-card--shelf:hover .book-cover-image,
.dashboard-book-card:hover .book-cover-image {
  transform: scale(1.025);
}

.book-card--shelf .book-card-content {
  gap: 0.5rem;
  padding: 1.2rem 1.3rem 1.35rem;
}

.book-card-title,
.book-card--shelf h3 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.08;
}

.book-card--shelf .book-author,
.dashboard-book-card .book-author {
  color: var(--c-ink-mute);
  font-size: 0.88rem;
  font-weight: 800;
}

.dashboard-book-card .book-card-body {
  gap: 0.6rem;
  padding: 1.2rem 1.3rem 1.35rem;
}

.dashboard-book-card .cv-btn {
  width: 100%;
  margin-top: auto;
}

.dashboard-book-card--complete {
  border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-rule));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-accent) 12%, var(--c-bg-card)) 0%,
    color-mix(in srgb, var(--c-bg-card) 78%, var(--c-bg)) 100%
  );
}

.cv-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.72fr);
  align-items: center;
  justify-content: stretch;
  gap: clamp(2rem, 6vw, 5rem);
  min-height: min(700px, calc(100svh - 7rem));
  padding: clamp(1.2rem, 4vw, 3rem) 0 clamp(2.6rem, 6vw, 4.5rem);
}

.cv-hero-text {
  max-width: 45rem;
  text-align: left;
}

.cv-hero-title {
  max-width: 10.5ch;
  margin: 0 0 1.1rem;
  font-size: clamp(3.25rem, 7.6vw, 7.2rem);
  line-height: 0.94;
}

.cv-hero-tagline {
  max-width: 38rem;
  font-size: clamp(1.18rem, 2.2vw, 1.65rem);
}

.cv-hero-subtitle {
  max-width: 39rem;
  color: var(--c-ink-2);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
}

.cv-hero-actions {
  justify-content: flex-start;
}

.cv-hero-book-stack {
  position: relative;
  min-height: clamp(22rem, 42vw, 34rem);
}

.cv-hero-preview-card {
  position: absolute;
  display: block;
  width: min(68%, 18rem);
  border: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-bg-card);
  box-shadow: 0 22px 48px -30px rgba(26, 15, 12, 0.55);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cv-hero-preview-card:hover,
.cv-hero-preview-card:focus-visible {
  transform: translateY(-0.3rem) rotate(var(--hero-tilt, 0deg));
  box-shadow: 0 26px 56px -30px rgba(26, 15, 12, 0.68);
  outline: none;
}

.cv-hero-preview-card .book-cover {
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
}

.cv-hero-preview-card span {
  display: block;
  padding: 0.75rem 0.85rem 0.85rem;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.05;
}

.cv-hero-preview-card--1 {
  --hero-tilt: -4deg;
  z-index: 3;
  left: 10%;
  top: 11%;
  transform: rotate(-4deg);
}

.cv-hero-preview-card--2 {
  --hero-tilt: 5deg;
  z-index: 2;
  right: 0;
  top: 0;
  transform: rotate(5deg);
}

.cv-hero-preview-card--3 {
  --hero-tilt: 2deg;
  z-index: 1;
  left: 29%;
  bottom: 0;
  transform: rotate(2deg);
}

.cv-pillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 4vw, 3rem);
  border-radius: calc(var(--r-card) + 6px);
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.cv-scribe-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  border: 1px solid color-mix(in srgb, var(--c-accent) 22%, var(--c-rule));
  border-radius: calc(var(--r-card) + 6px);
  background:
    radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--c-accent-soft) 55%, transparent), transparent 18rem),
    color-mix(in srgb, var(--c-bg-card) 80%, var(--c-bg));
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

.cv-scribe-feature h2 {
  margin: 0.35rem 0 0.5rem;
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 0.98;
}

.cv-scribe-feature p:not(.cv-eyebrow) {
  max-width: 43rem;
  margin: 0;
  color: var(--c-ink-2);
  font-weight: 650;
  line-height: 1.55;
}

.cv-featured {
  padding: 0 0 clamp(2rem, 5vw, 4rem);
  background: transparent;
}

.cv-book-detail-hero {
  margin: clamp(1.25rem, 3.5vw, 2.5rem) 0 clamp(1.6rem, 4vw, 3rem);
  border-radius: calc(var(--r-card) + 8px);
  background:
    radial-gradient(circle at 86% 8%, rgba(242, 217, 194, 0.2), transparent 16rem),
    var(--c-bg-inverse);
  color: #fff;
  padding: clamp(1.25rem, 4vw, 2.6rem);
}

.cv-back-link {
  display: inline-flex;
  margin-bottom: 1.35rem;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
  text-decoration: none;
}

.cv-back-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.cv-book-detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: end;
}

.cv-book-detail-cover .book-cover {
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-card);
  box-shadow: 0 20px 48px -30px rgba(0, 0, 0, 0.9);
}

.cv-book-detail-copy h1 {
  margin: 0 0 0.55rem;
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 0.94;
}

.cv-book-detail-author {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 800;
}

.cv-book-detail-description {
  max-width: 56rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  line-height: 1.62;
}

.cv-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.cv-detail-meta-item {
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 76%, var(--c-bg));
  padding: 1rem 1.1rem;
}

.cv-detail-meta-label {
  margin-bottom: 0.35rem;
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cv-detail-meta-value {
  color: var(--c-ink);
  font-weight: 850;
}

/* Hero tagline (short one-liner under author) */
.cv-book-detail-tagline {
  max-width: 46rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
}

.cv-book-connections {
  margin: clamp(1.8rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding: 1.5rem 0;
}

.cv-book-connections h2 {
  margin: 0 0 1.2rem;
  font-family: var(--font-reader);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
}

.cv-book-connection-group + .cv-book-connection-group {
  margin-top: 1.3rem;
}

.cv-book-connection-group h3 {
  margin: 0 0 0.6rem;
  color: var(--c-ink-mute);
  font: italic 1rem var(--font-reader);
}

.cv-book-connection-group ul {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-book-connection-group a {
  color: var(--c-ink);
  font-family: var(--font-reader);
  font-weight: 800;
  text-decoration: none;
}

.cv-book-connection-group a:hover {
  color: var(--c-moss-dark);
}

.cv-book-connection-group p {
  max-width: 64ch;
  margin: 0.2rem 0 0;
  color: var(--c-ink-2);
  line-height: 1.6;
}

.cv-book-connections--compact {
  margin-top: 1.4rem;
}

/* "Over dit boek" introduction */
.cv-book-about {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cv-book-about-body {
  max-width: 62ch;
}

.cv-book-about-body p {
  margin: 0 0 1rem;
  color: var(--c-ink-2);
  font-size: 1.05rem;
  font-weight: 550;
  line-height: 1.72;
}

.cv-book-about-body p:last-child {
  margin-bottom: 0;
}

/* Reading section: mode toggle + level list */
.cv-reading {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.cv-mode-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.28rem;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg-card) 76%, var(--c-bg));
}

.cv-mode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cv-mode-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  color: var(--c-ink-mute);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cv-mode-input:checked + .cv-mode-tab {
  background: var(--c-bg-inverse);
  color: #fff;
}

.cv-mode-input:focus-visible + .cv-mode-tab {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.cv-level-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

/* Each level is one full-width row that doubles as a progress bar:
   the .cv-level-fill tints the background up to the active mode's progress. */
.cv-level-row {
  display: grid;
  gap: 0.5rem;
}

.cv-level-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
  padding: 0.65rem 0.7rem 0.65rem 1rem;
}

.cv-level-card--read-complete,
.cv-reading:has(#cv-mode-scribe:checked) .cv-level-card--scribe-complete {
  border-color: color-mix(in srgb, var(--c-accent) 46%, var(--c-rule));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-accent) 17%, var(--c-bg-card)) 0%,
    color-mix(in srgb, var(--c-bg-card) 84%, var(--c-bg)) 100%
  );
}

.cv-reading:has(#cv-mode-scribe:checked) .cv-level-card--read-complete:not(.cv-level-card--scribe-complete) {
  border-color: var(--c-rule);
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
}

.cv-level-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 0 0 14rem;
}

.cv-level-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.05;
}

.cv-level-meta {
  color: var(--c-ink-mute);
  font-size: 0.8rem;
  font-weight: 700;
}

.cv-level-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.cv-level-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--mode-progress, 0%);
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  pointer-events: none;
  z-index: 0;
}

.cv-level-action--complete .cv-level-fill {
  width: 100%;
  background: color-mix(in srgb, var(--c-accent) 9%, transparent);
}

.cv-level-complete-mark {
  position: relative;
  z-index: 1;
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-accent) 72%, var(--c-moss-dark));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
}

.cv-level-complete-mark::before {
  content: "\2713";
}

.cv-level-progress {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  text-align: center;
  color: var(--c-ink-2);
  font-size: 0.85rem;
  font-weight: 700;
}

.cv-level-action--complete .cv-level-progress {
  color: var(--c-ink);
  text-align: left;
}

.cv-level-action .cv-btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.cv-level-outline-toggle {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-button);
  background: color-mix(in srgb, var(--c-bg-card) 88%, var(--c-bg));
  color: var(--c-ink-2);
  padding: 0.55rem 0.8rem;
  font: 800 0.82rem var(--f-ui);
  cursor: pointer;
}

.cv-level-outline-toggle:hover,
.cv-level-outline-toggle[aria-expanded="true"] {
  border-color: var(--c-ink);
  color: var(--c-ink);
}

.cv-level-outline-toggle::after {
  content: "v";
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.15s ease;
}

.cv-level-outline-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.cv-level-outline-panel {
  border: 1px solid var(--c-rule);
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
  padding: 1rem 1rem 1rem 1.15rem;
}

.cv-level-outline-panel[hidden] {
  display: none;
}

.cv-paths {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.cv-paths-head {
  max-width: 54rem;
}

.cv-paths-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.96;
}

.cv-paths-intro {
  max-width: 48rem;
  margin: 0;
  color: var(--c-ink-2);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 650;
  line-height: 1.62;
}

.cv-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
}

.cv-path-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-ink) 13%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 78%, var(--c-bg));
  color: inherit;
  box-shadow: 0 18px 38px -30px rgba(26, 15, 12, 0.55);
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.cv-path-card:hover,
.cv-path-card:focus-visible {
  border-color: color-mix(in srgb, var(--c-accent) 52%, var(--c-rule));
  box-shadow: 0 22px 44px -28px rgba(26, 15, 12, 0.48);
  transform: translateY(-0.22rem);
  outline: none;
}

.cv-path-cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-bg-sunken);
}

.cv-path-art {
  display: block;
  width: 100%;
  height: 100%;
}

.cv-path-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 220ms ease;
}

.cv-path-card:hover .cv-path-art img {
  transform: scale(1.025);
}

.cv-path-art--empty {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 18%, var(--c-bg-card)), var(--c-bg-sunken));
}

.cv-path-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 1rem;
}

.cv-path-collage-item {
  display: block;
  transform: rotate(var(--path-cover-tilt, 0deg));
}

.cv-path-collage-item:nth-child(1) {
  --path-cover-tilt: -3deg;
}

.cv-path-collage-item:nth-child(2) {
  --path-cover-tilt: 2deg;
}

.cv-path-collage-item:nth-child(3) {
  --path-cover-tilt: -1deg;
}

.cv-path-collage-item .book-cover {
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  box-shadow: 0 14px 30px -22px rgba(26, 15, 12, 0.55);
}

.cv-path-badge {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(26, 15, 12, 0.74);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0.38rem 0.7rem;
  backdrop-filter: blur(10px);
}

.cv-path-badge--done {
  background: color-mix(in srgb, var(--c-accent) 86%, var(--c-bg-inverse));
}

.cv-path-body {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1.25rem 1.35rem 1.4rem;
}

.cv-path-title {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.02;
}

.cv-path-desc {
  color: var(--c-ink-2);
  font-weight: 650;
  line-height: 1.58;
}

.cv-path-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin-top: 0.25rem;
}

.cv-path-steps {
  flex: 0 0 auto;
  color: var(--c-ink-mute);
  font-size: 0.84rem;
  font-weight: 850;
}

.cv-path-bar {
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  height: 0.45rem;
  min-width: 5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-rule) 80%, transparent);
}

.cv-path-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
}

.cv-path-card-action {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-top: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--c-accent) 44%, var(--c-rule));
  border-radius: 999px;
  color: var(--c-accent-2);
  font-size: 0.84rem;
  font-weight: 850;
  padding: 0.48rem 0.82rem;
}

.cv-track {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.cv-track-head {
  display: grid;
  grid-template-columns: minmax(18rem, 0.96fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.6rem);
  align-items: end;
  overflow: hidden;
  border-radius: calc(var(--r-card) + 8px);
  background: var(--c-bg-inverse);
  color: #fff;
  padding: clamp(1.15rem, 3vw, 2rem);
}

.cv-track-cover {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-inverse) 80%, #fff);
  box-shadow: 0 22px 52px -32px rgba(0, 0, 0, 0.9);
}

.cv-track-cover .cv-path-cover {
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.cv-track-headbody {
  min-width: 0;
}

.cv-track-title {
  max-width: 13ch;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.8vw, 4.8rem);
  font-weight: 400;
  line-height: 0.94;
}

.cv-track-desc {
  max-width: 52rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 650;
  line-height: 1.62;
}

.cv-track-progress {
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
  margin-top: 1.15rem;
}

.cv-track-progress-bar {
  display: block;
  overflow: hidden;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.cv-track-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent-soft);
}

.cv-track-progress-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 850;
}

.cv-track-hint {
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.cv-track-levelform {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.cv-track-levelform--start {
  max-width: 38rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cv-track-level-label {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cv-level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cv-level-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 850;
  padding: 0.52rem 0.82rem;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.cv-level-chip--button {
  appearance: none;
  font: inherit;
}

.cv-level-chip--active,
.cv-level-chip:hover {
  border-color: var(--c-accent-soft);
  background: var(--c-accent-soft);
  color: var(--c-bg-inverse);
}

.cv-level-chip:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.24);
  outline-offset: 2px;
}

.cv-track-steps {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-track-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(5.75rem, 7.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--c-ink) 13%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-bg-card) 80%, var(--c-bg));
  padding: 0.9rem;
  box-shadow: 0 14px 30px -28px rgba(26, 15, 12, 0.55);
}

.cv-track-step--current {
  border-color: color-mix(in srgb, var(--c-accent) 58%, var(--c-rule));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 13rem),
    color-mix(in srgb, var(--c-bg-card) 86%, var(--c-bg));
  box-shadow: 0 18px 38px -28px rgba(26, 15, 12, 0.5);
}

.cv-track-step--done {
  border-color: color-mix(in srgb, var(--c-accent) 32%, var(--c-rule));
}

.cv-track-step-index {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-ink) 12%, var(--c-rule));
  border-radius: 999px;
  background: var(--c-bg-card);
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 900;
}

.cv-track-step--current .cv-track-step-index,
.cv-track-step--done .cv-track-step-index {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

.cv-track-step-cover {
  display: block;
  min-width: 0;
  color: inherit;
}

.cv-track-step-cover .book-cover {
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--c-bg-sunken);
}

.cv-track-step-cover .book-cover-image {
  object-position: center;
}

.cv-track-step-body {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.cv-track-step-eyebrow {
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cv-track-step-title {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 400;
  line-height: 1.04;
}

.cv-track-step-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cv-track-step-author {
  margin: 0;
  color: var(--c-ink-mute);
  font-size: 0.86rem;
  font-weight: 850;
}

.cv-track-step-note {
  max-width: 62ch;
  margin: 0.25rem 0 0;
  color: var(--c-ink-2);
  font-weight: 620;
  line-height: 1.58;
}

.cv-track-step-soon {
  color: var(--c-ink-mute);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 850;
}

.cv-track-step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.cv-track-step-stat {
  color: var(--c-ink-mute);
  font-size: 0.84rem;
  font-weight: 850;
}

.cv-track-step-stat--done {
  color: var(--c-accent-2);
}

.cv-connections {
  display: grid;
  gap: 1.25rem;
}

.cv-connections-list {
  display: grid;
  gap: 0.85rem;
}

.cv-connection-work {
  border-top: 1px solid var(--c-rule);
  padding-top: 0.85rem;
}

.cv-connection-work summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  cursor: pointer;
  list-style: none;
}

.cv-connection-work summary::-webkit-details-marker {
  display: none;
}

.cv-connection-work summary strong {
  font-family: var(--font-reader);
  font-size: 1.2rem;
}

.cv-connection-work summary span,
.cv-connection-work li span {
  color: var(--c-ink-mute);
  font-size: 0.85rem;
}

.cv-connection-work ul {
  display: grid;
  gap: 0.85rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.cv-connection-work li a {
  color: var(--c-ink);
  font-weight: 850;
  text-decoration: none;
}

.cv-connection-work li p {
  max-width: 70ch;
  margin: 0.2rem 0 0;
  color: var(--c-ink-2);
}

.cv-connection-graph {
  overflow-x: auto;
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
}

.cv-connection-graph svg {
  display: block;
  min-width: 900px;
  width: 100%;
  height: auto;
}

.cv-connection-edge {
  stroke: color-mix(in srgb, var(--c-ink-mute) 62%, transparent);
  stroke-width: 1.4;
}

.cv-connection-edge--counterpart,
.cv-connection-edge--response_to {
  stroke: var(--c-terra);
}

.cv-connection-edge--natural_sequel,
.cv-connection-edge--successor {
  stroke: var(--c-moss-dark);
}

.cv-connection-node circle {
  fill: var(--c-bg);
  stroke: var(--c-ink);
  stroke-width: 1.4;
}

.cv-connection-node text {
  fill: var(--c-ink);
  font: 800 0.72rem var(--font-ui);
}

.cv-connection-set-list {
  display: grid;
  gap: 0.75rem;
}

.cv-connection-set-link {
  display: grid;
  gap: 0.25rem;
  border-top: 1px solid var(--c-rule);
  color: var(--c-ink);
  padding-top: 0.75rem;
  text-decoration: none;
}

.cv-connection-set-link span {
  color: var(--c-ink-2);
}

.cv-track-step-mini-bar {
  display: block;
  overflow: hidden;
  width: min(100%, 22rem);
  height: 0.42rem;
  margin-top: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-rule) 80%, transparent);
}

.cv-track-step-mini-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
}

/* Read shows by default; the scribe toggle swaps the visible action */
.cv-level-action--scribe {
  display: none;
}

.cv-reading:has(#cv-mode-scribe:checked) .cv-level-action--read {
  display: none;
}

.cv-reading:has(#cv-mode-scribe:checked) .cv-level-action--scribe {
  display: flex;
}

@media (max-width: 600px) {
  .cv-level-card {
    flex-wrap: wrap;
  }

  .cv-level-action {
    width: 100%;
  }

  .cv-level-outline-toggle {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 980px) {
  .cv-landing-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .cv-hero-book-stack {
    min-height: 24rem;
  }

  .cv-pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-scribe-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-filters {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.42fr);
  }

  .catalog-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .cv-track-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-track-cover {
    max-width: 46rem;
  }
}

@media (max-width: 700px) {
  .cv-header-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .cv-header-left {
    display: none;
  }

  .cv-header-center,
  .cv-header-nav,
  .cv-header-actions {
    width: 100%;
    min-width: 0;
  }

  .cv-header-center {
    display: flex;
    justify-content: flex-start;
  }

  .cv-header-nav {
    justify-content: flex-start;
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
  }

  .cv-header-nav::-webkit-scrollbar {
    display: none;
  }

  .cv-navlink {
    flex: 0 0 auto;
  }

  .cv-header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cv-header-actions > .cv-btn {
    flex: 1 1 9rem;
  }

  .cv-landing-hero {
    padding-top: 0.75rem;
  }

  .cv-hero-book-stack {
    min-height: 20rem;
  }

  .cv-hero-preview-card {
    width: min(62%, 14rem);
  }

  .cv-cover-grid.cv-book-shelf,
  .cv-featured .cv-cover-grid,
  .cv-books-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-filters,
  .cv-book-detail-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv-track-step {
    grid-template-columns: auto minmax(4.75rem, 5.75rem) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .catalog-filter-actions {
    flex-wrap: wrap;
  }

  .catalog-filter-actions .cv-btn {
    flex: 1 1 9rem;
  }

  .cv-book-detail-cover {
    max-width: 15rem;
  }
}

@media (max-width: 560px) {
  .cv-path-body {
    padding: 1rem;
  }

  .cv-track-step {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cv-track-step-cover {
    grid-column: 1 / -1;
    width: min(9rem, 52vw);
  }

  .cv-track-step-body {
    grid-column: 1 / -1;
  }
}

.reader-shell {
  --reader-size: 19px;
  --reader-line: 1.72;
  --reader-width: 66ch;
  min-height: 100vh;
  background: #fbf9f2;
  color: var(--c-ink);
}

.reader-topbar,
.reader-bottom-nav {
  position: fixed;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  border-color: var(--c-rule);
  background: color-mix(in srgb, var(--c-cream) 94%, transparent);
  backdrop-filter: blur(12px);
}

.reader-topbar {
  top: 0;
  left: 0;
  right: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-rule);
}

.reader-topbar-main,
.reader-topbar-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.reader-book-title {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-topbar-meta {
  color: var(--c-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.reader-topbar-actions {
  display: flex;
  flex: 1 1 34rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-width: min(100%, 28rem);
  margin-left: 0;
}

.reader-mode-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 10.25rem;
  min-height: 2.15rem;
  border: 1px solid color-mix(in srgb, var(--c-ink) 16%, var(--c-rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg-card) 78%, var(--c-bg));
  color: var(--c-ink-mute);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.18rem;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.reader-mode-toggle::before {
  position: absolute;
  inset: 0.18rem auto 0.18rem 0.18rem;
  width: calc(50% - 0.18rem);
  border-radius: inherit;
  background: var(--c-ink);
  box-shadow: 0 8px 18px -14px rgba(26, 15, 12, 0.7);
  content: "";
  transition: transform 180ms ease, background-color 180ms ease;
}

.reader-mode-toggle[aria-pressed="true"]::before {
  background: var(--c-accent);
  transform: translateX(100%);
}

.reader-mode-toggle:hover {
  border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-rule));
}

.reader-mode-toggle:focus-visible,
.reader-tool-button:focus-visible,
.reader-settings-gear:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 24%, transparent);
  outline-offset: 3px;
}

.reader-tool-button {
  display: inline-grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-ink) 14%, var(--c-rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg-card) 86%, var(--c-bg));
  color: var(--c-ink);
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.reader-tool-button svg,
.reader-bookmark-delete svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.05;
}

.reader-tool-button:hover,
.reader-tool-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--c-accent) 44%, var(--c-rule));
  background: color-mix(in srgb, var(--c-accent) 11%, var(--c-bg-card));
  transform: translateY(-1px);
}

.reader-mode-toggle-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 0.45rem;
  text-align: center;
  transition: color 180ms ease;
}

.reader-mode-toggle[aria-pressed="false"] .reader-mode-toggle-option--read,
.reader-mode-toggle[aria-pressed="true"] .reader-mode-toggle-option--scribe {
  color: var(--c-bg);
}

.reader-settings-slot {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
}

.reader-settings-gear {
  display: inline-grid;
  grid-area: 1 / 1;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, transform 120ms ease;
}

.reader-settings-gear[hidden] {
  display: none;
}

.reader-settings-gear svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.reader-settings-gear:hover,
.reader-settings-gear[aria-expanded="true"] {
  background: var(--c-accent-2);
  transform: translateY(-1px);
}

.reader-main {
  width: min(var(--reader-width), calc(100vw - 2rem));
  margin: 0 auto;
  padding: 6rem 0 8rem;
  position: relative;
}

.reader-drawer {
  position: fixed;
  top: 5.85rem;
  right: 1rem;
  z-index: 80;
  display: grid;
  width: min(25rem, calc(100vw - 2rem));
  max-height: calc(100vh - 7rem);
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-ink) 12%, var(--c-rule));
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-bg-card) 94%, var(--c-bg));
  box-shadow: 0 24px 70px -46px rgba(26, 15, 12, 0.62);
}

.reader-drawer[hidden] {
  display: none;
}

.reader-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 80%, transparent);
  padding: 1rem;
}

.reader-drawer-header h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 900;
}

.reader-drawer-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-rule) 80%, transparent);
  padding: 0.65rem 0.75rem;
}

.reader-drawer-tabs button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink-mute);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0.48rem 0.55rem;
}

.reader-drawer-tabs button.is-active {
  border-color: color-mix(in srgb, var(--c-accent) 36%, var(--c-rule));
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg-card));
  color: var(--c-ink);
}

.reader-drawer-panel {
  min-height: 0;
  overflow: auto;
  padding: 0.8rem;
}

.reader-nav-list,
.reader-search-results {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reader-nav-list a,
.reader-search-results a,
.reader-bookmark-card a {
  display: grid;
  gap: 0.18rem;
  border: 1px solid color-mix(in srgb, var(--c-rule) 76%, transparent);
  border-radius: 8px;
  color: inherit;
  padding: 0.75rem;
  text-decoration: none;
}

.reader-nav-list a:hover,
.reader-search-results a:hover,
.reader-bookmark-card a:hover,
.reader-nav-list a.is-active {
  border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-rule));
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
}

.reader-nav-list span,
.reader-search-results span,
.reader-bookmark-card span {
  color: var(--c-ink-mute);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reader-nav-list strong,
.reader-search-results strong,
.reader-bookmark-card strong {
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.reader-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}

.reader-search-status,
.reader-bookmark-status,
.reader-empty-state {
  color: var(--c-ink-mute);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  margin: 0.3rem 0 0.8rem;
}

.reader-search-status.is-error,
.reader-bookmark-status.is-error {
  color: var(--c-accent);
}

.reader-search-results p,
.reader-bookmark-card p {
  color: var(--c-ink-mute);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.15rem 0 0;
}

.reader-bookmark-list {
  display: grid;
  gap: 0.5rem;
}

.reader-bookmark-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: 0.45rem;
  align-items: start;
}

.reader-bookmark-delete {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-rule) 80%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink-mute);
  cursor: pointer;
  padding: 0;
}

.reader-bookmark-delete:hover {
  border-color: color-mix(in srgb, var(--c-accent) 36%, var(--c-rule));
  color: var(--c-accent);
}

.reader-search-focus {
  border-radius: 8px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 13%, transparent);
}

.reader-article {
  font-family: var(--font-display);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
}

.reader-article p,
.chapter-intro,
.chapter-outro {
  margin: 0 0 1.35rem;
}

.reader-article h1 {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  text-align: center;
}

.chapter-intro,
.chapter-outro {
  border-left: 3px solid var(--c-moss);
  color: var(--c-ink-2);
  font-style: italic;
  padding-left: 1rem;
}

.reader-bottom-nav {
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: space-between;
  border-top: 1px solid var(--c-rule);
}

.chapter-progress {
  display: grid;
  gap: 0.35rem;
  min-width: min(20rem, 45vw);
  color: var(--c-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.chapter-progress div {
  overflow: hidden;
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-rule) 70%, transparent);
}

.chapter-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-moss);
}

.reader-settings-panel {
  position: fixed;
  top: 4.4rem;
  right: clamp(0.75rem, 3vw, 2rem);
  z-index: 60;
  width: min(360px, calc(100vw - 1.5rem));
  border: 1px solid color-mix(in srgb, var(--c-ink) 14%, var(--c-rule));
  border-radius: calc(var(--r-card) + 2px);
  background: color-mix(in srgb, var(--c-bg-card) 86%, var(--c-bg));
  box-shadow: 0 1.1rem 2.5rem -1.4rem rgba(26, 15, 12, 0.44);
  display: grid;
  gap: 1rem;
  padding: 1rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.reader-settings-panel::before {
  position: absolute;
  top: -0.45rem;
  right: 1.8rem;
  width: 0.85rem;
  height: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--c-ink) 14%, var(--c-rule));
  border-left: 1px solid color-mix(in srgb, var(--c-ink) 14%, var(--c-rule));
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

.reader-settings-panel[hidden] {
  display: none;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.section-heading h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ink);
}

.reader-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.reader-settings-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.05;
}

.reader-settings-grid {
  display: grid;
  gap: 0.85rem;
  position: relative;
  z-index: 1;
}

.reader-setting-field {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.reader-setting-field > span {
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reader-settings-panel .cv-select {
  min-height: 2.55rem;
  border-radius: 12px;
  background-color: #fff;
}

.reader-range {
  width: 100%;
  accent-color: var(--c-accent);
}

.reader-settings-toggles {
  display: grid;
  gap: 0.65rem;
  position: relative;
  z-index: 1;
}

.reader-settings-actions {
  display: grid;
  gap: 0.65rem;
  position: relative;
  z-index: 1;
}

.reader-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--c-ink) 11%, var(--c-rule));
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-bg-card) 70%, transparent);
  padding: 0.7rem 0.75rem;
  color: var(--c-ink-2);
  font-weight: 700;
}

.reader-admin-edit {
  margin-bottom: 1.5rem;
  font-family: var(--font-ui);
}

.reader-admin-edit details {
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-panel);
  padding: 0.9rem;
}

.reader-admin-edit summary {
  cursor: pointer;
  font-weight: 900;
}

.reader-admin-edit form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.reader-admin-edit label {
  display: grid;
  gap: 0.35rem;
  color: var(--c-ink-2);
  font-size: 0.9rem;
  font-weight: 800;
}

.reader-admin-edit input,
.reader-admin-edit textarea {
  width: 100%;
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: #fff;
  color: var(--c-ink);
  font: 500 0.95rem/1.55 var(--font-ui);
  padding: 0.65rem 0.75rem;
}

.reader-admin-edit textarea[name="body"] {
  font-family: var(--font-reader);
  line-height: 1.6;
}

.reader-admin-revisions {
  margin-top: 1.1rem;
}

.reader-admin-revisions h2 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
}

.reader-admin-revisions ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.25rem;
}

.reader-admin-revisions li {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.reader-admin-revisions li form {
  margin: 0;
}

.reader-toggle-row input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--c-accent);
}

.reader-panel-close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--c-rule);
  background: var(--c-bg-card);
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
  line-height: 1;
}

.reader-panel-close:hover {
  color: var(--c-ink);
  background: var(--c-bg-sunken);
}

.info-bubble {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 1px solid var(--c-moss);
  border-radius: 999px;
  background: var(--c-cream);
  color: var(--c-moss);
  font-size: 0.72rem;
  font-weight: 900;
}

.bubble-wrap {
  position: relative;
  display: inline-flex;
  margin-inline: 0.15rem;
}

.bubble-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  z-index: 70;
  width: min(22rem, 80vw);
  transform: translateX(-50%);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-cream);
  box-shadow: 0 0.8rem 1.8rem rgba(38, 34, 26, 0.16);
  color: var(--c-ink-2);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.8rem;
}

.bubble-popover[hidden] {
  display: none;
}

.selection-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  width: min(34rem, calc(100vw - 1rem));
  gap: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: var(--c-ink);
  box-shadow: 0 1.25rem 2.75rem rgba(38, 34, 26, 0.18);
  color: var(--c-bg);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 0.45rem;
}

.selection-menu[hidden],
.note-editor[hidden],
.ai-panel[hidden] {
  display: none;
}

.selection-menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.color-dot {
  width: 2rem;
  height: 2rem;
  border: 2px solid color-mix(in srgb, var(--c-rule) 80%, white);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 -0.18rem 0 rgba(38, 34, 26, 0.14);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.color-dot:hover {
  border-color: var(--c-ink);
  transform: translateY(-1px);
}

.color-dot[data-color="yellow"] {
  background: #f1cc5c;
}

.color-dot[data-color="green"] {
  background: #8aa075;
}

.color-dot[data-color="blue"] {
  background: #7b97a8;
}

.color-dot[data-color="pink"] {
  background: #d38e97;
}

.color-dot[data-color="rose"] {
  background: #d38e97;
}

.color-dot[data-color="gold"] {
  background: #cda35a;
}

.menu-button {
  min-height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-bg);
  cursor: pointer;
  font: 800 0.78rem var(--font-ui);
  padding: 0.32rem 0.62rem;
  transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.menu-button:hover {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-bg);
  transform: translateY(-1px);
}

.selection-error {
  color: var(--c-terra);
  font-size: 0.82rem;
}

.note-editor {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.selection-quote-preview {
  max-height: 5.5rem;
  overflow: auto;
  margin: 0;
  border-left: 2px solid var(--c-gold);
  color: color-mix(in srgb, var(--c-bg) 82%, white);
  font: italic 0.95rem/1.45 var(--font-reader);
  padding-left: 0.65rem;
}

.note-editor textarea {
  min-height: 5rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 0.95rem/1.5 var(--font-ui);
  padding: 0.7rem;
  resize: vertical;
}

.ai-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  width: min(28rem, 100vw);
  max-height: 100vh;
  gap: 0.85rem;
  overflow: auto;
  border-left: 1px solid var(--c-rule);
  background: color-mix(in srgb, var(--c-bg-card) 96%, var(--c-bg));
  box-shadow: -1rem 0 2.75rem rgba(38, 34, 26, 0.18);
  color: var(--c-ink);
  padding: 1rem 1.1rem 1.2rem;
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ai-panel-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.ai-selection {
  max-height: 8rem;
  overflow: auto;
  margin: 0;
  border-left: 3px solid var(--c-moss);
  color: var(--c-ink-2);
  font-family: var(--font-reader);
  line-height: 1.55;
  padding: 0.2rem 0 0.2rem 0.75rem;
}

.ai-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.ai-tabs button {
  min-height: 2.1rem;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
  color: var(--c-ink);
  cursor: pointer;
  font: 800 0.78rem var(--font-ui);
  padding: 0.35rem 0.6rem;
}

.ai-tabs button.is-active {
  border-color: var(--c-moss);
  background: var(--c-moss);
  color: var(--c-cream);
}

.ai-output {
  min-height: 8rem;
  white-space: pre-wrap;
  line-height: 1.65;
}

.ai-output.is-error {
  color: var(--c-terra);
}

.reader-shell[data-reader-show-marginalia="false"] .reader-marginalia {
  display: none;
}

.reader-marginalia {
  position: absolute;
  left: calc(100% + 2rem);
  top: 6rem;
  width: min(15rem, calc((100vw - var(--reader-width)) / 2 - 3rem));
  min-width: 12rem;
}

.reader-marginalia-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  font-family: var(--font-reader);
  padding: 0;
}

.reader-marginalia-item time {
  display: block;
  color: var(--c-ink-3);
  font: 700 0.68rem var(--font-ui);
  margin-bottom: 0.4rem;
}

.reader-marginalia-item blockquote {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  color: var(--c-ink-2);
  font: italic 0.9rem/1.45 var(--font-reader);
}

.reader-marginalia-rule {
  display: block;
  width: 2.75rem;
  height: 1px;
  margin: 0.8rem 0 0.65rem;
  background: var(--c-rule);
}

.reader-marginalia-item p {
  margin: 0;
  color: var(--c-ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.reader-marginalia-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.55rem;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.reader-marginalia-item:hover .reader-marginalia-actions,
.reader-marginalia-item:focus-within .reader-marginalia-actions {
  opacity: 1;
}

.reader-marginalia-actions button {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  background: transparent;
  color: var(--c-ink-2);
  cursor: pointer;
}

.reader-marginalia-actions svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.reader-marginalia-actions button:hover {
  border-color: var(--c-moss-dark);
  color: var(--c-moss-dark);
}

.hl[data-annotation-type="bookmark"] {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-gold) 72%, transparent);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.16em;
}

.hl-pulse {
  animation: hl-pulse 1.5s ease;
}

@keyframes hl-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold) 70%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0.75rem transparent;
  }
}

@media (max-width: 1099px) {
  .reader-marginalia {
    position: fixed;
    inset: 4.75rem 0 0 auto;
    z-index: 86;
    width: min(22rem, 100vw);
    min-width: 0;
    overflow: auto;
    border-left: 1px solid var(--c-rule);
    background: color-mix(in srgb, var(--c-bg-card) 96%, var(--c-bg));
    box-shadow: -1rem 0 2.75rem rgba(38, 34, 26, 0.18);
    padding: 1rem;
    transform: translateX(100%);
    transition: transform 0.2s ease;
  }

  .reader-marginalia.is-open {
    transform: translateX(0);
  }

  .reader-marginalia-item {
    position: static !important;
    margin-bottom: 1.6rem;
  }

  .reader-marginalia-actions {
    opacity: 1;
  }
}

.reader-legal-links {
  display: none;
}

@media (max-width: 820px) {
  .reader-topbar,
  .reader-bottom-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .reader-main {
    padding-top: 8rem;
    padding-bottom: 11rem;
  }

  .reader-topbar-meta {
    flex-wrap: wrap;
  }

  .chapter-progress {
    width: 100%;
  }
}

/* Scribe Mode — typing trainer */

/* Increase font size in scribe mode */
.reader-shell[data-scribe-active="true"] {
  --reader-size: 32px;
  --reader-line: 2;
  --reader-width: 86ch;
  --font-reader: var(--f-mono);
}

.reader-article[data-scribe-active="true"] p {
  overflow-wrap: normal;
  word-break: normal;
}

.reader-article[data-scribe-active="true"] .bubble-wrap {
  display: none;
}

.reader-article[data-scribe-active="true"] .sc-token {
  display: inline-block;
  white-space: nowrap;
  break-inside: avoid;
}

/* Character states */
.reader-article[data-scribe-active="true"] span.sc-char {
  display: inline-flex;
  width: 1ch;
  min-width: 1ch;
  max-width: 1ch;
  height: 1.55em;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  overflow: visible;
  color: #bfb5af;
  transition: color 0.06s ease, background-color 0.06s ease, text-decoration 0.06s ease;
  cursor: text;
  user-select: none;
  font-family: var(--f-mono);
  font-variant-ligatures: none;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: pre;
  position: relative;
}

.reader-article[data-scribe-active="true"] span.sc-char.sc-space {
  width: 1ch;
  min-width: 1ch;
  max-width: 1ch;
}

.reader-article[data-scribe-active="true"] span.sc-char.sc-correct {
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
}

.reader-article[data-scribe-active="true"] span.sc-char.sc-pending {
  color: #bfb5af;
  text-decoration: none;
  font-weight: 600;
}

.reader-article[data-scribe-active="true"] span.sc-char.sc-error {
  color: var(--c-accent);
  background: rgba(138, 31, 26, 0.1);
  text-decoration: underline solid var(--c-accent);
  font-weight: 600;
}

.reader-article[data-scribe-active="true"] span.sc-enter-marker {
  width: 1.35em;
  min-width: 1.35em;
  max-width: 1.35em;
  margin: 0 0.1em;
  border: 1px solid rgba(138, 31, 26, 0.22);
  border-radius: 0.24em;
  color: var(--c-ink-mute);
  background: rgba(138, 31, 26, 0.06);
}

@keyframes scribe-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* Cursor: a fixed-geometry overlay, so spaces and letters get an identical
   cursor and the auto-scroll no longer shifts. Style is switchable. */
.reader-article[data-scribe-active="true"] span.sc-char.sc-cursor::after {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: scribe-cursor-blink 1s infinite;
}

/* Box (default, and any value other than underline/bar) */
.reader-shell:not([data-scribe-cursor="underline"]):not([data-scribe-cursor="bar"]) .reader-article[data-scribe-active="true"] span.sc-char.sc-cursor::after {
  inset: -2px;
  border: 2px solid var(--c-accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
}

/* Underline */
.reader-shell[data-scribe-cursor="underline"] .reader-article[data-scribe-active="true"] span.sc-char.sc-cursor::after {
  left: 8%;
  right: 8%;
  bottom: 0.14em;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
}

/* Vertical bar (I-beam) */
.reader-shell[data-scribe-cursor="bar"] .reader-article[data-scribe-active="true"] span.sc-char.sc-cursor::after {
  left: -1px;
  top: 0.18em;
  bottom: 0.18em;
  width: 2px;
  border-radius: 2px;
  background: var(--c-accent);
}

.reader-article[data-scribe-active] p.sc-skipped {
  opacity: 0.35;
  text-decoration: line-through;
}

.reader-shell[data-scribe-focus-fade] p.sc-done {
  opacity: 0.4;
  transition: opacity 0.4s;
}

/* Scribe stats in the reader topbar */
.sc-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  width: clamp(18rem, 24vw, 20rem);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-accent) 24%, var(--c-rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg-card) 82%, var(--c-bg));
  color: var(--c-ink);
  padding: 0.25rem;
  font: 700 0.82rem var(--f-ui);
  pointer-events: none;
  transition: visibility 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sc-hud[data-stats-visible="false"] {
  visibility: hidden;
}

.sc-hud[hidden] {
  display: none !important;
}

.sc-hud-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-width: 0;
  min-height: 2rem;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 0.24rem 0.48rem;
  background: color-mix(in srgb, var(--c-bg-sunken) 62%, transparent);
  overflow: hidden;
  white-space: nowrap;
}

.sc-hud-value {
  font-size: 0.94rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sc-hud-label {
  color: var(--c-ink-mute);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1;
}

@media (max-width: 760px) {
  .reader-topbar {
    align-items: flex-start;
    gap: 0.55rem;
  }

  .reader-topbar-main {
    flex: 1 1 100%;
  }

  .reader-topbar-meta {
    flex: 1 1 auto;
  }

  .reader-topbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .reader-topbar .sc-hud {
    width: 100%;
    justify-content: space-between;
  }

  .reader-mode-toggle {
    width: 8.8rem;
  }

  .sc-hud-stat {
    flex: 1 1 auto;
    justify-content: center;
  }

  .reader-main {
    padding-top: 8.5rem;
  }

  .reader-settings-panel {
    top: 7.6rem;
    right: 0.75rem;
    width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 8.4rem);
  }
}

/* Completion modal */
.sc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 15, 12, 0.6);
  z-index: 200;
  display: grid;
  place-items: center;
}

.sc-modal {
  background: var(--c-bg-card);
  border-radius: var(--r-card);
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 1.5rem 3rem rgba(26, 15, 12, 0.2);
}

.sc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.sc-modal-title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  margin: 0;
  color: var(--c-ink);
}

.sc-modal-close {
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-ink-mute);
  font: 1.5rem var(--f-ui);
  padding: 0;
  display: grid;
  place-items: center;
}

.sc-modal-close:hover {
  color: var(--c-ink);
}

.sc-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sc-stat {
  display: grid;
  gap: 0.25rem;
  text-align: center;
}

.sc-stat-value {
  display: block;
  font: 700 2rem var(--f-display);
  color: var(--c-ink);
}

.sc-stat-label {
  display: block;
  font: 0.75rem var(--f-ui);
  color: var(--c-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sc-personal-best {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font: 700 0.75rem var(--f-ui);
  margin-bottom: 1rem;
}

.sc-error-chars {
  margin-bottom: 1.5rem;
}

.sc-error-chars h3 {
  margin: 0 0 0.75rem;
  color: var(--c-ink-2);
  font: 800 0.85rem var(--font-ui);
}

.sc-error-chars ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-error-chars li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-rule);
  padding: 0.4rem 0;
}

.sc-error-chars-title {
  font: 700 0.85rem var(--f-ui);
  color: var(--c-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.sc-error-chars-table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
}

.sc-error-chars-table th {
  text-align: left;
  font-weight: 700;
  color: var(--c-ink-mute);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-rule);
}

.sc-error-chars-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-rule);
}

.sc-error-chars-table td:last-child {
  text-align: right;
}

.sc-modal-actions {
  display: flex;
  gap: 0.75rem;
}

.sc-modal-actions button {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: var(--r-button);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all 120ms;
}

.sc-modal-actions .cv-btn--primary,
.sc-modal-actions button.is-primary {
  background: var(--c-ink);
  color: var(--c-bg);
}

.sc-modal-actions .cv-btn--primary:hover,
.sc-modal-actions button.is-primary:hover {
  background: var(--c-ink-2);
}

.sc-modal-actions .cv-btn--ghost,
.sc-modal-actions button.is-secondary {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
}

.sc-modal-actions .cv-btn--ghost:hover,
.sc-modal-actions button.is-secondary:hover {
  background: var(--c-bg-sunken);
}

.cv-book-outline {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.25rem;
}

.cv-book-outline li {
  padding-left: 0.25rem;
}

.cv-book-outline a {
  color: var(--c-ink);
  font-weight: 700;
}

.cv-book-outline span {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--c-ink-mute);
  font: 600 0.8rem var(--f-ui);
}

.cv-book-outline p {
  margin: 0.25rem 0 0;
  color: var(--c-ink-2);
}