/* ============================================================================
   ATLAS REDESIGN — Shell re-skin (frame · rail · topbar · voice dock)
   Branch: atlas-redesign-2026-06-29  ·  Phase 1 / T3

   Re-skins the EXISTING shell DOM (no data-dept / routing changes) to the new
   Calm + Operator language. All selectors are html[data-rtheme="…"]-prefixed and
   use !important where needed to beat the legacy [data-theme="light"] !important
   rules in bundle-base.css. Voice dock IDs/classes are preserved; only colors move.
   ========================================================================== */

/* ───────────────────────── FRAME + canvas ───────────────────────── */
html[data-rtheme] .frame {
  grid-template-columns: var(--r-rail-w, 248px) 1fr !important;
}
html[data-rtheme="almanac"], html[data-rtheme="almanac"] body { background: var(--r-canvas) !important; }
html[data-rtheme="operator"], html[data-rtheme="operator"] body { background: var(--r-canvas) !important; }
html[data-rtheme] main#main-content,
html[data-rtheme] .canvas { background: var(--r-canvas) !important; color: var(--r-body) !important; }
html[data-rtheme] body { font-family: var(--r-font-body) !important; }

/* ── CONTENT SCROLL (Bryan-directed 2026-07-01) — retires the legacy "no-scroll at
   1920×1080" lock. bundle-base.css pins html/body/.frame/.main-col/.canvas to 100vh
   + overflow:hidden !important, which CLIPPED any view taller than the viewport with
   no scrollbar. Enterprise dashboards (Linear/Ramp/Attio + the Claude design mock)
   keep the rail + top bar FIXED and let the content region scroll. So: the frame
   chrome (rail + top bar) stays fixed, #main-content becomes the single vertical
   scroll container, and each view grows to its own content height.
   (Supersedes atlas-dashboard.md rule #3 + feedback_dashboard_scroll_rule.md.) */
html[data-rtheme] main#main-content,
html[data-rtheme] .canvas { overflow-y: auto !important; overflow-x: hidden !important; }
html[data-rtheme] #main-content > .atlas-view {
  height: auto !important; min-height: 100% !important; overflow: visible !important;
}

/* ── V6/legacy background bleed fix (2026-06-30) ─────────────────────────────
   The redesign screens render INSIDE the legacy .atlas-view container and reuse
   V6 shell rules. Two legacy hardcoded-cream backgrounds don't follow data-rtheme,
   so in Operator they paint cream behind operator-ink (near-white) text → ~1.1
   contrast (invisible). Both are theme-correct via tokens here (negligible shift
   in Calm). Scoped to the redesign layer only — no legacy/V6 file is touched.

   (b) the per-view section (.atlas-view / .v6-view) hardcodes #F6F1E7 cream →
       point it at the canvas token so Operator shows the dark canvas. */
html[data-rtheme] .atlas-view,
html[data-rtheme] .atlas-view.v6-view { background: var(--r-canvas) !important; }

/* (a) v6-shell.css `.panel, [class*="-card"], [class*="-panel"]` paints a
   hardcoded rgba(255,253,248,.94) cream. It correctly loses to redesign card
   SURFACES (.rd-*-card sets var(--r-surface) at higher specificity), but redesign
   card TITLES/NOTES/META set no background of their own, so they fall through to
   that cream. Force those sub-elements transparent → they show the card surface. */
html[data-rtheme] [class*="-card-title"],
html[data-rtheme] [class*="-card-note"],
html[data-rtheme] [class*="-cardtitle"],
html[data-rtheme] [class*="card__title"],
html[data-rtheme] [class*="card__meta"] { background: transparent !important; }

/* ───────────────────────── RAIL ───────────────────────── */
html[data-rtheme] #rail.sidebar {
  background: var(--r-rail-bg) !important;
  border-right: 1px solid var(--r-rail-border) !important;
  color: var(--r-rail-ink) !important;
}
/* brand */
html[data-rtheme] #rail .sidebar-brand { border-bottom: 1px solid var(--r-rail-border) !important; }
html[data-rtheme] #rail .sb-logo,
html[data-rtheme] #rail .v6-brand-mark {
  background: var(--r-primary) !important;
  color: var(--r-primary-ink) !important;
  border: 0 !important;
  font-family: var(--r-font-display) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--r-primary-ink) !important;
}
html[data-rtheme] #rail .sb-text h1,
html[data-rtheme] #rail .v6-brand-text h1 {
  font-family: var(--r-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--r-rail-ink) !important;
  -webkit-text-fill-color: var(--r-rail-ink) !important;
  background: none !important;
}
html[data-rtheme] #rail .sb-org { color: var(--r-rail-muted) !important; }

