:root {
  --font-sans: "DM Sans", "Inter", sans-serif;
  --font-mono: "DM Mono", "JetBrains Mono", monospace;
  --v3-bg: #10130f;
  --v3-surface: #171b15;
  --v3-surface-2: #1f251c;
  --v3-panel: #f6f0df;
  --v3-ink: #f7f0df;
  --v3-muted: #b9b198;
  --v3-faint: #7f765f;
  --v3-line: rgba(246, 240, 223, 0.14);
  --v3-line-strong: rgba(246, 240, 223, 0.24);
  --v3-gold: #c8922a;
  --v3-gold-2: #f0c86b;
  --v3-green: #77a56d;
  --v3-red: #bf604f;
  --v3-radius: 22px;
  --v3-radius-sm: 12px;
  --v3-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
  /* v0.3.1: single source of truth for the home search column width. The
     search bar, results meta, answer stack, and each answer card all read
     from this token so their visible left/right edges always match. */
  --v3-search-col: 900px;
}

html,
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 18% 10%, rgba(200, 146, 42, 0.15), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(119, 165, 109, 0.12), transparent 28rem),
    var(--v3-bg);
  color: var(--v3-ink);
}

body {
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 240, 223, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 223, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(16, 19, 15, 0.82);
  border-bottom: 1px solid var(--v3-line);
}

.brand-link {
  color: var(--v3-ink);
}

.brand-title {
  letter-spacing: -0.025em;
}

.brand-sub {
  font-family: var(--font-mono);
  color: var(--v3-muted);
}

.brand-logo-inline {
  color: var(--v3-gold-2);
  flex: 0 0 auto;
}

/* v0.4.1 — Selected silhouette logo (raster mark)
   Light mode: dark-green silhouette PNG, no effects.
   Dark mode: the SAME silhouette recoloured flat white (separate PNG asset).
   No glow, no shadow, no gradient, no outline, no filter — just a swap. */
.brand-logo-picture {
  display: inline-flex;
  flex: 0 0 auto;
}
.brand-logo-img {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
  border-radius: 0;
  border: 0;
  filter: none;
  -webkit-user-drag: none;
  user-select: none;
}

.logo2-mark {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo2-bg {
  fill: #2d4032;
  stroke: none;
}

.logo2-frame,
.logo2-book,
.logo2-candle path {
  stroke: #f2f2f2;
}

.logo2-frame,
.logo2-candle rect {
  fill: none;
}

.logo2-candle rect {
  stroke: #f2f2f2;
}

.app-nav {
  gap: 0.25rem;
  align-items: center;
  overflow: visible;
  flex-wrap: nowrap;
}

.nav-link,
.more-summary,
.more-link {
  border-radius: 999px;
  color: var(--v3-muted);
  font-weight: 700;
}

.nav-link:hover,
.nav-link.active,
.nav-more.active .more-summary,
.more-summary:hover,
.more-link:hover,
.more-link.active {
  background: rgba(246, 240, 223, 0.08);
  color: var(--v3-ink);
  text-decoration: none;
}

.nav-more {
  position: relative;
  z-index: 30;
}

.more-summary {
  list-style: none;
  padding: 7px 12px;
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}

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

.more-summary::after {
  content: "⌄";
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.78em;
  transform: translateY(-1px);
}

.nav-more[open] .more-summary::after {
  transform: rotate(180deg) translateY(1px);
}

.more-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 18px;
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow);
}

.more-link {
  display: block;
  padding: 0.65rem 0.8rem;
  font-size: 0.88rem;
}

.nav-nudge,
.settings-toggle {
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 999px;
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  font-weight: 800;
}

.nav-nudge {
  display: none;
  width: 40px;
  padding-inline: 0;
  font-size: 1.15rem;
}

.settings-toggle:hover,
.nav-nudge:hover {
  border-color: var(--v3-gold);
  color: var(--v3-gold-2);
}

.settings-popover {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 1.5rem;
  z-index: 60;
  width: min(390px, calc(100vw - 2rem));
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 22px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  box-shadow: var(--v3-shadow);
}

/* v0.3.2 P0-6: explicit dark-mode override — ensure the panel sits on a dark surface
   with bright readable text and a clearly visible segmented active state. */
html[data-theme="dark"] .settings-popover {
  background: #1f241b;
  color: var(--v3-ink);
  border-color: rgba(244, 236, 216, 0.28);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .settings-popover strong,
html[data-theme="dark"] .settings-popover a {
  color: var(--v3-ink);
}

html[data-theme="dark"] .settings-popover span {
  color: var(--v3-muted);
}

.settings-head,
.settings-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.settings-head span,
.settings-row span {
  display: block;
  margin-top: 0.2rem;
  color: var(--v3-muted);
  font-size: 0.88rem;
}

.segmented {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
}

.segmented button {
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--v3-muted);
  font-weight: 800;
  transition: background 0.15s, color 0.15s;
}

.segmented button:hover {
  color: var(--v3-ink);
}

/* v0.3.2 P1-8: clear filled active state (light + dark). */
.segmented button.active {
  background: var(--v3-gold);
  color: var(--v3-button-text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) inset;
}

html[data-theme="dark"] .segmented button.active {
  background: var(--v3-gold-2);
  color: #17130b;
}

.muted-row {
  padding-top: 0.75rem;
  border-top: 1px solid var(--v3-line);
}

.app {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(1.25rem, 2vw, 2rem);
}

.v3-hero {
  min-height: calc(100vh - 180px);
  display: grid;
  align-content: center;
  gap: 1.5rem;
  padding: clamp(2rem, 6vw, 5rem) 0;
}

.clean-home {
  /* v0.3.3: vertically center the home composition inside the viewport.
     - In idle state the search composition sits in the middle of the screen.
     - When the user submits a query, the composition anchors to the top so
       results render directly beneath without leaving a tall gap. */
  min-height: calc(100vh - 220px);
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.1rem;
  padding-block: clamp(2rem, 5vh, 4rem);
  transition: none;
  text-align: center;
}

/* The home-stage groups ticker + search + quotes + results so the centered
   block stays compact and balanced. */
.clean-home .home-stage {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 900px;
}

.clean-home .home-tagline,
.clean-home .home-source-note {
  text-align: center;
  margin-inline: auto;
}

.clean-home.home-idle {
  align-content: center;
}

.clean-home.home-has-results {
  /* Anchor to top once a query is entered — prevents a tall gap above
     the results stack. */
  align-content: start;
  padding-block: clamp(1.5rem, 4vh, 3rem) clamp(2rem, 5vh, 3.5rem);
}

.clean-home.home-static {
  max-width: 980px;
  gap: 1.1rem;
}

.clean-home h1 {
  max-width: 760px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}

/* v0.3.4 — Inner Archive home title.
   Spans the same column width as the search bar / ticker / quote strip
   (--v3-search-col) and sits centered above the stats rail. The font size
   is clamped to fluidly fill the column from small mobile to wide desktop
   without causing horizontal overflow. */
.home-product-title {
  display: block;
  width: 100%;
  max-width: var(--v3-search-col);
  margin: 0 auto 0.35rem;
  padding: 0;
  font-family: var(--font-display, var(--font-sans, inherit));
  font-weight: 800;
  /* Fluid size: small enough on phones, large enough to read as a hero on
     desktop. The upper bound (~9rem) corresponds to the v0.3 reference. */
  font-size: clamp(2.4rem, 11.95vw, 8.35rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-align: center;
  color: var(--v3-ink, currentColor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  /* Optical alignment: pull the wordmark flush with the column edges. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.clean-home .home-product-title,
.home-idle .home-product-title,
.home-has-results .home-product-title,
.home-static .home-product-title,
.v3-hero .home-product-title {
  /* Higher specificity than .clean-home h1 / .v3-hero h1 so the
     hero title scale is not clobbered by upstream typography rules. */
  width: 100%;
  max-width: var(--v3-search-col);
  margin: 0 auto 0.4rem;
  font-size: clamp(2.4rem, 11.95vw, 8.35rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  color: var(--v3-ink, currentColor);
  white-space: nowrap;
}

/* Hide the hero title once the user is in results mode so it doesn't push the
   answer stack down. Keeps the layout compact, matching the existing
   .home-source-note / .quote-strip suppression. */
.home-has-results .home-product-title {
  display: none !important;
}

.clean-home .home-tagline {
  max-width: 760px;
}

.clean-home .v3-search {
  max-width: 760px;
  width: 100%;
  margin-top: 0.35rem;
}

.market-ticker {
  /* v0.3.6 — 3-stat row with gentle left-right drift. Single line on desktop,
     graceful wrap only if viewport forces it. Overflow hidden with fade edges. */
  max-width: 760px;
  width: 100%;
  border-block: 1px solid var(--v3-line);
  color: var(--v3-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  overflow: hidden;
  /* Fade mask on both horizontal edges so content doesn't hard-clip */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.market-ticker-track {
  /* Centred, single-line layout with a slow left-right drift */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 2rem;
  padding-block: 0.65rem;
  padding-inline: 1rem;
  white-space: nowrap;
  animation: stats-drift 12s ease-in-out infinite;
}

.market-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.market-ticker span::before {
  content: "·";
  color: var(--v3-gold-2);
}

.quote-strip {
  /* v0.3.6 — continuous trading-floor ticker. One line only, slow and readable.
     v0.5.3 — replaced mask-image fade with solid background-colored edge
     wedges (::before / ::after) so partial words at the wrap-point are fully
     covered. The earlier mask-only approach only dimmed dark glyphs over the
     cream background, leaving fragments like 'ay comes.' legible at the left
     edge. The wedge gradients cover ~110px of solid background on each side
     and then fade out, so the ticker still feels like a continuous trading
     floor scroll with soft edges. */
  max-width: 760px;
  width: 100%;
  border-block: 1px solid var(--v3-line);
  color: var(--v3-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.quote-strip::before,
.quote-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* v0.5.4: widened wedge so an item's leading bold label can never appear
     alone (e.g. a partial "ICT" frame) before the quote text begins to
     reveal alongside it. The wedge fully masks ~180px of the leading edge,
     which is wider than the longest label glyph block plus its right-side
     gap. Items therefore enter the visible band already paired with quote
     text, eliminating the orphan-label OCR artefact flagged in v0.5.4
     visual validation. */
  width: max(28%, 180px);
  pointer-events: none;
  z-index: 2;
}
/* v0.5.4: extended the solid-fill portion of each wedge from 72% to 88%.
   The remaining 12% still fades softly to transparent, so the trading-floor
   ticker still has its signature soft edge — but no glyphs (in particular
   the leading three letters of the bold label) can be partially legible
   inside the fade band any more. Eliminates the orphan "ICT" OCR artefact
   that visual validation flagged in v0.5.4. */
.quote-strip::before {
  left: 0;
  background: linear-gradient(to right,
    var(--v3-bg, #f4efe3) 0%,
    var(--v3-bg, #f4efe3) 88%,
    rgba(244, 239, 227, 0) 100%);
}
.quote-strip::after {
  right: 0;
  background: linear-gradient(to left,
    var(--v3-bg, #f4efe3) 0%,
    var(--v3-bg, #f4efe3) 88%,
    rgba(244, 239, 227, 0) 100%);
}
html[data-theme="dark"] .quote-strip::before {
  background: linear-gradient(to right,
    var(--v3-bg, #0f1418) 0%,
    var(--v3-bg, #0f1418) 88%,
    rgba(15, 20, 24, 0) 100%);
}
html[data-theme="dark"] .quote-strip::after {
  background: linear-gradient(to left,
    var(--v3-bg, #0f1418) 0%,
    var(--v3-bg, #0f1418) 88%,
    rgba(15, 20, 24, 0) 100%);
}

.home-idle .quote-strip,
.home-idle .market-ticker,
.home-idle .v3-search,
.home-has-results .quote-strip,
.home-has-results .market-ticker,
.home-has-results .v3-search,
.home-static .quote-strip,
.home-static .market-ticker,
.home-static .v3-search {
  max-width: 900px;
}

/* v0.3.1: remove quote strip from layout after search so results sit tightly under the bar */
.home-has-results .quote-strip {
  display: none;
  pointer-events: none;
}

.quote-strip-track {
  /* Continuous marquee scroll — single line, no wrap, seamless loop.
     Content is duplicated in JS for seamless looping. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding-block: 0.72rem;
  white-space: nowrap;
  /* Width auto so the track can extend beyond the masked container */
  width: max-content;
  animation: quote-ticker-scroll 38s linear infinite;
}

/* Pause on hover for readability */
.quote-strip:hover .quote-strip-track {
  animation-play-state: paused;
}

.quote-strip a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  /* v0.5.4: leading pad widened slightly so the bold label glyphs are
     never the only character cluster peeking past the wedge. The trailing
     pad is unchanged — preserving the approved spacing rhythm. */
  padding-inline: 2.8rem 2.2rem;
  flex-shrink: 0;
}

.quote-strip a::before {
  content: "◇";
  color: var(--v3-gold-2);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.quote-strip strong {
  color: var(--v3-gold-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.quote-strip span {
  white-space: nowrap;
}

/* v0.3.6 keyframes */
@keyframes quote-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Stats row: slow left-right drift — not a full marquee, just a gentle sway */
@keyframes stats-drift {
  0%   { transform: translateX(0px); }
  25%  { transform: translateX(-8px); }
  75%  { transform: translateX(8px); }
  100% { transform: translateX(0px); }
}

/* Respect reduced-motion: freeze both animations */
@media (prefers-reduced-motion: reduce) {
  .quote-strip-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }
  .market-ticker-track {
    animation: none;
  }
}

.home-results {
  width: 100%;
  max-width: 900px;
  display: grid;
  gap: 0.9rem;
}

.home-results:empty {
  display: none;
}

.home-results-meta {
  color: var(--v3-muted);
  font-size: 0.92rem;
}

.clean-answer-stack {
  width: 100%;
  gap: 0.8rem;
}

.home-answer {
  width: 100%;
  padding: 1rem;
}

.home-answer h2 {
  margin: 0.25rem 0 0.45rem;
  font-size: 1.08rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.home-answer p {
  margin: 0;
  line-height: 1.55;
}

.home-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.home-load-more {
  justify-self: center;
  min-width: 140px;
}

.compact-empty {
  padding: 1rem;
}

.scope-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(200, 146, 42, 0.28);
  border-radius: 999px;
  background: rgba(200, 146, 42, 0.10);
  color: var(--v3-gold-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.scope-chip.small {
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
}

.hero-lockup {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid var(--v3-line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(246, 240, 223, 0.10), rgba(246, 240, 223, 0.03));
  color: var(--v3-gold-2);
  box-shadow: var(--v3-shadow);
}

.hero-lockup .logo2-mark {
  width: 62px;
  height: 62px;
}

.v3-hero h1:not(.home-product-title),
.page-title {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--v3-ink);
}

.page-title {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.04;
}

.home-tagline,
.page-sub {
  max-width: 860px;
  margin: 0;
  color: var(--v3-muted);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.page-kicker,
.answer-label,
.card-meta,
.label {
  font-family: var(--font-mono);
  color: var(--v3-faint);
  font-size: 0.78rem;
  letter-spacing: 0.015em;
}

.v3-search,
.search-header {
  max-width: 980px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 24px;
  background: rgba(246, 240, 223, 0.08);
  box-shadow: var(--v3-shadow);
}

.search-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--v3-gold-2);
  font-size: 1.35rem;
}

.hero-input,
.search-header input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--v3-ink);
  font-size: 1rem;
}

.hero-input::placeholder,
.search-header input::placeholder {
  color: var(--v3-faint);
}

.hero-search-btn,
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.72rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.hero-search-btn,
.btn-primary {
  background: var(--v3-gold);
  color: #15130d;
}

.hero-search-btn:hover,
.btn-primary:hover {
  background: var(--v3-gold-2);
  color: #15130d;
}

.btn-ghost {
  border-color: var(--v3-line-strong);
  background: rgba(246, 240, 223, 0.05);
  color: var(--v3-ink);
}

.btn-ghost:hover {
  background: rgba(246, 240, 223, 0.10);
}

.home-stats,
.study-dashboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.lesson-overview,
.study-compact-grid,
.model-summary-strip,
.lesson-study-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

/* v0.3.2 P1-1/P1-2: slim horizontal stats ticker — not stacked KPI cards. */
.stats-ticker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  padding: 0.55rem 0.85rem;
  border-block: 1px solid var(--v3-line);
  color: var(--v3-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
}

.stats-ticker span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.stats-ticker span + span::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--v3-gold-2);
}

.stats-ticker strong {
  color: var(--v3-ink);
  font-family: var(--font-sans, inherit);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

.model-stats-ticker {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .stats-ticker {
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }
  .model-stats-ticker {
    justify-content: flex-start;
  }
}

.lesson-continue,
.study-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  background: var(--v3-card-bg);
  box-shadow: var(--v3-shadow);
}

.lesson-study-control {
  grid-template-columns: minmax(0, 1fr) auto;
}

.lesson-progress-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 0.85rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  background: var(--v3-card-bg);
  box-shadow: var(--v3-shadow);
}

.lesson-more-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.35rem;
}

.lesson-continue h2,
.study-control strong,
.lesson-progress-card strong {
  display: block;
  margin: 0.2rem 0 0.45rem;
  color: var(--v3-ink);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.lesson-continue p {
  max-width: 760px;
  margin: 0 0 0.7rem;
  color: var(--v3-muted);
}

.progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v3-muted) 18%, transparent);
}

.progress-track.large {
  height: 11px;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--v3-gold), var(--v3-green));
}

.lesson-table {
  display: grid;
  gap: 0.55rem;
}

.lesson-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-card-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.lesson-row.done {
  border-color: color-mix(in srgb, var(--v3-green) 45%, var(--v3-line));
}

.lesson-num {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--v3-chip-bg);
  color: var(--v3-gold-2);
  font-family: var(--font-mono);
  font-weight: 800;
}

.lesson-main h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--v3-ink);
}

.lesson-main p {
  margin: 0.35rem 0;
  color: var(--v3-muted);
  font-size: 0.92rem;
}

.lesson-actions,
.lesson-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.heart-btn {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
  color: var(--v3-muted);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.heart-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--v3-gold) 55%, var(--v3-line));
  color: var(--v3-gold-2);
}

