/* ==========================================================================
   TABIFLOW V2 — App Shell Chrome
   --------------------------------------------------------------------------
   File:  styles/components/shell.css
   Scope: All V2 rules scoped to html.tf-v2shell — zero V1 impact.
   Pass:  7a (CSS foundation + HTML scaffold)
   Feature flag: ?v2shell=1 → persists tf:v2shell → html.tf-v2shell

   Components covered:
     1.  V1 chrome hide rules (body, .container, #planner glass, #map,
                                .tf-topbar, .panel-row, .planner-setup-bar,
                                .planner-command-strip, .help-panel,
                                .planner-ai-shell, .site-footer)
     2.  V2 body + container reset
     3.  V2 topbar              (.v2-shell-topbar, .v2-shell-brand,
                                 .v2-shell-back-btn, .v2-shell-share-btn,
                                 .v2-shell-hbg-btn)
     4.  V2 tab bar             (.v2-shell-tabbar, .v2-shell-tab,
                                 .v2-shell-tab-icon, .v2-shell-tab-label)
     5.  Hamburger ≡ drawer     (.v2-shell-hbg-overlay, .v2-shell-hbg-drawer,
                                 .v2-shell-hbg-header, .v2-shell-hbg-title,
                                 .v2-shell-hbg-close, .v2-shell-hbg-section,
                                 .v2-shell-hbg-sec-label, .v2-shell-hbg-item,
                                 .v2-shell-hbg-item-static, .v2-shell-hbg-item-disabled,
                                 .v2-shell-hbg-icon, .v2-shell-hbg-badge,
                                 .v2-shell-version-pill, .v2-shell-theme-toggle)
     6.  Discover tab content   (.v2-shell-discover, .v2-shell-discover-icon,
                                 .v2-shell-discover-heading, .v2-shell-discover-body)
     7.  Safe-area insets       (iOS notch / Dynamic Island support)

   NAMING RATIONALE (v1-v2-conflict-registry):
     - No "menu" or "more" substrings (entry #3 — V1 [class*="menu"] trap)
     - Prefix: v2-shell-* — zero V1 collision confirmed (grep verified)
     - Hamburger prefix: v2-shell-hbg-* (not "menu", not "nav")
     - V1 hides: html.tf-v2shell + !important; specificity (0,1,1,x) beats
       all confirmed V1 rules on these elements

   SPECIFICITY NOTES:
     - Inline <style> #planner = (0,1,0,0). Override: html.tf-v2shell #planner
       = (0,1,1,1) + !important wins. ✓
     - Inline <style> .container = (0,0,1,0). Override: html.tf-v2shell
       .container = (0,0,1,1) + !important wins. ✓
     - styles.css .tf-topbar = (0,0,1,0). Override: html.tf-v2shell .tf-topbar
       = (0,0,1,1) + !important wins. ✓

   POSITIONING STRATEGY:
     - V2 topbar: position:fixed top:0 — above #planner + modals at z:120
     - V2 tabbar: position:fixed bottom:0 — below modals at z:120
     - Hamburger overlay: z:195, drawer: z:200 — above all other V2 chrome
     - #planner gets padding-top/bottom to offset fixed topbar/tabbar
     - All modals (pin, stop-action, mochi-safety) use position:fixed and
       are unaffected by shell chrome rearrangement ✓

   DOM RESTRUCTURE STATUS:
     - .scroll-body wrapper added in Panel A commit. Under html.tf-v2shell,
       renderPlanner() targets .scroll-body (not #days-root). #days-root
       stays as a static placeholder in V1 path (no tf-v2shell class).
       See §7 below for scroll-body CSS rules.
   ========================================================================== */

/* Shell height tokens — used for padding offsets on #planner */
html.tf-v2shell {
  --v2-shell-topbar-h: 56px;
  --v2-shell-tabbar-h: 56px;
}


/* ── 1. V1 chrome — hidden under V2 shell ─────────────────────────────────── */

html.tf-v2shell body {
  background: var(--tf-bg-page) !important;
  background-image: none !important;
  min-height: 100dvh;
}

html.tf-v2panel body {
  color: var(--tf-text-primary);
  /* §23-FIX-CASCADE: defeats V1 styles.css L70 body { color: var(--text) }
     where --text: #f4f7fb (near-white) — closes V1/V2 cascade boundary for
     inherited text color. All V2 components that rely on color:inherit now
     resolve to --tf-text-primary instead of the V1 near-white value. */
}

