/* === bundle-mobile.css === */
/* Generated 2026-06-22 20:18 — DO NOT EDIT DIRECTLY */

/* --- colorblind.css --- */
/* =============================================================
   COLORBLIND ACCESSIBILITY MODE — Wave 14-W178 (2026-06-10)
   Loads LAST (after north_star_final.css) so it overrides the
   semantic status vars --good / --warn / --bad / --good-rgb.

   Activated by  html[data-cbmode="deuteranopia|protanopia|tritanopia"].
   data-cbmode absent or "off"  =  default palette, zero change.

   Two layers, because color alone is never enough (WCAG 1.4.1):
     1. PALETTE  — remaps the status trio onto the color axis a given
        deficiency PRESERVES (blue<->orange for red-green CVD;
        green<->magenta for blue-yellow CVD), per deficiency x per theme.
     2. REDUNDANT ENCODING — status dots become shape-coded (circle /
        triangle / diamond); status tags + badges + the launch banner
        get a leading glyph; the critical (bad) banner also gets a hatch.
        => green + icon · yellow + icon · red + pattern.

   Validated with a Machado-2009 CVD simulator (CIE76 deltaE): each
   palette lifts the *minimum* pairwise separation of the status trio
   under its target deficiency to 30 / 48 / 28 (default collapsed onto
   the lost axis). See atlas_colorblind_mode_2026-06-10/DEPLOY.md.
   ============================================================= */

/* ── 1. PALETTE OVERRIDES ───────────────────────────────────── */

/* Deuteranopia — red-green: separate good/bad on blue<->orange */
html[data-cbmode="deuteranopia"] {
  --good: #56B4E9 !important; --good-rgb: 86,180,233 !important;
  --warn: #F0E442 !important;
  --bad:  #E8590C !important;
}
html[data-cbmode="deuteranopia"][data-theme="light"] {
  --good: #0072B2 !important; --good-rgb: 0,114,178 !important;
  --warn: #8A6D00 !important;
  --bad:  #C5460A !important;
}

/* Protanopia — red-green (red-dim variant): same blue<->orange axis */
html[data-cbmode="protanopia"] {
  --good: #56B4E9 !important; --good-rgb: 86,180,233 !important;
  --warn: #F5D90A !important;
  --bad:  #FF6E3A !important;
}
html[data-cbmode="protanopia"][data-theme="light"] {
  --good: #0067A6 !important; --good-rgb: 0,103,166 !important;
  --warn: #8C6D00 !important;
  --bad:  #CC4400 !important;
}

/* Tritanopia — blue-yellow: separate good/bad on green<->magenta */
html[data-cbmode="tritanopia"] {
  --good: #23E0B0 !important; --good-rgb: 35,224,176 !important;
  --warn: #FF9E2C !important;
  --bad:  #FF5C8A !important;
}
html[data-cbmode="tritanopia"][data-theme="light"] {
  --good: #00795C !important; --good-rgb: 0,121,92 !important;
  --warn: #B5650A !important;
  --bad:  #C2185B !important;
}

/* Launch banner uses literal colors (not the vars) — recolor per mode.
   For lb-red the gradient is layered UNDER a 45deg hatch (red + pattern). */