.heart-btn.active {
  border-color: color-mix(in srgb, var(--v3-gold) 72%, var(--v3-line));
  background: color-mix(in srgb, var(--v3-gold) 18%, var(--v3-card-bg));
  color: var(--v3-gold-2);
}

.inline-nav {
  padding-inline: 0.35rem;
  border-inline: 1px solid var(--v3-line);
}

.btn.disabled,
.btn.disabled:hover {
  opacity: 0.45;
  pointer-events: none;
  background: var(--v3-field-bg);
  color: var(--v3-muted);
  border-color: var(--v3-line);
}

.lesson-study-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
}

.compact-panel {
  padding: 1rem;
}

.practice-mini-list {
  display: grid;
  gap: 0.6rem;
}

.practice-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  color: var(--v3-muted);
  background: var(--v3-field-bg);
}

.reflection-box {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: 1px solid var(--v3-line-strong);
  border-radius: 16px;
  padding: 0.9rem;
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  font: inherit;
  line-height: 1.5;
}

.reflection-box::placeholder {
  color: var(--v3-faint);
}

.study-progress-main {
  min-width: 0;
}

.model-summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.models-page {
  min-height: calc(100vh - 168px);
  align-content: center;
  gap: 0.9rem;
}

.models-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 1rem;
  align-items: end;
}

.models-page .page-title {
  max-width: 760px;
  font-size: clamp(1.85rem, 3vw, 2.65rem);
}

.models-page .page-sub {
  max-width: 720px;
  margin-bottom: 0;
}

.model-summary-strip > div {
  padding: 0.9rem;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-field-bg);
}

.model-summary-strip span {
  display: block;
  color: var(--v3-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.model-summary-strip strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--v3-ink);
}

.model-layout.compact-models {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

/* v0.3.2 P0-3: tablet — prevent 4-up squeeze. */
@media (max-width: 1080px) {
  .model-layout.compact-models {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .model-folder-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v0.3.2 P0-3: small tablet — 2-up. */
@media (max-width: 840px) {
  .model-layout.compact-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v0.3.2 P0-3: phone — force single column, readable text. */
@media (max-width: 600px) {
  .model-layout.compact-models,
  .model-folder-row {
    grid-template-columns: 1fr;
  }
  .models-page .model-card {
    min-height: 0;
  }
}

.model-folder-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.model-folder {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  min-height: 58px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  text-align: left;
}

.model-folder.active {
  border-color: color-mix(in srgb, var(--v3-gold) 62%, var(--v3-line));
  background: color-mix(in srgb, var(--v3-gold) 14%, var(--v3-card-bg));
}

.model-folder span {
  font-weight: 800;
}

.model-folder strong {
  color: var(--v3-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.model-notes-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.model-notes-strip span {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
  color: var(--v3-muted);
  font-size: 0.82rem;
}

.models-page .model-card {
  min-height: 168px;
  padding: 0.9rem;
  border-radius: 20px;
}

.models-page .model-card h2 {
  margin-top: 0.55rem;
  font-size: 1rem;
  line-height: 1.15;
}

.models-page .model-card p {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.models-page .stage-num {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
}

.models-page details {
  margin-top: 0.45rem;
  font-size: 0.8rem;
}

.models-page summary {
  width: fit-content;
}

.home-stat,
.kpi {
  padding: 1rem;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-sm);
  background: rgba(246, 240, 223, 0.055);
}

.kpi span {
  display: block;
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--v3-muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-stat .v,
.kpi .value {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--v3-ink);
}

.home-stat .l {
  display: block;
  color: var(--v3-muted);
  font-size: 0.85rem;
}

.amber {
  color: var(--v3-gold-2) !important;
}

.v3-actions,
.ote-video-grid,
.model-layout,
.practice-grid,
.saved-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.action-card,
.ote-card,
.answer-card,
.panel,
.v3-panel,
.model-card,
.saved-note,
.state-card,
.key-note,
.mini-video,
.practice-row {
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  background: linear-gradient(145deg, rgba(246, 240, 223, 0.10), rgba(246, 240, 223, 0.045));
  color: var(--v3-ink);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.16);
}

.action-card,
.mini-video {
  padding: 1.05rem;
  text-decoration: none;
}

.action-card:hover,
.mini-video:hover,
.ote-card:hover {
  border-color: rgba(200, 146, 42, 0.42);
  transform: translateY(-1px);
}

.action-card .ic {
  color: var(--v3-gold-2);
  font-family: var(--font-mono);
}

.action-title,
.action-sub,
.model-card h2,
.practice-row h2,
.ote-card h2 {
  margin: 0;
}

.action-title,
.model-card h2,
.practice-row h2,
.ote-card h2,
.panel h2 {
  letter-spacing: -0.03em;
}

.action-sub,
.ote-card p,
.model-card p,
.practice-row p,
.saved-note p,
.answer-card p,
.key-note p,
.panel p,
.mini-video span,
.muted {
  color: var(--v3-muted);
}

.page.v3-page {
  display: grid;
  gap: 1.35rem;
  padding-block: clamp(1.5rem, 4vw, 4rem);
}

.answer-stack {
  display: grid;
  gap: 1rem;
}

.answer-card,
.ote-card,
.model-card,
.panel,
.v3-panel,
.saved-note {
  padding: 1.25rem;
}

.answer-card h2 {
  margin: 0.35rem 0 0.65rem;
  font-size: 1.25rem;
}

.timestamp-row,
.card-actions,
.chip-row,
.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

/* v0.3.1 time-link pill: neutral surface, gold as small accent.
   Goal: clearly clickable, soft medium weight, WCAG-AA readable in both modes. */
.time-link,
.note-time {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--v3-line-strong);
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  font-family: var(--font-sans, inherit);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.time-link .time-link-tc,
.note-time .time-link-tc {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--v3-ink);
  letter-spacing: 0.02em;
}

.time-link .time-link-sep,
.note-time .time-link-sep {
  color: var(--v3-faint);
  font-weight: 400;
}

.time-link .time-link-label,
.note-time .time-link-label {
  color: var(--v3-ink);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.005em;
}

.time-link .time-link-title,
.note-time .time-link-title {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--v3-muted);
  font-weight: 400;
  font-size: 0.76rem;
}

.time-link .time-link-arrow,
.note-time .time-link-arrow {
  color: var(--v3-gold-2);
  font-size: 0.78rem;
  opacity: 0.95;
}

.time-link:hover,
.note-time:hover {
  background: color-mix(in srgb, var(--v3-gold) 8%, var(--v3-field-bg) 92%);
  border-color: color-mix(in srgb, var(--v3-gold) 55%, var(--v3-line-strong));
  color: var(--v3-ink);
  text-decoration: none;
}

.time-link:hover .time-link-arrow,
.note-time:hover .time-link-arrow {
  opacity: 1;
}

.time-link:focus-visible,
.note-time:focus-visible {
  outline: 2px solid var(--v3-gold-2);
  outline-offset: 2px;
}

.note-title:hover,
.back-link:hover {
  text-decoration: underline;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 1rem;
}

.split-layout.wide-left {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.section-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--v3-ink);
}

.note-list,
.mini-list,
.transcript-list,
.study-path {
  display: grid;
  gap: 0.75rem;
}

/* v0.3.1: pill on its own row so the wider Watch-on-YouTube pill never overlaps text */
.key-note {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0.9rem;
}

.key-note > .note-time,
.key-note > .time-link {
  justify-self: start;
}

.key-note.compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.note-title {
  color: var(--v3-ink);
  font-weight: 800;
  text-decoration: none;
}

.tiny-btn {
  min-height: 34px;
  margin-top: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 999px;
  background: rgba(246, 240, 223, 0.05);
  color: var(--v3-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.tiny-btn:hover {
  background: rgba(246, 240, 223, 0.12);
}

/* v0.3.1 readability pass: subtle search-term highlight.
   Keep body text in its normal ink color; mark uses a very low-opacity
   tint and a thin underline-style accent rather than a heavy fill. */
mark {
  padding: 0 0.12rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--v3-gold) 14%, transparent);
  color: inherit;
  font-weight: inherit;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--v3-gold) 45%, transparent);
}

html[data-theme="dark"] mark {
  background: color-mix(in srgb, var(--v3-gold) 18%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--v3-gold) 55%, transparent);
}

.callout {
  padding: 1rem;
  border: 1px solid rgba(119, 165, 109, 0.32);
  border-radius: var(--v3-radius-sm);
  background: rgba(119, 165, 109, 0.08);
  color: var(--v3-muted);
}

.ote-video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ote-card {
  display: grid;
  gap: 0.9rem;
}

.ote-card.done {
  border-color: rgba(119, 165, 109, 0.38);
  background: linear-gradient(145deg, rgba(119, 165, 109, 0.12), rgba(246, 240, 223, 0.045));
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.watch-check,
.practice-row label,
.practice-row {
  color: var(--v3-muted);
  font-size: 0.9rem;
}

input[type="checkbox"] {
  accent-color: var(--v3-gold);
}

.video-hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.back-link {
  width: fit-content;
  color: var(--v3-gold-2);
  text-decoration: none;
  font-weight: 800;
}

.tabs {
  width: fit-content;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
}

.tabs button {
  min-height: 40px;
  padding: 0.55rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--v3-muted);
  font-weight: 800;
}

.tabs button.active {
  border: 1px solid var(--v3-line-strong);
  background: var(--v3-chip-bg);
  color: var(--v3-ink);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--v3-ink) 15%, transparent);
}

.learning-list,
.takeaway-list {
  display: grid;
  gap: 0.65rem;
}

.learning-list {
  padding-left: 1.2rem;
  color: var(--v3-muted);
}

/* v0.3.1: takeaway item now wraps the wider time-link pill onto its own row. */
.takeaway-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "pill pill"
    "reason action"
    "text action";
  gap: 0.35rem 0.75rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--v3-line);
}

.takeaway-item > .note-time,
.takeaway-item > .time-link {
  grid-area: pill;
  justify-self: start;
}

.takeaway-item > p.auto-reason {
  grid-area: reason;
  margin: 0;
}

.takeaway-item > p.snippet-quote,
.takeaway-item > p {
  grid-area: text;
  margin: 0;
  color: var(--v3-ink);
  line-height: 1.5;
}

.takeaway-item .tiny-btn,
.takeaway-item .heart-btn {
  grid-area: action;
  align-self: start;
}

.takeaway-item .heart-btn {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--v3-line);
  background: var(--v3-field-bg);
}

.takeaway-item .heart-btn.active {
  border-color: color-mix(in srgb, var(--v3-gold) 55%, var(--v3-line));
  color: var(--v3-gold-2);
  background: var(--v3-chip-bg);
}

.transcript-line {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--v3-line);
}

.transcript-line:last-child {
  border-bottom: 0;
}

.chip {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: rgba(246, 240, 223, 0.045);
  color: var(--v3-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.practice-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
}

.practice-grid .practice-row {
  grid-template-columns: auto 1fr;
}

.stage-num {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(200, 146, 42, 0.16);
  color: var(--v3-gold-2);
  font-family: var(--font-mono);
  font-weight: 700;
}

details {
  margin-top: 0.75rem;
  color: var(--v3-muted);
}

summary {
  cursor: pointer;
  color: var(--v3-gold-2);
  font-weight: 800;
}

.saved-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saved-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
}

.saved-column {
  min-height: 18rem;
  padding: 0.85rem;
  border: 1px solid var(--v3-line);
  border-radius: 22px;
  background: var(--v3-card-bg);
  box-shadow: var(--v3-shadow);
  max-height: 36rem;
  overflow-y: auto;
}

.saved-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
  color: var(--v3-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saved-section-head strong {
  min-width: 1.8rem;
  height: 1.8rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--v3-chip-bg);
  color: var(--v3-gold-2);
  letter-spacing: 0;
}

.saved-stack {
  display: grid;
  gap: 0.65rem;
}

.saved-column .saved-note {
  padding: 0.85rem;
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid var(--v3-line);
  background: var(--v3-field-bg);
}

.saved-lesson h2 {
  margin: 0.4rem 0 0.8rem;
  color: var(--v3-ink);
  font-size: 0.96rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.mini-empty {
  min-height: 8rem;
  display: grid;
  place-items: center;
  padding: 0.85rem;
  border: 1px dashed var(--v3-line);
  border-radius: 16px;
  text-align: center;
  font-size: 0.9rem;
}

.empty.state-card,
.empty {
  padding: 1.5rem;
  color: var(--v3-muted);
}

.empty .big {
  margin-bottom: 0.35rem;
  color: var(--v3-ink);
  font-weight: 800;
}

.app-footer {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--v3-line);
  border-radius: 0;
  background: var(--v3-surface);
  color: var(--v3-faint);
  font-size: 0.68rem;
  line-height: 1.25;
}