/* org switcher */
html[data-rtheme] #rail .org-switcher {
  background: var(--r-rail-bg-2) !important;
  border: 1px solid var(--r-rail-border) !important;
  color: var(--r-rail-ink) !important;
}
html[data-rtheme] #rail .v7-ws-tile {
  background: var(--r-primary) !important;
  color: var(--r-primary-ink) !important;
}
html[data-rtheme] #rail .v7-ws-name { color: var(--r-rail-ink) !important; }
html[data-rtheme] #rail .v7-ws-arrow { color: var(--r-rail-muted) !important; }

/* group headings — mono eyebrow */
html[data-rtheme] #rail .v6-nav-heading {
  font-family: var(--r-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--r-rail-muted) !important;
  opacity: 1 !important;
}

/* nav items */
html[data-rtheme] #rail .v6-nav-item,
html[data-rtheme] #rail .rail-item {
  color: var(--r-rail-ink) !important;
  border-radius: var(--r-radius-control, 10px) !important;
  background: transparent !important;
  transition: background var(--r-dur,.14s) var(--r-ease), color var(--r-dur,.14s) var(--r-ease) !important;
}
html[data-rtheme] #rail .v6-nav-item .v6-nav-icon { color: var(--r-rail-muted) !important; }
html[data-rtheme] #rail .v6-nav-item .v6-nav-icon .ri-svg { stroke: currentColor !important; }
html[data-rtheme] #rail .v6-nav-item .v6-nav-label {
  color: var(--r-rail-ink) !important;
  font-family: var(--r-font-body) !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: var(--r-rail-ink) !important;
  text-shadow: none !important;
}
html[data-rtheme] #rail .v6-nav-item .v6-nav-sub { color: var(--r-rail-muted) !important; }
html[data-rtheme] #rail .v6-nav-item .v6-nav-state {
  font-family: var(--r-font-mono) !important;
  color: var(--r-rail-muted) !important;
}
/* hover */
html[data-rtheme] #rail .v6-nav-item:hover,
html[data-rtheme] #rail .rail-item:hover {
  background: var(--r-rail-bg-2) !important;
}
html[data-rtheme="almanac"] #rail .v6-nav-item:hover { background: rgba(47,93,80,.07) !important; }
html[data-rtheme] #rail .v6-nav-item:hover .v6-nav-icon { color: var(--r-rail-ink) !important; }
/* active */
html[data-rtheme] #rail .v6-nav-item.active,
html[data-rtheme] #rail .rail-item.active {
  background: var(--r-rail-active-bg) !important;
}
html[data-rtheme] #rail .v6-nav-item.active .v6-nav-label,
html[data-rtheme] #rail .v6-nav-item.active .v6-nav-icon { color: var(--r-rail-active-ink) !important; -webkit-text-fill-color: var(--r-rail-active-ink) !important; }
html[data-rtheme] #rail .v6-nav-item.active { box-shadow: inset 2px 0 0 var(--r-primary) !important; }

/* footer */
html[data-rtheme] #rail .v6-side-card {
  background: var(--r-rail-bg-2) !important;
  border: 1px solid var(--r-rail-border) !important;
  color: var(--r-rail-muted) !important;
}
html[data-rtheme] #rail .v6-side-card strong { color: var(--r-rail-ink) !important; }
html[data-rtheme] #rail .sidebar-foot { border-top: 1px solid var(--r-rail-border) !important; }
html[data-rtheme] #rail .sb-user { background: transparent !important; }
html[data-rtheme] #rail .sb-user:hover { background: var(--r-rail-bg-2) !important; }
html[data-rtheme] #rail .sb-user-name { color: var(--r-rail-ink) !important; -webkit-text-fill-color: var(--r-rail-ink) !important; }
html[data-rtheme] #rail .sb-user-role { color: var(--r-rail-muted) !important; }
html[data-rtheme] #rail .sb-user-avatar { background: var(--r-primary) !important; color: var(--r-primary-ink) !important; }
html[data-rtheme] #rail .sb-user-pill {
  background: var(--r-mint-surface) !important; color: var(--r-mint-ink) !important; border: 0 !important;
  font-family: var(--r-font-mono) !important;
}
html[data-rtheme] #rail .sb-clock .sb-time {
  color: var(--r-rail-ink) !important; -webkit-text-fill-color: var(--r-rail-ink) !important;
  font-family: var(--r-font-mono) !important; text-shadow: none !important;
}
html[data-rtheme] #rail .sb-clock .sb-date-day,
html[data-rtheme] #rail .sb-clock .sb-date-dow,
html[data-rtheme] #rail .sb-clock .sb-ampm,
html[data-rtheme] #rail .sb-clock .sb-sec { color: var(--r-rail-muted) !important; font-family: var(--r-font-mono) !important; }

