/* ============================================================================
   ATLAS REDESIGN — Parity foundation layer  (redesign-parity.css)
   Design-parity pass · 2026-07-02 · account B (Opus).
   Loads LAST among the redesign sheets (after every screen CSS + the global
   chrome overlays) so it owns the shared cross-cutting primitives the Codex
   design-parity audit flagged as systemic (all-48-route) issues.

   SCOPE CONTRACT (read before editing):
   - EVERYTHING here is html[data-rtheme]-scoped → rides the redesign layer only,
     resolves in BOTH Calm (almanac) and Operator (operator); zero effect on any
     legacy [data-theme="light"]-only path.
   - Tokens only (--r-*). No hardcoded hex. No markup / JS / data-binding changes.
   - Voice dock (#hint-bar), orb/ring/mic/transcript IDs + handlers untouched.
   - Additive: fixes shared shell/mobile/a11y primitives; per-screen restyling is
     the P2 route sweep, NOT here.

   WHAT THIS FIXES (from the audit's shared-primitive families):
     1. Mobile touch targets — the .rd-* redesign tool screens render inside
        .atlas-view and were NOT covered by v6-mobile.css's .v6-*/.wst-* rules,
        so their in-content controls sat below 44px on phones.
     2. Topbar controls at mobile lifted to 44px.
     3. Status-strip / org-chip anti-clip (ellipsis instead of hard clip).
     4. Focus-visible rings reinforced on controls that legacy CSS zeroed out.
     5. Placeholder helper text held at the AA-safe faint token.
   ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   1 · FOCUS-VISIBLE — keyboard ring on every interactive control, both themes.
   redesign-shell already sets a global :focus-visible; this reinforces it over
   legacy `outline:none` on the shared chrome + form controls.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] a:focus-visible,
html[data-rtheme] button:focus-visible,
html[data-rtheme] input:focus-visible,
html[data-rtheme] select:focus-visible,
html[data-rtheme] textarea:focus-visible,
html[data-rtheme] summary:focus-visible,
html[data-rtheme] [role="button"]:focus-visible,
html[data-rtheme] [role="tab"]:focus-visible,
html[data-rtheme] [tabindex]:focus-visible {
  outline: var(--r-focus) !important;
  outline-offset: 2px !important;
}

/* Placeholder text is helper copy only — hold it at the AA-safe faint token and
   kill the browser's default placeholder dimming so it never drops below AA. */
html[data-rtheme] input::placeholder,
html[data-rtheme] textarea::placeholder {
  color: var(--r-faint) !important;
  opacity: 1 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   2 · STATUS-STRIP / ORG-CHIP anti-clip (all widths).
   "GOLD PEACH REALTY · Tenant-scoped · Audit-ready" must never hard-clip; when
   space is tight the org NAME ellipses gracefully instead of being cut off.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] #statusbar .v6-status-strip {
  min-width: 0 !important;
  align-items: center !important;
  overflow: visible !important;
}
html[data-rtheme] #statusbar .v6-chip-org {
  min-width: 0 !important;
  max-width: 340px !important;
}
html[data-rtheme] #statusbar .v6-chip-org #v6-chip-org-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-rtheme] #statusbar .v6-trust-state { min-width: 0 !important; }