.app-footer strong {
  color: var(--v3-ink);
}

.footer-tab-content {
  max-width: none;
  margin: 0 auto;
  padding: 0.35rem clamp(1rem, 2vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem 0.55rem;
  flex-wrap: wrap;
  text-align: center;
}

@media (max-width: 980px) {
  .app-header {
    position: static;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 16px;
  }

  .brand {
    flex: 1 1 auto;
  }

  .app-nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.25rem;
    max-width: 100%;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.1rem;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .app-nav .nav-link {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .app-nav .settings-toggle {
    padding: 0.35rem 0.65rem;
    font-size: 13px;
    min-height: 34px;
    margin-left: auto;
  }

  .nav-nudge {
    display: none;
  }

  .home-stats,
  .study-dashboard,
  .lesson-overview,
  .models-head,
  .model-folder-row,
  .lesson-study-grid,
  .study-compact-grid,
  .model-summary-strip,
  .ote-video-grid,
  .compact-grid,
  .model-layout,
  .compact-models,
  .practice-grid,
  .saved-grid,
  .saved-categories,
  .v3-actions,
  .split-layout,
  .split-layout.wide-left {
    grid-template-columns: 1fr;
  }

  .lesson-continue,
  .study-control,
  .lesson-progress-card,
  .lesson-row {
    grid-template-columns: 1fr;
  }

  .inline-nav {
    width: 100%;
    padding-inline: 0;
    border-inline: 0;
    border-block: 1px solid var(--v3-line);
    padding-block: 0.65rem;
  }

  .lesson-actions,
  .lesson-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .video-hero,
  .card-head {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .app {
    padding-inline: 1rem;
  }

  /* v0.3.2 P0-4 / P2-6: keep brand title on one line. */
  .brand-title {
    white-space: nowrap;
    font-size: 15px;
  }
  .brand-logo-img {
    width: 30px;
    height: 30px;
  }

  .v3-search,
  .search-header {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .search-icon {
    display: none;
  }

  .hero-search-btn {
    width: 100%;
  }

  .v3-hero h1,
  .page-title {
    letter-spacing: -0.025em;
  }

  .clean-home {
    min-height: auto;
    align-content: start;
    padding-block: 2rem;
  }

  .home-product-title {
    font-size: clamp(2.8rem, 15vw, 4.8rem);
    line-height: 0.88;
    text-align: left;
    text-align-last: auto;
    letter-spacing: -0.07em;
  }

  .transcript-line,
  .key-note,
  .takeaway-item {
    grid-template-columns: 1fr;
  }
}

/* v0.3 readability pass: premium light/dark palettes with explicit contrast. */
:root,
html[data-theme="light"] {
  --v3-bg: #f4efe3;
  --v3-surface: #fffaf0;
  --v3-surface-2: #f8efd9;
  --v3-ink: #181a15;
  --v3-muted: #4f5148;
  --v3-faint: #777265;
  --v3-line: rgba(45, 43, 34, 0.14);
  --v3-line-strong: rgba(45, 43, 34, 0.24);
  --v3-gold: #b97b16;
  --v3-gold-2: #7b4f09;
  --v3-green: #496f4e;
  --v3-red: #9b4f3f;
  --v3-header-bg: rgba(250, 246, 236, 0.90);
  --v3-card-bg: linear-gradient(145deg, rgba(255, 252, 244, 0.96), rgba(246, 238, 220, 0.96));
  --v3-field-bg: rgba(255, 252, 244, 0.88);
  --v3-chip-bg: rgba(185, 123, 22, 0.10);
  --v3-icon-bg: rgba(185, 123, 22, 0.08);
  --v3-grid-line: rgba(45, 43, 34, 0.045);
  --v3-shadow: 0 18px 50px rgba(58, 49, 30, 0.14);
  --v3-button-text: #18130a;
  --v3-title-ink: #2f312a;
}

html[data-theme="dark"] {
  --v3-bg: #11140f;
  --v3-surface: #1b2018;
  --v3-surface-2: #242a20;
  --v3-ink: #f4ecd8;
  --v3-muted: #d0c5a9;
  --v3-faint: #a79b82;
  --v3-line: rgba(244, 236, 216, 0.18);
  --v3-line-strong: rgba(244, 236, 216, 0.30);
  --v3-gold: #d19a2e;
  --v3-gold-2: #f0c15d;
  --v3-green: #8ab47e;
  --v3-red: #d27b67;
  --v3-header-bg: rgba(17, 20, 15, 0.92);
  --v3-card-bg: linear-gradient(145deg, rgba(35, 41, 31, 0.96), rgba(25, 30, 23, 0.96));
  --v3-field-bg: rgba(244, 236, 216, 0.09);
  --v3-chip-bg: rgba(209, 154, 46, 0.14);
  --v3-icon-bg: rgba(244, 236, 216, 0.08);
  --v3-grid-line: rgba(244, 236, 216, 0.045);
  --v3-shadow: 0 22px 70px rgba(0, 0, 0, 0.30);
  --v3-button-text: #17130b;
  --v3-title-ink: #ded3b8;
}

html,
body {
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--v3-gold) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--v3-green) 14%, transparent), transparent 28rem),
    var(--v3-bg);
  color: var(--v3-ink);
}

body::before {
  background-image:
    linear-gradient(var(--v3-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--v3-grid-line) 1px, transparent 1px);
}

.app-header {
  background: var(--v3-header-bg);
}

.theme-toggle {
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 999px;
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  font-weight: 800;
}

.theme-toggle:hover {
  border-color: var(--v3-gold);
  color: var(--v3-gold-2);
}

.nav-link:hover,
.nav-link.active,
.nav-more.active .more-summary,
.more-summary:hover,
.more-link:hover,
.more-link.active,
.tabs button.active {
  background: var(--v3-chip-bg);
  color: var(--v3-ink);
}

.scope-chip {
  background: var(--v3-chip-bg);
  color: var(--v3-gold-2);
}

.hero-lockup,
.v3-search,
.search-header,
.home-stat,
.kpi,
.tabs,
.chip,
.tiny-btn,
.btn-ghost {
  background: var(--v3-field-bg);
}

.hero-lockup,
.action-card,
.ote-card,
.answer-card,
.panel,
.v3-panel,
.model-card,
.saved-note,
.state-card,
.key-note,
.mini-video,
.practice-row {
  background: var(--v3-card-bg);
  box-shadow: var(--v3-shadow);
}

.hero-search-btn,
.btn-primary {
  background: var(--v3-gold);
  color: var(--v3-button-text);
}

.hero-search-btn:hover,
.btn-primary:hover {
  background: var(--v3-gold-2);
  color: var(--v3-button-text);
}

.hero-input,
.search-header input {
  color: var(--v3-ink);
}

.hero-input::placeholder,
.search-header input::placeholder {
  color: var(--v3-faint);
  opacity: 1;
}

.panel p,
.v3-panel p,
.learning-list,
.learning-list li,
.transcript-line p,
.key-note p,
.answer-card p,
.ote-card p,
.model-card p,
.practice-row p,
.saved-note p,
.mini-video span,
.action-sub,
.page-sub,
.home-tagline {
  color: var(--v3-muted);
}

.panel h2,
.panel h3,
.v3-panel h2,
.v3-panel h3,
.ote-card h2,
.model-card h2,
.practice-row h2,
.answer-card h2,
.note-title,
.home-stat .v,
.kpi .value,
.brand-title {
  color: var(--v3-ink);
}

.learning-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  line-height: 1.55;
}

/* v0.3.1: .time-link / .note-time keep their own neutral ink color
   (defined above). Only the arrow + timestamp accents pick up gold. */
.back-link,
summary,
.search-icon,
.brand-logo-inline,
.hero-lockup,
.action-card .ic {
  color: var(--v3-gold-2);
}

html[data-theme="dark"] .back-link,
html[data-theme="dark"] summary,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .brand-logo-inline,
html[data-theme="dark"] .hero-lockup,
html[data-theme="dark"] .action-card .ic {
  color: var(--v3-gold-2);
}

.page-kicker,
.answer-label,
.card-meta,
.label,
.brand-sub,
.home-stat .l {
  color: var(--v3-faint);
}

/* ===================================================================
   v0.3.1 — Legal-Safe Demo additions
   Components for non-affiliation framing, attribution, source snippets,
   raw-excerpt disclosure, About page, and footer disclaimer copy.
   =================================================================== */