/* accordion collapse (js/redesign/nav-accordion.js toggles .rd-collapsed on .v6-nav-group) */
html[data-rtheme] #rail .v6-nav-group .v6-nav-heading { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
html[data-rtheme] #rail .v6-nav-group .v6-nav-heading::after {
  content: ""; width: 7px; height: 7px; margin-right: 2px;
  border-right: 1.5px solid var(--r-rail-muted); border-bottom: 1.5px solid var(--r-rail-muted);
  transform: rotate(45deg); transition: transform var(--r-dur,.14s) var(--r-ease); opacity: .8;
}
html[data-rtheme] #rail .v6-nav-group.rd-collapsed .v6-nav-heading::after { transform: rotate(-45deg); }
html[data-rtheme] #rail .v6-nav-group.rd-collapsed .v6-nav-item,
html[data-rtheme] #rail .v6-nav-group.rd-collapsed > a.v6-nav-item { display: none !important; }
/* keep the pinned first group (Daily) headers without a caret if marked */
html[data-rtheme] #rail .v6-nav-group.rd-pinned .v6-nav-heading { cursor: default; }
html[data-rtheme] #rail .v6-nav-group.rd-pinned .v6-nav-heading::after { display: none; }

/* ============================================================================
   RAIL COLLAPSE-TO-ICONS (2026-06-30) — toggle in js/redesign/rail-collapse.js
   State on html[data-rail-collapsed] (also set pre-paint). The toggle button is
   injected into .sidebar-brand. Collapsed shrinks the rail to an icon-only strip;
   native `title` on each item carries the hover tooltip (rail clips overflow, so a
   CSS flyout can't escape). Desktop-only — the collapsed block is gated to ≥768px
   so the mobile drawer (.mob-open) is never icon-ified.
   ========================================================================== */

/* collapse toggle button (lives in the rail header, both states) */
html[data-rtheme] #rail .rd-rail-collapse {
  margin-left: auto; flex-shrink: 0;
  width: 28px; height: 28px; padding: 0; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--r-rail-muted) !important;
  border-radius: var(--r-radius-control, 10px);
  transition: background var(--r-dur,.14s) var(--r-ease), color var(--r-dur,.14s) var(--r-ease);
}
html[data-rtheme] #rail .rd-rail-collapse svg { width: 16px; height: 16px; transition: transform var(--r-dur,.16s) var(--r-ease); }
html[data-rtheme] #rail .rd-rail-collapse:hover { background: var(--r-rail-bg-2) !important; color: var(--r-rail-ink) !important; }
html[data-rtheme] #rail .rd-rail-collapse:focus-visible { outline: var(--r-focus) !important; outline-offset: 2px; }
html[data-rail-collapsed][data-rtheme] #rail .rd-rail-collapse { margin-left: 0; }
html[data-rail-collapsed][data-rtheme] #rail .rd-rail-collapse svg { transform: rotate(180deg); }
@media (max-width: 767px) { #rail .rd-rail-collapse { display: none !important; } }

@media (min-width: 768px) {
  /* narrow the grid column AND the rail element (v6-shell.css pins the rail to
     a fixed `width: var(--sidebar-width)`, so the track alone won't shrink it) */
  html[data-rail-collapsed][data-rtheme] .frame {
    grid-template-columns: var(--r-rail-w-collapsed, 76px) 1fr !important;
  }
  html[data-rail-collapsed][data-rtheme] #rail.sidebar {
    width: var(--r-rail-w-collapsed, 76px) !important;
    min-width: var(--r-rail-w-collapsed, 76px) !important;   /* v6-nav.css pins all three to 286px */
    max-width: var(--r-rail-w-collapsed, 76px) !important;
    padding-left: 0 !important;   /* v6-nav.css adds 18px side padding — reclaim it for the icon strip */
    padding-right: 0 !important;
  }

  /* brand header: just the collapse toggle, centered (logo + wordmark return on expand).
     The V6 layer makes .sidebar-brand display:grid (logo | text columns), so force
     flex here to actually center the lone toggle. */
  html[data-rail-collapsed] #rail .sidebar-brand { display: flex !important; padding: 0 !important; gap: 0 !important; align-items: center !important; justify-content: center !important; }
  html[data-rail-collapsed] #rail .v6-brand-text,
  html[data-rail-collapsed] #rail .sb-text,
  html[data-rail-collapsed] #rail .sb-logo,
  html[data-rail-collapsed] #rail .v6-brand-mark { display: none !important; }

  /* org switcher: monogram tile only */
  html[data-rail-collapsed] #rail .org-switcher { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
  html[data-rail-collapsed] #rail .v7-ws-name,
  html[data-rail-collapsed] #rail .v7-ws-arrow { display: none !important; }

  /* nav: hide group headings; show EVERY item (override accordion collapse) so the
     full icon strip is reachable without folder headers to click */
  html[data-rail-collapsed] #rail .v6-nav-heading { display: none !important; }
  html[data-rail-collapsed] #rail .v6-nav-group.rd-collapsed .v6-nav-item,
  html[data-rail-collapsed] #rail .v6-nav-group.rd-collapsed > a.v6-nav-item { display: flex !important; }
  html[data-rail-collapsed] #rail .v6-nav-group + .v6-nav-group { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--r-rail-border); }

  /* nav items → icon only, centered; text wrapper + state badge hidden */
  html[data-rail-collapsed] #rail .v6-nav-item { justify-content: center !important; gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  html[data-rail-collapsed] #rail .v6-nav-item > span:not(.v6-nav-icon):not(.v6-nav-state),
  html[data-rail-collapsed] #rail .v6-nav-item .v6-nav-state { display: none !important; }
  html[data-rail-collapsed] #rail .v6-nav-item .v6-nav-icon { margin: 0 auto !important; }

  /* footer: keep the user avatar (click-to-switch); drop text-heavy panels */
  html[data-rail-collapsed] #rail .v6-side-card,
  html[data-rail-collapsed] #rail .sb-clock { display: none !important; }
  html[data-rail-collapsed] #rail .sidebar-foot { padding-left: 0 !important; padding-right: 0 !important; }
  html[data-rail-collapsed] #rail .sb-user { justify-content: center !important; gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  html[data-rail-collapsed] #rail .sb-user-info,
  html[data-rail-collapsed] #rail .sb-user-pill { display: none !important; }
}

