/* ═══════════════════════════════════════════
   FITCHEF LAYOUTS v7.5 — Legendary Foundation

   TWO PATTERNS:

   ┌─────────────────────────────────────────┐
   │ PATTERN A — "App Shell" (viewport-locked)│
   │ Homepage, Truth Map, Studies Archive     │
   │                                          │
   │ .fc-app  height:100vh, overflow:hidden   │
   │   .fc-nav        fixed-width left col    │
   │   .fc-main       flex:1, flex row        │
   │     .fc-XX-center  flex col, internal ↕  │
   │     .fc-XX-sidebar fixed-width right     │
   │                                          │
   │ Nothing escapes the viewport.            │
   │ Center column has internal scroll.       │
   └─────────────────────────────────────────┘

   ┌─────────────────────────────────────────┐
   │ PATTERN B — "Reading" (page-scroll)     │
   │ Study, Claim, Regular posts             │
   │                                          │
   │ .fc-app  min-height:100vh               │
   │   .fc-nav        position:fixed left    │
   │   .fc-main       margin-left + right    │
   │     .fc-XX-center  normal block flow    │
   │     <aside>        position:fixed right │
   │                                          │
   │ The PAGE scrolls. Nav + sidebar fixed.  │
   │ Content flows naturally to any length.  │
   └─────────────────────────────────────────┘

   Body classes control which pattern:
   - fc-layout-home, fc-layout-truth-map,
     fc-layout-studies           → Pattern A
   - fc-layout-study, fc-layout-claim,
     fc-layout-reading           → Pattern B
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   PATTERN A — App Shell
   ═══════════════════════════════════════════ */