/* ───────────────────────────────────────────────────────────────────────────
   3 · MOBILE TOUCH TARGETS — ≥44px on the redesign layer (≤767px).
   v6-mobile.css (≤768px) already handles the legacy V6 chrome + bottom tab bar
   + voice dock; this fills the gap for the .rd-* tool screens that render inside
   #main-content and for the shared slide-over/modal overlays.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Content-region controls: buttons, selects, summaries, and role/button-like
     elements get a comfortable 44px touch height. Text inputs + textareas too.
     (checkbox/radio/range keep their intrinsic size — stretching them is wrong.) */
  html[data-rtheme] #main-content button,
  html[data-rtheme] #main-content [role="button"],
  html[data-rtheme] #main-content select,
  html[data-rtheme] #main-content summary,
  html[data-rtheme] #main-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  html[data-rtheme] #main-content .rd-tab,
  html[data-rtheme] #main-content [class*="-chip-btn"],
  html[data-rtheme] #main-content [class*="-pill-btn"] {
    min-height: 44px;
  }
  html[data-rtheme] #main-content textarea { min-height: 88px; }

  /* Icon-only / square buttons also need a 44px hit width. */
  html[data-rtheme] #main-content button[class*="icon"],
  html[data-rtheme] #main-content [class*="-icon-btn"],
  html[data-rtheme] #main-content [class*="-iconbtn"],
  html[data-rtheme] #main-content [aria-label][class*="-close"] {
    min-width: 44px;
  }

  /* Shared overlays (record slide-over, customize panel, hire/import modals,
     notification dropdown rows) — same 44px floor for their controls. */
  html[data-rtheme] .rd-record-panel button,
  html[data-rtheme] .rd-record-panel select,
  html[data-rtheme] .rd-notif-row,
  html[data-rtheme] .rd-notif-act,
  html[data-rtheme] [class*="customize"] button,
  html[data-rtheme] [class*="hire-agent"] button,
  html[data-rtheme] [class*="import-agent"] button {
    min-height: 44px;
  }

  /* Topbar action controls lift from 40px → 44px on phones (the 56px mobile bar
     has room). The kept controls are Ask Atlas + New + the bell (role chip is
     hidden by v6-mobile.css). height:!important is required to beat v6-t3-chrome. */
  html[data-rtheme] header#statusbar .v6-ask-atlas-btn,
  html[data-rtheme] header#statusbar .v7-new-btn,
  html[data-rtheme] header#statusbar #v6-notif-bell {
    height: 44px !important;
    min-height: 44px !important;
  }
  html[data-rtheme] header#statusbar #v6-notif-bell { width: 44px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4 · NOTIFICATION BADGES — never render a literal "0".
   Belt-and-suspenders for the `Notifications0` concatenation: any nav/topbar
   count badge that is empty OR still holds a bare "0" collapses. (The JS is also
   fixed to write "" instead of "0" on the zero/hidden branch.)
   ─────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] #rail .v6-nav-badge:empty,
html[data-rtheme] .v6-notif-badge:empty { display: none !important; }
html[data-rtheme] .v6-notif-badge[hidden],
html[data-rtheme] #rail .v6-nav-badge[hidden] { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────────
   P3 TOPBAR CALM (2026-07-02) — match the Claude-design reference bar.
   The live command bar carried ~8 elements (search · org chip · static trust
   copy · hot-leads chip · tasks chip · role chip · New · Ask Atlas · bell);
   the reference is brand chip · search · theme toggle · synced · bell · avatar.
   COO call: hide the STATIC trust copy (it is marketing text, duplicated by the
   Trust Center) and the role chip (duplicated by the rail user card); keep the
   REAL-DATA chips (org, hot leads, tasks due) but render them quiet — text-level,
   no button chrome — so the bar reads enterprise-calm. Both themes; reversible.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] #statusbar .v6-trust-state { display: none !important; }
html[data-rtheme] #statusbar .v6-role-chip { display: none !important; }
html[data-rtheme] #statusbar .v6-status-chip.v6-chip-leads,
html[data-rtheme] #statusbar .v6-status-chip.v6-chip-tasks {
  background: transparent !important;
  border: none !important;
  color: var(--r-muted) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
html[data-rtheme] #statusbar .v6-status-chip.v6-chip-leads .v6-chip-num,
html[data-rtheme] #statusbar .v6-status-chip.v6-chip-tasks .v6-chip-num {
  color: var(--r-body) !important;
  font-weight: 600;
}
/* parity 2026-07-03: the org chip's name text carried a hardcoded legacy ink
   (#101722) — invisible on Operator's dark chip (the "lone dot pill"). Bind to
   the theme token in both themes. */
html[data-rtheme] #statusbar .v6-chip-org,
html[data-rtheme] #statusbar .v6-chip-org #v6-chip-org-name {
  color: var(--r-body) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   P3 SURFACE GUARD (2026-07-02) — kill the intermittent WHITE-cards-on-Operator
   state. Legacy v6-shell.css paints `.panel, [class*="-card"], [class*="-panel"]`
   rgba(255,253,248,.94) UNSCOPED; redesign `.rd-card` (background: var(--r-surface))
   only beat it on specificity TIE + source order — any late/failed sheet load let
   the legacy white win on the dark theme (seen on Home: workforce + schedule +
   follow-up cards). This last-loading, higher-specificity bind removes the race
   in BOTH themes. Same visual as intended — surface token, nothing new.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] .rd-card { background: var(--r-surface); }
/* W5 2026-07-02: the same legacy v6-shell `[class*="-card"]` near-white ALSO
   matches the card SUB-elements (rd-card__body etc. — substring hit on "-card"),
   which the .rd-card guard above cannot cover. Seen live: Operator Home's
   workforce widget body painted rgba(255,253,248,.94) (46% Home diff). Card
   internals inherit the card surface — force them transparent, both themes. */