.home-tagline {
  max-width: 760px;
  margin: 0;
  color: var(--v3-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.home-source-note {
  max-width: 760px;
  margin: 0;
  color: var(--v3-faint);
  font-size: 0.78rem;
  line-height: 1.5;
}

.home-source-note a {
  color: var(--v3-gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-has-results .home-source-note {
  display: none;
}

/* Footer disclaimers */
.footer-line {
  margin: 0;
  color: var(--v3-muted);
  font-size: 0.68rem;
  line-height: 1.25;
  max-width: none;
}

.footer-line::after {
  content: "•";
  margin-left: 0.55rem;
  color: var(--v3-faint);
}

.footer-line:last-child::after,
.footer-meta::after {
  content: "";
  margin: 0;
}

.footer-muted {
  color: var(--v3-faint);
}

.footer-meta {
  margin: 0;
  padding-top: 0;
  border-top: 0;
  color: var(--v3-faint);
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.footer-meta a {
  color: var(--v3-gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-inline: 0.35rem;
}

/* "Watch on YouTube" CTA — prominent button for detail pages */
.watch-on-youtube {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--v3-gold);
  background: var(--v3-gold);
  color: var(--v3-button-text, #18130a);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: filter 160ms ease, transform 160ms ease;
}

.watch-on-youtube:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  text-decoration: none;
}

.watch-on-youtube:focus-visible {
  outline: 2px solid var(--v3-gold-2);
  outline-offset: 2px;
}

.watch-on-youtube .yt-arrow {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Attribution block: video / channel / source rows */
.attribution-block {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--v3-line);
  border-left: 3px solid var(--v3-gold);
  border-radius: 8px;
  background: var(--v3-surface-2);
}

.attribution-block .attrib-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: baseline;
  font-size: 0.83rem;
  line-height: 1.4;
}

.attribution-block .attrib-label {
  color: var(--v3-faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 4.5rem;
}

.attribution-block .attrib-value {
  color: var(--v3-ink);
  font-weight: 500;
}

.attrib-link {
  color: var(--v3-gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.attrib-note {
  margin: 0.4rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--v3-line);
  color: var(--v3-faint);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Source snippet block (quoted, attributed) */
.snippet-quote {
  margin: 0 0 0.35rem;
  padding-left: 0.7rem;
  border-left: 2px solid color-mix(in srgb, var(--v3-gold) 50%, transparent);
  color: var(--v3-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  font-style: italic;
}

.snippet-attrib {
  margin: 0;
  color: var(--v3-faint);
  font-size: 0.74rem;
  line-height: 1.5;
}

.snippet-attrib em {
  font-style: italic;
  color: var(--v3-muted);
}

/* Raw transcript disclosure — gated behind details/summary */
.raw-disclosure {
  margin: 0.75rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--v3-line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v3-faint) 6%, transparent);
}

.raw-disclosure > summary {
  cursor: pointer;
  color: var(--v3-gold-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
}

.raw-disclosure > summary::-webkit-details-marker {
  display: none;
}

.raw-disclosure > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 160ms ease;
}

.raw-disclosure[open] > summary::before {
  content: "▾ ";
}

.raw-disclosure-warning,
.raw-corruption-warning {
  margin: 0.5rem 0;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--v3-red);
  background: color-mix(in srgb, var(--v3-red) 8%, transparent);
  color: var(--v3-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.raw-excerpt-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.raw-excerpt-list li {
  padding: 0.4rem 0.55rem;
  border-left: 2px solid var(--v3-line-strong);
  color: var(--v3-muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* About page */
.about-page {
  display: grid;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.about-grid .panel {
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  background: var(--v3-card-bg);
}

.about-grid .panel h2 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--v3-ink);
}

.about-grid .panel p {
  margin: 0 0 0.5rem;
  color: var(--v3-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.about-grid .panel a {
  color: var(--v3-gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Settings: non-affiliation row */
.settings-non-affiliation {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--v3-line);
  color: var(--v3-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.settings-non-affiliation strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--v3-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.settings-non-affiliation a {
  color: var(--v3-gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Generic small-muted helper */
.small-muted {
  color: var(--v3-faint);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Original-content note (study-summary kicker) */
.original-content-note {
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--v3-gold);
  background: color-mix(in srgb, var(--v3-gold) 8%, transparent);
  color: var(--v3-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Mobile: shrink the home title and stack attribution rows */
@media (max-width: 720px) {
  .clean-home,
  .clean-home.home-idle,
  .clean-home.home-has-results,
  .clean-home.home-static {
    max-width: 100%;
    align-content: start;
  }

  .home-product-title,
  .home-idle .home-product-title,
  .home-static .home-product-title {
    /* On phones the column collapses to 100%, so let the title fill it. */
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.2rem, 14.5vw, 4.6rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
  }

  .attribution-block .attrib-row {
    flex-direction: column;
    gap: 0.1rem;
  }

  .time-link .time-link-title,
  .note-time .time-link-title {
    display: none;
  }
}

/* v0.3.1 width-alignment lock — last in cascade.
   Forces the searched-home column (search bar + results meta + answer stack +
   each answer card) to share one max-width token and identical horizontal
   placement (justify-self: stretch, no auto margins). Ensures visual
   continuity between the search bar and the results below it. */
.clean-home .v3-search,
.clean-home .home-results,
.clean-home .home-results-meta,
.clean-home .clean-answer-stack,
.clean-home .answer-stack,
.clean-home .answer-card,
.clean-home .home-answer,
.home-idle .v3-search,
.home-has-results .v3-search,
.home-static .v3-search,
.home-has-results .home-results,
.home-has-results .home-results-meta,
.home-has-results .clean-answer-stack,
.home-has-results .answer-card,
.home-has-results .home-answer {
  width: 100%;
  max-width: var(--v3-search-col);
  margin-inline: 0;
  justify-self: stretch;
  box-sizing: border-box;
}

/* Keep the post-search source note suppressed (preserves prior v0.3.1 fix). */
.home-has-results .home-source-note,
.home-has-results .quote-strip {
  display: none !important;
}

@media (max-width: 720px) {
  :root,
  html[data-theme="light"],
  html[data-theme="dark"] {
    --v3-search-col: 100%;
  }
}

/* ============================================================
   v0.3.2 Library Lane — full archive lessons UI
   ============================================================ */

.lib-page {
  display: grid;
  gap: 1rem;
}

/* Compact Library index — fit on one screen on desktop. */
.lib-page-compact {
  gap: 0.75rem;
}

.lib-page-compact .page-kicker { margin: 0; }
.lib-page-compact .page-title {
  font-size: 1.85rem;
  line-height: 1.1;
  margin: 0;
}
.lib-page-compact .lib-sub {
  margin: 0.15rem 0 0;
  color: var(--v3-muted);
  font-size: 0.92rem;
}

.lib-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.lib-header-text { min-width: 0; }

/* Detail page compaction */
.lib-detail-page { gap: 0.7rem; }
.lib-detail-page .page-title {
  font-size: 1.6rem;
  margin: 0.05rem 0 0;
  line-height: 1.15;
  /* v0.4.1 — long folder names should wrap, not overflow into chips row. */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.lib-detail-page .lib-folder-title {
  max-width: 100%;
}
.lib-detail-page .page-kicker { margin: 0; }
.lib-detail-head-row {
  display: grid;
  gap: 0.3rem;
}

/* Library meta strip retained for legacy use (no longer rendered on the Library index page). */
.lib-meta-strip {
  display: none;
}

.lib-meta-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.lib-meta-kpi .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v3-muted);
  font-weight: 600;
}

.lib-meta-kpi strong {
  font-size: 1.05rem;
  color: var(--v3-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.lib-legend {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-self: end;
}

.lib-tabs {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
  width: max-content;
}

.lib-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--v3-muted);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.lib-tab:hover {
  color: var(--v3-ink);
}

.lib-tab.active {
  background: var(--v3-card-bg);
  color: var(--v3-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.lib-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.1rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--v3-chip-bg);
  color: var(--v3-muted);
}

.lib-tab.active .lib-tab-count {
  color: var(--v3-gold-2);
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}

/* Compact grid for the Library index — denser, four columns on wide desktops. */
.lib-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 0.6rem;
}

@media (min-width: 1180px) {
  .lib-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .lib-grid-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.lib-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  /* Same playlist gradient applied to all library cards. */
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--v3-gold) 9%, var(--v3-card-bg)) 0%, var(--v3-card-bg) 60%, color-mix(in srgb, var(--v3-green) 5%, var(--v3-card-bg)) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  min-height: 118px;
  /* v0.3.6 enrichment-parity fix: keep all children inside the card boundary
     in the dense 4-/5-column grid where the OTE title is long. */
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.lib-card > * { min-width: 0; }

.lib-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--v3-gold) 45%, var(--v3-line));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
}

.lib-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  /* Allow the pill to wrap below the title on narrow card widths
     (e.g. 4-/5-column dense grid) instead of forcing horizontal overflow. */
  flex-wrap: wrap;
  min-width: 0;
}

.lib-card-name {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Let the title shrink and wrap so the right-hand pill never pushes past
     the card edge. flex: 1 1 ... gives the title room, min-width: 0 lets it
     wrap normally, overflow-wrap: anywhere handles very long single words. */
  flex: 1 1 9rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.lib-card-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--v3-muted);
  line-height: 1.4;
}

.lib-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.lib-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--v3-muted);
  font-size: 0.85rem;
  margin-top: auto;
  /* Stay inside the card if both values are long; right-side duration
     was overflowing the box on the OTE card at desktop width. */
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.lib-card-meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lib-card-meta strong {
  color: var(--v3-ink);
  font-variant-numeric: tabular-nums;
}

/* Topic cards now share the playlist gradient; only a small accent shift differentiates them. */
.lib-card-topic {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--v3-green) 10%, var(--v3-card-bg)) 0%, var(--v3-card-bg) 55%, color-mix(in srgb, var(--v3-gold) 6%, var(--v3-card-bg)) 100%);
}

/* v0.3.9 sprint-2 fix #5 — Topics tab grid uses a coarser column count so
   the ~12 topic cards fill the canvas with similar visual weight to the ~20
   playlist cards. Title and padding are nudged up only inside Topics. */
.lib-grid.lib-grid-topics {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7rem;
}
@media (min-width: 900px) {
  .lib-grid.lib-grid-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .lib-grid.lib-grid-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lib-page-v038 .lib-grid.lib-grid-topics {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (min-width: 900px) {
  .lib-page-v038 .lib-grid.lib-grid-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .lib-page-v038 .lib-grid.lib-grid-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lib-card.lib-card-topic-lg {
  padding: 0.85rem 1rem;
  gap: 0.45rem;
}
.lib-card.lib-card-topic-lg .lib-card-name {
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 700;
}
.lib-card.lib-card-topic-lg .lib-card-meta {
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
.lib-card.lib-card-topic-lg .status-pill {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
}
/* On dense (short viewport) pages, drop the bigger topic-lg padding back
   down so the one-page-compactness goal still holds. */
.lib-page-dense .lib-card.lib-card-topic-lg { padding: 0.55rem 0.7rem; }
.lib-page-dense .lib-card.lib-card-topic-lg .lib-card-name { font-size: 0.92rem; }

/* Filter bar (year + concept) appears on lists with >20 videos.
   v0.4.2 redesign: every filter row uses the same two-column grid layout
   (fixed-width label column + chips area). Labels align in a clean vertical
   stack on the left and chip rows share identical height/spacing so each
   filter category looks visually equal. Uses existing v0.4.1 tokens only. */
.lib-filters {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 14px;
  background: var(--v3-field-bg);
  position: sticky;
  top: calc(var(--header-h, 64px) + 8px);
  z-index: 10;
  backdrop-filter: blur(20px);
}
.lib-filter-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: start;
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  min-width: 0;
}
.lib-filter-row + .lib-filter-row {
  border-top: 1px dashed var(--v3-line);
  padding-top: 0.5rem;
}
.lib-filter-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--v3-muted);
  padding-top: 0.3rem; /* vertical-center against first chip row */
  white-space: nowrap;
}
.lib-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  align-items: center;
}
.lib-filter-chip {
  appearance: none;
  border: 1px solid var(--v3-line);
  background: var(--v3-card-bg);
  color: var(--v3-muted);
  padding: 0 0.7rem;
  height: 28px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.lib-filter-chip:hover {
  color: var(--v3-ink);
  border-color: color-mix(in srgb, var(--v3-gold) 40%, var(--v3-line));
}
.lib-filter-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--v3-gold) 65%, transparent);
  outline-offset: 2px;
}
.lib-filter-chip.active {
  background: color-mix(in srgb, var(--v3-gold) 18%, var(--v3-card-bg));
  border-color: color-mix(in srgb, var(--v3-gold) 55%, var(--v3-line));
  color: var(--v3-ink);
}

html[data-theme="dark"] .tabs {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-surface-2) 78%, transparent);
}

html[data-theme="dark"] .tabs button {
  color: var(--v3-muted);
}

html[data-theme="dark"] .tabs button.active {
  border-color: var(--v3-line-strong);
  background: var(--v3-surface-2);
  color: var(--v3-gold-2);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .lib-filters {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-surface-2) 92%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .lib-filter-chip {
  border-color: var(--v3-line-strong);
  background: var(--v3-surface-2);
  color: var(--v3-faint);
}

html[data-theme="dark"] .lib-filter-chip.active,
html[data-theme="dark"] .lib-filter-chip:hover {
  border-color: color-mix(in srgb, var(--v3-gold) 64%, var(--v3-line-strong));
  background: var(--v3-chip-bg);
  color: var(--v3-gold-2);
}

html[data-theme="dark"] .saved-column {
  border-color: var(--v3-line-strong);
  background: var(--v3-card-bg);
}

html[data-theme="dark"] .saved-section-head {
  border-bottom: 1px solid var(--v3-line);
  padding-bottom: 0.55rem;
}

html[data-theme="dark"] .saved-column .saved-note {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-surface-2) 72%, transparent);
}

@media (max-width: 640px) {
  .lib-filters {
    padding: 0.65rem 0.7rem;
    gap: 0.45rem;
  }
  .lib-filter-row {
    grid-template-columns: 1fr;
    row-gap: 0.3rem;
  }
  .lib-filter-label {
    padding-top: 0;
  }
  .lib-filter-row + .lib-filter-row {
    padding-top: 0.45rem;
  }
}
@media (max-width: 480px) {
  .lib-filter-chips {
    max-height: 5.4rem;
    overflow-y: auto;
    padding-right: 0.25rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}
.lib-filter-count {
  font-variant-numeric: tabular-nums;
  color: var(--v3-muted);
  font-weight: 600;
  font-size: 0.7rem;
  opacity: 0.85;
}

.lib-note {
  margin: 0 0 0.5rem;
  color: var(--v3-muted);
  font-size: 0.88rem;
}

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  /* Inside a library card, allow the pill to shrink against the title
     so it can never push past the card's right edge. flex-wrap on the
     head row will drop it to its own line before it overflows. */
  flex: 0 1 auto;
  max-width: 100%;
}

.lib-card .status-pill {
  /* Slightly tighter so 'Enriched · 27/27' fits in a 4-/5-col grid cell. */
  padding: 0.16rem 0.5rem;
  font-size: 0.68rem;
}

.status-pill.mini {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
}

.status-pill.status-enriched {
  background: color-mix(in srgb, var(--v3-green) 18%, var(--v3-card-bg));
  color: var(--v3-green);
  border-color: color-mix(in srgb, var(--v3-green) 35%, transparent);
}

.status-pill.status-index {
  background: color-mix(in srgb, var(--v3-muted) 14%, var(--v3-card-bg));
  color: var(--v3-muted);
  border-color: color-mix(in srgb, var(--v3-muted) 28%, transparent);
}

.status-pill.status-neutral {
  background: var(--v3-chip-bg);
  color: var(--v3-muted);
  border-color: var(--v3-line);
}

/* v0.3.6 enrichment-parity: tier-aware pills.
   - status-hand  = OTE Pilot only. Hand-written summary + 8-step model. Green accent.
   - status-auto  = Auto-extracted highlights. Gold accent. Clearly different from hand. */
.status-pill.status-hand {
  background: color-mix(in srgb, var(--v3-green) 18%, var(--v3-card-bg));
  color: var(--v3-green);
  border-color: color-mix(in srgb, var(--v3-green) 38%, transparent);
}

.status-pill.status-auto {
  background: color-mix(in srgb, var(--v3-gold) 16%, var(--v3-card-bg));
  color: var(--v3-gold);
  border-color: color-mix(in srgb, var(--v3-gold) 42%, transparent);
}

/* Mix chip shown next to status pill when folder has multiple tiers (e.g. "+12 indexed"). */
.status-mix-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--v3-muted);
  background: var(--v3-chip-bg);
  border: 1px solid var(--v3-line);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Reason line under auto-extracted highlights: clearly marked as automated. */
.auto-reason {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.78rem;
  color: var(--v3-muted);
  line-height: 1.4;
}

.auto-reason-label {
  display: inline-block;
  margin-right: 0.3rem;
  font-weight: 700;
  color: var(--v3-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
}

/* Topic-level Q&A list shown on non-OTE video detail pages. */
.topic-qa-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.topic-qa-item {
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--v3-gold) 4%, var(--v3-card-bg, transparent));
}

.topic-qa-item > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--v3-ink);
  list-style: none;
  position: relative;
  padding-right: 1.25rem;
}

.topic-qa-item > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 700;
  color: var(--v3-muted);
}

.topic-qa-item[open] > summary::after { content: "−"; }

.topic-qa-item > p {
  margin: 0.45rem 0 0.25rem;
  color: var(--v3-ink);
  line-height: 1.55;
  font-size: 0.93rem;
}

.topic-qa-item > p.muted {
  color: var(--v3-muted);
  font-size: 0.78rem;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--v3-line);
  color: var(--v3-muted);
  background: var(--v3-chip-bg);
  text-decoration: none;
}

.chip.chip-soft {
  background: var(--v3-chip-bg);
  color: var(--v3-ink);
}

.chip.chip-quiet {
  background: transparent;
  color: var(--v3-muted);
}

.chip.chip-muted {
  background: transparent;
  color: var(--v3-muted);
  border-style: dashed;
}

.chip.chip-warn {
  background: color-mix(in srgb, var(--v3-gold) 14%, var(--v3-card-bg));
  color: var(--v3-gold-2);
  border-color: color-mix(in srgb, var(--v3-gold) 40%, transparent);
}

a.chip:hover {
  border-color: color-mix(in srgb, var(--v3-gold) 55%, var(--v3-line));
  color: var(--v3-gold-2);
}

/* Detail head row */
.lib-detail-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.1rem 0 0.2rem;
}

.lib-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.3rem 0 0.4rem;
}

/* Compact archive row table — v0.4.1 lesson-row cleanup.
   The row is now a 2-column grid: a clickable title-link (which itself uses
   a CSS grid to put title/meta on the left and numeric date/duration on the
   right) and a small actions cluster (heart + YouTube). All text wraps or
   clamps cleanly — no overflow. Duration is right-aligned and tabular. */
.lib-row-table {
  display: grid;
  gap: 0.4rem;
}

.lib-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  background: var(--v3-card-bg);
  transition: border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
}

.lib-row:hover {
  border-color: color-mix(in srgb, var(--v3-gold) 35%, var(--v3-line));
  background: color-mix(in srgb, var(--v3-card-bg) 92%, var(--v3-gold) 8%);
}

.lib-row-titlelink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  border-radius: 12px 0 0 12px;
}
.lib-row-titlelink:hover .lib-row-title,
.lib-row-titlelink:focus-visible .lib-row-title {
  color: var(--v3-gold-2);
}
.lib-row-titlelink:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--v3-gold) 55%, transparent);
  outline-offset: -2px;
}

.lib-row-titleblock {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.lib-row-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
  /* Clamp to two lines max so cards stay compact and never overflow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.lib-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  align-items: center;
  color: var(--v3-muted);
  font-size: 0.78rem;
  min-width: 0;
}

.lib-row-numeric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1rem;
  flex: 0 0 auto;
  color: var(--v3-faint);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.74rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lib-row-date {
  color: var(--v3-faint);
}
.lib-row-dur {
  color: var(--v3-muted);
  font-weight: 500;
}

.lib-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.55rem 0 0.1rem;
  flex: 0 0 auto;
}

.lib-row-actions .heart-btn {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1rem;
}

.lib-row-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  height: 2.1rem;
  min-width: 2.6rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--v3-line);
  background: transparent;
  color: var(--v3-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lib-row-icon-link:hover,
.lib-row-icon-link:focus-visible {
  color: var(--v3-gold-2);
  border-color: color-mix(in srgb, var(--v3-gold) 45%, var(--v3-line));
  background: color-mix(in srgb, var(--v3-gold) 10%, transparent);
  outline: none;
}

/* Hide redundant playlist chip on a playlist folder page — every row is from
   the same playlist already. Keep it on topic folders where rows span
   multiple playlists. */
.lib-page-playlist .lib-row-playlist-chip {
  display: none;
}

/* v0.4.1 — collapsible folder groupings (year / concept). */
.lib-row-groups {
  display: grid;
  gap: 0.55rem;
}
.lib-row-group {
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--v3-card-bg) 60%, transparent);
  overflow: hidden;
}
.lib-row-group[open] {
  background: var(--v3-card-bg);
}
.lib-row-group > .lib-row-table {
  padding: 0.4rem 0.55rem 0.55rem;
  border-top: 1px solid var(--v3-line);
  background: color-mix(in srgb, var(--v3-card-bg) 50%, transparent);
}
.lib-row-group-summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  list-style: none;
  color: var(--v3-ink);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
.lib-row-group-summary::-webkit-details-marker { display: none; }
.lib-row-group-summary::before {
  content: "›";
  display: inline-block;
  width: 0.85rem;
  text-align: center;
  color: var(--v3-faint);
  transition: transform 0.18s ease;
  font-size: 1rem;
  line-height: 1;
}
.lib-row-group[open] > .lib-row-group-summary::before {
  transform: rotate(90deg);
}
.lib-row-group-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-row-group-count {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--v3-faint);
  background: color-mix(in srgb, var(--v3-ink) 6%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  letter-spacing: 0;
  text-transform: none;
}