/* ───────────────────────── TOPBAR ───────────────────────── */
html[data-rtheme] header#statusbar {
  background: var(--r-canvas) !important;
  border-bottom: 1px solid var(--r-hairline-2) !important;
  height: var(--r-topbar-h, 64px) !important;
}
/* global search */
html[data-rtheme] #statusbar .v6-global-search {
  background: var(--r-surface) !important;
  border: 1px solid var(--r-border) !important;
  color: var(--r-muted) !important;
  border-radius: var(--r-radius-control, 10px) !important;
}
html[data-rtheme] #statusbar .v6-global-search input { color: var(--r-body) !important; font-family: var(--r-font-body) !important; }
html[data-rtheme] #statusbar .v6-global-search input::placeholder { color: var(--r-faint) !important; }
html[data-rtheme] #statusbar .v6-global-search svg { color: var(--r-muted) !important; }
html[data-rtheme] #statusbar .v6-search-hint {
  font-family: var(--r-font-mono) !important; color: var(--r-faint) !important;
  background: var(--r-well) !important; border: 1px solid var(--r-border) !important;
}
/* context chips + trust state */
html[data-rtheme] #statusbar .v6-status-chip {
  background: var(--r-surface) !important; border: 1px solid var(--r-border) !important; color: var(--r-body) !important;
  font-family: var(--r-font-mono) !important;
}
html[data-rtheme] #statusbar .v6-status-dot { background: var(--r-primary) !important; }
html[data-rtheme] #statusbar .v6-status-dot.gold { background: var(--r-primary) !important; }
html[data-rtheme] #statusbar .v6-trust-state { color: var(--r-muted) !important; font-family: var(--r-font-mono) !important; }
html[data-rtheme] #statusbar .v6-trust-item { color: var(--r-muted) !important; }
html[data-rtheme] #statusbar .v6-chip-num { color: var(--r-ink) !important; }
/* top actions */
html[data-rtheme] #statusbar .v6-notif-bell {
  background: var(--r-surface) !important; border: 1px solid var(--r-border) !important; color: var(--r-body) !important;
}
html[data-rtheme] #statusbar .v6-notif-bell:hover { background: var(--r-well) !important; }
html[data-rtheme] #statusbar .v6-notif-bell svg { fill: var(--r-body) !important; }
html[data-rtheme] #statusbar .v6-role-chip {
  background: var(--r-mint-surface) !important; color: var(--r-mint-ink) !important; border: 0 !important;
  font-family: var(--r-font-mono) !important; letter-spacing: .04em !important;
}
html[data-rtheme] #statusbar .v7-new-btn {
  background: var(--r-primary) !important; color: var(--r-primary-ink) !important; border: 0 !important;
  border-radius: var(--r-radius-control, 10px) !important; font-family: var(--r-font-body) !important; font-weight: 600 !important;
}
html[data-rtheme] #statusbar .v7-new-btn:hover { filter: brightness(1.05) !important; }
html[data-rtheme] #statusbar .v7-new-btn svg { stroke: var(--r-primary-ink) !important; }
html[data-rtheme] #statusbar .v6-ask-atlas-btn {
  background: var(--r-surface) !important; color: var(--r-primary) !important;
  border: 1px solid var(--r-primary) !important; border-radius: var(--r-radius-control, 10px) !important;
  font-family: var(--r-font-body) !important; font-weight: 600 !important;
}
html[data-rtheme] #statusbar .v6-ask-atlas-btn:hover { background: var(--r-mint-surface) !important; }
html[data-rtheme] #statusbar .v6-ask-atlas-btn svg { stroke: var(--r-primary) !important; }
html[data-rtheme] #statusbar .v7-new-menu {
  background: var(--r-surface) !important; border: 1px solid var(--r-border) !important; box-shadow: var(--r-shadow-pop) !important;
}
html[data-rtheme] #statusbar .v7-new-opt { color: var(--r-body) !important; }
html[data-rtheme] #statusbar .v7-new-opt:hover { background: var(--r-well) !important; color: var(--r-ink) !important; }

