/* Phase 4A shared rhythm and sizing. Loaded last; no global element reset.
   Existing semantic spacing/disabled tokens are the single source of truth.
   Home's local --rl-space-* values are deliberately not a root dependency. */
:root {
  --space-xs: var(--rl-ui-space-1);
  --space-sm: var(--rl-ui-space-2);
  --space-md: var(--rl-ui-space-3);
  --space-lg: var(--rl-ui-space-4);
  --space-xl: var(--rl-ui-space-6);
  --space-2xl: var(--rl-ui-space-8);
  --space-section: clamp(32px, 5vw, 64px);
}

/* About: the legal drawer's later .lm-panel/.lm-body rules must not make
   this informational card a 300px/100vh drawer with two scroll regions. */
#logoModal .lm-panel {
  box-sizing: border-box;
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  border-left: 1px solid var(--rl-border);
  animation: none;
}
#logoModal .lm-body {
  flex: initial;
  overflow: visible;
  padding: 0;
  margin: var(--space-lg) 0 var(--space-xl);
  width: 100%;
  overflow-wrap: anywhere;
}
#logoModal :is(.lm-headline, .lm-sub, .lm-tag) { max-width: 100%; overflow-wrap: anywhere; }
#logoModal .lm-panel :is(img, svg, video) { max-width: 100%; height: auto; }
#logoModal .lm-close { z-index: 2; }

/* Public content shares a centered 1200px container, not identical heights.
   Keep the cinematic hero, preview media and logo dimensions intact. */
#landingPage .lp-container:not(.lp-hero-minimal-inner) {
  box-sizing: border-box;
  max-width: 1200px;
  padding-inline: clamp(16px, 3vw, 32px);
}
#landingPage .lp-container.lp-x-narrow { max-width: 820px; }
#landingPage :is(.lp-missions, .lp-how, .lp-whats-inside, .lp-preview, .lp-cta-final, .lp-x-features, .lp-x-who, .lp-x-faq) {
  padding-block: var(--space-section);
}
#landingPage :is(.lp-mission-grid, .lp-wi-grid, .lp-x-grid) { gap: var(--space-lg); }
#landingPage :is(.lp-mc, .lp-wi-card, .lp-x-card) { padding: var(--space-xl); min-height: 0; }
#landingPage :is(.lp-x-eyebrow, .lp-step-title) { margin-bottom: var(--space-sm); }
#landingPage .lp-x-lede { margin-bottom: var(--space-2xl); }
#landingPage .lp-x-card h3 { margin: var(--space-md) 0 var(--space-sm); }
#landingPage .lp-x-faqlist { gap: var(--space-md); margin-top: var(--space-xl); }
#landingPage .lp-x-faqlist summary { padding: var(--space-lg) 52px var(--space-lg) var(--space-xl); }
#landingPage .lp-x-faqlist summary h3 { color: var(--rl-text); overflow-wrap: anywhere; }
#landingPage .lp-x-faq .lp-microcopy { color: var(--rl-text-muted); }
#landingPage .lp-x-faq .lp-btn-primary {
  background: var(--rl-brand-ink);
  color: var(--rl-white);
  box-shadow: none;
}
#landingPage .lp-x-faqlist details p { padding: 0 var(--space-xl) var(--space-xl); color: var(--rl-text-muted); }
.lp-topnav-inner, .lp-footer-inner { gap: var(--space-md); }
.lp-footer-links { flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.app-footer-bar { gap: var(--space-sm) var(--space-lg); flex-wrap: wrap; padding: var(--space-sm) var(--space-xl); }

/* Onboarding: content-sized, one viewport-bound scroll region. */
#onboardingOverlay {
  padding: var(--space-lg);
  padding-top: max(var(--space-lg), env(safe-area-inset-top));
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  overflow-y: auto;
}
#onboardingOverlay .ob-card { max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; }
#onboardingOverlay .ob-hero { padding: var(--space-2xl) var(--space-xl) var(--space-xl); }
#onboardingOverlay .ob-title { margin-bottom: var(--space-md); }
#onboardingOverlay .ob-footer { padding: var(--space-lg) var(--space-xl); gap: var(--space-md); }

/* Mission: normalize content rhythm only. Do not replace Phase 3H's
   minmax(0,1fr) shell or the mobile checklist's important target sizing. */
#missionContainer .mc-shell { gap: var(--space-xl); }
#missionContainer .mc-content-card { padding: var(--space-2xl); box-shadow: none; }
#missionContainer .mc-mission-block { margin-top: var(--space-xl); padding: var(--space-xl); }
#missionContainer .mc-mission-header { gap: var(--space-md); margin-bottom: var(--space-lg); }
#missionContainer .mc-freeze-frame { margin-top: var(--space-xl); }