/* v0.4.1 — the chip-set inside each row meta line uses a smaller variant so
   two pills + a playlist chip fit on one line without wrapping on desktop. */
.lib-row-meta .chip,
.lib-row-meta .status-pill {
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  border-radius: 999px;
}
.lib-row-meta .status-pill.mini { font-size: 0.7rem; }

/* Archive video detail page */
.lib-archive-video .lib-detail-head .heart-btn {
  height: 2.4rem;
  width: 2.4rem;
}

/* v0.3.9 sprint-2 fix #3 — uniform pill row on every lesson page.
   Previously the Watch CTA, heart button, Study-ready pill, and timestamps
   chip rendered at four different heights, making the row look uneven.
   These rules normalise box height, vertical padding, line-height, and
   font-size so all four sit on the same baseline regardless of label
   length. Scoped to .lib-archive-video so other surfaces are unaffected. */
.lib-archive-video .lib-detail-head {
  gap: 0.5rem;
  align-items: center;
}
.lib-archive-video .lib-detail-head .watch-on-youtube,
.lib-archive-video .lib-detail-head .heart-btn,
.lib-archive-video .lib-detail-head .status-pill,
.lib-archive-video .lib-detail-head .chip {
  height: 2.4rem;
  min-height: 2.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.lib-archive-video .lib-detail-head .watch-on-youtube {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.85rem;
}
.lib-archive-video .lib-detail-head .status-pill {
  padding: 0 0.75rem;
  font-size: 0.78rem;
}
.lib-archive-video .lib-detail-head .chip {
  padding: 0 0.75rem;
  font-size: 0.78rem;
}

.lib-segment-preview {
  margin-top: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  background: var(--v3-card-bg);
}

.lib-segment-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.lib-segment-item {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  background: var(--v3-field-bg);
  display: grid;
  gap: 0.35rem;
}

.lib-segment-item .snippet-quote {
  margin: 0;
  color: var(--v3-ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
  .lib-meta-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lib-legend {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .lib-row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* On mobile, collapse numeric column under the title so the row stays */
  /* readable. Heart + YT icon link drop to a bottom-aligned strip. */
  .lib-row-titlelink {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    padding: 0.6rem 0.8rem 0.5rem;
  }
  .lib-row-numeric {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    justify-content: flex-start;
  }
  .lib-row-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 0 0.7rem 0.55rem;
  }
  .lib-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v0.3.2 — Archive lane search result hint
   ============================================================ */

/* Archive-result card kind hint on the home search results.
   Marks results that come from the full 659-video archive index
   (distinct from OTE Q&A / notes / videos). */
.answer-card[data-result-kind="archive"] .answer-label::before {
  content: "Archive · ";
  opacity: 0.75;
}


/* ============================================================
   v0.3.3 — Agent D: Design Consistency Patch
   Goals:
   1. Replace disruptive DM Mono numerical/timestamp styling with a
      calmer body-sans treatment that still aligns numerically.
   2. Align answer-card content consistently to the LEFT instead of
      mixing centered headline/body with left-aligned timestamp pills.
   3. Push timestamp pills to the RIGHT inside answer cards on
      desktop where appropriate. Stack left on narrow viewports.
   4. Keep legal-safe YouTube link structure intact (a.time-link,
      span.time-link-tc, etc. — only typography/layout changed).
   ============================================================ */

/* 1. Calmer numeric typography ---------------------------------- */

/* Timestamp code (e.g. 00:09:10) — drop heavy mono, use body sans
   with tabular figures so digits still align column-by-column. */
.time-link .time-link-tc,
.note-time .time-link-tc {
  font-family: var(--font-sans, inherit);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--v3-muted);
}

/* Hero stats ticker — 3-stat drift strip (v0.3.6). */
.market-ticker {
  font-family: var(--font-sans, inherit);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--v3-muted);
}

.market-ticker span {
  font-weight: 500;
  /* Keep single-line for drift layout */
  white-space: nowrap;
  flex-shrink: 0;
}

/* "Original study answer" kicker / .answer-label / .page-kicker —
   keep the small-caps style but switch off the monospace so it stops
   competing with the H2 below it. */
.page-kicker,
.answer-label,
.card-meta,
.label {
  font-family: var(--font-sans, inherit);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 2. Left-align answer card content (kill mixed centering) ------ */

/* The home shell uses text-align:center and justify-items:center to
   center the search bar and tagline. Re-anchor anything *inside* an
   answer card back to the left so the kicker, title, body, and
   timestamp pills share one consistent left edge. */
.clean-home .answer-card,
.home-has-results .answer-card,
.home-static .answer-card,
.answer-card,
.answer-card .answer-label,
.answer-card h2,
.answer-card p,
.answer-card .home-result-actions,
.answer-card .timestamp-row {
  text-align: left;
  justify-self: stretch;
}

.answer-card h2 {
  /* slight tightening so the left edge reads cleanly */
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.answer-card p {
  line-height: 1.55;
}

/* 3. Right-align timestamp pills inside answer cards on desktop -- */
/* The action row mixes time-link pills with a Save/Open button.
   Push the time-link pills to the right edge of the card so they
   sit cleanly under the answer text and feel like metadata, not
   like the next heading. */
.answer-card .home-result-actions,
.answer-card .timestamp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  justify-content: flex-end;
  align-items: center;
}

/* If there is a ghost button (Save / Open) plus time-link pills,
   keep the button on the LEFT and float the time-link pills RIGHT
   inside the action row. */
.answer-card .home-result-actions > .btn-ghost,
.answer-card .timestamp-row > .btn-ghost {
  margin-right: auto;
}

/* Make individual time-link pills calmer too: thinner border,
   lighter ink weight. Preserves the legal-safe anchor structure. */
.answer-card .time-link,
.answer-card .note-time {
  font-weight: 400;
  color: var(--v3-muted);
  border-color: var(--v3-line);
}

.answer-card .time-link:hover,
.answer-card .note-time:hover {
  color: var(--v3-ink);
}

.answer-card .time-link .time-link-label,
.answer-card .note-time .time-link-label {
  color: var(--v3-muted);
  font-weight: 500;
}

/* 4. Mobile — stack timestamp pills left under the body so they
      don't fight a narrow column. ------------------------------- */
@media (max-width: 720px) {
  .answer-card .home-result-actions,
  .answer-card .timestamp-row {
    justify-content: flex-start;
  }
  .answer-card .home-result-actions > .btn-ghost,
  .answer-card .timestamp-row > .btn-ghost {
    margin-right: 0;
  }
  /* Mobile timestamp pills get a touch more room */
  .answer-card .time-link,
  .answer-card .note-time {
    width: 100%;
    justify-content: flex-start;
  }
}

/* 5. Detail-page evidence cards (.key-note) and result snippet
      cards — match the same calmer numerical treatment. */
.key-note .time-link-tc,
.takeaway-item .time-link-tc {
  font-family: var(--font-sans, inherit);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
}

/* Library / KPI numeric strips — keep tabular-nums alignment, but
   stop using the heavy mono inside small KPI values. */
.lib-meta-kpi strong {
  font-family: var(--font-sans, inherit);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* end v0.3.3 design consistency patch */

/* v0.3.3 — Library chip typography (e.g. "27 timestamped", "70 pending")
   Match calmer numeric treatment. Keep status pills small but readable. */
.chip,
.scope-chip {
  font-family: var(--font-sans, inherit);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
}

/* Stats ticker on Models page and saved sections — same softening */
.stats-ticker,
.stats-ticker span {
  font-family: var(--font-sans, inherit);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  text-transform: none;
  letter-spacing: 0.01em;
}

.saved-section-head {
  font-family: var(--font-sans, inherit);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ──────────────────────────────────────────────────────────────────────────
   Models Page v0.3.6 — Enrichment Parity — Concept Cards
   New CSS for models-page-v2, model-concept-card, status badges
   ────────────────────────────────────────────────────────────────────────── */

/* --- Source-backed and draft status pills --------------------------------- */
.status-pill.status-source-backed {
  background: color-mix(in srgb, var(--v3-gold) 16%, var(--v3-card-bg));
  color: color-mix(in srgb, var(--v3-gold-2) 100%, transparent);
  border-color: color-mix(in srgb, var(--v3-gold) 35%, transparent);
}

.status-pill.status-draft {
  background: color-mix(in srgb, var(--v3-muted) 10%, var(--v3-card-bg));
  color: var(--v3-muted);
  border-color: color-mix(in srgb, var(--v3-muted) 22%, transparent);
  border-style: dashed;
}

/* --- Folder status badges inside model-folder button --------------------- */
.model-folder-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.model-folder-status--hand-authored {
  color: var(--v3-green);
}
.model-folder-status--source-backed {
  color: var(--v3-gold-2, var(--v3-gold));
}
.model-folder-status--draft-model-path {
  color: var(--v3-muted);
}

/* Ensure folder name text doesn't overflow button */
.model-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
}

/* --- Folder description row ---------------------------------------------- */
.model-folder-desc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--v3-line);
}

.model-folder-desc-text {
  color: var(--v3-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.model-folder-count {
  flex-shrink: 0;
  color: var(--v3-faint);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

/* --- Concept card grid — wider than the OTE step grid -------------------- */
.model-layout.models-concept-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (max-width: 1200px) {
  .model-layout.models-concept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .model-layout.models-concept-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Concept card --------------------------------------------------------- */
.model-concept-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1rem;
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  background: var(--v3-card-bg);
}

.model-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.model-archive-count {
  color: var(--v3-faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  flex-shrink: 0;
}

.model-card-title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--v3-ink);
}

.model-card-tagline {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--v3-muted);
  line-height: 1.4;
  font-style: italic;
}

.model-card-summary {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  color: var(--v3-text);
  line-height: 1.5;
}

.model-keypoints,
.model-steps-detail,
.model-evidence {
  margin: 0.4rem 0;
  font-size: 0.82rem;
}

.model-keypoints summary,
.model-steps-detail summary,
.model-evidence summary {
  cursor: pointer;
  /* v0.4.1 fix: use brand gold accent, not blue */
  color: var(--v3-gold-2, var(--v3-ink));
  font-weight: 600;
  font-size: 0.78rem;
  width: fit-content;
  list-style: none;
  padding: 0.2rem 0;
}

.model-keypoints summary::before,
.model-steps-detail summary::before,
.model-evidence summary::before {
  content: "▸ ";
  font-size: 0.7rem;
}

.model-keypoints[open] summary::before,
.model-steps-detail[open] summary::before,
.model-evidence[open] summary::before {
  content: "▾ ";
}

.model-keypoints ul {
  margin: 0.4rem 0 0 1rem;
  padding: 0;
  list-style: disc;
}

.model-keypoints li {
  margin-bottom: 0.2rem;
  color: var(--v3-text);
  font-size: 0.8rem;
  line-height: 1.4;
}

.model-steps-list {
  margin: 0.4rem 0 0 1.2rem;
  padding: 0;
}

.model-steps-list li {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--v3-text);
}

.model-evidence-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.model-evidence-link {
  /* v0.4.1 fix: brand gold, not blue */
  color: var(--v3-gold-2, var(--v3-ink));
  font-size: 0.78rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-evidence-link:hover {
  text-decoration: underline;
}

/* --- Card action row ------------------------------------------------------ */
.model-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.65rem;
}

.model-search-link,
.model-lib-link,
.model-yt-link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--v3-line);
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  transition: background 0.12s, border-color 0.12s;
}

.model-search-link:hover,
.model-lib-link:hover,
.model-yt-link:hover {
  /* v0.4.1 fix: brand gold hover, not blue */
  background: color-mix(in srgb, var(--v3-gold) 10%, var(--v3-field-bg));
  border-color: color-mix(in srgb, var(--v3-gold) 40%, var(--v3-line));
}

/* --- Provenance / disclaimer micro text ----------------------------------- */
.model-card-provenance {
  margin: 0.55rem 0 0;
  font-size: 0.7rem;
  color: var(--v3-faint);
  line-height: 1.4;
  border-top: 1px solid var(--v3-line);
  padding-top: 0.45rem;
}

html[data-theme="dark"] .model-card-summary,
html[data-theme="dark"] .model-keypoints li,
html[data-theme="dark"] .model-steps-list li {
  color: var(--v3-ink);
}

html[data-theme="dark"] .model-keypoints summary,
html[data-theme="dark"] .model-steps-detail summary,
html[data-theme="dark"] .model-evidence summary,
html[data-theme="dark"] .model-evidence-link,
html[data-theme="dark"] .inline-link {
  color: var(--v3-gold-2);
}

html[data-theme="dark"] .model-search-link,
html[data-theme="dark"] .model-lib-link,
html[data-theme="dark"] .model-yt-link {
  background: var(--v3-field-bg);
  border-color: var(--v3-line-strong);
  color: var(--v3-ink);
}

html[data-theme="dark"] .model-search-link:hover,
html[data-theme="dark"] .model-lib-link:hover,
html[data-theme="dark"] .model-yt-link:hover {
  background: var(--v3-chip-bg);
  border-color: color-mix(in srgb, var(--v3-gold) 55%, var(--v3-line-strong));
}

/* --- Legal strip at the bottom ------------------------------------------- */
.models-legal-strip {
  margin-top: 0.75rem;
}

/* v0.4.1 — single merged disclaimer line, same text size as page disclaimer.
   Replaces the previous three-pill stack. We keep the .model-notes-strip
   span rule below it but override here so the legal line reads as a sentence,
   not a pill row. */
.models-legal-strip .models-legal-line {
  display: block;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--v3-faint);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 80ch;
}