/* Shell: flex row, locked to viewport */
body.fc-layout-home .fc-app,
body.fc-layout-truth-map .fc-app,
body.fc-layout-studies .fc-app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.admin-bar.fc-layout-home .fc-app,
body.admin-bar.fc-layout-truth-map .fc-app,
body.admin-bar.fc-layout-studies .fc-app {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

/* Main: flex row, fills remaining width */
body.fc-layout-home .fc-main,
body.fc-layout-truth-map .fc-main,
body.fc-layout-studies .fc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Center columns: scrollable, content centered via wrapper.
   All three Pattern A pages share the same approach:
   the center div scrolls, the content wrapper constrains width.
   Scrollbar is hidden (macOS/Notion pattern) — user scrolls
   with trackpad/wheel. Only the browser's far-right scrollbar
   on Pattern B pages is ever visible. */
body.fc-layout-home .fc-center,
body.fc-layout-truth-map .fc-tm-center,
body.fc-layout-truth-map .fc-claims-center,
body.fc-layout-studies .fc-eb-center,
body.fc-layout-cluster-hub .fc-hub-center {
  flex: 1;
  min-width: 0;
  padding: var(--fc-space-13) var(--fc-page-pad) 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;            /* Firefox */
}
body.fc-layout-home .fc-center::-webkit-scrollbar,
body.fc-layout-truth-map .fc-tm-center::-webkit-scrollbar,
body.fc-layout-truth-map .fc-claims-center::-webkit-scrollbar,
body.fc-layout-studies .fc-eb-center::-webkit-scrollbar,
body.fc-layout-cluster-hub .fc-hub-center::-webkit-scrollbar {
  display: none;                    /* Chrome / Safari / Edge */
}

/* Content wrappers: max-width + auto-center inside scrollable column */
.fc-home-content,
.fc-tm-content,
.fc-claims-content,
.fc-eb-content {
  /* max-width removed — overview pages fill center column like hub */
  width: 100%;
  margin: 0 auto;
  padding-bottom: var(--fc-space-12);
}

/* Sidebar: fixed-width right column */
body.fc-layout-home .fc-sidebar,
body.fc-layout-truth-map .fc-tm-sidebar,
body.fc-layout-truth-map .fc-claims-sidebar,
body.fc-layout-studies .fc-eb-sidebar,
body.fc-layout-cluster-hub .fc-hub-sidebar {
  width: var(--fc-sidebar-width);
  min-width: var(--fc-sidebar-width);
  border-left: 1px solid rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}


/* ═══════════════════════════════════════════
   PATTERN B — Reading / Page-Scroll
   ═══════════════════════════════════════════ */

/* Shell: not locked to viewport — page scrolls */
body.fc-layout-study .fc-app,
body.fc-layout-claim .fc-app,
body.fc-layout-library .fc-app,
body.fc-layout-reading .fc-app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Nav rail: fixed left */
body.fc-layout-study .fc-nav,
body.fc-layout-claim .fc-nav,
body.fc-layout-library .fc-nav,
body.fc-layout-reading .fc-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 50;
}
body.admin-bar.fc-layout-study .fc-nav,
body.admin-bar.fc-layout-claim .fc-nav,
body.admin-bar.fc-layout-library .fc-nav,
body.admin-bar.fc-layout-reading .fc-nav {
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

/* Main: margins reserve space for fixed nav + sidebar */
body.fc-layout-study .fc-main,
body.fc-layout-claim .fc-main,
body.fc-layout-library .fc-main,
body.fc-layout-reading .fc-main {
  margin-left: var(--fc-nav-width);
  margin-right: var(--fc-sidebar-width);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Center column: normal block flow, centered within available space.
   On 1440px: available = 1440 - 72 - 380 = 988px. Content at 860px
   centers with ~64px breathing room on each side. Balanced. */
body.fc-layout-study .fc-study-center,
body.fc-layout-claim .fc-claim-center,
body.fc-layout-library .fc-library-center {
  max-width: var(--fc-content-max);
  padding: 40px var(--fc-page-pad) 0;
  margin: 0 auto;
}

/* Footer on reading pages: lives in .fc-main (outside center column)
   so it goes full width. Needs its own side padding since it's no
   longer inside a padded container. */
body.fc-layout-study .fc-main > .fc-footer,
body.fc-layout-claim .fc-main > .fc-footer,
body.fc-layout-library .fc-main > .fc-footer {
  padding-left: var(--fc-page-pad);
  padding-right: var(--fc-page-pad);
}

/* Scroll wrapper: legacy name, no longer scrolls.
   Just the editorial content area with reading padding.
   Side padding removed — parent .fc-study-center already provides
   var(--fc-page-pad). Double-padding was making content narrower
   than archives. Top padding kept for spacing below kicker. */
body.fc-layout-study .fc-center-scroll,
body.fc-layout-claim .fc-center-scroll,
body.fc-layout-library .fc-center-scroll {
  padding: var(--fc-space-13) 0 var(--fc-space-20);
}

/* Sidebar: fixed right */
body.fc-layout-study .fc-study-sidebar,
body.fc-layout-claim .fc-claim-sidebar,
body.fc-layout-library .fc-library-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--fc-sidebar-width);
  height: 100vh;
  height: 100dvh;
  border-left: 1px solid rgba(0,0,0,0.04);
  background: var(--fc-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}
body.admin-bar.fc-layout-study .fc-study-sidebar,
body.admin-bar.fc-layout-claim .fc-claim-sidebar,
body.admin-bar.fc-layout-library .fc-library-sidebar {
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

/* Reading layout sidebar */
body.fc-layout-reading .fc-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--fc-sidebar-width);
  height: 100vh;
  height: 100dvh;
  border-left: 1px solid rgba(0,0,0,0.04);
  background: var(--fc-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}
body.fc-layout-reading .fc-sidebar > .fc-sidebar__scroll {
  padding: var(--fc-side-pad-top) var(--fc-side-pad-x);
  gap: var(--fc-space-8); /* 32px — more spacious for reading layout */
}


/* ═══════════════════════════════════════════
   TRUST PAGES — Pattern B (Reading/Page-Scroll)
   Uses fc-layout-reading + fc-layout-trust-page body classes.
   ═══════════════════════════════════════════ */

/* Center column: same as study/claim center */
body.fc-layout-trust-page .fc-trust-center {
  max-width: var(--fc-content-max);
  padding: 40px var(--fc-page-pad) 0;
  margin: 0 auto;
}

/* Content scroll area */
body.fc-layout-trust-page .fc-center-scroll {
  padding: var(--fc-space-13) 0 var(--fc-space-20);
}

/* Footer: full width within margins */
body.fc-layout-trust-page .fc-main > .fc-footer {
  padding-left: var(--fc-page-pad);
  padding-right: var(--fc-page-pad);
}

/* Admin bar offset for sidebar */
body.admin-bar.fc-layout-trust-page .fc-sidebar {
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}


/* ═══════════════════════════════════════════
   SHARED — Sidebar Internals
   ═══════════════════════════════════════════ */

.fc-sidebar__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--fc-side-pad-top) var(--fc-side-pad-x) var(--fc-side-pad-bot);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.fc-sidebar__scroll::-webkit-scrollbar {
  display: none;
}