html[data-rtheme] .rd-card__body,
html[data-rtheme] .rd-card__head,
html[data-rtheme] .rd-card__meta,
html[data-rtheme] .rd-card__title { background: transparent; }

/* ────────────────────────────────────────────────────────────────────────────
   W2 FLOATING VOICE PILL (2026-07-02) — ref match: dark floating "Talk to Atlas"
   pill bottom-right instead of the full-width bottom strip. Desktop ≥768px only:
   v6-mobile.css already pins its own tuned full-width dock above the bottom tab
   bar on phones, untouched here.

   CSS-ONLY SURGERY. Every protected voice id stays in the DOM exactly as-is
   (#vd-status-bar #orb-wrap #orb #mic-indicator #mic-state-text #transcript-live
   #transcript-reply #dock-settings-btn #voice-settings-popover #toggle-wake
   #toggle-ambient #toggle-mute #tag-voice #brain-state-label) — spacebar PTT,
   click-to-talk, and the voice state machine bind by id and survive. Hidden
   pieces use display:none (still queryable by getElementById).

   Idle  = compact pill: orb (48px wrap, base size — rings untouched) + mono
           state text + gear.
   Active = the JS state machine marks a transcript `.visible` + non-empty
           (voice-dock.css:92) → :has() grows the pill into a small panel.
           Chrome-only app — :has() is safe.
   Dark in BOTH themes: V6 reserves dark surfaces for control panels (Ask Atlas /
   Trust Rail) — the voice dock IS a control panel. Tokens: --r-dock-* (shared).
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* the bar becomes a floating bottom-right pill */
  html[data-rtheme] #hint-bar.quick-bar {
    position: fixed !important;
    left: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    top: auto !important;
    width: auto !important;
    max-width: min(440px, calc(100vw - 36px)) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 12px 5px 6px !important;
    border-radius: 999px !important;
    background: var(--r-dock-bg) !important;
    border: 1px solid var(--r-dock-border) !important;
    border-top: 1px solid var(--r-dock-border) !important;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .22) !important;
    z-index: 256 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;   /* orb listening rings may breathe past the pill edge */
    cursor: pointer;                /* W2 follow-up: whole pill is click-to-talk (app.js?v=90 delegate) */
  }
  html[data-rtheme] #hint-bar .voice-settings-popover,
  html[data-rtheme] #hint-bar .dock-transcript { cursor: default; }

  /* decoration off: quick-action row, holo orb, flow arrows, waveform, big mic,
     VOICE COMMAND title + prompt line (the pill speaks for itself) */
  html[data-rtheme] #hint-bar .qb-actions-row,
  html[data-rtheme] #hint-bar .qb-holo-orb-wrap,
  html[data-rtheme] #hint-bar .qb-flow-arrows,
  html[data-rtheme] #hint-bar .qb-mic-btn,
  html[data-rtheme] #hint-bar .qb-sync-panel,
  html[data-rtheme] #hint-bar .qbvc-title,
  html[data-rtheme] #hint-bar .qbvc-prompt,
  html[data-rtheme] #hint-bar .qbvc-waveform,
  html[data-rtheme] #hint-bar .vd-status-bar { display: none !important; }

  /* the voice section is the pill's whole content */
  html[data-rtheme] #hint-bar .qb-voice-section.vd-host {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    max-width: none !important;
    position: relative;             /* anchors the settings popover */
  }

  html[data-rtheme] #hint-bar .vd-dock {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* readout text on the dark surface */
  html[data-rtheme] #hint-bar .vd-readout { min-width: 0; }
  html[data-rtheme] #hint-bar #mic-state-text,
  html[data-rtheme] #hint-bar .vd-mic.mic-indicator { color: var(--r-dock-muted) !important; }
  html[data-rtheme] #hint-bar .dock-transcript { color: var(--r-dock-ink) !important; }
  html[data-rtheme] #hint-bar .vd-tx.dock-transcript-reply { border-left-color: var(--r-amber) !important; }

  /* gear: quiet on dark */
  html[data-rtheme] #hint-bar #dock-settings-btn { color: var(--r-dock-muted) !important; }
  html[data-rtheme] #hint-bar #dock-settings-btn:hover,
  html[data-rtheme] #hint-bar #dock-settings-btn:focus-visible { color: var(--r-dock-ink) !important; }

  /* ACTIVE: the state machine marked a transcript visible+non-empty → panel */
  html[data-rtheme] #hint-bar.quick-bar:has(.vd-tx.visible:not(:empty)) {
    width: 400px !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
  }
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) .vd-dock {
    align-items: flex-start !important;
  }
  /* strip-era height caps (vd-host max-height 58px / vd-dock 40px) would clip
     the expanded panel — release them only while expanded */
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) .qb-voice-section.vd-host,
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) .vd-dock {
    height: auto !important;
    max-height: none !important;
  }
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) .vd-readout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  html[data-rtheme] #hint-bar .vd-tx.dock-transcript.visible:not(:empty) {
    max-height: 110px;
    overflow-y: auto;
    white-space: normal !important;
  }

  /* settings popover opens UP from the pill, hugging the right edge */
  html[data-rtheme] #hint-bar .voice-settings-popover {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: calc(100% + 14px) !important;
    top: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · MOBILE VOICE DOCK REPAIR (≤767px) — Q5d 2026-07-03
   Two late-loading desktop sheets break the v6-mobile dock at phone widths:
   · v6-t3-chrome.css re-shows .qb-sync-panel (display:inline-flex !important,
     UNSCOPED) after v6-mobile.css hid it → "Synced · live" collides with the
     mic state line at 390px.
   · redesign-shell.css paints html[data-rtheme] #hint-bar.quick-bar with the
     light --r-surface (unscoped) and out-specifies v6-mobile's dark gradient
     → light-on-light dock text in Calm.
   This block loads LAST and re-asserts the v6-mobile design for phones only.
   Dark stays correct here in BOTH themes (dark is reserved for control
   surfaces — same rule as the desktop pill). All protected voice ids are
   untouched; CSS-only.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html[data-rtheme] #hint-bar .qb-sync-panel { display: none !important; }

  html[data-rtheme] #hint-bar.quick-bar {
    background: linear-gradient(180deg, #172832, #121d27) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    /* v6-t3-chrome (desktop bar) also wins space-between/24px over v6-mobile */
    justify-content: center !important;
    padding: 6px 12px !important;
  }

  /* v6-t3-chrome's flex:0 1 auto collapses the voice cluster to min-content
     (readout ended up 40px wide) -- restore the full-width mobile row */
  html[data-rtheme] #hint-bar .qb-voice-section.vd-host {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important; /* strip-era 200px cap otherwise clamps the row */
    min-width: 0 !important;
  }
  html[data-rtheme] #hint-bar .vd-dock {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* the state line must clip, never overlap — the strip-era span is unbounded */
  html[data-rtheme] #hint-bar .vd-readout {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
  }
  html[data-rtheme] #hint-bar #mic-indicator,
  html[data-rtheme] #hint-bar .vd-mic {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  html[data-rtheme] #hint-bar #mic-state-text,
  html[data-rtheme] #hint-bar .mic-state-text {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(233, 240, 246, 0.78) !important;
  }
  html[data-rtheme] #hint-bar .vd-tx,
  html[data-rtheme] #hint-bar .dock-transcript {
    color: rgba(233, 240, 246, 0.88) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   L1 launch-readiness 2026-07-03 — shared loading-skeleton primitives.
   Three-state discipline: skeleton (this) → live data → LABELED empty. The
   em-dash convention means "no data" and must NEVER double as a spinner —
   list screens paint these token-driven shimmer blocks while feeds resolve.
   Both themes (tokens only). Markup is per-screen (each screen owns its own
   skelHTML helper); classes here are the shared vocabulary.
   ──────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] .rd-skel-bar {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--r-canvas-raised) 25%,
    color-mix(in srgb, var(--r-border) 55%, var(--r-canvas-raised)) 42%,
    var(--r-canvas-raised) 60%);
  background-size: 220% 100%;
  animation: rd-skel-sweep 1.1s linear infinite;
}
html[data-rtheme] .rd-skel-bar.w25 { width: 25%; }
html[data-rtheme] .rd-skel-bar.w40 { width: 40%; }
html[data-rtheme] .rd-skel-bar.w60 { width: 60%; }
html[data-rtheme] .rd-skel-bar.w80 { width: 80%; }