html.tf-v2shell .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strip V1 glass panel chrome from #planner; keep it in DOM for #days-root */
html.tf-v2shell #planner {
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Offset content below V2 fixed topbar and above V2 fixed tabbar */
  padding-top: calc(var(--v2-shell-topbar-h) + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(var(--v2-shell-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* V1 chrome elements inside #planner — hidden under V2 shell */
html.tf-v2shell .tf-topbar             { display: none !important; }
html.tf-v2shell .panel-row             { display: none !important; }
html.tf-v2shell .planner-setup-bar     { display: none !important; }
html.tf-v2shell .planner-command-strip { display: none !important; }
html.tf-v2shell .help-panel            { display: none !important; }

/* V1 secondary panels + footer */
html.tf-v2shell #map                   { display: none !important; }
html.tf-v2shell .planner-ai-shell      { display: none !important; }
html.tf-v2shell .site-footer           { display: none !important; }


/* ── 2. V2 topbar ──────────────────────────────────────────────────────────── */

/* Base: hidden in V1 */
.v2-shell-topbar { display: none; }

html.tf-v2shell .v2-shell-topbar {
  display: flex !important;
  align-items: center;
  gap: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--v2-shell-topbar-h);
  padding: 0 var(--tf-space-sm);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--tf-bg-page);
  border-bottom: 1px solid var(--tf-border-line);
  z-index: 120;
}

/* Contextual buttons — hidden until JS reveals (7b) */
html.tf-v2shell .v2-shell-back-btn,
html.tf-v2shell .v2-shell-share-btn {
  display: none;
}

html.tf-v2shell .v2-shell-back-btn.is-visible,
html.tf-v2shell .v2-shell-share-btn.is-visible {
  display: inline-flex !important;
}

html.tf-v2panel.tf-v2shell .v2-shell-back-btn,
html.tf-v2panel.tf-v2shell .v2-shell-share-btn {
  /* contextual — shown by JS when trip active */
  display: none;
}

html.tf-v2shell .v2-shell-back-btn,
html.tf-v2shell .v2-shell-share-btn,
html.tf-v2shell .v2-shell-hbg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--tf-text-primary);
  cursor: pointer;
  min-height: var(--tf-tap-min);
  min-width: var(--tf-tap-min);
  border-radius: var(--tf-radius-md);
  flex-shrink: 0;
  transition: background 0.1s;
  padding: 0;
  font-family: inherit;
}

html.tf-v2shell .v2-shell-back-btn:hover,
html.tf-v2shell .v2-shell-back-btn:focus-visible,
html.tf-v2shell .v2-shell-share-btn:hover,
html.tf-v2shell .v2-shell-share-btn:focus-visible,
html.tf-v2shell .v2-shell-hbg-btn:hover,
html.tf-v2shell .v2-shell-hbg-btn:focus-visible {
  background: var(--tf-bg-elevated);
  outline: none;
}

html.tf-v2shell .v2-shell-hbg-btn[aria-expanded="true"] {
  color: var(--tf-primary);
}

html.tf-v2shell .v2-shell-brand {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--tf-text-primary);
  letter-spacing: -0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}


/* ── 3. V2 tab bar ─────────────────────────────────────────────────────────── */

/* Base: hidden in V1 */
.v2-shell-tabbar { display: none; }

html.tf-v2shell .v2-shell-tabbar {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--v2-shell-tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--tf-bg-surface);
  border-top: 1px solid var(--tf-border-line);
  z-index: 120;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.tf-v2shell .v2-shell-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--tf-text-secondary);
  cursor: pointer;
  min-height: var(--tf-tap-min);
  transition: color 0.15s;
  padding: 6px 0 4px;
}

html.tf-v2shell .v2-shell-tab.is-active {
  color: var(--tf-primary);
}

html.tf-v2shell .v2-shell-tab:hover,
html.tf-v2shell .v2-shell-tab:focus-visible {
  color: var(--tf-primary);
  outline: none;
}

html.tf-v2shell .v2-shell-tab[aria-disabled="true"] {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

html.tf-v2shell .v2-shell-tab-icon {
  font-size: 20px;
  line-height: 1;
}

html.tf-v2shell .v2-shell-tab-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}