/* Magazine sidebar: intentionally tighter than homepage.
   Study/claim sidebars have dense info (Quick Facts, badges, etc.)
   so we use compact 28px top padding vs homepage's 40px.
   Horizontal padding stays on the shared token. */
.fc-study-sidebar .fc-sidebar__scroll,
.fc-claim-sidebar .fc-sidebar__scroll,
.fc-library-sidebar .fc-sidebar__scroll {
  padding: var(--fc-side-pad-bot) var(--fc-side-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
}


/* ═══════════════════════════════════════════
   PAGE-SPECIFIC SPACING
   ═══════════════════════════════════════════ */

/* ─── Homepage ──────────────────────────── */
/* The center column is a flex column so that manifesto
   and topic bar are flex-shrink:0 and the cluster list
   fills the remaining height. */

/* ─── Magazine kicker + title ───────────── */
body.fc-layout-study .fc-page-kicker,
body.fc-layout-claim .fc-page-kicker,
body.fc-layout-library .fc-page-kicker,
body.fc-layout-trust-page .fc-page-kicker {
  margin-bottom: var(--fc-space-5);
}
body.fc-layout-study .fc-study-title,
body.fc-layout-claim .fc-claim-title,
body.fc-layout-library .fc-library-title {
  margin-bottom: var(--fc-space-8);
  max-width: 840px;
}

/* ─── Reading layout ────────────────────── */
body.fc-layout-reading .fc-mag-header {
  margin-bottom: var(--fc-space-13);
}
body.fc-layout-reading .fc-article-title {
  margin-bottom: var(--fc-space-13);
  max-width: 840px;
}

/* ─── Archive layout ────────────────────── */
body.fc-layout-archive .fc-app {
  min-height: 100vh;
}
body.fc-layout-archive .fc-main {
  margin-left: var(--fc-nav-width);
  padding: 28px var(--fc-page-pad) 48px;
}
body.fc-layout-archive .fc-archive-header {
  margin-bottom: var(--fc-space-12);
}
body.fc-layout-archive .fc-archive-title {
  font-family: var(--fc-serif);
  font-size: var(--fc-text-h1);
  font-weight: var(--fc-w-regular);
  letter-spacing: -1px;
  margin-bottom: var(--fc-space-3);
}
body.fc-layout-archive .fc-archive-count {
  font-size: var(--fc-text-small);
  color: var(--fc-dim);
}
body.fc-layout-archive .fc-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--fc-space-6);
}

/* ─── Default layout ────────────────────── */
body.fc-layout-default .fc-app {
  min-height: 100vh;
}
body.fc-layout-default .fc-main {
  margin-left: var(--fc-nav-width);
  padding: 28px var(--fc-page-pad) 48px;
  max-width: var(--fc-content-max);
}


/* ═══════════════════════════════════════════
   FLOATING GLASS PILL PLAYER
   Position is set in truth.css.
   Layout overrides only here.
   ═══════════════════════════════════════════ */