html[data-cbmode="deuteranopia"] .launch-banner.lb-green,
html[data-cbmode="protanopia"]   .launch-banner.lb-green {
  background: linear-gradient(90deg,#2a6f97,#3a86b8 55%,#56B4E9) !important; }
html[data-cbmode="deuteranopia"] .launch-banner.lb-yellow,
html[data-cbmode="protanopia"]   .launch-banner.lb-yellow {
  background: linear-gradient(90deg,#8a6d00,#c79a00 55%,#F0E442) !important; }
html[data-cbmode="deuteranopia"] .launch-banner.lb-red,
html[data-cbmode="protanopia"]   .launch-banner.lb-red {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 5px, rgba(0,0,0,0) 5px 11px),
    linear-gradient(90deg,#a13b06,#d4530a 55%,#FF6E3A) !important; }

html[data-cbmode="tritanopia"] .launch-banner.lb-green {
  background: linear-gradient(90deg,#00795c,#0fa37a 55%,#23E0B0) !important; }
html[data-cbmode="tritanopia"] .launch-banner.lb-yellow {
  background: linear-gradient(90deg,#b5650a,#e08416 55%,#FF9E2C) !important; }
html[data-cbmode="tritanopia"] .launch-banner.lb-red {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 5px, rgba(0,0,0,0) 5px 11px),
    linear-gradient(90deg,#9c1f4f,#d12c6e 55%,#FF5C8A) !important; }

/* ── 2. REDUNDANT ENCODING (any active mode) ────────────────── */

/* 2a. Shape-code the status dots — silhouette reads without color.
       good = circle (unchanged) · warn = triangle · bad = diamond.
       box-shadow glow dropped on coded shapes so the silhouette is crisp. */
html[data-cbmode]:not([data-cbmode="off"]) .dot.warn {
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: none !important;
}
html[data-cbmode]:not([data-cbmode="off"]) .dot.bad {
  border-radius: 1px !important;
  transform: rotate(45deg);
  box-shadow: none !important;
}

/* 2b. Glyph prefix on text-bearing status chips (icon, not just hue) */
html[data-cbmode]:not([data-cbmode="off"]) .tag.live::before              { content: "\2713\00a0"; }  /* checkmark */
html[data-cbmode]:not([data-cbmode="off"]) .tag.stub::before              { content: "\25B2\00a0"; }  /* triangle  */
html[data-cbmode]:not([data-cbmode="off"]) .roadmap-badge-live::before        { content: "\2713\00a0"; }
html[data-cbmode]:not([data-cbmode="off"]) .roadmap-badge-in_progress::before { content: "\25B2\00a0"; }
html[data-cbmode]:not([data-cbmode="off"]) .roadmap-badge-blocked::before     { content: "\2715\00a0"; } /* cross */

/* 2c. Launch banner leading glyph — green + icon / yellow + icon / red + icon
       (the red also carries the hatch pattern from layer 1). */
html[data-cbmode]:not([data-cbmode="off"]) .launch-banner.lb-green::before  { content: "\2713\00a0"; font-weight: 700; }
html[data-cbmode]:not([data-cbmode="off"]) .launch-banner.lb-yellow::before { content: "\25B2\00a0"; font-weight: 700; }
html[data-cbmode]:not([data-cbmode="off"]) .launch-banner.lb-red::before    { content: "\2715\00a0"; font-weight: 700; }

/* ── 3. THE TOGGLE CONTROL (mirrors .theme-toggle pill) ─────── */
.cb-toggle .cbt-icon { font-size: 11px; line-height: 1; }
.cb-toggle[data-mode="off"]          { opacity: .82; }
.cb-toggle:not([data-mode="off"]) .cbt-label { color: var(--accent); }


/* --- mobile.css --- */
/* ============================================================
   ATLAS — Mobile / Tablet Responsiveness  (mobile.css)
   Loaded LAST in <head> so it wins. EVERY rule is scoped to a
   max-width media query → ZERO effect on the 1920×1080 desktop
   no-scroll layout (atlas-dashboard.md hard rule #3 preserved).

   3-tier breakpoint system (launch-demo spec, 2026-06-09):
     ≤1024px  unlock scroll + iPad 2-column grid  (TIER A)
     ≤767px   phone — single-column stack          (TIER B)
     ≤480px   small phone fine-tune                 (TIER C)
     >1024px  untouched — existing 4-pillar desktop

   Voice integration preserved at every viewport: the functional
   orb (#orb-wrap) + mic state + transcripts live in #hint-bar,
   which becomes a FIXED bottom voice bar on mobile so spacebar/
   tap PTT is always reachable. The ≡ rail-toggle lives in the
   (sticky) statusbar — not the sidebar — so the nav drawer can
   always be opened/closed. Zero JS changed; zero IDs touched.

   Multi-tenant safe: layout-only, no personalized strings, no
   KPI values — all data binding is untouched (JARVIS_CONFIG).
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   TIER A — ≤ 1024px   (phones + iPad portrait 768 + iPad
   landscape 1024)  ·  unlock the no-scroll frame, off-canvas
   sidebar, fixed bottom voice bar, 2-column tablet grids.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── 1. UNLOCK SCROLL ────────────────────────────────────
     jarvis.css / north_star lock html, body, .frame, .main-col,
     .canvas to overflow:hidden + 100vh for the desktop no-scroll
     rule. On mobile that clips everything below the fold with no
     way to reach it — undo it.                                  */
  html, body {
    overflow: auto !important;
  }
  /* `html body` (specificity 0,0,2) beats the desktop `body{height:100vh}`
     lock so the window — not the body — becomes the scroll container.
     Without the max-height override the body stays pinned to 100vh and
     scrolls internally, which clips fullPage capture + feels off on touch. */
  html, body, html body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
  }
  .frame {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }
  .main-col {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .canvas {
    height: auto !important;
    overflow: visible !important;
    padding: 8px 10px 88px !important;   /* bottom pad clears the fixed voice bar */
    gap: 8px !important;
  }
  .atlas-view { height: auto !important; }

  /* ── 2. STATUSBAR — sticky top so theme/clock/≡ stay reachable */
  header#statusbar.statusbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  /* ── 3. SIDEBAR — off-canvas drawer.
     The ≡ rail-toggle is in the statusbar (above), so the drawer
     can always be opened. index.html already toggles .mob-open.   */
  .sidebar { display: none !important; }
  .sidebar.mob-open {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 230px;
    height: 100dvh;
    z-index: 300;
    overflow-y: auto;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.7);
  }

  /* ── 4. HINT-BAR → FIXED BOTTOM VOICE BAR ────────────────
     Strip the desktop quick-action buttons / decorative holo orb /
     flow arrows; keep ONLY the voice command cluster so the orb +
     mic state are always one tap away. */
  #hint-bar.quick-bar {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    height: auto !important;
    min-height: 56px;
    z-index: 250 !important;
    justify-content: center !important;
    padding: 4px 12px !important;
  }
  #hint-bar .qb-actions-row,
  #hint-bar .qb-holo-orb-wrap,
  #hint-bar .qb-flow-arrows { display: none !important; }
  .qb-voice-section.vd-host {
    max-height: none !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center;
    justify-content: center;
  }
  .vd-dock {
    max-height: none !important;
    justify-content: center;
  }

  /* ── 5. TOUCH TARGETS — 44×44 minimum on interactive controls */
  .vd-orb.orb-wrap {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  .rail-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .sa-btn, .topbtn { min-height: 40px !important; }
  .sb-item, .rail-item, .nav-item { min-height: 44px !important; }

  /* ── 6. TABLET 2-COLUMN GRIDS (768–1024px primary target) ─ */
  .kpi-strip {
    grid-template-columns: repeat(3, 1fr) !important;   /* 6 tiles → 2 rows of 3 */
    height: auto !important;
    gap: 8px !important;
  }
  .kpi-tile { padding: 12px 14px 10px !important; }

  .middle-row {
    grid-template-columns: 1fr 1fr !important;          /* alerts | hud */
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .calendar-col { grid-column: 1 / -1 !important; }     /* calendar full-width below */
  .middle-row .alerts-col,
  .middle-row .hud-hero {
    height: 300px !important;
    min-height: 0 !important;
  }
  .calendar-col { height: auto !important; min-height: 220px !important; }

  .ops-row {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .ops-row > * {
    height: 250px !important;
    min-height: 0 !important;
  }

  .bottom-row {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }
  .bp-card {
    height: auto !important;
    min-height: 200px !important;
  }

  .agents-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

} /* end ≤1024px */


/* ═══════════════════════════════════════════════════════════
   TIER B — ≤ 767px   (phones — iPhone 14 390×844, etc.)
   Override TIER A 2-column grids down to a single column stack.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .canvas { padding: 8px 8px 88px !important; gap: 7px !important; }

  /* ── KPI strip → 2-wide ─────────────────────────────────── */
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .kpi-tile  { padding: 10px 12px 8px !important; }
  .kpi-number { font-size: 22px !important; }
  .kpi-label  { font-size: 9px !important; }

  /* ── Middle / ops / bottom rows → single column stack ───── */
  .middle-row { grid-template-columns: 1fr !important; }
  .calendar-col { grid-column: auto !important; }
  .middle-row .alerts-col,
  .middle-row .hud-hero,
  .calendar-col {
    height: auto !important;
    min-height: 240px !important;
  }

  .ops-row { grid-template-columns: 1fr !important; }
  .ops-row > * { height: auto !important; min-height: 190px !important; }

  .bottom-row { grid-template-columns: 1fr !important; }
  .bp-card { min-height: 175px !important; }

  .agents-cards { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── STATUSBAR — wrap; greeting drops to its own row so it
     never collides with the icon buttons (fixes 390px overlap). */
  header#statusbar.statusbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 52px !important;
    gap: 4px !important;
    padding: 6px 10px !important;
  }
  .status-center {
    flex: 1 1 100% !important;
    order: 3 !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .topbtn-stack { display: none !important; }          /* hide verbose "ALL SYSTEMS OPERATIONAL" text */
  .sa-btn span:not(.sa-badge) { display: none !important; }
  .sa-btn {
    width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .greeting-headline {
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
  }
  .greeting-subline { font-size: 8.5px !important; }

  /* ── Font legibility — bump tiny mono labels ────────────── */
  .panel-h-lab { font-size: 10.5px !important; }
  .alert-title { font-size: 11px !important; }
  .intel-body  { font-size: 11px !important; }
  .alert-meta, .alert-time { font-size: 9px !important; }

  /* ── Modals — full-width on phones ──────────────────────── */
  .atlas-modal-card,
  .atlas-modal-card.am-wide,
  #kpi-modal .atlas-modal-card {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 16px 14px !important;
  }

} /* end ≤767px */


/* ═══════════════════════════════════════════════════════════
   TIER C — ≤ 480px   (small phone fine-tune)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 5px !important; }
  .kpi-number { font-size: 19px !important; }

  .agents-cards { grid-template-columns: repeat(2, 1fr) !important; }

  .greeting-headline { font-size: 12px !important; letter-spacing: 0.06em !important; }
  .greeting-subline { display: none !important; }

  /* Keep the voice readout from pushing the orb/gear off-screen */
  .vd-readout { max-width: 180px !important; }

} /* end ≤480px */


/* ═══════════════════════════════════════════════════════════
   W340 (2026-06-14) — phone audit fixes. Appended last so they win
   inside mobile.css. Defects measured with Playwright (iPhone-14
   390×844 + Pixel 412×915, see w340 audit_report.json):
     • header .status-right button cluster overflowed to right≈622 on
       EVERY view — clock + action buttons clipped off the right edge;
       .sa-btn tap targets were 64×40 (under the 44px WCAG 2.5.5 min).
     • TRAINING .tc-head-stats (4 tiles) spilled to ≈545.
     • R&D LAB panel rows (#sp-pill, .cw-ddelta, .cw-oq-d) spilled past
       the viewport.
   Layout-only · both themes safe (no color tokens touched) · desktop
   >1024 untouched · voice orb / mic / transcript IDs untouched.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── STATUSBAR right cluster — wrap + compact so nothing clips ──── */
  header#statusbar.statusbar { flex-wrap: wrap !important; row-gap: 4px !important; }
  /* decorative "J.A.R.V.I.S — JUST A REALTY…" mark is too wide for phones */
  header#statusbar.statusbar .status-jarvis { display: none !important; }
  header#statusbar.statusbar .status-right {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }
  /* verbose / secondary actions off on phones (still reachable on desktop) */
  header#statusbar .status-right .sa-status,
  header#statusbar .status-right .sa-globe { display: none !important; }
  /* essential actions → 44×44 icon-only tap targets */
  header#statusbar .status-right .sa-btn {
    position: relative;
    width: 44px !important;  min-width: 44px !important;
    height: 44px !important; min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  header#statusbar .status-right .sa-btn > span:not(.sa-badge),
  header#statusbar .status-right .sa-btn .sa-status-stack,
  header#statusbar .status-right .sa-btn .sa-install-label,
  header#statusbar .status-right .sa-btn .sa-export-label { display: none !important; }
  /* keep the unread badge pinned to the bell corner */
  header#statusbar .status-right .sa-btn .sa-badge {
    position: absolute !important; top: 1px; right: 1px;
  }
  /* theme + colorblind toggles stay, icon-only, 44×44 tap target */
  header#statusbar .status-right .theme-toggle {
    min-width: 44px !important; min-height: 44px !important; padding: 0 10px !important;
  }
  header#statusbar .status-right .theme-toggle .tt-label { display: none !important; }

  /* ── TRAINING header stats (4 tiles) → 2-col grid ──────────────── */
  .tc-head { flex-wrap: wrap !important; }
  .tc-head-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* ── R&D LAB — desktop-wide data panels kept inside the phone width.
     Wrap the panel-header rows (fixes #sp-pill etc.); contain panel
     bodies so any still-wide rendered row scrolls WITHIN its panel —
     internal scroll is allowed; only the outer 1080 frame must never
     scroll (atlas-dashboard rule #3). ─────────────────────────────── */
  #view-rd .dept-head { flex-wrap: wrap !important; }
  #view-rd .panel-h { flex-wrap: wrap !important; row-gap: 3px !important; }
  #view-rd .cw-body, #view-rd .sp-body, #view-rd .dc-body,
  #view-rd .vp-list, #view-rd .rm-body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* let the dense R&D pills / delta labels wrap instead of running wide */
  #view-rd .cw-ddelta, #view-rd .cw-oq-d, #view-rd .cl-badge, #view-rd .sp-pill {
    max-width: 100% !important; white-space: normal !important; word-break: break-word;
  }

  /* ── SECONDARY TOUCH TARGETS (audit-flagged) ───────────────────────
     Bring search inputs, deep-link chips, the voice-dock gear and the
     overnight-read button up to a comfortable tap size. 16px font on
     inputs also stops iOS Safari's zoom-on-focus. */
  .tc-search, #crm-search, #view-crm input[type="search"],
  input[type="search"] {
    min-height: 40px !important; font-size: 16px !important;
  }
  .vd-gear, .hero-settings-btn {
    min-width: 40px !important; min-height: 40px !important;
  }
  .ovr-btn { min-height: 40px !important; }
  .dept-obsidian-link, .tc-obsidian-link {
    min-height: 36px !important;
    display: inline-flex !important; align-items: center !important;
  }
  /* tiny panel-header "open" links (were ~9px tall) */
  .panel-h-link {
    min-height: 28px !important;
    display: inline-flex !important; align-items: center !important;
  }

} /* end W340 ≤767px */


/* ═══════════════════════════════════════════════════════════════════════
   W432 (2026-06-17) — NATIVE-iOS MOBILE CHROME.  Appended LAST so it wins.
   mobile.css is now also moved to the LAST <link> in index.html (it had drifted
   to mid-stack behind agent-team.css/pwa.css). Bryan tested on iPhone 14 and
   reported "not Mobile optimized at all" — the prior tiers stack panels but give
   no native app feel. This block adds, PHONE-ONLY (≤767px):
     • a fixed BOTTOM TAB BAR (5-tab IA)  — built by js/mobile-nav.js
     • a sticky SEGMENTED CONTROL of sub-tabs — built by js/mobile-nav.js
     • a swipeable KPI CAROUSEL (scroll-snap) with legible fonts
     • the voice bar stacked just ABOVE the tab bar (always reachable)
   Theme-safe: every color binds to the existing --bg/--panel/--border/--text/
   --accent tokens, so light + dark both work. Desktop >767px never matches.
   Voice IDs / data binding untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. Phone uses the bottom tab bar for nav → retire the rail + drawer.
     Statusbar scrolls away (iOS large-title behavior); the sticky segmented
     control owns the top while scrolling a section. ───────────────────────── */
  .rail-toggle { display: none !important; }
  .sidebar, .sidebar.mob-open { display: none !important; }
  header#statusbar.statusbar { position: static !important; }

  /* clear the fixed bottom chrome (tab bar 56 + voice bar 56 + safe area) */
  .canvas {
    padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }

  /* ── 2. BOTTOM TAB BAR (built by mobile-nav.js) ──────────────────────────── */
  .mob-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 260;
    display: flex;
    align-items: stretch;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel, #11161c);
    border-top: 1px solid var(--border, rgba(255,255,255,0.10));
    box-shadow: 0 -6px 20px rgba(0,0,0,0.28);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
  }
  .mtb-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-muted, #8a97a6);
    -webkit-tap-highlight-color: transparent;
  }
  .mtb-ico { width: 23px; height: 23px; flex: 0 0 23px; pointer-events: none; }
  .mtb-lab {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mtb-btn.is-on { color: var(--accent, #34c2ff); }
  .mtb-btn.is-on .mtb-ico { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 52,194,255), 0.45)); }

  /* ── 3. SEGMENTED SUB-TAB CONTROL (built by mobile-nav.js) ───────────────── */
  .mob-segbar {
    position: sticky;
    top: 0;
    z-index: 240;
    display: flex;
    gap: 7px;
    margin: 0 -8px 8px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--bg, #0a0e13);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  }
  .mob-segbar::-webkit-scrollbar { display: none; }
  .mob-segbar[hidden] { display: none !important; }
  .mseg-pill {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    background: var(--panel, #11161c);
    color: var(--text-dim, #b6c2cf);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mseg-pill.is-on {
    color: var(--accent, #34c2ff);
    border-color: var(--accent, #34c2ff);
    background: rgba(var(--accent-rgb, 52,194,255), 0.16);
  }

  /* ── 4. KPI CAROUSEL — swipeable, scroll-snap, legible fonts.
     Overrides the cramped 2×3 grid from the tier blocks above. ─────────────── */
  .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 mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 8px;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  .kpi-strip::-webkit-scrollbar { display: none; }
  .kpi-tile {
    flex: 0 0 78% !important;
    scroll-snap-align: center;
    padding: 16px 18px 14px !important;
  }
  .kpi-number { font-size: 30px !important; }
  .kpi-label  { font-size: 13px !important; letter-spacing: 0.04em !important; }

  /* ── 5. VOICE BAR — keep it fixed, stacked just ABOVE the tab bar so the
     orb / mic / transcript stay one tap away (voice rule #5). ──────────────── */
  #hint-bar.quick-bar {
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    z-index: 250 !important;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  }

} /* end W432 ≤767px */



/* ═══════════════════════════════════════════════════════════════════════
   W432-iOS (2026-06-17) — REAL-DEVICE iOS SAFARI FIXES.
   These defects do NOT appear in Playwright/Chromium (which the earlier
   W432 verify harness used). They only surface on a real iPhone because:
     • env(safe-area-inset-*) requires viewport-fit=cover in the meta tag
       (added to index.html by this patch — always 0 otherwise)
     • dvh unit unsupported on iOS ≤15.3 (needs 100vh fallback)
     • overscroll bounce, text-size-adjust, touch callout all Safari-only
   All rules are inside ≤767px (phone-only) to preserve the 1080 desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. BASE iOS RESETS — text-size, tap flash, touch callout ──────── */
/* -webkit-text-size-adjust: prevent iOS from bumping font sizes on
   orientation change (landscape → portrait the body text can grow ~20%). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 767px) {

  /* ── 2. SIDEBAR DVH FALLBACK — iOS ≤15.3 doesn't support dvh.
     Stack 100vh first so older Safari gets the approximate value, then
     100dvh overrides it on iOS ≥15.4 where dynamic viewport units work. */
  .sidebar.mob-open {
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* ── 3. OVERSCROLL BOUNCE — iOS rubber-bands the whole page when the
     user scrolls past the top or bottom edge, which makes the fixed
     tab bar "float" away from the bottom on overscroll. Containing it
     to the canvas keeps the fixed chrome pinned. */
  body {
    overscroll-behavior-y: none;
  }
  .canvas {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 4. GPU PROMOTION for fixed bars — promotes tab bar and voice bar
     to their own compositor layer, eliminating the iOS "jitter" where
     fixed elements briefly repaint during momentum scroll. */
  .mob-tabbar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }
  #hint-bar.quick-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }

  /* ── 5. TOUCH CALLOUT on tab bar — prevents the iOS long-press popup
     ("Open in New Tab" / share sheet) from appearing on tab buttons. */
  .mob-tabbar,
  .mtb-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* ── 6. KPI CAROUSEL SNAP STOP — on iOS Safari, scroll-snap can skip
     tiles during a fast flick. scroll-snap-stop:always forces the user
     to land on each tile (Apple Maps / App Store behavior). */
  .kpi-tile {
    scroll-snap-stop: always;
  }

  /* ── 7. TAB BAR SAFE AREA — critical for iPhone X through 16 Pro Max.
     env(safe-area-inset-bottom) is non-zero ONLY when viewport-fit=cover
     is set (done in index.html by this patch). Without it the home-
     indicator bar slides directly over the tab labels. Re-declare here
     with explicit fallback (0px) so older Safari keeps working. */
  .mob-tabbar {
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ── 8. CANVAS BOTTOM PADDING — accounts for tab bar (56px) + voice
     bar (56px) + safe area inset. Re-declaring ensures the env() values
     are re-evaluated now that viewport-fit=cover is active. */
  .canvas {
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 9. VOICE BAR POSITION — stacked above the tab bar with safe area.
     Re-declaring to pick up the live env() value from the fixed meta tag. */
  #hint-bar.quick-bar {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 10. INPUT FONT SIZE — any <input> or <select> < 16px causes iOS
      Safari to auto-zoom the viewport on focus. Ensure all inputs are
      at least 16px so the zoom-on-focus quirk never fires. */
  input, select, textarea {
    font-size: max(16px, 1em) !important;
  }

  /* ── 11. -WEBKIT-APPEARANCE — iOS Safari adds native chrome to inputs
      and buttons. Reset on the tab bar so it uses our custom styling. */
  .mtb-btn,
  .mseg-pill {
    -webkit-appearance: none;
    appearance: none;
  }

  /* ── 12. SEGBAR SAFE AREA (left) — on notched iPhones in landscape the
      left safe-area-inset can clip the first pill. Pad it out. */
  .mob-segbar {
    padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;
  }

} /* end W432-iOS ≤767px */


/* ══════════════════════════════════════════════════════════════════════════
   V5-COMPONENTS — Phase 3 / nav / admin mobile rules (appended 2026-06-22)
   New components added in V5 build: ProofStrip · DecisionQueue · Operating
   Graph Hero · Board Memo · Live Work Table · Nav badges · Admin pages ·
   Audit Log.  Appended LAST so these rules win without touching existing
   selectors above.  Same 3-tier breakpoint system:
     ≤1024px  TIER A — tablet (admin column stack)
     ≤767px   TIER B — phone  (primary responsive collapse)
     ≤480px   TIER C — small phone (hide non-essential chrome)
   Desktop >1024px untouched — zero effect on the 1920×1080 no-scroll frame.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   TIER A — ≤ 1024px  (admin layout only)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── ADMIN USERS LAYOUT: 2-col grid → stacked single column ── */
  .v5-users-layout {
    display: block !important;
  }
  .v5-users-layout > * {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
  }

} /* end V5 ≤1024px */


/* ═══════════════════════════════════════════════════════════
   TIER B — ≤ 767px  (phones — V5 components)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── PROOF STRIP: 6-column grid → 3×2 ──────────────────────
     .v5-proof-strip is a CSS grid; collapse from 6-col to 3-col
     so the 6 cells wrap into 2 rows of 3.                      */
  .v5-proof-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Tighten cell padding on mobile to preserve density */
  .v5-proof-strip .proof-cell,
  .v5-proof-strip [class*="proof-cell"] {
    padding: 8px 6px !important;
  }

  /* ── DECISION QUEUE: each row stacks ───────────────────────
     Desktop: horizontal scroll row (.dq-list flex-row).
     Phone: each .dq-item becomes a stacked card with index
     above description and chip below.                          */
  .tf-row-decisions {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .dq-list {
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 6px !important;
  }
  .dq-item {
    flex-wrap: wrap !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    gap: 4px 8px !important;
  }
  /* index floats to its own line (above description) */
  .dq-index {
    order: -1 !important;
    width: 100% !important;
  }
  .dq-desc {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* chip sits below the description */
  .dq-chip {
    order: 3 !important;
  }

  /* ── OPERATING GRAPH HERO: reduce height to 180px ──────────
     .tf-row-graph uses flex: 0 0 240px at desktop; phone gets
     180px so the graph stays visible but doesn't dominate.     */
  .tf-row-graph {
    flex: 0 0 180px !important;
    min-height: 0 !important;
  }

  /* ── BOARD MEMO: stacked full-width + command bar wraps ─────
     .tf-row-memo is a flex row (memo 56% + live-work 44%).
     On phones collapse to a column so each card goes full-width.
     .bm-cmd (input + Ask button) wraps to 2 lines.             */
  .tf-row-memo {
    flex-direction: column !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .tf-board-memo,
  .tf-live-work {
    flex: none !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  .bm-cmd {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .bm-input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .bm-ask {
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  /* ── LIVE WORK TABLE: hide "Source" column (3rd) ─────────── */
  /* Column order assumed: Work(1) · Status(2) · Source(3) · Owner(4).
     If the HTML uses explicit col classes, add .lw-col-source too.  */
  .lw-table th:nth-child(3),
  .lw-table td:nth-child(3),
  .lw-col-source {
    display: none !important;
  }

  /* ── NAV SECTION BADGES + COUNTS: hide (sidebar collapsed) ──
     .rail-section-num  = absolute-positioned section number
     .rail-nav-count    = em-dash item-count badge
     Both live inside the sidebar which is off-canvas on mobile,
     so hiding prevents flash when .mob-open is toggled.         */
  .rail-section-num,
  .rail-nav-count {
    display: none !important;
  }

  /* ── ADMIN PERMISSION MATRIX: horizontal scroll ─────────────
     The permission grid (roles × features) is too wide at 767px.
     Wrap it in a horizontally scrollable container instead of
     forcing column collapse which would lose the matrix format.  */
  .v5-permission-matrix,
  .v5-perm-table-wrap,
  .perm-matrix-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  /* min-width keeps column labels readable while scrolling */
  .v5-permission-matrix table,
  .perm-matrix-wrap table {
    min-width: 560px;
  }

  /* ── AUDIT LOG: hide "Source" and "Org" columns ─────────────
     Audit log column order assumed:
       Date(1) · User(2) · Action(3) · Source(4) · Org(5) · Detail(6)
     If HTML uses explicit col classes (.audit-col-source /
     .audit-col-org) they're also targeted as a fallback.        */
  .v5-audit-log th:nth-child(4),
  .v5-audit-log td:nth-child(4),
  .v5-audit-log th:nth-child(5),
  .v5-audit-log td:nth-child(5),
  .audit-col-source,
  .audit-col-org {
    display: none !important;
  }

} /* end V5 ≤767px */


/* ═══════════════════════════════════════════════════════════
   TIER C — ≤ 480px  (small phone — V5 components)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── PROOF STRIP: 3×2 grid → 2×3 (2 columns, 3 rows) ───────
     Further collapse from the ≤767px 3-col to 2-col at small
     screen so labels don't truncate.                           */
  .v5-proof-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── DECISION QUEUE: hide chip badges ───────────────────────
     At 480px the stacked cards are narrow; the colored chip
     badges ("REVIEW", "RISK", "ROUTE") waste vertical space.   */
  .dq-chip {
    display: none !important;
  }

  /* ── OPERATING GRAPH HERO: hide SVG, keep header + footer ───
     The animated SVG graph is unreadable at <480px width.
     Hide .og-graph-stage (the SVG canvas + nodes) and let the
     card shrink to just the text header (title / sub) and the
     4-stat footer row.                                          */
  .tf-row-graph {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .og-graph-stage {
    display: none !important;
  }

  /* ── LIVE WORK TABLE: hide "Owner" column (4th) ─────────────
     Combined with the ≤767px Source hide, only Work + Status
     remain visible.  nth-child(4) still targets the structural
     4th column even though col 3 is visually absent.           */
  .lw-table th:nth-child(4),
  .lw-table td:nth-child(4),
  .lw-col-owner {
    display: none !important;
  }

} /* end V5 ≤480px */


/* ══════════════════════════════════════════════════════════════════════════
   T-CMA (2026-06-23) — CMA Generator phone layout. Appended LAST so it wins.
   GAP: the CMA page (.cma-body) is a desktop flex row — a fixed 400px
   .cma-form-col beside an .cma-preview-col. That fixed 400px column overflows
   a 390px iPhone viewport (the page was the one V5 view with NO @media rule),
   and the 7-column comp grids (.cma-comp-headers / .cma-comp-row) render as
   unreadable slivers on a phone. This block (phone-only ≤767px):
     • collapses .cma-body to a single vertical column (form, then preview)
     • lets the form column take full width (drops the fixed 400px + internal
       scroll — the page scrolls naturally on mobile per the TIER-A unlock)
     • makes each comp ROW horizontally scrollable with a sane min-width so the
       beds/baths/price columns stay legible (internal scroll only — the outer
       1080 desktop frame is never touched; atlas-dashboard rule #3 preserved)
     • the preview iframe goes full-width with a usable min-height
   Theme-safe (no color tokens touched · layout only) · multi-tenant safe (no
   personalized strings / KPI values) · voice IDs untouched · desktop >767px
   never matches.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Page can grow with content; the TIER-A block already unlocked body scroll. */
  .cma-page {
    height: auto !important;
    overflow: visible !important;
  }
  .cma-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* ── 1. Stack form over preview ─────────────────────────────────────────── */
  .cma-body {
    flex-direction: column !important;
    padding: 14px 12px !important;
    gap: 14px !important;
    overflow: visible !important;
  }
  .cma-form-col {
    width: 100% !important;
    flex-shrink: 1 !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }
  .cma-preview-col {
    width: 100% !important;
    min-width: 0 !important;
  }
  .cma-preview-frame { min-height: 60vh !important; }

  /* ── 2. Property detail grids → 2-up so inputs stay tappable ────────────── */
  .cma-detail-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── 3. Comp section → horizontal scroll so the 7-col grid stays readable.
     The header row (.cma-comp-headers) and the JS-injected rows
     (#cma-comps-container) are SIBLINGS inside the comps .cma-form-section.
     Scroll the SECTION (via :has) as one unit so header + rows stay column-
     aligned, and pin every grid child to one min-width. Internal scroll only —
     the outer 1080 desktop frame is never touched (atlas-dashboard rule #3). */
  .cma-form-section:has(.cma-comp-headers) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .cma-comp-headers,
  .cma-comp-row {
    min-width: 560px !important;   /* keeps beds/baths/sqft/price legible */
  }
  /* Sibling controls (Find Comps head, status, + Add Comp) stay full-width
     and don't inherit the wide min so they don't force extra scroll. */
  .cma-form-section:has(.cma-comp-headers) > .cma-comp-section-head,
  .cma-form-section:has(.cma-comp-headers) > .cma-comps-status,
  .cma-form-section:has(.cma-comp-headers) > .cma-add-comp-btn {
    position: sticky !important;
    left: 0 !important;
  }

  /* ── 4. Preview action buttons wrap instead of clipping ─────────────────── */
  .cma-preview-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .cma-preview-btn { flex: 1 1 auto !important; }

} /* end T-CMA ≤767px */


/* --- comfort-override.css --- */
/* ════════════════════════════════════════════════════════════════════════
   comfort-override.css — Typography Comfort Pass (2026-06-22)

   Loaded LAST after all other stylesheets to enforce minimum font sizes
   across the ATLAS dashboard. Uses !important to override existing
   !important rules in north_star_final.css and other sheets.

   Hard floor minimums (audit brief):
     • Body/content:        15–16px
     • Card titles:         16px
     • Panel headings:      14–15px
     • Secondary metadata:  13–14px
     • Badges/labels:       12px minimum
     • Sidebar labels:      13–14px
     • Sidebar sublabels:   12px minimum
     • Nav labels:          13–14px
   ════════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL BASE ──────────────────────────────────────────────────────── */
body {
  font-size: 15px !important;
}

/* ── SIDEBAR NAV — main tab labels ───────────────────────────────────── */
.ri-label                   { font-size: 13px !important; }
.ri-sub                     { font-size: 12px !important; }

/* Rail group (accordion) labels */
.rail-group .ri-label       { font-size: 13px !important; }
.rail-group .ri-sub         { font-size: 12px !important; }

/* Sub-item labels */
.rail-subitem .ri-label     { font-size: 13px !important; }
.rail-external .ri-label    { font-size: 13px !important; }

/* ── SIDEBAR USER CARD ────────────────────────────────────────────────── */
.sb-user-name               { font-size: 12px !important; }
.sb-user-role               { font-size: 12px !important; }
.sb-user-pill               { font-size: 11px !important; }

/* ── SIDEBAR CLOCK ────────────────────────────────────────────────────── */
.sb-ampm                    { font-size: 12px !important; }
.sb-sec                     { font-size: 11px !important; }
.sb-date-day                { font-size: 12px !important; }
.sb-date-dow                { font-size: 12px !important; }

/* ── KPI STRIP — reduce to 3 tiles, lift all label sizes ─────────────── */
/* Hide tiles 4-6 (avg deal, new leads, open tasks) — keep Volume/Pipeline/Closings */
.kpi-tile[data-metric="avg_deal_ytd"],
.kpi-tile[data-metric="new_7d"],
.kpi-tile[data-metric="open_tasks"]    { display: none !important; }

/* Reduce strip height slightly to free vertical room for focused content */
.kpi-strip                  { height: 80px !important; }

/* Font floor for remaining tile labels */
.kpi-label                  { font-size: 12px !important; }
.kpi-delta                  { font-size: 12px !important; }
.kpi-compare                { font-size: 12px !important; }
.kpi-trend                  { font-size: 12px !important; }
.kpi-number                 { font-size: 26px !important; } /* keep prominent */

/* ── PANEL HEADINGS — shared across all cards ─────────────────────────── */
.panel-h-lab                { font-size: 14px !important; }
.panel-h-link               { font-size: 12px !important; }
.panel-h-meta               { font-size: 12px !important; }
.panel-h-real               { font-size: 12px !important; }
.panel-h-mini .panel-h-lab  { font-size: 13px !important; }

/* ── CALENDAR PANEL ───────────────────────────────────────────────────── */
.cal-time                   { font-size: 13px !important; width: auto !important; }
.cal-title                  { font-size: 13px !important; }
.cal-meta                   { font-size: 12px !important; }
.cal-empty-msg              { font-size: 14px !important; }

/* ── INTEGRATIONS LIST ────────────────────────────────────────────────── */
.integ-name                 { font-size: 13px !important; }
.integ-stat                 { font-size: 12px !important; }
.integ-ic                   { font-size: 12px !important; }

/* ── AI AGENT TEAM CARDS ──────────────────────────────────────────────── */
.agent-name                 { font-size: 13px !important; }
.agent-name-2               { font-size: 12px !important; }
.agent-role                 { font-size: 12px !important; }
.agent-tasks                { font-size: 12px !important; }

/* ── ALERTS COLUMN ────────────────────────────────────────────────────── */
.alerts-intel .intel-tag-lab { font-size: 12px !important; }
.alerts-intel .intel-body    { font-size: 14px !important; }
.alerts-intel .intel-btn     { font-size: 12px !important; }
.alerts-intel .intel-spark   { font-size: 13px !important; }
.alert-title                 { font-size: 14px !important; }
.alert-meta                  { font-size: 13px !important; }
.alert-time                  { font-size: 12px !important; }
.alert-empty-msg             { font-size: 14px !important; }

/* ── BOTTOM ROW CARDS (Pipeline, Tasks, etc.) ─────────────────────────── */
.bp-donut-sub               { font-size: 12px !important; }
.bp-view-all                { font-size: 12px !important; }
.bp-task-lab                { font-size: 13px !important; }
.bp-task-val                { font-size: 13px !important; }
.bp-donut-total             { font-size: 20px !important; }

/* ── PIPELINE STAGES ──────────────────────────────────────────────────── */
.pp-lab                     { font-size: 12px !important; }
.pp-val                     { font-size: 12px !important; }
.pps-lab                    { font-size: 12px !important; }
.pps-meta                   { font-size: 12px !important; }
.pp-num                     { font-size: 18px !important; }

/* ── TEAM ACTIVITY ────────────────────────────────────────────────────── */
.ta-feed-action             { font-size: 13px !important; }
.ta-feed-ts                 { font-size: 12px !important; }
.ta-feed-who                { font-size: 13px !important; }

/* ── SEO SECTION ──────────────────────────────────────────────────────── */
.bp-seo-rank                { font-size: 13px !important; }
.bp-seo-kw                  { font-size: 13px !important; }
.bp-seo-meta                { font-size: 12px !important; }
.seo-kw-q                   { font-size: 13px !important; }
.seo-kw-clicks              { font-size: 13px !important; }
.seo-kw-pos                 { font-size: 12px !important; }
.seo-stat-val               { font-size: 14px !important; }
.seo-stat-lab               { font-size: 12px !important; }
.seo-stat-delta             { font-size: 12px !important; }
.seo-section-h              { font-size: 13px !important; }

/* ── VOICE DOCK ───────────────────────────────────────────────────────── */
/* NOTE: Keep voice dock functional sizes reasonable but legible */
.vd-mic.mic-indicator       { font-size: 12px !important; }
.vd-tx.dock-transcript      { font-size: 12px !important; }
.vd-livetag.tag.live        { font-size: 11px !important; }

/* ── TAGS AND BADGES ──────────────────────────────────────────────────── */
.tag                        { font-size: 11px !important; }

/* Hard-hide all STUB/debug labels from primary UX */
.tag.stub                   { display: none !important; }
/* Also hide by data-tag selector (belt + suspenders) */
span.tag[data-tag]          { display: none !important; }

/* ── QUICK-BAR BUTTON LABELS ──────────────────────────────────────────── */
.qb-btn span                { font-size: 12px !important; }
.qbvc-title                 { font-size: 13px !important; }
.qbvc-prompt                { font-size: 13px !important; }
.qbs-lab                    { font-size: 12px !important; }
.qbs-stat                   { font-size: 12px !important; }

/* ── TOP BAR CLEANUP ──────────────────────────────────────────────────── */
/* Move colorblind toggle to Settings (keyboard shortcut C still works) */
#cb-toggle                  { display: none !important; }

/* Export and Install buttons are JS-controlled (hidden by default);
   enforce they never leak into the visible statusbar */
#btn-export-pdf             { display: none !important; }
#btn-install-pwa            { display: none !important; }

/* Status chip labels */
.qs-label                   { font-size: 12px !important; }
.qs-val                     { font-size: 12px !important; }
.qs-chip                    { font-size: 12px !important; }

/* ── W424 VIEWS (Agents, Calendar, Reports, Settings, etc.) ───────────── */
.w424-conn-name             { font-size: 14px !important; }
.w424-conn-sub              { font-size: 13px !important; }
.w424-conn-ts               { font-size: 12px !important; }
.w424-card-h                { font-size: 14px !important; }
.w424-setrow                { font-size: 14px !important; }
.w424-stat-lab              { font-size: 13px !important; }
.w424-stat-num              { font-size: 20px !important; }
.w424-note                  { font-size: 14px !important; }
.w424-pill                  { font-size: 12px !important; }
.w424-sub                   { font-size: 14px !important; }
.w424-empty                 { font-size: 14px !important; }
.w424-title                 { font-size: 22px !important; }

/* ── DEPT VIEWS (Listings, Transactions, etc.) ────────────────────────── */
.dept-kpi-lab               { font-size: 13px !important; }
.dept-kpi-val               { font-size: 18px !important; }
.dept-kpi-sub               { font-size: 12px !important; }
.tc-stat-lab                { font-size: 12px !important; }
.tc-stat-val                { font-size: 18px !important; }
.tc-sub                     { font-size: 14px !important; }
.tc-title                   { font-size: 22px !important; }
.dept-head-real             { font-size: 12px !important; }

/* ── GOALS / SALES PROGRESS ───────────────────────────────────────────── */
.goal-lab                   { font-size: 13px !important; }
.goal-pct                   { font-size: 13px !important; }
.goal-num                   { font-size: 13px !important; }

/* ── OVERNIGHT RECAP ──────────────────────────────────────────────────── */
/* If overnight panel shows, make it readable */
.overnight-recap            { font-size: 14px !important; }

/* ── HIDE OLD TODAY SECTIONS (moved to their own pages) ──────────────── */
/* These panels have been removed from Today to make it a focused daily home.
   Their data still loads (JS still runs); they're just not shown on Today. */
#view-home .middle-row,
#view-home .ops-row,
#view-home .ops-agents-legacy,
#view-home .phase-b-row,
#view-home .bottom-row      { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════
   NEW TODAY FOCUSED HOME GRID
   Replaces the 20-card / 73-button Today with a focused daily home screen.
   Layout: KPI Strip (3 metrics) → Day Brief + Ask Atlas → Up Next + Actions
   Fits 1920×1080 with NO outer scroll.
   ════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — fills remaining canvas space after KPI strip */
#today-focused {
  flex: 1 1 0%;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 8px;
  overflow: hidden;
}

/* Row 1: Day Brief (wider) + Ask Atlas */
.tf-row-top {
  display: flex;
  flex: 6 1 0%;
  min-height: 0;
  gap: 8px;
}

/* Row 2: Up Next + Priority Actions */
.tf-row-bottom {
  display: flex;
  flex: 4 1 0%;
  min-height: 0;
  gap: 8px;
}

/* ── Card Base ─────────────────────────────────────────────────────────── */
.tf-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 16px;
  background: linear-gradient(160deg,
    rgba(0,120,240,.07) 0%,
    rgba(0,40,100,.08) 35%,
    rgba(4,9,22,.97) 100%);
  border: 1px solid rgba(0,185,255,.14);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(0,185,255,.09),
    inset 0 -1px 0 rgba(0,100,200,.05),
    0 4px 18px rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;
}

/* Top cyan accent line */
.tf-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,210,255,.42) 25%,
    rgba(0,228,255,.92) 50%,
    rgba(0,210,255,.42) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Card Header ───────────────────────────────────────────────────────── */
.tf-card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,145,200,.12);
  padding-bottom: 10px;
}

.tf-card-h h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(190,225,250,.9);
  margin: 0;
  text-transform: uppercase;
}

.tf-card-h-icon {
  color: #00d6ff;
  font-size: 15px;
  flex-shrink: 0;
  text-shadow: 0 0 10px rgba(0,210,255,.5);
}

.tf-card-h-date {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px !important;
  color: rgba(100,165,215,.55);
}

/* ── Day Brief Card ────────────────────────────────────────────────────── */
.tf-day-brief { flex: 1.6 1 0%; }

.tf-brief-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,185,255,.2) transparent;
}

.tf-brief-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0,145,200,.09);
}

.tf-brief-item:last-child { border-bottom: none; }

.tf-bi-icon {
  color: #00d6ff;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 3px;
  text-shadow: 0 0 8px rgba(0,210,255,.4);
}

.tf-bi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tf-bi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: rgba(90,150,200,.65);
  text-transform: uppercase;
  line-height: 1.2;
}

.tf-bi-val {
  font-size: 15px !important;
  color: #cde5ff;
  line-height: 1.4;
}

/* ── Ask Atlas Card ────────────────────────────────────────────────────── */
.tf-ask-atlas { flex: 1 1 0%; }

.tf-atlas-input-wrap {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-bottom: 10px;
}

.tf-atlas-input {
  flex: 1;
  background: rgba(0,185,255,.05);
  border: 1px solid rgba(0,185,255,.22);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px !important;
  color: #daeeff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.tf-atlas-input::placeholder { color: rgba(100,165,215,.4); }

.tf-atlas-input:focus {
  border-color: rgba(0,200,255,.5);
  box-shadow: 0 0 0 2px rgba(0,185,255,.12);
}

.tf-atlas-send {
  background: rgba(0,185,255,.14);
  border: 1px solid rgba(0,185,255,.35);
  border-radius: 6px;
  padding: 9px 14px;
  color: #00d6ff;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}

.tf-atlas-send:hover { background: rgba(0,185,255,.27); }

.tf-quick-prompts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  margin-bottom: 10px;
}

.tf-qp {
  background: rgba(0,185,255,.04);
  border: 1px solid rgba(0,185,255,.13);
  border-radius: 5px;
  padding: 7px 10px;
  text-align: left;
  color: rgba(170,210,240,.8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-qp:hover {
  background: rgba(0,185,255,.11);
  border-color: rgba(0,185,255,.28);
  color: #daeeff;
}

.tf-transcript-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.tf-transcript-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: rgba(90,150,200,.6);
  text-transform: uppercase;
  flex-shrink: 0;
}

.tf-transcript-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px !important;
  color: rgba(160,200,235,.75);
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,185,255,.2) transparent;
  padding-right: 2px;
}

.tf-transcript-body:empty::before {
  content: 'Ask Atlas a question above, or hold SPACE to speak.';
  color: rgba(90,150,200,.4);
  font-style: italic;
  font-size: 13px;
}

/* ── Up Next Card ──────────────────────────────────────────────────────── */
.tf-up-next { flex: 1 1 0%; }

.tf-upnext-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,185,255,.2) transparent;
}

.tf-upnext-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0,185,255,.04);
  border: 1px solid rgba(0,185,255,.09);
  border-radius: 6px;
  transition: background .12s;
  flex-shrink: 0;
}