/* ── 4. Hamburger ≡ drawer ─────────────────────────────────────────────────── */
/*
 * NAMING (v1-v2-conflict-registry entry #3):
 * Prefix v2-shell-hbg-* avoids "menu" substring.
 * z-index 195 (overlay) + 200 (drawer) — above all other V2 chrome (z:120)
 * and above stop-action-panel (z:190).
 *
 * ANIMATION: uses visibility + transform instead of display:none so the
 * slide-in transition works. transform:translateX(110%) keeps it off-screen
 * and zero-interaction until .is-open is added by JS.
 */

/* Dim overlay — always in DOM, invisible until .is-open */
.v2-shell-hbg-overlay {
  position: fixed;
  inset: 0;
  z-index: 195;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  visibility: hidden;
}

html.tf-v2shell .v2-shell-hbg-overlay {
  transition: opacity 0.22s ease, visibility 0.22s;
}

html.tf-v2shell .v2-shell-hbg-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Drawer — slides in from right */
.v2-shell-hbg-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  max-width: 320px;
  z-index: 200;
  background: var(--tf-bg-elevated);
  border-left: 1px solid var(--tf-border-soft);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(110%);
  visibility: hidden;
}

html.tf-v2shell .v2-shell-hbg-drawer {
  transition: transform 0.25s ease, visibility 0.25s;
}

html.tf-v2shell .v2-shell-hbg-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Header — sticky within drawer scroll */
html.tf-v2shell .v2-shell-hbg-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: var(--tf-space-md) var(--tf-space-lg);
  border-bottom: 1px solid var(--tf-border-line);
  position: sticky;
  top: 0;
  background: var(--tf-bg-elevated);
  z-index: 1;
}

html.tf-v2shell .v2-shell-hbg-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tf-text-primary);
}

html.tf-v2shell .v2-shell-hbg-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--tf-text-secondary);
  cursor: pointer;
  min-height: var(--tf-tap-min);
  min-width: var(--tf-tap-min);
  border-radius: var(--tf-radius-md);
  transition: background 0.1s;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}

html.tf-v2shell .v2-shell-hbg-close:hover,
html.tf-v2shell .v2-shell-hbg-close:focus-visible {
  background: var(--tf-bg-surface);
  outline: none;
}

/* Section dividers */
html.tf-v2shell .v2-shell-hbg-section {
  display: block !important;
  padding: var(--tf-space-sm) 0;
  border-bottom: 1px solid var(--tf-border-line);
}

html.tf-v2shell .v2-shell-hbg-section:last-child {
  border-bottom: none;
}

/* Section label */
html.tf-v2shell .v2-shell-hbg-sec-label {
  display: block !important;
  padding: var(--tf-space-sm) var(--tf-space-lg) 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tf-text-muted);
  margin: 0;
  user-select: none;
}

/* Action buttons */
html.tf-v2shell .v2-shell-hbg-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px var(--tf-space-lg);
  background: none;
  border: none;
  font-size: 15px;
  font-family: inherit;
  color: var(--tf-text-primary);
  cursor: pointer;
  text-align: left;
  min-height: var(--tf-tap-min);
  transition: background 0.1s;
}

html.tf-v2shell .v2-shell-hbg-item:hover,
html.tf-v2shell .v2-shell-hbg-item:focus-visible {
  background: var(--tf-bg-surface);
  outline: none;
}

/* Static display rows (non-interactive) */
html.tf-v2shell .v2-shell-hbg-item-static {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px var(--tf-space-lg);
  font-size: 15px;
  color: var(--tf-text-primary);
  min-height: var(--tf-tap-min);
}

/* Disabled / teaser items */
html.tf-v2shell .v2-shell-hbg-item-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Icon column */
html.tf-v2shell .v2-shell-hbg-icon {
  display: inline-block !important;
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* "v1.5" badge on teaser items */
html.tf-v2shell .v2-shell-hbg-badge {
  display: inline-block !important;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--tf-radius-sm);
  background: var(--tf-primary-soft);
  color: var(--tf-primary);
  flex-shrink: 0;
}

/* Version pill */
html.tf-v2shell .v2-shell-version-pill {
  display: inline-block !important;
  margin-left: auto;
  font-size: 11px;
  color: var(--tf-text-muted);
}

