/* ════════════════════════════════════════════════════════════════════════════
   ATLAS V6 — Mobile / Phone responsiveness  (css/v6-mobile.css)
   ────────────────────────────────────────────────────────────────────────────
   Loaded AFTER every v6-* sheet and BEFORE v6-lock.css (which must stay LAST).
   EVERY rule is scoped inside `@media (max-width:768px)` → ZERO effect on the
   1920×1080 desktop no-scroll frame (atlas-dashboard.md hard rule #3 preserved).

   Design language = V6 enterprise (atlas-dashboard.md): a DARK command rail over
   a LIGHT / cream work surface, ONE gold accent (--gold #c18a25). On phones the
   rail collapses to a dark bottom TAB BAR with a gold active tab; the work
   surface stays light. Single theme only — no dark-variant, no toggle.

   This sheet REPLACES the stale V5-token bottom bar (`.mob-tabbar`, injected by
   js/mobile-nav.js with cyan #34c2ff / dark #11161c tokens) with a clean,
   CSS-only bar driven by the REAL nav rail (.rail-item[data-dept]) — so routing
   (app.js .active cycling + training.js showView) works with zero JS changes and
   no dependency on mobile-nav.js running.

   Multi-tenant + data-integrity safe: layout/colour only. No personalized
   strings, no KPI values, no data binding touched (.claude/rules/multi-tenant.md,
   data-integrity.md). Voice integration preserved: orb (#orb-wrap), mic state,
   transcripts, gear, and the spacebar/tap PTT surface stay live and reachable.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 0. Token shims — guarantee V6 values even if a stale token wins ─────── */
  :root {
    --m-rail:   #141b22;     /* dark command-rail base   */
    --m-rail-2: #0f151b;     /* dark command-rail foot   */
    --m-gold:   #c18a25;     /* single accent            */
    --m-line:   #d7d0c3;     /* light-surface hairline   */
    --m-muted:  #9fb0bf;     /* rail muted text          */
  }

  /* ── 0a. Retire the stale-token JS tab bar + segmented sub-tabs.
     We build the bar from the real rail below, so neutralise mobile-nav.js's
     V5-cyan chrome to avoid a doubled/blue bottom bar. ────────────────────── */
  .mob-tabbar,
  .mob-segbar { display: none !important; }

  /* ── 0b. Clear the fixed bottom chrome (tab bar 64 + voice dock ~92 + safe).
     Re-asserted with a 12px page gutter per the typography spec. ──────────── */
  .canvas {
    padding: 12px 12px calc(176px + env(safe-area-inset-bottom, 0px)) !important;
  }


  /* ════════════════════════════════════════════════════════════════════════
     1. NAV RAIL → BOTTOM TAB BAR  (64px tall · gold active · 4 tabs)
        Today (home) · Pipeline (leads) · Tasks (tasksnative) · Voice (notifications)
     ════════════════════════════════════════════════════════════════════════ */

  /* Re-show the rail (mobile.css hides it ≤767) and pin it as a bottom bar.
     #rail.sidebar out-specifies the v6-nav width/position locks. */
  #rail.sidebar {
    display: flex !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    flex-direction: row !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    background: linear-gradient(180deg, var(--m-rail), var(--m-rail-2)) !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 -6px 22px rgba(16, 23, 34, 0.30) !important;
    overflow: visible !important;
    transform: none !important;           /* cancel the ≤1200 drawer slide-out  */
    z-index: 260 !important;
    -webkit-transform: translateZ(0);     /* GPU promote → no iOS scroll jitter  */
  }

  /* Hide every rail member that is not a tab (brand, switcher, side-card, foot) */
  #rail.sidebar > .sidebar-brand,
  #rail.sidebar > .org-switcher,
  #rail.sidebar > .org-dropdown,
  #rail.sidebar > .v6-side-card,
  #rail.sidebar > .sidebar-foot { display: none !important; }

  /* Flatten the nav scroll region + its groups into a single tab row */
  #rail.sidebar .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #rail.sidebar .sidebar-nav .v6-nav-group { display: contents !important; }
  /* The Favorites group is NOT a tab. v7-tools.js may populate #v7-fav-items
     (and clear its [hidden]); the contents-flatten above would otherwise pull
     that block into the tab row and eat the width, crushing the 4 tabs to the
     right edge. Keep it fully out of the bottom bar. */
  #rail.sidebar .sidebar-nav #v7-fav-group,
  #rail.sidebar .sidebar-nav .v7-fav-group { display: none !important; }
  #rail.sidebar .sidebar-nav .v6-nav-heading { display: none !important; }

  /* Hide all items, then reveal the four tabs */
  #rail.sidebar .sidebar-nav .rail-item { display: none !important; }
  /* Rail IA regroup (2026-06-29): the bottom bar tracks Daily-pinned items so
     accordion collapse never hides a tab. leads→tasks (Pipeline), notifications
     →voice (Voice Inbox). */
  #rail.sidebar .sidebar-nav .rail-item[data-dept="home"],
  #rail.sidebar .sidebar-nav .rail-item[data-dept="tasks"],
  #rail.sidebar .sidebar-nav .rail-item[data-dept="tasksnative"],
  #rail.sidebar .sidebar-nav .rail-item[data-dept="voice"] {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 7px 2px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    grid-template-columns: none !important;   /* cancel the 28px/1fr/auto grid   */
    -webkit-tap-highlight-color: transparent;
  }

  /* Requested tab order: Today · Pipeline · Tasks · Voice */
  #rail.sidebar .sidebar-nav .rail-item[data-dept="home"]          { order: 1 !important; }
  #rail.sidebar .sidebar-nav .rail-item[data-dept="tasks"]         { order: 2 !important; }
  #rail.sidebar .sidebar-nav .rail-item[data-dept="tasksnative"]   { order: 3 !important; }
  #rail.sidebar .sidebar-nav .rail-item[data-dept="voice"]         { order: 4 !important; }

  /* Tab internals: icon over label; drop the sub-line + state badge */
  #rail.sidebar .sidebar-nav .rail-item .v6-nav-icon {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #rail.sidebar .sidebar-nav .rail-item .v6-nav-icon .ri-svg,
  #rail.sidebar .sidebar-nav .rail-item .v6-nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: var(--m-muted) !important;
    stroke: currentColor !important;
    filter: none !important;
  }
  #rail.sidebar .sidebar-nav .rail-item .v6-nav-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: var(--m-muted) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #rail.sidebar .sidebar-nav .rail-item .v6-nav-sub,
  #rail.sidebar .sidebar-nav .rail-item .v6-nav-state { display: none !important; }

  /* Active tab → gold (icon + label + top indicator + faint gold wash) */
  #rail.sidebar .sidebar-nav .rail-item.active {
    background: rgba(193, 138, 37, 0.12) !important;
    box-shadow: inset 0 2px 0 var(--m-gold) !important;
  }
  #rail.sidebar .sidebar-nav .rail-item.active .v6-nav-icon .ri-svg,
  #rail.sidebar .sidebar-nav .rail-item.active .v6-nav-icon svg { color: var(--m-gold) !important; }
  #rail.sidebar .sidebar-nav .rail-item.active .v6-nav-label    { color: var(--m-gold) !important; }
  #rail.sidebar .sidebar-nav .rail-item:active { background: rgba(255, 255, 255, 0.06) !important; }


  /* ════════════════════════════════════════════════════════════════════════
     2. KPI STRIP → horizontal scroll, 140px min tiles
     ════════════════════════════════════════════════════════════════════════ */
  .kpi-strip, #kpi-strip {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
    height: auto !important;
  }
  .kpi-strip::-webkit-scrollbar, #kpi-strip::-webkit-scrollbar { display: none; }
  .kpi-strip .kpi-tile {
    flex: 0 0 140px !important;
    min-width: 140px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 14px 14px 12px !important;
  }
  .kpi-strip .kpi-number { font-size: 24px !important; }
  .kpi-strip .kpi-label  { font-size: 11px !important; letter-spacing: 0.04em !important; }


  /* ════════════════════════════════════════════════════════════════════════
     3. TODAY CARDS → single column stacked
     ════════════════════════════════════════════════════════════════════════ */
  .v6-today-head { grid-template-columns: 1fr !important; gap: 10px !important; }
  .v6-today-head .head-actions { flex-wrap: wrap !important; }
  .v6-today-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .v6-today-col { gap: 14px !important; }
  .v6-today-col.col-trust { grid-column: auto !important; }


  /* ════════════════════════════════════════════════════════════════════════
     4. TOP BAR → icon-only search · chips scroll
     ════════════════════════════════════════════════════════════════════════ */
  header#statusbar.statusbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  /* The hidden V5 compat layer must never re-enter the flex flow */
  header#statusbar .status-left,
  header#statusbar .status-center,
  header#statusbar .status-jarvis,
  header#statusbar .status-right { display: none !important; }

  /* Search → a 44px icon-only tap target. The (readonly) input stays in the DOM,
     absolutely positioned + transparent, so tapping still opens the ⌘K palette. */
  .v6-global-search {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .v6-global-search svg { position: relative; z-index: 1; pointer-events: none; }
  .v6-global-search input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
  }
  .v6-search-hint { display: none !important; }

  /* Status chips → horizontal scroll, no wrap (take the middle, flexible space) */
  .v6-status-strip {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v6-status-strip::-webkit-scrollbar { display: none; }
  .v6-status-chip { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* Actions → keep the essentials (Ask Atlas + New); drop the role chip */
  .v6-top-actions { flex: 0 0 auto !important; gap: 6px !important; }
  .v6-role-chip { display: none !important; }


  /* ════════════════════════════════════════════════════════════════════════
     5. PIPELINE / TASKS → list view · 48px tap targets
     ════════════════════════════════════════════════════════════════════════ */

  /* Pipeline: unlock the fixed-height kanban shell → vertical list */
  #view-pipeline, [data-view="pipeline"] {
    height: auto !important;
    overflow: visible !important;
  }
  .v6-pipe-header { flex-wrap: wrap !important; gap: 8px !important; }
  .v6-pipe-header h2 { font-size: 22px !important; }
  .v6-pipe-main {
    display: block !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  /* Kanban columns stack into full-width stage sections (a scannable list) */
  .v6-kanban-scroll {
    flex-direction: column !important;
    overflow: visible !important;
    gap: 12px !important;
  }
  .v6-kanban-col {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  .v6-kanban-cards { overflow: visible !important; }
  .v6-deal-card {
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
  .v6-dual-focus {
    overflow: visible !important;
    margin-top: 12px !important;
  }

  /* Tasks (data-dept="tasksnative"): the ClickUp list reads as a tappable list.
     48px rows via generous cell padding; keep tap targets comfortable. */
  .wst-table th,
  .wst-table td { padding-top: 14px !important; padding-bottom: 14px !important; }
  .wst-row,
  .ws-task-row,
  .wst-table tbody tr { min-height: 48px !important; }
  .ws-task-check,
  .wst-check { min-width: 24px !important; min-height: 24px !important; }


  /* ════════════════════════════════════════════════════════════════════════
     6. VOICE DOCK → pinned above the bottom nav · 80px mic/orb
        (#hint-bar.quick-bar is the persistent "press SPACE to talk" surface)
     ════════════════════════════════════════════════════════════════════════ */
  #hint-bar.quick-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 92px !important;
    z-index: 256 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    background: linear-gradient(180deg, #172832, #121d27) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 -4px 18px rgba(16, 23, 34, 0.22) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Strip the desktop footer decoration; keep only the voice cluster */
  #hint-bar .qb-actions-row,
  #hint-bar .qb-holo-orb-wrap,
  #hint-bar .qb-flow-arrows,
  #hint-bar .qb-mic-btn,
  #hint-bar .qb-sync-panel,
  #hint-bar .qbvc-title,
  #hint-bar .qbvc-prompt,
  #hint-bar .qbvc-waveform,
  #hint-bar .vd-status-bar { display: none !important; }

  #hint-bar .qb-voice-section.vd-host {
    max-height: none !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #hint-bar .vd-dock {
    max-height: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  /* 80px talk orb (the mic) */
  #hint-bar .vd-orb.orb-wrap,
  #hint-bar #orb-wrap {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
  }
  #hint-bar .vd-readout {
    min-width: 0 !important;
    max-width: 56vw !important;
    text-align: left !important;
  }
  #hint-bar .vd-mic,
  #hint-bar #mic-indicator { font-size: 11px !important; }
  #hint-bar .vd-tx { font-size: 11px !important; }
  #hint-bar .vd-gear,
  #hint-bar .hero-settings-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
  }


  /* ════════════════════════════════════════════════════════════════════════
     7. TYPOGRAPHY → 14px body · 22px H1 · 12px gutter
     ════════════════════════════════════════════════════════════════════════ */
  body { font-size: 14px !important; }
  .canvas h1 { font-size: 22px !important; line-height: 1.14 !important; }
  .v6-today-head h2,
  .v6-pipe-header h2 { font-size: 22px !important; line-height: 1.14 !important; }
  .v6-today-head .lede,
  .v6-pipe-header .lede { font-size: 14px !important; }
  .v6-panel-header h3 { font-size: 16px !important; }
  .v6-panel-body { padding: 14px !important; }

  /* iOS: inputs <16px trigger zoom-on-focus — keep real inputs at 16px.
     (The icon-only search input is opacity:0, so this is harmless there.) */
  input:not(#topbar-search),
  select,
  textarea { font-size: max(16px, 1em) !important; }

} /* end ≤768px */