.tf-upnext-item:hover { background: rgba(0,185,255,.09); }

.tf-upnext-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px !important;
  color: #00d6ff;
  flex-shrink: 0;
  min-width: 46px;
}

.tf-upnext-text {
  font-size: 14px !important;
  color: #cde5ff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-upnext-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  color: rgba(100,165,215,.55);
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Priority Actions Card ─────────────────────────────────────────────── */
.tf-priority-actions { flex: 1 1 0%; }

.tf-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,185,255,.2) transparent;
}

.tf-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0,185,255,.04);
  border: 1px solid rgba(0,185,255,.09);
  border-radius: 6px;
  transition: background .12s;
  flex-shrink: 0;
}

.tf-action-item:hover { background: rgba(0,185,255,.09); }

.tf-action-pri {
  font-size: 12px !important;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.tf-action-text {
  font-size: 14px !important;
  color: #cde5ff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-action-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  color: rgba(100,165,215,.55);
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Empty / not-wired states (user-facing, never dev-speak) ───────────── */
.tf-upnext-empty,
.tf-action-empty {
  font-size: 14px !important;
  color: rgba(100,165,215,.55);
  padding: 10px 2px;
  line-height: 1.5;
}

.tf-upnext-empty a,
.tf-action-empty a {
  color: #00d6ff;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Priority Actions quick-add (focused home's only task-entry surface) ── */
.tf-quick-add {
  flex-shrink: 0;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid rgba(0,145,200,.12);
}
.tf-quick-add-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,185,255,.05);
  border: 1px solid rgba(0,185,255,.22);
  border-radius: 6px;
  padding: 8px 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  color: #daeeff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.tf-quick-add-input::placeholder { color: rgba(100,165,215,.45); }
.tf-quick-add-input:focus {
  border-color: rgba(0,200,255,.5);
  box-shadow: 0 0 0 2px rgba(0,185,255,.12);
}
.tf-quick-add-input:disabled { opacity: .5; cursor: wait; }

[data-theme="light"] .tf-quick-add { border-top-color: rgba(0,120,200,.15); }
[data-theme="light"] .tf-quick-add-input {
  background: rgba(0,100,200,.06);
  border-color: rgba(0,120,200,.25);
  color: #1a3560;
}

/* quick-add write feedback (✓ added / ✗ failed) — both themes */
.tf-quick-add-input.tf-qa-ok,  .quick-add-input.qa-ok  { border-color: rgba(60,255,170,.75) !important; color: #3affad !important; }
.tf-quick-add-input.tf-qa-err, .quick-add-input.qa-err { border-color: rgba(255,90,90,.75)  !important; color: #ff6b6b !important; }
.tf-quick-add-input.tf-qa-ok::placeholder,  .quick-add-input.qa-ok::placeholder  { color: #3affad !important; }
.tf-quick-add-input.tf-qa-err::placeholder, .quick-add-input.qa-err::placeholder { color: #ff6b6b !important; }
[data-theme="light"] .tf-quick-add-input.tf-qa-ok,  [data-theme="light"] .quick-add-input.qa-ok  { border-color: rgba(10,143,91,.85) !important; color: #0a8f5b !important; }
[data-theme="light"] .tf-quick-add-input.tf-qa-err, [data-theme="light"] .quick-add-input.qa-err { border-color: rgba(192,57,43,.85) !important; color: #c0392b !important; }
[data-theme="light"] .tf-quick-add-input.tf-qa-ok::placeholder,  [data-theme="light"] .quick-add-input.qa-ok::placeholder  { color: #0a8f5b !important; }
[data-theme="light"] .tf-quick-add-input.tf-qa-err::placeholder, [data-theme="light"] .quick-add-input.qa-err::placeholder { color: #c0392b !important; }

/* ── Virtual Office Fallback Card ──────────────────────────────────────── */
.vo-fallback {
  display: none;      /* shown by JS if iframe errors */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: absolute;
  inset: 0;
  background: rgba(4,9,22,.97);
  z-index: 20;
  border-radius: inherit;
  padding: 24px;
  text-align: center;
}

.vo-fallback-icon {
  font-size: 32px;
  color: rgba(0,185,255,.4);
}

.vo-fallback-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #cde5ff;
  margin: 0;
}

.vo-fallback-msg {
  font-size: 14px !important;
  color: rgba(140,190,230,.65);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}

.vo-fallback-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.vo-fallback-link,
.vo-fallback-retry {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}

.vo-fallback-link {
  background: rgba(0,185,255,.12);
  border: 1px solid rgba(0,185,255,.3);
  color: #00d6ff;
  text-decoration: none;
}

.vo-fallback-link:hover { background: rgba(0,185,255,.22); }

.vo-fallback-retry {
  background: rgba(0,185,255,.06);
  border: 1px solid rgba(0,185,255,.18);
  color: rgba(180,215,245,.7);
}

.vo-fallback-retry:hover { background: rgba(0,185,255,.12); }

/* ── LIGHT THEME ADAPTATIONS ──────────────────────────────────────────── */
[data-theme="light"] .tf-card {
  background: linear-gradient(160deg,
    rgba(220,235,255,.95) 0%,
    rgba(200,220,250,.85) 35%,
    rgba(235,242,255,.95) 100%);
  border-color: rgba(0,120,200,.18);
}

[data-theme="light"] .tf-bi-val  { color: #1a3560; }
[data-theme="light"] .tf-bi-label { color: rgba(50,100,160,.6); }
[data-theme="light"] .tf-card-h h2 { color: rgba(20,55,120,.85); }
[data-theme="light"] .tf-atlas-input { background: rgba(0,100,200,.06); border-color: rgba(0,120,200,.25); color: #1a3560; }
[data-theme="light"] .tf-qp { background: rgba(0,100,200,.05); border-color: rgba(0,120,200,.15); color: rgba(30,70,140,.8); }
[data-theme="light"] .tf-upnext-item,
[data-theme="light"] .tf-action-item { background: rgba(0,100,200,.04); border-color: rgba(0,120,200,.1); }
[data-theme="light"] .tf-upnext-text,
[data-theme="light"] .tf-action-text { color: #1a3560; }
[data-theme="light"] .tf-transcript-body { color: rgba(30,70,140,.75); }

/* ── V5 FONT REFINEMENTS (Inter) ──────────────────────────────────────── */
* {
  font-feature-settings: "cv01", "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── V5 COMMAND PALETTE ───────────────────────────────────────────────── */
.cmd-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 14, 20, 0.6);
  backdrop-filter: blur(4px);
  /* NOTE: no display:flex here — JS sets style="display:flex" to open and
     style="display:none" to close. Inline styles beat author rules (without
     !important), so the toggle works correctly. */
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.cmd-modal {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
  width: 560px;
  max-width: calc(100vw - 40px);
  overflow: hidden;
}
.cmd-search-row {
  display: flex; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.cmd-search-icon {
  width: 18px; height: 18px;
  color: var(--soft); flex-shrink: 0;
}
.cmd-input {
  flex: 1; border: none; background: transparent;
  color: var(--ink); font-size: 15px; outline: none;
  font-family: var(--font-ui);
}
.cmd-input::placeholder { color: var(--soft); }
.cmd-esc-badge {
  font-family: var(--font-ui); font-size: 11px;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; flex-shrink: 0;
}
.cmd-results {
  max-height: 360px; overflow-y: auto;
  padding: 6px;
}
.cmd-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--soft);
  padding: 8px 10px 4px;
}
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px; cursor: pointer;
  font-size: 14px; color: var(--ink);
  transition: background .1s;
}
.cmd-item:hover, .cmd-item.active {
  background: var(--surface-2);
}
.cmd-item-icon {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--surface-3);
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
}
.cmd-item-meta { margin-left: auto; font-size: 12px; color: var(--soft); }
.cmd-footer {
  display: flex; gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--soft);
}
.cmd-footer kbd {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 4px;
}
/* ── section header variant per spec (10px, tighter tracking, --muted) ── */
.cmd-section-header {
  font-size: 10px; letter-spacing: .1em; color: var(--muted);
  padding: 4px 12px 2px; font-weight: 600; text-transform: uppercase;
}
/* right-aligned shortcut badge inside a cmd-item or cmd-display-row */
.cmd-item-shortcut {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px; flex-shrink: 0; white-space: nowrap;
}
/* display-only rows (Shortcuts section) — not keyboard-navigable */
.cmd-display-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 14px; color: var(--soft); cursor: default;
}
.cmd-display-row .cmd-item-shortcut { color: var(--ink); }
/* search hint shown when input has text */
.cmd-search-hint {
  font-size: 13px; color: var(--soft); font-style: italic;
  padding: 10px 12px;
}