/* Theme toggle — Auto / Dark / Light */
html.tf-v2shell .v2-shell-theme-toggle {
  display: inline-flex !important;
  background: var(--tf-bg-page);
  border-radius: var(--tf-radius-full);
  padding: 3px;
  margin: 4px var(--tf-space-lg) 12px;
  gap: 2px;
}

html.tf-v2shell .v2-shell-theme-toggle button {
  background: none;
  border: none;
  padding: 6px 14px;
  border-radius: var(--tf-radius-full);
  font-size: 13px;
  font-family: inherit;
  color: var(--tf-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 44px;
}

html.tf-v2shell .v2-shell-theme-toggle button.is-active {
  background: var(--tf-primary);
  color: var(--tf-primary-ink);
}

html.tf-v2shell .v2-shell-theme-toggle button:hover:not(.is-active),
html.tf-v2shell .v2-shell-theme-toggle button:focus-visible:not(.is-active) {
  background: var(--tf-bg-elevated);
  outline: none;
}


/* ── 5. Discover tab content ───────────────────────────────────────────────── */

/* Base: hidden by default (Language is also hidden) */
.v2-shell-discover { display: none; }

html.tf-v2shell .v2-shell-discover.is-active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--tf-space-lg);
  gap: var(--tf-space-md);
  /* Overlay the scroll body (sits between fixed topbar and tabbar) */
  position: fixed;
  top: calc(var(--v2-shell-topbar-h) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: calc(var(--v2-shell-tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--tf-bg-page);
  z-index: 110;
}

html.tf-v2shell .v2-shell-discover-icon {
  font-size: 52px;
  line-height: 1;
}

html.tf-v2shell .v2-shell-discover-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--tf-text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

html.tf-v2shell .v2-shell-discover-body {
  font-size: 14px;
  color: var(--tf-text-secondary);
  max-width: 280px;
  line-height: 1.55;
  margin: 0;
}


/* ── 7. Scroll-body container (.scroll-body DOM restructure — Panel A) ──────── */
/*
 * .scroll-body wraps #days-root in planner.html and acts as the scrolling
 * viewport for the Planner tab under the V2 shell.
 *
 * Follows the same position:fixed pattern as .v2-shell-discover (§5):
 *   top    = topbar height + safe-area-inset-top
 *   bottom = tabbar height + safe-area-inset-bottom
 * This ensures the scroll container never underlaps the fixed topbar or tabbar.
 *
 * renderPlanner() targets .scroll-body when html.tf-v2shell is active;
 * V1 path (no shell class) continues to target #days-root directly.
 *
 * NOTE — window.scrollBy / window.scrollTo calls in planner-page.js
 * (restorePendingPlannerScrollAnchor, holdReorderLockedScrollY restore)
 * still reference the viewport, not this container. These are documented
 * as known gaps for a follow-on JS pass; they fail silently (no crash).
 */

html.tf-v2shell .scroll-body {
  position: fixed;
  top: calc(var(--v2-shell-topbar-h) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: calc(var(--v2-shell-tabbar-h) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--tf-bg-page);
  z-index: 110;
}


/* ── Beta: dark-only — theme toggle hidden until light-mode bug fixed ──────── */
/* iOS light mode renders stop-name inputs invisible (#0 on #0). Re-enable      */
/* when color-scheme / input theming is solid enough for light. (v1.0 target)   */
html.tf-v2shell #v2-shell-theme-toggle { display: none !important; }

/* ── Hero photo: suppress body::before pseudo in v2shell ─────────────────── */
/* commit 3 zeroed body{background-image} but body::before still paints the   */
/* seasonal .webp. This one-liner kills it without touching V1 or the element. */
html.tf-v2shell body::before { display: none !important; }

/* ── Mochi nudge: clear the tab bar in v2shell ────────────────────────────── */
html.tf-v2shell .mochi-nudge {
  bottom: calc(var(--v2-shell-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ── 6. Reduced motion — WCAG 2.1 SC 2.3.3 ────────────────────────────────── */
/*
 * Disables hamburger drawer slide-in and overlay fade for users who have
 * OS-level "Reduce Motion" enabled. Only targets V2 shell animations
 * introduced in Page 7a/7b — no V1 rules touched.
 */
@media (prefers-reduced-motion: reduce) {
  html.tf-v2shell .v2-shell-hbg-overlay {
    transition: none;
    animation: none;
  }
  html.tf-v2shell .v2-shell-hbg-drawer {
    transition: none;
    animation: none;
  }
}