/* ==========================================================================
   Moonverse — Refined finishing layer (v2 · final cascade layer)
   --------------------------------------------------------------------------
   Load order: linked LAST in index.html, after moonverse-modern-subtle.css.
   Do not move it earlier: several rules deliberately win cascade ties.

   Scope (design-improvement pass, 2026-10-25):
     1. Typographic rhythm        — tracking calibrated, balanced wraps
     2. Featured shelf floors     — covers never shrink below readable size
     3. Curated collections       — 3/2+banner/1 bands, zero orphan holes
     4. Browse + bazaar floors    — consistent card minimums, sane mobile bands
     5. Story workspace           — grid no longer stretches equal-height
     6. Reading dock geometry     — pill centred over the CONTENT column only
     7. Community segmented bar   — scrollable, never truncating
     8. Touch ergonomics          — coarse-pointer chip targets ≥ 40px
     9. Continuous polish         — focus rings, whisper scrollbars, mono avatars

   Token-driven: --card / --border / --foreground / --primary … so the layer
   keeps working under every theme. Everything here is orthogonal to the
   existing 21-layer cascade and is intentionally orthogonal-safe.
   ========================================================================== */

/* — 1 · Typographic rhythm ------------------------------------------------
   The display serif shipped -0.045em tracking which crushes serifs at 28px;
   recalibrated to -0.018em. Section labels drop from -0.03em to -0.012em.
   Balanced wrapping removes orphan words from headings. */

main h1 { letter-spacing: -0.018em !important; text-wrap: balance; }
main h2, main h3 { letter-spacing: -0.012em !important; text-wrap: balance; }
main p { text-wrap: pretty; }
main :is(strong, b) { text-wrap: balance; }

/* — 2 · Featured shelf (home) — floors by band -----------------------------
   ≥1024 : grid of ≥150px cells (was a fixed 7-up squeeze at narrow widths)
   760-fill : 170px cells
   <760 : horizontal snap-carousel with clamp() card width */

@media (min-width: 1024px) {
  .mv-index-feature-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important;
    gap: 14px !important;
  }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .mv-index-feature-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 759px) {
  .mv-index-feature-grid {
    grid-auto-columns: clamp(150px, 42vw, 190px) !important;
    gap: 10px !important;
  }
}

/* — 3 · Curated collections — orphan-proof bands ---------------------------
   ≥880 : three abreast;  700–879 : pairs with the last odd card as a full
   banner;  <700 : single column. No more lone card under two. */

@media (min-width: 880px) {
  .mv-index-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 700px) and (max-width: 879px) {
  .mv-index-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mv-index-collection-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.mv-index-collection-grid { gap: 14px !important; margin-top: 14px !important; }

/* — 4 · Browse covers + bazaar catalog — readable floors ------------------- */

@media (min-width: 760px) {
  #root main .mve-books-covers,
  .mve-explore .mve-books-covers {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)) !important;
  }
}
@media (max-width: 759px) {
  #root main .mve-books-covers,
  .mve-explore .mve-books-covers {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)) !important;
  }
}
.mww-catalog {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)) !important;
  gap: 12px !important;
}

/* — 5 · Story workspace — natural column heights ---------------------------
   modern-subtle already anchors .mv-series-workspace with align-items:start
   at ID strength; nothing to add here. (Reserved slot kept for numbering.) */

/* — 6 · Reading dock — centred over the CONTENT column ---------------------
   The two-column story layout (.mv-series-workspace: content + 260px aside
   with an 18px gap, modern-subtle ID-level) lives at every width ≥ 768px.
   Because the column pair is container-symmetric, the content column's
   centre is always viewport-centre − 139px — independent of page padding or
   container capping. Shifting the fixed wrapper left by 278px yields exact
   centrement; the pill is capped to the content column so it can never poke
   off-screen at the 768px entry width. */

@media (min-width: 768px) {
  .mv-story-quick-nav-desktop {
    left: -278px !important;
    right: 0 !important;
  }
  .mv-story-quick-nav-desktop .mv-quick-nav-pill {
    max-width: min(560px, calc(100vw - 334px)) !important;
  }
}
.mv-story-quick-nav-desktop .mv-quick-nav-pill,
.mv-story-quick-nav-mobile .mv-quick-nav-pill {
  width: 100% !important;
  max-width: 560px !important;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 84%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    0 10px 30px color-mix(in srgb, #000 15%, transparent),
    0 2px 8px color-mix(in srgb, #000 10%, transparent);
}

/* — 7 · Community tab bar — never truncating -------------------------------
   modern-subtle ships the Pavilion tab bar as an always-3-up segmented track
   (#root-level, !important): fine on desktop, clipping at phone widths.
   Mirroring its exact selectors at a later cascade position, the tabs stack
   full-width below 640px — complete labels, generous targets. */

@media (max-width: 640px) {
  #root main .mv-page-community [role="tablist"],
  #root main .mv-page-community .grid.grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: minmax(38px, auto) !important;
  }
  #root main .mv-page-community [role="tablist"] [role="tab"],
  #root main .mv-page-community .grid.grid-cols-3 > button {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* — 8 · Touch ergonomics — generous chip targets --------------------------- */

@media (pointer: coarse) {
  .mv-index-genre { min-height: 40px !important; }
  .mww-catalog a, .mww-catalog button { min-height: 40px; }
}

/* — 9 · Continuous polish ------------------------------------------------- */

/* Consistent focus affordance where nothing else defines one */
:where(main a, main button, main summary, main [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent);
  outline-offset: 2px;
}

/* Whisper scrollbars on horizontal rails */
:where(.mv-index-feature-grid, .mv-index-genres, .mve-books-covers) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 28%, var(--border)) transparent;
}

/* Curator avatar failure → monogram disc (JS swaps the img for this span) */
.mvd-curator-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--font-ui, inherit);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--primary) 72%, var(--card));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--card)), color-mix(in srgb, var(--primary) 5%, var(--card)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}