html[data-rtheme] .rd-skel-card {
  border: 1px solid var(--r-border);
  border-radius: 14px;
  background: var(--r-surface);
  overflow: hidden;
}
html[data-rtheme] .rd-skel-card .rd-skel-photo {
  height: 150px; border-radius: 0; width: 100%;
}
html[data-rtheme] .rd-skel-card .rd-skel-body {
  padding: 14px; display: flex; flex-direction: column; gap: 9px;
}

html[data-rtheme] .rd-skel-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 6px;
}
html[data-rtheme] .rd-skel-row .rd-skel-dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
}
html[data-rtheme] .rd-skel-row .rd-skel-lines {
  flex: 1; display: flex; flex-direction: column; gap: 7px;
}

/* 4-up loading stand-in for a KpiCard strip (em-dash cards read as broken). */
html[data-rtheme] .rd-skel-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
html[data-rtheme] .rd-skel-kpis .rd-skel-card { min-height: 92px; }
@media (max-width: 860px) {
  html[data-rtheme] .rd-skel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the honest caption over any skeleton region — real words, not chrome */
html[data-rtheme] .rd-skel-note {
  font-size: 12.5px; color: var(--r-muted); letter-spacing: .01em;
  margin: 2px 0 10px; display: flex; align-items: center; gap: 7px;
}
html[data-rtheme] .rd-skel-note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--r-muted); opacity: .55;
  animation: rd-skel-pulse 1.1s ease-in-out infinite;
}