/* ───────────────────────── VOICE DOCK (re-theme only; behavior preserved) ─────── */
html[data-rtheme] #hint-bar.quick-bar {
  background: var(--r-surface) !important;
  border-top: 1px solid var(--r-border) !important;
}
html[data-rtheme] #hint-bar .dock-transcript { color: var(--r-body) !important; font-family: var(--r-font-body) !important; }
html[data-rtheme] #hint-bar .vd-status-bar,
html[data-rtheme] #hint-bar .mic-state-text,
html[data-rtheme] #hint-bar #mic-state-text { color: var(--r-muted) !important; font-family: var(--r-font-mono) !important; }
html[data-rtheme] #hint-bar .toggle { color: var(--r-muted) !important; border-color: var(--r-border) !important; }
html[data-rtheme] #hint-bar .toggle .swatch { background: var(--r-faint) !important; }
/* orb core uses theme primary (evergreen in Calm, azure in Operator) */
html[data-rtheme] #orb {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--r-primary) 70%, white), var(--r-primary)) !important;
}
html[data-rtheme] .orb-wrap .orb-ring { border-color: color-mix(in srgb, var(--r-primary) 40%, transparent) !important; }

/* selection + focus (shared) */
html[data-rtheme] ::selection { background: var(--r-select) !important; }
html[data-rtheme] :focus-visible { outline: var(--r-focus) !important; outline-offset: 2px !important; }

/* ============================================================================
   Calm/Operator segmented toggle (mounted by js/redesign/theme-toggle.js)
   ========================================================================== */
.rd-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-radius-pill, 20px);
  background: var(--r-well, #F2EFE6);
  border: 1px solid var(--r-border, #E6E0D3);
  font-family: var(--r-font-mono, "JetBrains Mono", monospace);
}
.rd-theme-toggle .rd-tt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 0; border-radius: var(--r-radius-pill, 20px);
  background: transparent; color: var(--r-muted, #6A6458);
  font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer;
  transition: background var(--r-dur, .14s) var(--r-ease), color var(--r-dur, .14s) var(--r-ease);
}
.rd-theme-toggle .rd-tt-btn i { font-size: 14px; }
.rd-theme-toggle .rd-tt-btn span { font-weight: 600; }
.rd-theme-toggle .rd-tt-btn:hover { color: var(--r-ink, #211F1A); }
.rd-theme-toggle .rd-tt-btn.is-on {
  background: var(--r-surface, #FFFFFF); color: var(--r-primary, #2F5D50);
  box-shadow: var(--r-shadow-card, 0 1px 2px rgba(40,33,20,.04));
}
.rd-theme-toggle .rd-tt-btn:focus-visible { outline: var(--r-focus, 2px solid rgba(92,157,255,.55)); outline-offset: 2px; }
html[data-rtheme="operator"] .rd-theme-toggle { background: var(--r-surface, #14171C); border-color: var(--r-border, rgba(255,255,255,.08)); }
html[data-rtheme="operator"] .rd-theme-toggle .rd-tt-btn.is-on { background: var(--r-surface-2, #161A20); color: var(--r-primary, #5C9DFF); }