/* Already centered via truth.css calc().
   No layout-level override needed on desktop. */


/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (768–1199px)
   Hide sidebar. Center column expands.
   ═══════════════════════════════════════════ */

@media (max-width: 1199px) {

  /* Hide ALL sidebars — !important beats body.layout .sidebar specificity */
  .fc-sidebar,
  .fc-tm-sidebar,
  .fc-claims-sidebar,
  .fc-eb-sidebar,
  .fc-study-sidebar,
  .fc-claim-sidebar,
  .fc-library-sidebar,
  .fc-hub-sidebar {
    display: none !important;
  }

  /* Pattern A: main is already flex:1, just works */

  /* Pattern B: no sidebar margin */
  body.fc-layout-study .fc-main,
  body.fc-layout-claim .fc-main,
  body.fc-layout-library .fc-main,
  body.fc-layout-reading .fc-main {
    margin-right: 0;
  }

  /* Center magazine content */
  .fc-study-center,
  .fc-claim-center,
  .fc-library-center {
    margin: 0 auto;
  }

  /* Floating player: center between nav and right edge (no sidebar on tablet) */
  .fc-play-sticky {
    left: calc(var(--fc-nav-width) + (100vw - var(--fc-nav-width)) / 2);
  }
  .fc-player {
    left: calc(var(--fc-nav-width) + ((100vw - var(--fc-nav-width)) / 2));
  }
}