/* --- inline-link for page-sub prose -------------------------------------- */
.inline-link {
  /* v0.4.1 fix: brand gold, not blue. Underlined so it reads as a link. */
  color: var(--v3-gold-2, var(--v3-ink));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
html[data-theme="dark"] .inline-link {
  color: var(--v3-gold-2);
}
.inline-link:hover {
  text-decoration-thickness: 2px;
}

/* --- Model status badge in card header ------------------------------------ */
.model-status-badge {
  font-size: 0.68rem;
}

/* =========================================================================
   v0.3.7 — Universal lesson framework
   Styling for captured notes panel, honest light states, study tips, and
   the small heart toggle used on per-note "like" controls. All playlists
   and topics share these treatments — no OTE-specific exception.
   ========================================================================= */

/* --- Captured notes panel ----------------------------------------------- */
.captured-notes-panel {
  margin-bottom: 1rem;
}
.captured-notes-panel h2 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.captured-notes-empty {
  border-style: dashed;
}
.captured-notes-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  border: 1px solid var(--v3-line);
}
.captured-notes-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.captured-notes-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.captured-notes-toggle-btn.active {
  background: var(--v3-gold, #c8922a);
  color: #1a160c;
  font-weight: 600;
}

/* --- Captured note list --------------------------------------------------- */
.captured-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.captured-note-item {
  padding: 0.75rem 0.9rem;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  transition: background 120ms ease, border-color 120ms ease;
}
.captured-note-item.liked {
  background: rgba(200, 146, 42, 0.08);
  border-color: rgba(200, 146, 42, 0.32);
}
.captured-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.captured-note-text {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.captured-note-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- Small heart button (per-note like) ---------------------------------- */
.heart-btn.small {
  font-size: 1rem;
  padding: 0.15rem 0.4rem;
  min-width: auto;
  height: auto;
  line-height: 1;
  border-radius: 999px;
}

/* --- Honest light-state note on Summary tab ------------------------------ */
.lesson-light-note {
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--v3-gold, #c8922a);
  padding: 0.75rem 0.9rem;
  border-radius: 4px;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* --- Study tip list (used in tape-reading light state) ------------------- */
.study-tip-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.study-tip-list li {
  padding-left: 0.15rem;
}

/* --- Dark theme corrections for captured notes --------------------------- */
.theme-dark .captured-notes-toggle,
[data-theme="dark"] .captured-notes-toggle {
  background: rgba(255, 255, 255, 0.04);
}
.theme-dark .captured-note-item,
[data-theme="dark"] .captured-note-item {
  background: rgba(255, 255, 255, 0.03);
}
.theme-dark .captured-note-item.liked,
[data-theme="dark"] .captured-note-item.liked {
  background: rgba(240, 200, 107, 0.10);
  border-color: rgba(240, 200, 107, 0.32);
}
.theme-dark .lesson-light-note,
[data-theme="dark"] .lesson-light-note {
  background: rgba(255, 255, 255, 0.03);
}

/* ===========================================================================
   v0.3.8 — Library + Models patch
   Goals:
   - Library landing fits one viewport (Playlists + Topic folders)
   - Models page simplified subheading, removed unequal stats strip
   - Style-consistent SVG folder icons
   - Model detail page (route #/models/:id) with Step Execution Model,
     Concept Reference, Needs review treatments
   - Visual setup diagram placeholder + future-implementation rule
   =========================================================================== */

/* --- Library landing compaction (v0.3.8) ------------------------------------ */
.lib-page-v038 {
  gap: 0.55rem;
  padding-block: 0.5rem;
}
.lib-header-tight {
  margin-bottom: 0.15rem;
  align-items: center;
}
.lib-title-tight {
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
}
/* Library cards: condense vertical rhythm to fit one viewport. */
.lib-card-tight {
  min-height: 0;
  padding: 0.6rem 0.75rem;
  gap: 0.35rem;
}
.lib-card-tight .lib-card-name {
  font-size: 0.92rem;
  line-height: 1.2;
}
.lib-card-tight .lib-card-meta {
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
.lib-card-tight .lib-card-cta {
  color: var(--v3-muted);
  font-size: 0.78rem;
}
.lib-card-tight .chip {
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
}
.lib-page-v038 .lib-grid-compact {
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 1200px) {
  .lib-page-v038 .lib-grid-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .lib-page-v038 .lib-grid-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* When viewport is short, shave further. */
.lib-page-dense .lib-title-tight { font-size: 1.35rem; }
.lib-page-dense .lib-card-tight { padding: 0.5rem 0.65rem; }
.lib-page-dense .lib-card-tight .lib-card-name { font-size: 0.88rem; }

/* --- Models page (v0.3.8) -------------------------------------------------- */
.models-page-v038 {
  /* Override prior min-height: calc(100vh - 168px); align-content:center */
  min-height: 0;
  align-content: start;
  gap: 0.75rem;
  padding-block: 0.5rem;
}
.models-head-v038 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
}
.models-title-v038 {
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  margin: 0;
  letter-spacing: -0.02em;
}
.models-sub-v038 {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--v3-muted);
  max-width: 720px;
}
/* Hide the legacy stats strip on the v0.3.8 page entirely. */
.models-page-v038 .stats-ticker,
.models-page-v038 .model-stats-ticker { display: none !important; }

/* --- Folder tab buttons (v0.3.8) ------------------------------------------ */
.model-folder-row-v038 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
@media (max-width: 1080px) {
  .model-folder-row-v038 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .model-folder-row-v038 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.model-folder-v038 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.55rem;
  align-items: center;
  min-height: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: var(--v3-field-bg);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.model-folder-v038:hover {
  border-color: color-mix(in srgb, var(--v3-gold) 45%, var(--v3-line));
  transform: translateY(-1px);
}
.model-folder-v038.active {
  border-color: color-mix(in srgb, var(--v3-gold) 65%, var(--v3-line));
  background: color-mix(in srgb, var(--v3-gold) 12%, var(--v3-card-bg));
}
.model-folder-v038 .model-folder-icon {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--v3-gold) 14%, var(--v3-card-bg));
  color: var(--v3-gold-2, var(--v3-ink));
}
.folder-glyph {
  width: 18px;
  height: 18px;
  display: block;
}
.model-folder-v038 .model-folder-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--v3-ink);
  line-height: 1.15;
  letter-spacing: -0.005em;
  /* Override generic .model-folder span { font-weight: 800; } cascade */
}
.model-folder-v038 .model-folder-kind {
  font-size: 0.7rem;
  color: var(--v3-muted);
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* --- Models summary grid (v0.3.8) ----------------------------------------- */
.models-summary-grid-v038 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.6rem;
}
.model-summary-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: var(--v3-card-bg);
  text-decoration: none;
  color: inherit;
  min-height: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.model-summary-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--v3-gold) 45%, var(--v3-line));
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.model-summary-card .model-card-title {
  margin: 0.1rem 0 0;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.model-summary-card .model-card-tagline {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--v3-muted);
}
.model-card-actions--compact { margin-top: 0.2rem; }
.model-card-open {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--v3-gold-2, var(--v3-ink));
}

/* --- Equal-tone kind pills (v0.3.8) --------------------------------------- */
.status-pill.kind-study {
  background: color-mix(in srgb, var(--v3-green) 14%, var(--v3-card-bg));
  color: var(--v3-green);
  border-color: color-mix(in srgb, var(--v3-green) 30%, transparent);
}
.status-pill.kind-concept {
  background: color-mix(in srgb, var(--v3-muted) 12%, var(--v3-card-bg));
  color: var(--v3-muted);
  border-color: color-mix(in srgb, var(--v3-muted) 26%, transparent);
}
.status-pill.kind-review {
  background: color-mix(in srgb, var(--v3-gold) 14%, var(--v3-card-bg));
  color: var(--v3-gold-2, var(--v3-ink));
  border-color: color-mix(in srgb, var(--v3-gold) 32%, transparent);
}

/* --- Model detail page (v0.3.8) ------------------------------------------ */
.model-detail-page {
  gap: 1rem;
  padding-block: 0.5rem;
}
.detail-head {
  display: grid;
  gap: 0.45rem;
}
.detail-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  color: var(--v3-muted);
  font-size: 0.82rem;
}
.detail-head-folder {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
  font-size: 0.78rem;
}
.detail-head-folder .folder-glyph {
  width: 14px;
  height: 14px;
}
.detail-head-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--v3-muted);
}
.detail-title {
  margin: 0.15rem 0 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
}
.detail-tagline {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--v3-muted);
  max-width: 760px;
}
.detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.detail-block {
  display: grid;
  gap: 0.5rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: var(--v3-card-bg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.detail-block-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.detail-block-sub {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--v3-muted);
}
.detail-block-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--v3-muted);
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--v3-line);
  border-radius: 12px;
  background: var(--v3-field-bg);
}
.detail-summary-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--v3-ink);
}
.detail-keypoints,
.detail-evidence-list {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.55;
}
.detail-keypoints li { margin-bottom: 0.25rem; }
.detail-evidence-list li { margin-bottom: 0.3rem; }
.detail-evidence-list .model-evidence-link {
  color: var(--v3-gold-2, var(--v3-ink));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail-step-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.detail-step {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: var(--v3-field-bg);
}
.detail-step-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--v3-gold) 16%, var(--v3-card-bg));
  color: var(--v3-gold-2, var(--v3-ink));
  font-family: var(--font-mono);
  font-weight: 800;
}
.detail-step-body h3 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  line-height: 1.2;
}
.detail-step-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--v3-ink);
}
.detail-step-evidence {
  margin-top: 0.25rem !important;
  font-size: 0.8rem !important;
  color: var(--v3-muted) !important;
}
.detail-steps-pending,
.detail-needs-review,
.detail-concept-ref {
  background: color-mix(in srgb, var(--v3-muted) 5%, var(--v3-card-bg));
  border-style: dashed;
}

/* --- Visual setup diagram placeholder ------------------------------------- */
/* v0.4.3: Models diagram block removed. Selectors below are kept as defensive
   no-ops so any stale cached markup (e.g. a previously rendered demo DOM)
   collapses cleanly rather than showing an orphan empty frame. A verified
   source-anchored diagram system remains on the post-launch radar; reintroduce
   the block in renderModelDetail (app_v03.js) and re-style these rules then. */
.detail-diagram-block,
.detail-diagram-placeholder,
.detail-diagram-frame,
.detail-diagram-grid,
.detail-diagram-label,
.detail-diagram-note { display: none !important; }

/* --- Detail footer -------------------------------------------------------- */
.detail-foot {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--v3-line);
  color: var(--v3-muted);
  font-size: 0.8rem;
}
.detail-provenance,
.detail-legal-line {
  margin: 0;
  line-height: 1.5;
}

html[data-theme="dark"] .model-detail-page .detail-head,
html[data-theme="dark"] .model-detail-page .detail-block,
html[data-theme="dark"] .model-detail-page .detail-foot {
  border-color: var(--v3-line-strong);
  background: var(--v3-card-bg);
  box-shadow: var(--v3-shadow);
}

html[data-theme="dark"] .model-detail-page .detail-head-folder,
html[data-theme="dark"] .model-detail-page .detail-head-count,
html[data-theme="dark"] .model-detail-page .detail-block-note {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-surface-2) 72%, transparent);
}
/* v0.4.3: .detail-diagram-placeholder dark override removed alongside the block. */

html[data-theme="dark"] .model-detail-page .detail-step {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-surface-2) 76%, transparent);
}

/* v0.4.1 — Light-mode model surfaces. Decoupled from dark overrides.
   The previous default fell back to near-white `--v3-card-bg`, which read as
   a flat "white box overlay" against the warm cream page bg. We tone down
   to a warm parchment surface that matches the rest of the light brand. */
html[data-theme="light"] .model-detail-page .detail-head,
html[data-theme="light"] .model-detail-page .detail-block {
  background: linear-gradient(
    160deg,
    rgba(250, 244, 228, 0.92),
    rgba(244, 234, 211, 0.92)
  );
  border-color: rgba(45, 43, 34, 0.16);
  box-shadow: 0 6px 18px rgba(58, 49, 30, 0.06);
}
html[data-theme="light"] .model-detail-page .detail-step {
  background: rgba(252, 246, 230, 0.78);
  border-color: rgba(45, 43, 34, 0.14);
}
html[data-theme="light"] .model-detail-page .detail-block-note,
html[data-theme="light"] .model-detail-page .detail-head-folder,
html[data-theme="light"] .model-detail-page .detail-head-count {
  background: rgba(248, 240, 220, 0.75);
  border-color: rgba(45, 43, 34, 0.14);
}
/* v0.4.3: .detail-diagram-placeholder light override removed alongside the block. */
html[data-theme="light"] .model-detail-page .detail-step-num {
  background: color-mix(in srgb, var(--v3-gold) 22%, rgba(250, 244, 228, 1));
  color: var(--v3-gold-2);
}
html[data-theme="light"] .model-detail-page .detail-foot {
  background: transparent;
  box-shadow: none;
}

/* v0.4.1 — Light-mode Models index summary cards.
   Same rationale: pull cards onto the warm palette, not pure white. */
html[data-theme="light"] .models-page .model-card,
html[data-theme="light"] .models-page .model-summary-card {
  background: linear-gradient(
    160deg,
    rgba(250, 244, 228, 0.94),
    rgba(244, 234, 211, 0.94)
  );
  border-color: rgba(45, 43, 34, 0.16);
  box-shadow: 0 6px 18px rgba(58, 49, 30, 0.06);
}
html[data-theme="light"] .models-page .model-folder {
  background: rgba(252, 246, 230, 0.86);
  border-color: rgba(45, 43, 34, 0.14);
}
html[data-theme="light"] .models-page .model-folder.active {
  background: color-mix(in srgb, var(--v3-gold) 12%, rgba(250, 244, 228, 1));
  border-color: color-mix(in srgb, var(--v3-gold) 36%, rgba(45, 43, 34, 0.18));
}
/* v0.4.1: merged disclaimer line on Models — no pills, plain sentence. */
html[data-theme="light"] .models-page .models-legal-strip .models-legal-line,
html[data-theme="dark"] .models-page .models-legal-strip .models-legal-line {
  background: transparent;
  border: 0;
}

html[data-theme="dark"] .model-detail-page .detail-step-num {
  border: 1px solid color-mix(in srgb, var(--v3-gold) 42%, var(--v3-line-strong));
  background: color-mix(in srgb, var(--v3-gold) 22%, var(--v3-surface));
  color: var(--v3-gold-2);
}

html[data-theme="dark"] .model-detail-page .detail-steps-pending,
html[data-theme="dark"] .model-detail-page .detail-needs-review,
html[data-theme="dark"] .model-detail-page .detail-concept-ref {
  background: color-mix(in srgb, var(--v3-surface-2) 70%, transparent);
  border-color: var(--v3-line-strong);
}

/* v0.4.3: .detail-diagram-label dark override removed alongside the block. */

html[data-theme="dark"] .model-detail-page .model-card-provenance,
html[data-theme="dark"] .model-detail-page .detail-legal-line,
html[data-theme="dark"] .model-detail-page .detail-step-evidence {
  color: var(--v3-faint) !important;
}

/* v0.4.3 — Compact Browser Extension entry inside the Settings popover.
   Replaces the long YouTube Notes instruction card from v0.4.2. The card is
   now a one-row link that navigates to the dedicated /extension page where
   the full setup, shortcuts, import flow, and future-sync sections live. */
.settings-entry-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-entry-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.page-kicker-mark-picture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.settings-row.settings-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  background: var(--v3-field-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.settings-row.settings-entry:hover {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-field-bg) 70%, var(--v3-surface) 30%);
}
.settings-row.settings-entry:active { transform: translateY(1px); }
.settings-entry-text {
  flex: 1;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.settings-entry-text strong {
  color: var(--v3-ink);
  font-size: 0.95rem;
  line-height: 1.2;
}
.settings-entry-text span {
  display: block;
  color: var(--v3-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0;
}
.settings-entry-status {
  color: var(--v3-faint, var(--v3-muted)) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.settings-entry-chevron {
  font-size: 1.2rem;
  color: var(--v3-muted);
  line-height: 1;
  padding-left: 0.25rem;
}
/* The .settings-popover span { display: block } rule above forces every
   span block-level, so we re-flatten the inline beta pill. */
.settings-popover .settings-pill {
  display: inline-block;
  margin: 0 0 0 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-button-text);
  background: var(--v3-gold);
  border-radius: 999px;
  vertical-align: middle;
  width: auto;
}
html[data-theme="dark"] .settings-popover .settings-pill {
  background: var(--v3-gold-2);
  color: #17130b !important;
}
html[data-theme="dark"] .settings-row.settings-entry {
  background: color-mix(in srgb, var(--v3-surface-2) 80%, transparent);
  border-color: var(--v3-line-strong);
}
html[data-theme="dark"] .settings-row.settings-entry:hover {
  background: var(--v3-surface-2);
}

/* v0.4.3 — Dedicated /extension page.
   Single-column grid of panels; reuses the existing .panel.v3-panel
   treatment so the page reads as a normal Inner Archive content page in
   both light and dark mode. The brand mark sits next to the page title as
   a subtle nod — same proportions as the header logo. */
.extension-page { max-width: 880px; }
.extension-page .page-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.extension-page .page-title-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v3-button-text);
  background: var(--v3-gold);
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.5;
}
html[data-theme="dark"] .extension-page .page-title-badge {
  background: var(--v3-gold-2);
  color: #17130b;
}
.extension-page .page-kicker { display: flex; align-items: center; gap: 0.5rem; }
.extension-page .page-kicker-mark {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.85;
  flex: 0 0 18px;
}
.extension-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}
.extension-section { padding: 1.1rem 1.2rem; }
.extension-section h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.extension-section p {
  margin: 0.35rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--v3-ink);
}
.extension-section code,
.extension-section kbd {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.82rem;
  padding: 0.05rem 0.4rem;
  background: var(--v3-field-bg);
  border: 1px solid var(--v3-line);
  border-radius: 6px;
  color: var(--v3-ink);
  white-space: nowrap;
}
/* High-specificity colour bindings: the existing `.panel ul, .panel ol`
   rule earlier in this file sets `color: var(--ink)` (a legacy token from
   styles.css that resolves dark in both themes). We re-bind to the v3 ink
   token using matching specificity (class + element) so list text stays
   legible in dark mode. */