/* Progress, XP, streaks, storylines and badge surfaces retain their responsive
   grids, meter widths and art. Quiet cards should not carry navy-era shadows. */
#progressOverlay .progress-panel-hdr { gap: var(--space-md); padding: var(--space-lg) var(--space-xl); }
#progressOverlay .progress-panel-body { min-height: 0; gap: var(--space-xl); padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
#progressOverlay .prg-card { padding: var(--space-xl); box-shadow: none; }
#progressOverlay :is(.prg-section-hdr, .prg-streak-head) { gap: var(--space-md); margin-bottom: var(--space-lg); }
#progressOverlay :is(.slp-grid, .prg-weekly-grid) { gap: var(--space-md); }
#statsPanel .sp-body { padding: var(--space-xl); }
#statsPanel :is(.sp-stats-row, .sp-badges, .activity-badges) { gap: var(--space-md); }

/* More remains its existing responsive menu, with reachable 44px close target. */
#moreMenuOverlay .mm-header { gap: var(--space-md); padding-inline: var(--space-xl); }
#moreMenuOverlay .mm-close { width: 44px; height: 44px; min-width: 44px; }
#moreMenuOverlay .mm-section-label { padding: var(--space-xl) var(--space-xl) var(--space-sm); }
#moreMenuOverlay .mm-grid { gap: var(--space-md); padding: var(--space-sm) var(--space-lg); }
#moreMenuOverlay .mm-item { gap: var(--space-sm); padding: var(--space-lg) var(--space-md); }

/* Locker uses tl-* (not lk-*). No horizontal tab scrollbar on small screens. */
#theLockerOverlay .tl-tab-btn { min-width: 0; }
#theLockerOverlay .tl-body { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
#theLockerOverlay .tl-list { gap: var(--space-md); }
#theLockerOverlay :is(.tl-win-item, .tl-mission-item, .tl-note-item, .tl-saved-item) { padding: var(--space-lg); }
#theLockerOverlay .tl-badge-grid { gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
#theLockerOverlay .tl-badge-card { padding: var(--space-lg); }
#theLockerOverlay .tl-badge-section { margin-bottom: var(--space-xl); }

/* Notes/history dynamic modules already use this spacing scale. Shared forms
   and dialogs adopt it without replacing their tabs, states or scroll owners. */
:is(#lnModal, #lnHistoryModal) .ln-card { padding: var(--space-xl); }
:is(#lnModal, #lnHistoryModal) :is(.ln-hdr, .ln-tabs, .ln-prompt-box) { margin-bottom: var(--space-lg); }
:is(#lnModal, #lnHistoryModal) .ln-footer { margin-top: var(--space-xl); gap: var(--space-sm); }
#fieldNotesOverlay .fn-panel { padding: var(--space-xl); }
#settingsDrawer .st-section { padding: var(--space-lg) var(--space-xl); }
#settingsDrawer .st-section-label { margin-bottom: var(--space-md); }
#settingsDrawer :is(.st-size-row, .st-accent-row) { gap: var(--space-sm); }
:is(#logWinModal .lwm-panel, #trackModal .goal-modal-inner) {
  box-sizing: border-box;
  padding: var(--space-xl);
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
}
#logWinModal .lwm-pills, #trackModal .gm-options { gap: var(--space-sm); }
#_rlAuthModal > div { padding: var(--space-xl) !important; }
#_rlAuthForm > div { margin-bottom: var(--space-lg) !important; }
#proUpgradeModal > div, #paywallModal > div, #lockedFeatureModal > div {
  box-sizing: border-box;
  max-width: 560px !important;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl) !important;
  overflow-wrap: anywhere;
}
#proModalPricing { gap: var(--space-md) !important; margin-bottom: var(--space-xl) !important; }

/* Disabled/pending is opaque semantic paint, never whole-copy fading.
   No pointer-events, availability, destination or focus behavior is changed. */
.nav-locked, a.nav-locked:hover, div.nav-locked { opacity: 1; color: var(--rl-ui-disabled-ink); }
.app-sidebar .nav-locked, .app-sidebar a.nav-locked:hover { color: var(--rl-ui-text-muted-on-dark); }
.asb-approved.nav-locked { opacity: 1; }
.asb-approved.nav-locked :is(.asb-approved-title, .asb-approved-msg) { color: var(--rl-ui-text-muted-on-dark); }
.rl-home-design :is(.rl-primary-action, .rl-secondary-action):disabled,
#chatOverlay :is(.sendbtn, .angle-btn, .cn-btn):disabled,
#progressOverlay .streak-freeze-btn:disabled,
#settingsDrawer .st-section button:disabled,
#_rlAuthModal :is(button, input):disabled,
#proUpgradeModal button:disabled,
#missionContainer .mc-content-card > button[style]:disabled,
#vbOverlay #vbSubmitBtn:disabled,
#lnModal .ln-submit-btn:disabled {
  opacity: 1 !important;
  background: var(--rl-ui-disabled-surface) !important;
  color: var(--rl-ui-disabled-ink) !important;
  border-color: var(--rl-border) !important;
  box-shadow: none;
}
#progressOverlay .streak-freeze-btn:disabled :is(.sfb-top, .sfb-sub) { color: var(--rl-ui-disabled-ink); }
#proUpgradeModal button:disabled :is(span, div) { color: var(--rl-ui-disabled-ink) !important; }
/* Brochure cards without a question carry inline .35 opacity. Keep their
   cursor/CTA availability as supplied by JS, but leave biographies legible. */