/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (<768px)
   No nav rail. No sidebar. Mobile nav at bottom.
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {

  :root {
    --fc-text-hero:    2.4rem;
    --fc-text-h1:      2rem;
    --fc-text-body:    1.1rem;
    --fc-nav-width:    0px;
    --fc-sidebar-width: 0px;
    --fc-page-pad:     24px;
  }

  /* Nuclear: kill ALL height/stretch on mobile — content flows naturally */
  html, body {
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
  }

  /* Mobile header — sticky frosted glass bar */
  .fc-mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--fc-page-pad);
    background: rgba(249,248,246,0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .fc-mobile-header__logo { display: flex; align-items: center; }
  .fc-mobile-header__logo img { height: 28px; width: auto; }
  .fc-mobile-header__actions {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .fc-mobile-header__cta {
    font-size: 0.72rem;
    font-weight: var(--fc-w-bold);
    color: var(--fc-ink);
    background: var(--fc-accent);
    padding: 6px 14px;
    border-radius: var(--fc-radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .fc-mobile-header__cta:hover { background: var(--fc-accent-hover); }
  .fc-mobile-header__login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--fc-border);
    color: var(--fc-dim);
    transition: border-color 0.15s;
  }
  .fc-mobile-header__login:hover { border-color: var(--fc-ink); }
  .fc-mobile-header__login svg { width: 16px; height: 16px; }

  /* Pattern A: nuclear reset — every level forced to content height */
  body.fc-layout-home .fc-app,
  body.fc-layout-truth-map .fc-app,
  body.fc-layout-studies .fc-app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }

  body.fc-layout-home .fc-main,
  body.fc-layout-truth-map .fc-main,
  body.fc-layout-studies .fc-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }

  body.fc-layout-home .fc-center,
  body.fc-layout-truth-map .fc-tm-center,
  body.fc-layout-truth-map .fc-claims-center,
  body.fc-layout-studies .fc-eb-center,
  body.fc-layout-cluster-hub .fc-hub-center {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex: none !important;
    padding-bottom: 0 !important;
  }

  .fc-home-content,
  .fc-tm-content,
  .fc-claims-content,
  .fc-eb-content {
    max-width: 100%;
    padding-bottom: 0;
  }

  /* Pattern B: no margins, remove min-height on mobile */
  body.fc-layout-study .fc-main,
  body.fc-layout-claim .fc-main,
  body.fc-layout-library .fc-main,
  body.fc-layout-reading .fc-main {
    margin-left: 0;
    margin-right: 0;
    min-height: 0;
  }

  /* Hide desktop nav rail */
  .fc-nav { display: none; }

  /* ═══════════════════════════════════════════
     MOBILE COMMAND BAR v9.0
     3 zones: Menu | Play/Logo | Playlist
     One bar to rule them all. No floating player.
     ═══════════════════════════════════════════ */
  .fc-mnav {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 16px;
    right: 16px;
    height: 56px;
    background: rgba(26,26,26,0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
    padding: 0 6px;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.28),
      0 2px 8px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* Kill the desktop floating player on mobile — the bar IS the player */
  .fc-player { display: none !important; }
  .fc-play-sticky { display: none !important; }

  /* ─── ZONE: Left (Menu) & Right (Playlist) ─── */
  .fc-mnav__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 16px;
    border-radius: 14px;
    color: rgba(255,255,255,0.45);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    min-width: 56px;
  }
  .fc-mnav__zone:active {
    color: rgba(255,255,255,0.7);
  }
  .fc-mnav__zone svg {
    flex-shrink: 0;
  }
  .fc-mnav__zone-label {
    font-size: 9px;
    font-weight: var(--fc-w-bold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Playlist zone — accent color icon */
  .fc-mnav__playlist {
    color: var(--fc-accent);
  }
  .fc-mnav__playlist:active {
    opacity: 0.7;
  }

  /* ─── CENTER — The Hero ─── */
  .fc-mnav__center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Play button — proud circle, slightly above the bar */
  .fc-mnav__play {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .fc-mnav__play:active {
    transform: scale(0.88);
  }
  /* Elastic spring on state change */
  .fc-mnav__play--bounce {
    animation: fc-mnav-spring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes fc-mnav-spring {
    0%   { transform: scale(0.88); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
  /* When playing — accent background */
  .fc-mnav__play--active {
    background: var(--fc-accent);
    color: #000;
  }

  /* Play/Pause icons — pinned to fill button, self-centering */
  .fc-mnav__play-icon,
  .fc-mnav__pause-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .fc-mnav__play-icon svg {
    margin-left: 2px; /* optical center — triangle visual mass leans right */
  }

  /* ─── Progress Ring (SVG) ─── */
  .fc-mnav__ring {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
    z-index: 1;
  }
  .fc-mnav__ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 2.5;
  }
  .fc-mnav__ring-progress {
    fill: none;
    stroke: var(--fc-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear;
  }
  /* When playing — subtle icon color shift (not full green bg) */
  .fc-mnav__jdot--current {
    fill: var(--fc-accent);
  }

  .fc-mnav__play--playing {
    color: var(--fc-accent);
    background: rgba(0,209,142,0.10);
  }

  /* ─── Logo center (when no audio) ─── */
  .fc-mnav__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
  }
  .fc-mnav__logo svg {
    width: 22px;
    height: auto;
  }
  .fc-mnav__logo:active {
    color: rgba(255,255,255,0.8);
  }

  /* ─── Glow keyframe (reused) ─── */
  @keyframes fc-glow-pulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.15; transform: scale(1.08); }
  }

  /* ═══════════════════════════════════════════
     CLUSTER JOURNEY — Mobile Audio Mode
     fc-mnav transforms when audio plays on cluster pages:
     ☰ MENU | ▶ | 🎧 PLAYLIST → ✕ CLOSE | ⏸ | 5/10 →
     ═══════════════════════════════════════════ */

  /* Audio mode: hide default zones, show audio zones */
  .fc-mnav--audio-mode .fc-mnav__menu,
  .fc-mnav--audio-mode .fc-mnav__playlist {
    display: none;
  }
  .fc-mnav--audio-mode .fc-mnav__close,
  .fc-mnav--audio-mode .fc-mnav__journey-wrap {
    display: flex !important;
  }

  /* Close button zone */
  .fc-mnav__close {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0 16px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
  }
  .fc-mnav__close:active {
    color: rgba(255,255,255,0.8);
  }

  /* Journey nav zone (wrapper with back + pos + forward) */
  .fc-mnav__journey-wrap {
    flex-direction: row;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
  }
  .fc-mnav__journey-back,
  .fc-mnav__journey {
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
    padding: 4px;
  }
  .fc-mnav__journey-back:active,
  .fc-mnav__journey:active {
    color: var(--fc-accent);
  }
  .fc-mnav__journey-pos {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
  }
  .fc-mnav__journey-label {
    font-size: 0.55rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
  }

  /* Nudge pulse when audio ends */
  @keyframes fc-mnav-journey-nudge {
    0%, 100% { color: rgba(255,255,255,0.5); }
    50% { color: var(--fc-accent); }
  }
  .fc-mnav__journey--nudge {
    animation: fc-mnav-journey-nudge 0.6s ease 3;
  }

  /* Smooth zone transitions */
  .fc-mnav__menu,
  .fc-mnav__playlist,
  .fc-mnav__close,
  .fc-mnav__journey-wrap {
    transition: opacity 0.25s ease;
  }


  /* ═══════════════════════════════════════════
     MENU MODAL — Dark Cinematic Full-Screen
     ═══════════════════════════════════════════ */
  .fc-menu-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.97);
    z-index: 200;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
  }
  .fc-menu-modal--open {
    opacity: 1;
    visibility: visible;
  }
  .fc-menu-modal__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 28px;
    padding-bottom: 100px;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    transform: translateY(20px);
    transition: transform 0.4s var(--fc-ease-out);
  }
  .fc-menu-modal--open .fc-menu-modal__inner {
    transform: translateY(0);
  }

  /* Header */
  .fc-menu-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
  }
  .fc-menu-modal__logo { display: flex; align-items: center; }
  .fc-menu-modal__close {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: none;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
  .fc-menu-modal__close:active {
    border-color: rgba(255,255,255,0.3);
    color: var(--fc-surface);
  }

  /* Search bar */
  .fc-menu-modal__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: rgba(255,255,255,0.3);
    font-size: 14px;
    margin-bottom: 32px;
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .fc-menu-modal__search:active {
    border-color: rgba(255,255,255,0.15);
  }

  /* Nav links */
  .fc-menu-modal__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .fc-menu-modal__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 14px;
    border-radius: 14px;
    color: var(--fc-surface);
    text-decoration: none;
    transition: background 0.15s;
  }
  .fc-menu-modal__link:active {
    background: rgba(255,255,255,0.06);
  }
  .fc-menu-modal__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
    transition: color 0.15s ease;
  }
  .fc-menu-modal__link--active .fc-menu-modal__link-icon {
    color: var(--fc-accent);
    background: rgba(0, 209, 142, 0.08);
  }
  .fc-menu-modal__link--active .fc-menu-modal__link-title {
    color: var(--fc-accent);
  }
  /* PRO — accent icon + badge, matching desktop nav rail */
  .fc-menu-modal__link-icon--pro {
    color: var(--fc-accent);
    background: rgba(0, 209, 142, 0.08);
    position: relative;
  }
  .fc-menu-modal__pro-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 7px;
    font-weight: var(--fc-w-bold);
    letter-spacing: 0.5px;
    color: var(--fc-surface);
    background: var(--fc-accent);
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.2;
  }
  .fc-menu-modal__link--pro .fc-menu-modal__link-title {
    color: var(--fc-accent);
  }
  .fc-menu-modal__link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .fc-menu-modal__link-title {
    font-size: 16px;
    font-weight: var(--fc-w-semibold);
    letter-spacing: -0.2px;
  }
  .fc-menu-modal__link-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
  }

  /* Divider */
  .fc-menu-modal__divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 20px 14px;
  }

  /* Meal Plans CTA */
  .fc-menu-modal__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(0,209,142,0.08);
    border: 1px solid rgba(0,209,142,0.15);
    border-radius: 14px;
    color: var(--fc-accent);
    font-size: 15px;
    font-weight: var(--fc-w-semibold);
    text-decoration: none;
    transition: background 0.15s;
  }
  .fc-menu-modal__cta:active {
    background: rgba(0,209,142,0.14);
  }
  .fc-menu-modal__cta-arrow {
    margin-left: auto;
    opacity: 0.5;
  }

  /* Footer — Login */
  .fc-menu-modal__footer {
    margin-top: auto;
    padding-top: 24px;
  }
  .fc-menu-modal__login {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.08);
    transition: color 0.2s, border-color 0.2s;
  }
  .fc-menu-modal__login:active {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.15);
  }

  /* Hide old mobile nav */
  .fc-mobile-nav { display: none !important; }

  /* Scroll wrapper: match homepage breathing room (24px = --fc-page-pad on mobile)
     !important required — desktop body.fc-layout-study .fc-center-scroll has
     specificity 0,2,0 which beats this 0,1,0 rule. Same bug as sidebar. */
  .fc-center-scroll {
    padding: var(--fc-space-6) var(--fc-page-pad) 0 !important;
  }

  /* Center columns: full width, kill side padding (center-scroll handles it)
     !important required — desktop body.fc-layout-study .fc-study-center has
     specificity 0,2,0 which beats this 0,1,0 rule. Without this,
     content gets DOUBLE side padding (parent + child = 48px vs 24px). */
  .fc-study-center,
  .fc-claim-center,
  .fc-library-center,
  .fc-trust-center {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Homepage mobile */
  .fc-manifesto__headline { font-size: 1.8rem; letter-spacing: -0.8px; }
  .fc-manifesto { margin-bottom: 32px; }
  .fc-cluster-row__stats { display: none; }
  .fc-cluster-row__info { padding: 0 16px; }
  .fc-cluster-row { padding: 16px 16px 16px 0; }
  .fc-topic-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  /* Truth Map mobile */
  .fc-tm-title { font-size: 2rem; }
  .fc-tm-stats { gap: 16px; }
  .fc-tm-filter-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .fc-tm-filter-panel {
    padding: 12px 14px 14px;
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Evidence Base mobile */
  .fc-eb-title { font-size: 2rem; }
  .fc-eb-filter-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .fc-eb-study__top { min-width: 0; }
  .fc-eb-study__footer { display: none; }
  .fc-eb-study { padding: 12px 16px; }

  /* Floating player: slim dark pill — "▶ Listen" chip.
     Nav-family aesthetic (dark glass), sits above nav bar.
     38px height, just "Listen" text via ::before (hides desktop children). */
  .fc-play-sticky {
    left: 22px;
    right: auto;
    transform: none;
    width: auto;
    height: 38px;
    bottom: 84px;
    padding: 0 16px 0 10px;
    border-radius: 100px;
    gap: 8px;
    justify-content: center;
    align-items: center;
    background: rgba(26,26,26,0.90);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 3px 14px rgba(0,0,0,0.22),
      0 1px 3px rgba(0,0,0,0.10);
  }
  .fc-play-sticky:hover {
    transform: none;
    box-shadow:
      0 3px 14px rgba(0,0,0,0.22),
      0 1px 3px rgba(0,0,0,0.10),
      0 0 0 2px rgba(0,209,142,0.20);
  }
  .fc-play-sticky__btn {
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.10);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .fc-play-sticky__btn:hover {
    background: rgba(255,255,255,0.15);
    transform: none;
  }
  .fc-play-sticky__btn svg {
    width: 10px;
    height: 10px;
    fill: var(--fc-surface);
    margin-left: 1px;
  }
  /* Hide desktop label/sub children, show just "Listen" via ::before */
  .fc-play-sticky__label,
  .fc-play-sticky__sub { display: none; }
  .fc-play-sticky__text {
    display: block;
    font-size: 12px;
    font-weight: var(--fc-w-semibold);
    color: rgba(255,255,255,0.80);
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .fc-play-sticky__text::before {
    content: "Listen";
  }
  .fc-play-sticky__bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    opacity: 0.45;
  }
  .fc-play-sticky__bars span {
    width: 2px;
    background: var(--fc-accent);
    border-radius: 1px;
  }

  /* Single Study mobile */
  .fc-study-title { font-size: 1.6rem; }
  .fc-study-trust { gap: 16px; }
  .fc-study-key-finding__text { font-size: 1.2rem; }

  /* Single Claim mobile — v12.44.0 hierarchy fix */
  .fc-claim-title { font-size: 1.85rem; line-height: 1.12; letter-spacing: -1.2px; }
  .fc-claim-deck { font-size: 1.05rem; margin: var(--fc-space-2) 0 var(--fc-space-6) 0; }
  .fc-claim-intro-hook { font-size: 1.05rem; margin-bottom: var(--fc-space-6); }
  .fc-claim-finding__number { font-size: 2rem; }

  /* Dark player (old) mobile */
  .fc-player {
    bottom: 68px;
    left: 50%;
    width: calc(100vw - 32px);
  }

  .fc-article-title { letter-spacing: -1px; }

  /* Modal mobile */
  .fc-modal {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 16px 16px 0 0;
  }
  .fc-modal__durations { flex-wrap: wrap; }
  .fc-modal__dur-btn { flex: 1 1 calc(50% - 4px); }

  /* Footer mobile — legendary v10 */
  .fc-footer { padding-bottom: 96px; }

  /* Manifesto strip — left-aligned stack on mobile */
  .fc-footer__manifesto {
    text-align: left;
  }
  .fc-footer__manifesto-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px !important;
  }
  .fc-footer__manifesto-icon {
    display: none;
  }
  .fc-footer__manifesto-text {
    font-size: var(--fc-text-micro);
    line-height: var(--fc-lh-ui);
  }
  .fc-footer__manifesto-link {
    margin-left: 0;
    font-size: 0.62rem;
  }
  .fc-footer__manifesto-note {
    padding-left: 0;
    font-size: 0.6rem;
    text-align: left;
  }

  /* CTA stacks */
  .fc-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fc-space-4);
    padding: var(--fc-space-5) var(--fc-space-5) !important;
  }
  .fc-footer__cta-headline { font-size: 1.1rem; }
  .fc-footer__cta-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 20px;
  }

  /* Grid: 2 columns, For AI column spans full width */
  .fc-footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--fc-space-5) var(--fc-space-5) !important;
  }
  .fc-footer__col--ai {
    grid-column: 1 / -1;
    border-top: 2px solid var(--fc-accent);
    padding-top: var(--fc-space-4);
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--fc-space-8);
  }
  .fc-footer__col--ai .fc-footer__col-title {
    width: 100%;
    margin-bottom: var(--fc-space-3);
  }

  /* Grounded trigger */
  .fc-footer__grounded-trigger {
    padding: var(--fc-space-3) var(--fc-space-3);
  }

  /* Report modal */
  .fc-report-modal__panel {
    max-width: calc(100vw - 32px);
    margin: var(--fc-space-4);
  }
  .fc-report-modal__header {
    padding: var(--fc-space-5) var(--fc-space-5) 0;
  }
  .fc-report-modal__body {
    padding: var(--fc-space-4) var(--fc-space-5) var(--fc-space-5);
  }
  .fc-report-modal__trust-links {
    padding: var(--fc-space-3) var(--fc-space-5);
    flex-wrap: wrap;
  }

  /* Bottom bar stacks */
  .fc-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fc-space-3);
  }
  .fc-footer__meta {
    flex-wrap: wrap;
  }
  .fc-footer__icons {
    gap: var(--fc-space-1);
  }
}

/* Desktop: hide mobile nav, menu modal, and new mobile nav */
@media (min-width: 768px) {
  .fc-mnav { display: none; }
  .fc-menu-modal { display: none; }
  .fc-mobile-nav { display: none; }
}