.extension-section ul.extension-bullets,
.extension-section ol.extension-steps {
  margin: 0.45rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--v3-ink);
}
.extension-section ul.extension-bullets { gap: 0.25rem; line-height: 1.5; }
.extension-section ul.extension-bullets li { list-style: disc; color: var(--v3-ink); }
.extension-section ol.extension-steps li { list-style: decimal; color: var(--v3-ink); }
.extension-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.extension-shortcuts-table {
  width: 100%;
  margin-top: 0.55rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.extension-shortcuts-table th,
.extension-shortcuts-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--v3-line);
  vertical-align: top;
  color: var(--v3-ink);
}
.extension-shortcuts-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v3-muted);
  font-weight: 700;
  background: var(--v3-field-bg);
}
.extension-shortcuts-table tbody tr:last-child td { border-bottom: 0; }
.extension-status {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--v3-ink);
}
.extension-legal {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--v3-faint, var(--v3-muted));
}
.extension-future {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-field-bg) 60%, var(--v3-surface) 40%);
}
html[data-theme="dark"] .extension-section code,
html[data-theme="dark"] .extension-section kbd {
  background: var(--v3-surface-2);
  border-color: var(--v3-line-strong);
}
html[data-theme="dark"] .extension-shortcuts-table th {
  background: var(--v3-surface-2);
}
html[data-theme="dark"] .extension-future {
  background: color-mix(in srgb, var(--v3-surface-2) 75%, transparent);
  border-color: var(--v3-line-strong);
}
@media (max-width: 640px) {
  .extension-section { padding: 1rem; }
  .extension-shortcuts-table th,
  .extension-shortcuts-table td { padding: 0.45rem 0.5rem; font-size: 0.82rem; }
}

/* =========================================================================
   v0.4.4 — Saved area redesign
   Landing: three entry cards (Lessons / Moments / Key notes) + folder panel.
   Detail:  filter toolbar (search / folder / sort) + priority chips + list.
   Folders: rename / delete / create personal organisation buckets.

   Variables used:
     --v3-ink, --v3-muted, --v3-faint, --v3-surface, --v3-surface-2,
     --v3-line, --v3-line-strong, --v3-field-bg, --v3-accent
   These are the same tokens used across v0.4.1–v0.4.3, so light + dark
   parity is automatic.
   ========================================================================= */

/* ---- Landing: entry cards ---- */
.saved-landing .page-sub { max-width: 64ch; }
.saved-landing .saved-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
@media (max-width: 900px) {
  .saved-landing .saved-entry-grid { grid-template-columns: 1fr; }
}
.saved-entry-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.2rem 1.2rem 1.1rem;
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
  color: var(--v3-ink);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.saved-entry-card:hover {
  border-color: var(--v3-line-strong);
  background: color-mix(in srgb, var(--v3-surface) 88%, var(--v3-field-bg) 12%);
  transform: translateY(-1px);
}
.saved-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.saved-entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--v3-field-bg);
  color: var(--v3-accent, var(--v3-ink));
  border: 1px solid var(--v3-line);
}
.saved-entry-icon svg { width: 20px; height: 20px; }
.saved-entry-count {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
}
.saved-entry-title {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.saved-entry-sub {
  margin: 0;
  color: var(--v3-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.saved-entry-cta {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--v3-accent, var(--v3-ink));
  font-weight: 600;
}

/* ---- Landing: folders panel + meta row ---- */
.saved-folders-panel {
  margin: 0.25rem 0 1.5rem;
  padding: 1.1rem 1.1rem 1rem;
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 14px;
}
.saved-folders-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
@media (max-width: 640px) {
  .saved-folders-head { flex-direction: column; align-items: stretch; }
}
.saved-folders-title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
}
.saved-folders-sub {
  margin: 0;
  max-width: 62ch;
}
.saved-folder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.saved-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  font-size: 0.82rem;
  font-weight: 500;
}
.saved-folder-chip-count {
  font-variant-numeric: tabular-nums;
  color: var(--v3-muted);
  font-size: 0.78rem;
}

.saved-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.25rem 0 0.5rem;
}
.saved-future-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border: 1px dashed var(--v3-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--v3-muted);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

/* ---- Detail: crumbs + toolbar ---- */
.saved-detail-crumbs {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}
.saved-detail-crumbs a {
  color: var(--v3-muted);
  text-decoration: none;
}
.saved-detail-crumbs a:hover { color: var(--v3-ink); }

.saved-toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0 0.55rem;
}
@media (max-width: 720px) {
  .saved-toolbar { grid-template-columns: 1fr; }
}
.saved-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  background: var(--v3-field-bg);
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  transition: border-color 140ms ease;
}
.saved-search:focus-within { border-color: var(--v3-line-strong); }
.saved-search-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--v3-muted);
  flex-shrink: 0;
}
.saved-search-icon svg { width: 18px; height: 18px; }
.saved-search input {
  flex: 1;
  padding: 0.55rem 0.55rem;
  border: 0;
  background: transparent;
  color: var(--v3-ink);
  font: inherit;
  outline: none;
}
.saved-search input::placeholder { color: var(--v3-faint, var(--v3-muted)); }

.saved-select {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.55rem 0 0.75rem;
  background: var(--v3-field-bg);
  border: 1px solid var(--v3-line);
  border-radius: 10px;
}
.saved-select-label {
  font-size: 0.78rem;
  color: var(--v3-muted);
  white-space: nowrap;
}
.saved-select select {
  flex: 1;
  padding: 0.55rem 0.45rem 0.55rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--v3-ink);
  font: inherit;
  outline: none;
}

.saved-priority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 1rem;
}
.saved-chip {
  padding: 0.34rem 0.78rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-surface);
  color: var(--v3-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.saved-chip:hover { border-color: var(--v3-line-strong); }
.saved-chip.active {
  background: var(--v3-ink);
  color: var(--v3-surface);
  border-color: var(--v3-ink);
}
html[data-theme="dark"] .saved-chip.active {
  background: var(--v3-ink);
  color: var(--v3-bg, #0f0f0e);
  border-color: var(--v3-ink);
}
.saved-chip-pri-high.active { background: #b34a2a; border-color: #b34a2a; color: #fff; }
.saved-chip-pri-mid.active  { background: #d19900; border-color: #d19900; color: #1a1a18; }
.saved-chip-pri-low.active  { background: #6a8a4f; border-color: #6a8a4f; color: #fff; }

.saved-result-meta {
  margin: 0.1rem 0 0.75rem;
}

/* ---- Detail: item list ---- */
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.saved-item {
  padding: 0.9rem 1rem 0.85rem;
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 12px;
  transition: border-color 120ms ease;
}
.saved-item:hover { border-color: var(--v3-line-strong); }

.saved-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.78rem;
  color: var(--v3-muted);
}
.saved-item-type {
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: 0.01em;
  font-size: 0.78rem;
}
.saved-item-time { font-variant-numeric: tabular-nums; }
.saved-item-stamp {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--v3-line);
  background: var(--v3-field-bg);
  border-radius: 6px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--v3-ink);
}
.saved-item-title {
  margin: 0.45rem 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--v3-ink);
}
.saved-item-text {
  margin: 0.45rem 0 0.55rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--v3-ink);
}

.saved-folder-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  font-size: 0.74rem;
  font-weight: 500;
}
.saved-folder-tag-empty {
  color: var(--v3-muted);
  font-style: italic;
}

/* Priority pill (read-only, in head row) */
.saved-pri {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.saved-pri-high { background: rgba(179, 74, 42, 0.14); color: #b34a2a; border: 1px solid rgba(179,74,42,0.3); }
.saved-pri-mid  { background: rgba(209, 153, 0, 0.16); color: #8a6b00; border: 1px solid rgba(209,153,0,0.32); }
.saved-pri-low  { background: rgba(106, 138, 79, 0.16); color: #4f6a3b; border: 1px solid rgba(106,138,79,0.32); }
html[data-theme="dark"] .saved-pri-high { color: #e88863; border-color: rgba(232,136,99,0.38); }
html[data-theme="dark"] .saved-pri-mid  { color: #e8c25e; border-color: rgba(232,194,94,0.38); }
html[data-theme="dark"] .saved-pri-low  { color: #9bbd76; border-color: rgba(155,189,118,0.38); }

/* Priority cycle button (interactive, in controls row) */
.saved-pri-btn {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: filter 120ms ease, transform 120ms ease;
}
.saved-pri-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.saved-pri-btn.saved-pri-high { background: rgba(179, 74, 42, 0.14); color: #b34a2a; border: 1px solid rgba(179,74,42,0.4); }
.saved-pri-btn.saved-pri-mid  { background: rgba(209, 153, 0, 0.16); color: #8a6b00; border: 1px solid rgba(209,153,0,0.42); }
.saved-pri-btn.saved-pri-low  { background: rgba(106, 138, 79, 0.16); color: #4f6a3b; border: 1px solid rgba(106,138,79,0.4); }
html[data-theme="dark"] .saved-pri-btn.saved-pri-high { color: #e88863; border-color: rgba(232,136,99,0.45); }
html[data-theme="dark"] .saved-pri-btn.saved-pri-mid  { color: #e8c25e; border-color: rgba(232,194,94,0.45); }
html[data-theme="dark"] .saved-pri-btn.saved-pri-low  { color: #9bbd76; border-color: rgba(155,189,118,0.45); }

.saved-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0.3rem 0 0.6rem;
}
.saved-item-actions .time-link {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--v3-accent, var(--v3-ink));
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--v3-accent, var(--v3-ink)) 50%, transparent);
}
.saved-item-actions .time-link:hover { border-bottom-style: solid; }

.saved-item-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--v3-line);
}
.saved-folder-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.45rem 0.2rem 0.6rem;
  background: var(--v3-field-bg);
  border: 1px solid var(--v3-line);
  border-radius: 8px;
}
.saved-folder-select-label {
  font-size: 0.72rem;
  color: var(--v3-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.saved-folder-select select {
  border: 0;
  background: transparent;
  color: var(--v3-ink);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.2rem;
  outline: none;
}
.saved-item-controls .tiny-btn {
  padding: 0.32rem 0.65rem;
  font-size: 0.78rem;
  border: 1px solid var(--v3-line);
  background: var(--v3-field-bg);
  color: var(--v3-ink);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.saved-item-controls .tiny-btn:hover { border-color: var(--v3-line-strong); }
.tiny-btn-danger {
  color: #b34a2a !important;
  border-color: rgba(179,74,42,0.35) !important;
  background: transparent !important;
}
.tiny-btn-danger:hover { background: rgba(179,74,42,0.08) !important; }
html[data-theme="dark"] .tiny-btn-danger { color: #e88863 !important; border-color: rgba(232,136,99,0.45) !important; }

/* ---- Empty states ---- */
.saved-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.4rem 1.25rem;
  background: var(--v3-surface);
  border: 1px dashed var(--v3-line-strong);
  border-radius: 12px;
  color: var(--v3-muted);
}
.saved-empty p { margin: 0; max-width: 60ch; line-height: 1.55; }

/* ---- Folders page ---- */
.saved-folders-page .saved-folder-create {
  display: flex;
  gap: 0.55rem;
  margin: 1rem 0 1.25rem;
  align-items: stretch;
}
.saved-folders-page .saved-folder-create .saved-search { flex: 1; }
.saved-folders-page .saved-folder-create .saved-search-icon {
  width: auto;
  height: auto;
  font-weight: 700;
  font-size: 1.1rem;
  padding-right: 0.2rem;
}
.saved-folder-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.saved-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: 10px;
}
.saved-folder-row-name {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.saved-folder-row-actions { display: flex; gap: 0.4rem; }

/* ---- Compatibility: hide the old horizontal three-column layout if any
        legacy markup leaks in via cache. The new IA replaces it. ---- */
.saved-categories { display: block; }

/* =========================================================================
   v0.4.5 — UI fixes
   1. Browser Extension page redesigned as a centred, single-screen,
      arrowed flow chart with a "Coming soon" sign-in step.
   2. Saved category views gain a "Clear all" affordance (right-aligned
      in the result-meta row).
   3. About / non-affiliation tightened into a one-screen page.
   ========================================================================= */

/* ---- Saved: layout the result-meta row + clear-all ---- */
.saved-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.saved-clear-all {
  margin-left: auto;
}
.saved-clear-all[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Browser Extension v0.4.5 — centred flow ----
   The page is intentionally narrower and centred so the flow chart
   sits as a single column on desktop and fits a typical viewport
   without scrolling at 1280px+ when the browser chrome is normal.
*/
.extension-page-v045 {
  max-width: 700px;
  margin: 0 auto;
  padding-block: clamp(0.4rem, 1vw, 0.8rem);
  gap: 0.4rem;
}
.extension-page-v045 .ext-head {
  display: grid;
  gap: 0.25rem;
  text-align: center;
  justify-items: center;
}
.extension-page-v045 .ext-kicker {
  justify-content: center;
  margin-bottom: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.extension-page-v045 .ext-kicker .page-kicker-mark { width: 16px; height: 16px; }
.extension-page-v045 .ext-title {
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.15;
  justify-content: center;
}
.extension-page-v045 .ext-sub {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--v3-muted);
  max-width: 600px;
}
.extension-page-v045 .ext-cta-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.05rem;
}
.extension-page-v045 .ext-cta-row .btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }

/* The flow itself: 6 numbered steps connected by down-arrows. */
.ext-flow {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  justify-items: stretch;
}
.ext-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--v3-line);
  border-radius: 8px;
  background: var(--v3-card-bg);
}
.ext-step-num {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--v3-gold);
  color: var(--v3-button-text);
  font-weight: 800;
  font-size: 0.76rem;
  margin-top: 0.1rem;
  flex: 0 0 22px;
}
html[data-theme="dark"] .ext-step-num {
  background: var(--v3-gold-2);
  color: #17130b;
}
.ext-step-body { min-width: 0; }
.ext-step-title {
  margin: 0 0 0.03rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--v3-ink);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  line-height: 1.25;
}
.ext-step-text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--v3-ink);
}
.ext-step-text code,
.ext-step-text kbd {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.78rem;
  padding: 0.02rem 0.35rem;
  background: var(--v3-field-bg);
  border: 1px solid var(--v3-line);
  border-radius: 5px;
  color: var(--v3-ink);
  white-space: nowrap;
}
html[data-theme="dark"] .ext-step-text code,
html[data-theme="dark"] .ext-step-text kbd {
  background: var(--v3-surface-2);
  border-color: var(--v3-line-strong);
}
.ext-step-future {
  border-style: dashed;
  background: color-mix(in srgb, var(--v3-field-bg) 55%, var(--v3-surface) 45%);
}
.ext-step-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--v3-field-bg);
  color: var(--v3-muted);
  border: 1px solid var(--v3-line);
  border-radius: 999px;
}
html[data-theme="dark"] .ext-step-future {
  background: color-mix(in srgb, var(--v3-surface-2) 70%, transparent);
}
.ext-arrow {
  display: flex;
  justify-content: center;
  color: var(--v3-muted);
  margin: -0.15rem 0;
  line-height: 0;
  opacity: 0.7;
}
.ext-arrow svg { width: 14px; height: 14px; }