#guestCoachesOverlay .gco-card[style*="opacity:0.35"] {
  opacity: 1 !important;
  background: var(--rl-ui-disabled-surface);
  border-color: var(--rl-border) !important;
}
#guestCoachesOverlay .gco-card[style*="opacity:0.35"] :is(.gco-card-tagline, .gco-card-bio, .gco-mission-desc) { color: var(--rl-ui-disabled-ink); }
/* Archetype art/accent borders remain personal; tiny raw accent inks on cream
   are not readable. These exact inline type roles are owned by showArchetypeCard. */
#archetypeCardOverlay > div { box-sizing: border-box; padding: var(--space-2xl) var(--space-xl) !important; }
#archetypeCardOverlay > div > div[style*="font-size:22px"] { color: var(--rl-text) !important; }
#archetypeCardOverlay div[style*="font-size:10px"][style*="text-transform:uppercase"] { color: var(--rl-brand-ink) !important; }

/* Ask bridge text can move the CTA to the next row rather than collapse. */
.ask-bridge-inner { gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-lg); }
.ask-bridge-text { flex: 1 1 160px; min-width: 0; }
.ask-bridge-btn { flex: 0 0 auto; }

@media (min-width: 768px) {
  #progressOverlay .progress-overlay-panel {
    height: auto;
    max-height: calc(100dvh - 48px);
  }
}
@media (max-width: 600px) {
  /* TK's header has icon, title/stats and progress/close group. A small
     grid keeps the close target top-right and the meter below the copy. */
  #tkMain > div:first-child {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 44px;
    gap: var(--space-sm) var(--space-md) !important;
    align-items: start !important;
  }
  #tkMain > div:first-child > div:first-child { grid-column: 1; grid-row: 1; }
  #tkMain > div:first-child > div:nth-child(2) { grid-column: 2; grid-row: 1; min-width: 0; }
  #tkMain > div:first-child > div:last-child { display: contents !important; }
  #tkMain > div:first-child > div:last-child > div { grid-column: 2; grid-row: 2; max-width: 100%; }
  #tkMain > div:first-child > div:last-child > button {
    grid-column: 3;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
  }
  #missionContainer .mc-content-card { padding: var(--space-lg); }
  #missionContainer .mc-mission-block { padding: var(--space-lg); }
  #progressOverlay :is(.progress-panel-hdr, .progress-panel-body) { padding-inline: var(--space-lg); }
  #progressOverlay .prg-card { padding: var(--space-lg); }
  #moreMenuOverlay .mm-header { padding-inline: var(--space-lg); }
  #moreMenuOverlay .mm-section-label { padding-inline: var(--space-lg); }
  #landingPage :is(.lp-mc, .lp-wi-card, .lp-x-card) { padding: var(--space-lg); }
  #proUpgradeModal > div, #paywallModal > div, #lockedFeatureModal > div { padding: var(--space-xl) var(--space-lg) !important; }
}
@media (max-width: 480px) {
  #logoModal .lm-panel { padding: var(--space-xl) var(--space-lg); }
  #theLockerOverlay .tl-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
    padding: var(--space-md);
    overflow-x: visible;
  }
  #theLockerOverlay .tl-tab-label { white-space: normal; overflow-wrap: anywhere; }
  #onboardingOverlay :is(.ob-hero, .ob-footer) { padding-inline: var(--space-lg); }
  :is(#lnModal, #lnHistoryModal) .ln-card { padding: var(--space-lg); }
  #settingsDrawer .st-section { padding-inline: var(--space-lg); }
}