@keyframes rd-skel-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -100% 0; }
}
@keyframes rd-skel-pulse {
  0%, 100% { opacity: .25; } 50% { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rtheme] .rd-skel-bar { animation: none; }
  html[data-rtheme] .rd-skel-note::before { animation: none; }
}

/* L2 2026-07-03 — contact-drawer tap targets (the clientcare drawer shipped
   AFTER the parity mobile pass and its compact controls sat under 44px on
   phones: close 34px, Call/Text/Email 37px, copy 28px). Same ≤767px rule as
   family 3 above. */
@media (max-width: 767px) {
  html[data-rtheme] .rd-cc-drawer-act {
    min-height: 44px !important;
    display: inline-flex; align-items: center;
  }
  html[data-rtheme] .rd-cc-drawer-x {
    min-width: 44px !important; min-height: 44px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  html[data-rtheme] .rd-cc-drawer-copy-btn {
    min-width: 44px !important; min-height: 44px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   $100M POLISH PASS 2026-07-03 (Bryan: heading "text bubble outlines" look
   cheap). ROOT CAUSE — v6-shell.css `.panel, [class*="-card"], [class*="-panel"]`
   substring-matches every element whose class merely CONTAINS "-card": card
   SUB-elements like rd-card__title / __head / __meta / *-card-title inherit the
   full CARD dressing (cream surface + 1px border + radius + shadow) → every
   section heading rendered inside a bubble. Headings are TYPE, not surfaces.
   Neutralize the dressing on card sub-elements; titles get real weight instead.
   ──────────────────────────────────────────────────────────────────────────── */
html[data-rtheme] [class*="card__"],
html[data-rtheme] [class*="-card-title"],
html[data-rtheme] [class*="-card-head"],
html[data-rtheme] [class*="-card-note"],
html[data-rtheme] [class*="-card-foot"],
html[data-rtheme] [class*="-card-t"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* card__head keeps its structural bottom hairline where a screen set one? No —
   screens that want a head rule draw it on the card body padding; the leak-
   border was never a designed hairline. Titles: bolder, calm, no chrome. */
html[data-rtheme] [class*="card__title"],
html[data-rtheme] [class*="-card-title"],
html[data-rtheme] [class*="-card-t"] {
  font-weight: 700 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   12 · PHONE CHROME AUTHORITY (≤767px) — 2026-07-04 390px/Operator QA pass.
   This file loads LAST, so these are the final word on phone chrome. They
   repair three cascade losses found in the live 390px audit:
     a) §2 above sets .v6-status-strip overflow:visible (desktop ellipsis) —
        on phones that defeated v6-mobile.css's chip horizontal scroll and
        pushed the org chip off-viewport left. Re-assert scroll here.
     b) The desktop-only top-bar affordances (Calm/Operator toggle 183px,
        customize trigger, role chip) overflowed the 390px bar and shoved
        bell/New/Ask Atlas off-screen; v6-t2/t3 chrome sheets were re-showing
        the role chip over v6-mobile's hide. Hide all three on phones.
     c) .rd-screen is a flex item (its section is display:flex) — min-width:
        auto let any wide child (e.g. a 4-up KPI grid) force the whole screen
        past the viewport, unreachable behind main-content's overflow-x:hidden.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* frame: single column — #rail is the fixed bottom dock, not a grid track */
  html[data-rtheme] .frame { grid-template-columns: 1fr !important; }

  /* bottom dock: the desktop Quick-action CTA is not a tab — keep it out of
     the flattened tab row (it was eating 280 of 390px, crushing the 4 tabs) */
  html[data-rtheme] #rail .rail-quick { display: none !important; }

  /* top bar: the squeezed chip strip reads as a broken fragment at 390px
     (bell + New + Ask Atlas leave it ~24px) — hide it; org context lives in
     each screen's page header on phones */
  html[data-rtheme] #statusbar .v6-status-strip { display: none !important; }
  html[data-rtheme] #statusbar .rd-theme-toggle,
  html[data-rtheme] #statusbar .rd-cust-trigger,
  html[data-rtheme] #statusbar #v6-role-chip { display: none !important; }

  /* phone org chip (js/redesign/mobile-org-chip.js) — restores org context +
     switching on phones, where the rail org-switcher is hidden */
  html[data-rtheme] .moc-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 44px; padding: 0 10px; max-width: 138px;
    border: 1px solid var(--r-border); border-radius: var(--r-radius-control, 10px);
    background: var(--r-surface); color: var(--r-ink); cursor: pointer;
    font: 600 12.5px/1 var(--r-font-body);
  }
  html[data-rtheme] .moc-chip:focus-visible { outline: var(--r-focus); outline-offset: 2px; }
  html[data-rtheme] .moc-tile {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--r-primary); color: var(--r-primary-ink);
    font: 700 11px/1 var(--r-font-mono);
  }
  html[data-rtheme] .moc-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-rtheme] .moc-pop {
    position: fixed; top: 60px; left: 12px; right: 12px; z-index: 320;
    display: flex; flex-direction: column; gap: 2px; padding: 8px;
    border: 1px solid var(--r-border); border-radius: var(--r-radius-card, 12px);
    background: var(--r-surface); box-shadow: var(--r-shadow-pop, 0 18px 42px rgba(15,20,26,.28));
  }
  html[data-rtheme] .moc-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--r-ink); cursor: pointer;
    font: 500 14px/1.2 var(--r-font-body); text-align: left;
  }
  html[data-rtheme] .moc-opt:active { background: var(--r-well); }
  html[data-rtheme] .moc-opt .v7-ws-check { margin-left: auto; color: var(--r-primary); }

  /* generic screen shrink guard (see c above). width:100% also defeats the
     margin:0 auto desktop-centering pattern — auto cross-axis margins disable
     flex stretch, which let a screen size itself to max-content (the pipeline
     kanban's 5 x 260px) instead of the viewport */
  html[data-rtheme] section[data-view] .rd-screen {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── S6 (2026-07-04) LEGACY-FLASH KILL ─────────────────────────────────────
   While a redesign screen render is in flight for a section, hide the legacy
   content underneath (visibility keeps layout height — no scroll jump). The
   data-rd-wait attribute is set synchronously by screen-router.js ONLY for
   views with a registered RDScreens renderer, and removed when the render
   settles — so legacy-only views never get it and can never go blank. */
[data-view][data-rd-wait] > * { visibility: hidden !important; }  /* S15/D11: home is a DIV - selector was section-scoped, so the legacy HOME flashed at every boot */


/* S8 (2026-07-04): the sign-in dialog previously had NO close path. */
#login-modal .login-card { position: relative; }
#login-modal .login-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; opacity: .6;
  font-size: 22px; line-height: 1; cursor: pointer;
}
#login-modal .login-close:hover, #login-modal .login-close:focus-visible { opacity: 1; }


/* S8b: bottom-left profile menu (user chip popover) */
.sb-user-menu {
  position: fixed;
  z-index: 10000;
  min-width: 230px;
  background: var(--r-surface);
  color: var(--r-ink);
  border: 1px solid var(--r-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--r-ink) 24%, transparent);
  padding: 6px;
}
.sb-user-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--r-line);
  margin-bottom: 6px;
}
.sb-user-menu-head strong { font-size: 14px; }
.sb-user-menu-head span { font-size: 12px; color: var(--r-faint); }
.sb-user-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  border: 0; background: transparent; color: inherit;
  text-align: left;
  font-size: 14px; font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.sb-user-menu button:hover, .sb-user-menu button:focus-visible {
  background: color-mix(in srgb, var(--r-primary) 10%, transparent);
  color: var(--r-primary);
}