/* Demo testing strip — secondary, lower visual weight than the flow. */
.ext-testing {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--v3-line);
  border-radius: 8px;
  background: var(--v3-field-bg);
  margin-top: 0.2rem;
}
.ext-testing-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--v3-ink);
}
.ext-testing-sub {
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--v3-muted);
}
.ext-testing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.ext-testing-status {
  font-size: 0.74rem;
  color: var(--v3-muted);
}
.ext-legal {
  margin: 0.15rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--v3-faint, var(--v3-muted));
  line-height: 1.45;
}

@media (max-width: 720px) {
  .ext-testing {
    grid-template-columns: 1fr;
  }
  .ext-testing-actions { align-items: stretch; }
  .extension-page-v045 .ext-title { font-size: 1.35rem; }
}

/* ---- About / Affiliation page v0.4.5 — compact, one-screen ---- */
.about-page-v045 {
  max-width: 1040px;
  margin: 0 auto;
  padding-block: clamp(1rem, 2.5vw, 2rem);
  gap: 0.9rem;
}
.about-page-v045 .about-head {
  display: grid;
  gap: 0.3rem;
  text-align: center;
  justify-items: center;
}
.about-page-v045 .about-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.2;
  max-width: 760px;
}
.about-page-v045 .about-sub {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--v3-muted);
  max-width: 740px;
}
.about-grid-v045 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.4rem;
}
.about-grid-v045 .about-card {
  padding: 0.85rem 1rem;
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  background: var(--v3-card-bg);
}
.about-grid-v045 .about-card h2 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--v3-ink);
}
.about-grid-v045 .about-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--v3-muted);
}
.about-grid-v045 .about-card a {
  color: var(--v3-gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 820px) {
  .about-grid-v045 {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   v0.4.6 — Sync & cloud status (Settings popover + Extension page card)
   ===================================================================== */

.sync-row {
  align-items: flex-start;
}
.sync-row strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  border: 1px solid var(--v3-border, #d8dad8);
  background: var(--v3-surface-soft, #f3f4f1);
  color: var(--v3-fg, #18221c);
  white-space: nowrap;
}
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b3b8b3;
  flex: 0 0 8px;
}
.sync-badge-off { background: var(--v3-surface-soft, #f3f4f1); color: var(--v3-fg-muted, #4f594f); }
.sync-badge-off .sync-dot { background: #9aa19a; }
.sync-badge-ok { background: rgba(31, 113, 79, 0.10); color: #1f714f; border-color: rgba(31, 113, 79, 0.30); }
.sync-badge-ok .sync-dot { background: #1f9468; }
.sync-badge-syncing { background: rgba(78, 110, 224, 0.10); color: #3a51b8; border-color: rgba(78, 110, 224, 0.30); }
.sync-badge-syncing .sync-dot { background: #6678d6; animation: ia-sync-pulse 1.2s ease-in-out infinite; }
.sync-badge-error { background: rgba(178, 60, 60, 0.10); color: #a23535; border-color: rgba(178, 60, 60, 0.30); }
.sync-badge-error .sync-dot { background: #c44; }

@keyframes ia-sync-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Dark mode parity. The popover already uses a darker surface; just lift
   muted text so the off-state badge is still legible. */
[data-theme="dark"] .sync-badge-off,
@media (prefers-color-scheme: dark) {
  [data-theme="dark"] .sync-badge-off { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.12); }
}

/* Extension page sync card */
.ext-sync-card {
  max-width: 700px;
  margin: 20px auto 0;
  padding: 14px 18px;
  border: 1px solid var(--v3-border, #d8dad8);
  border-radius: 10px;
  background: var(--v3-surface-soft, #f7f8f5);
  text-align: left;
}
.ext-sync-head { margin-bottom: 6px; }
.ext-sync-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--v3-fg, #18221c);
}
.ext-sync-body code {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 4px;
}
[data-theme="dark"] .ext-sync-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .ext-sync-body code {
  background: rgba(255,255,255,0.08);
}

/* Saved item source pill (Cloud / Imported) */
.saved-source-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.5;
}
.saved-source-cloud {
  background: rgba(31, 113, 79, 0.10);
  color: #1f714f;
  border-color: rgba(31, 113, 79, 0.25);
}
.saved-source-imported {
  background: rgba(78, 110, 224, 0.10);
  color: #3a51b8;
  border-color: rgba(78, 110, 224, 0.25);
}
[data-theme="dark"] .saved-source-cloud { color: #6ed1a1; border-color: rgba(110, 209, 161, 0.30); background: rgba(110, 209, 161, 0.10); }
[data-theme="dark"] .saved-source-imported { color: #97a8ef; border-color: rgba(151, 168, 239, 0.30); background: rgba(151, 168, 239, 0.10); }

/* v0.4.6 dark-mode legibility fix for ext-sync-body */
[data-theme="dark"] .ext-sync-body {
  color: rgba(255,255,255,0.92);
}

/* v0.4.6 user_notes patch — "♥ Liked" chip on cloud-synced moments
   surfaces the boolean `liked` column from public.user_notes. Strictly
   informational; clear / delete / filter behaviour is unchanged. */
.saved-liked-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  background: rgba(214, 51, 95, 0.10);
  color: #c4385e;
  border: 1px solid rgba(214, 51, 95, 0.25);
}
[data-theme="dark"] .saved-liked-chip {
  color: #f59ab1;
  background: rgba(245, 154, 177, 0.10);
  border-color: rgba(245, 154, 177, 0.30);
}

/* ===================================================================== */
/* v0.5.4 — Lighter card surfaces matching Home search bar pill style.    */
/* Goal: every card/box that sits on the page background should feel      */
/* one step LIGHTER than the page (cream), with the same hairline +       */
/* subtle shadow language as `.hero-search`. The Home page itself is      */
/* preserved exactly: we override per-component, never the home tokens.   */
/* ===================================================================== */
:root,
html[data-theme="light"] {
  /* A flatter, lighter solid surface, slightly brighter than --v3-card-bg
     gradient and matching the off-white feel of the home search pill. */
  --v3-card-bg-soft: #fffdf5;
  --v3-card-shadow-soft: 0 1px 2px rgba(38, 28, 6, 0.05),
                         0 6px 18px rgba(58, 49, 30, 0.07);
}
html[data-theme="dark"] {
  --v3-card-bg-soft: #1f2418;
  --v3-card-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30),
                         0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Apply the lighter pill-surface to non-Home card components. We
   deliberately exclude `.hero-lockup` and Home hero composition because
   the approved Home page must not change. */
.saved-item,
.saved-entry-card,
.action-card,
.ote-card,
.answer-card,
.panel,
.v3-panel,
.model-card,
.saved-note,
.state-card,
.key-note,
.practice-row,
.captured-notes-panel,
.settings-panel,
.settings-card {
  background: var(--v3-card-bg-soft) !important;
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-card-shadow-soft);
}

/* Saved cards: a touch tighter so they read like pills aligned to the
   hero-search visual rhythm. Radius matches v3-radius (22px). */
.saved-item,
.saved-entry-card {
  border-radius: var(--v3-radius);
}

/* Home page is approved; explicitly do not touch the hero lockup or
   the home search pill, even if a future rule tries to override. */
.hero-search,
.hero-lockup,
.home-hero,
.hero-row,
.home-tagline {
  /* no-op guard */
}

/* ===================================================================== */
/* v0.5.4 — Centered hearts on every page.                                */
/* The `.heart-btn` already uses inline-grid place-items:center for its   */
/* icon. We add a vertical-align baseline override so it sits centered    */
/* relative to neighboring text/buttons regardless of the parent flex.    */
/* ===================================================================== */
.heart-btn {
  vertical-align: middle;
  align-self: center;
  flex: 0 0 auto;
}
.lesson-actions,
.lib-row-actions,
.lib-detail-head,
.saved-item-actions,
.captured-note-head {
  align-items: center;
}

/* ===================================================================== */
/* v0.5.4 — "Routed from" pill in Source notes for orphan extension       */
/* notes whose original video is not in the local archive.                */
/* ===================================================================== */
.captured-note-routed-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--v3-gold) 12%, var(--v3-card-bg-soft, var(--v3-field-bg)));
  color: var(--v3-gold-2);
  border: 1px solid color-mix(in srgb, var(--v3-gold) 30%, var(--v3-line));
  margin-left: 0.5rem;
  cursor: help;
}
.captured-note-item.captured-note-routed {
  border-left: 2px solid color-mix(in srgb, var(--v3-gold) 55%, transparent);
  padding-left: 0.6rem;
}

/* ===================================================================== */
/* v0.5.4 — Bottom-right feedback prompt (20% off first 3 months).        */
/* Disclaimer-sized; shown only after the user has interacted.            */
/* Sticky bottom-right; dismissible.                                      */
/* ===================================================================== */
.ia-feedback-prompt {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  max-width: 320px;
  padding: 10px 14px 10px 14px;
  background: var(--v3-card-bg-soft, var(--v3-card-bg));
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-card-shadow-soft, var(--v3-shadow));
  border-radius: 14px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--v3-muted);
  display: none;             /* JS sets to grid after interaction */
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
}
.ia-feedback-prompt.visible { display: grid; }
.ia-feedback-prompt strong {
  color: var(--v3-ink);
  font-weight: 700;
}
.ia-feedback-prompt a.ia-feedback-link {
  color: var(--v3-gold-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--v3-gold) 40%, transparent);
}
.ia-feedback-prompt a.ia-feedback-link:hover {
  border-bottom-color: var(--v3-gold-2);
}
.ia-feedback-prompt .ia-feedback-dismiss {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: transparent;
  color: var(--v3-faint);
  cursor: pointer;
  font-size: 12px;
}
.ia-feedback-prompt .ia-feedback-dismiss:hover {
  color: var(--v3-ink);
  border-color: var(--v3-line-strong);
}
@media (max-width: 540px) {
  .ia-feedback-prompt {
    left: 10px; right: 10px; bottom: 10px; max-width: none;
  }
}

/* ===================================================================== */
/* v0.5.4 — Extension page: tighten to fit a single viewport when the     */
/* browser is reasonably tall. Smaller arrows, condensed step cards.      */
/* The actual classes are .ext-flow, .ext-step, .ext-arrow, .ext-testing  */
/* (see renderExtensionPage in app_v03.js).                               */
/* ===================================================================== */
.extension-page-v045 {
  padding-block: 0.6rem 0.9rem !important;
  max-width: 1100px;
}
.extension-page-v045 .ext-head {
  margin-bottom: 0.35rem !important;
}
.extension-page-v045 .ext-kicker {
  margin-bottom: 0.1rem !important;
  font-size: 0.72rem !important;
}
.extension-page-v045 .ext-title {
  font-size: 1.35rem !important;
  margin: 0.05rem 0 0.15rem 0 !important;
}
.extension-page-v045 .ext-sub {
  font-size: 0.82rem !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.4 !important;
}
.extension-page-v045 .ext-cta-row {
  margin-top: 0.2rem !important;
  gap: 0.6rem !important;
}
.extension-page-v045 .ext-cta-row .btn {
  padding: 0.35rem 0.8rem !important;
  font-size: 0.78rem !important;
}
.extension-page-v045 .ext-flow {
  gap: 0.4rem !important;
  margin: 0.35rem 0 0.45rem 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  align-items: stretch;
  list-style: none;
}
.extension-page-v045 .ext-flow .ext-step {
  padding: 0.5rem 0.6rem !important;
  background: var(--v3-card-bg-soft, var(--v3-card-bg)) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 10px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 0.45rem !important;
  align-items: start;
}
.extension-page-v045 .ext-flow .ext-step .ext-step-num {
  width: 1.4rem !important;
  height: 1.4rem !important;
  font-size: 0.78rem !important;
  min-width: 0 !important;
}
.extension-page-v045 .ext-flow .ext-step-title {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  margin: 0 0 0.1rem 0 !important;
  font-weight: 700;
}
.extension-page-v045 .ext-flow .ext-step-text {
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.extension-page-v045 .ext-flow .ext-step-text code,
.extension-page-v045 .ext-flow .ext-step-text kbd {
  font-size: 0.65rem !important;
  padding: 0 3px !important;
}
.extension-page-v045 .ext-flow .ext-arrow {
  display: none !important; /* horizontal grid doesn't need vertical arrows */
}
.extension-page-v045 .ext-testing {
  padding: 0.55rem 0.75rem !important;
  font-size: 0.78rem !important;
  margin-top: 0.35rem !important;
}
.extension-page-v045 .ext-testing-title {
  font-size: 0.88rem !important;
  margin: 0 0 0.15rem 0 !important;
}
.extension-page-v045 .ext-testing-sub {
  font-size: 0.72rem !important;
  margin: 0 0 0.2rem 0 !important;
  line-height: 1.35 !important;
}
.extension-page-v045 .ext-testing-actions .btn {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.75rem !important;
}
.extension-page-v045 .ext-legal {
  font-size: 0.66rem !important;
  line-height: 1.4 !important;
  margin-top: 0.35rem !important;
}
/* The sync-status card on Extension page: compact one-line layout. */
.extension-page-v045 .ext-sync-status,
.extension-page-v045 .sync-row {
  padding: 0.5rem 0.7rem !important;
  font-size: 0.78rem !important;
  margin: 0.35rem 0 0 0 !important;
}
.extension-page-v045 .ext-sync-status .sync-badge,
.extension-page-v045 .sync-row .sync-badge {
  font-size: 0.72rem !important;
}
/* Stack to two rows of three on medium screens, one column on small. */
@media (max-width: 980px) {
  .extension-page-v045 .ext-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .extension-page-v045 .ext-flow {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================================== */
/* v0.5.4 — Settings popup: clean section grouping (Appearance / Cloud &  */
/* account / About). Cards inside a section share a soft container so     */
/* sync, sign-in, and extension entries read as ONE block visually.       */
/* ===================================================================== */
.settings-popover-v054 .settings-section {
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem 0.75rem;
  background: var(--v3-card-bg-soft, var(--v3-card-bg));
  border: 1px solid var(--v3-line);
  border-radius: 14px;
}
.settings-popover-v054 .settings-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-faint);
  margin: 0 0 0.5rem 0;
}
.settings-popover-v054 .settings-section .settings-row {
  background: transparent !important;
  border: 1px solid var(--v3-line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  margin-top: 0.4rem;
  box-shadow: none !important;
}
.settings-popover-v054 .settings-section .settings-row:first-of-type {
  margin-top: 0;
}
.settings-popover-v054 .sync-row {
  border-color: var(--v3-line-strong) !important;
}
.settings-popover-v054 .settings-entry {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
}