/* ============================================================
   ATLAS V6 — T2 Pipeline elevation  ·  2026-06-29
   Surface: Pipeline page (data-view="pipeline" — the deal kanban board).
   Loads LAST (after v6-pipeline.css + v6-pipeline-aug.css, before v6-lock.css),
   so ID-scoped single-class specificity wins over the base v6 rules.

   ADDITIVE ONLY. No index.html / JS / other-CSS edits. Token-driven (values
   from css/v6-tokens.css); no new hardcoded colors except the established
   per-stage vocabulary already used by the stage chips. Single-gold accent;
   no cyan / neon / dark-mode rules. Voice + routing IDs untouched.

   Defects fixed (from the baseline screenshot):
     1. Tall hollow empty columns → centered, intentional "ready" empty state +
        refined column headers / count chips + per-stage lane accent.
     2. Raw error string ("Active leads unavailable — HTTP 404…") → calm,
        warm-neutral inline notice (NOT alarming red), graceful degradation.
     3. 6 columns + Deal-Focus sidebar overflow 1920 (horizontal scrollbar) →
        fluid columns that fit the track; any overflow is contained, not body.
     4. Em-dash Deal-Focus cards → premium value hierarchy + gold accent rule +
        calm button hover / gold focus-visible.
     5. Stage chips refined (count badge, hover, focus); active sub-nav tab gets
        a light pipeline-scoped ring (sub-nav is shared chrome — kept scoped).

   DATA INTEGRITY: no fabricated counts/values. Empty board reads as an honest,
   intentional empty state; missing values stay em-dash. Counts/names come from
   the live fetchers, never from CSS.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── No body scroll: keep the board fluid so 6 columns + sidebar fit 1920 ──
   minmax(0,1fr) lets the kanban track shrink instead of forcing horizontal
   body overflow; the inner .v6-kanban-scroll keeps its own contained scroll
   as the only fallback. (Defect 3) */
#view-pipeline .v6-pipe-main {
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 14px;
}

#view-pipeline .v6-kanban-scroll,
#v6-kanban-board {
  gap: 10px;
}

/* Columns become fluid: they share the track equally and never push the body
   into horizontal scroll. min-width keeps a card readable; below that the
   .v6-kanban-scroll container (overflow-x:auto) scrolls internally — never the
   page. Scoped to #v6-kanban-board so the separate #crm-kanban is untouched. */
#v6-kanban-board .v6-kanban-col {
  flex: 1 1 0;
  min-width: 176px;
  width: auto;
  box-sizing: border-box;
  background: var(--surface-3, #f0eee8);
  border: 1px solid var(--line, #d7d0c3);
  border-top-width: 2px;
  border-radius: var(--radius, 8px);
}

/* Per-stage lane accent — a thin top rule that ties each column to its stage
   chip. Muted so gold stays the dominant accent. Uses tokens where they exist
   (blue/gold/teal/good/bad); Lead keeps the established stage-chip purple. */
#v6-kanban-board .v6-kanban-col:nth-child(1) { border-top-color: #8b63bf; }            /* Lead          */
#v6-kanban-board .v6-kanban-col:nth-child(2) { border-top-color: var(--blue, #2f66c3); } /* Qualified    */
#v6-kanban-board .v6-kanban-col:nth-child(3) { border-top-color: var(--gold, #c18a25); } /* Showing      */
#v6-kanban-board .v6-kanban-col:nth-child(4) { border-top-color: var(--teal, #0f857c); } /* Under Contract */
#v6-kanban-board .v6-kanban-col:nth-child(5) { border-top-color: var(--good, #2e8b57); } /* Closed Won   */
#v6-kanban-board .v6-kanban-col:nth-child(6) { border-top-color: var(--bad, #ca3f6b); }  /* Closed Lost  */

/* Refined column header: uppercase tracked label + clean paper count pill,
   divider hairline below. (Defect 1) */
#v6-kanban-board .v6-kanban-col-head {
  padding: 11px 13px;
  font: 800 11.5px/1 var(--font-ui, Inter);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #647184);
  border-bottom: 1px solid var(--line, #d7d0c3);
}
#v6-kanban-board .v6-kanban-col-head .col-count {
  font: 800 11px/1 var(--font-mono, "Cascadia Mono", monospace);
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  color: var(--muted, #647184);
  min-width: 22px;
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  text-align: center;
}

/* ── Premium empty state (Defect 1) ───────────────────────────────────────
   A single "No deals" child is vertically + horizontally centered (margin:auto
   inside the flex column) and dressed as a calm dashed placeholder card with a
   soft glyph — so an empty/demo board reads as intentional & ready, not broken. */
#view-pipeline .v6-kanban-empty {
  margin: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 22px 12px;
  border: 1px dashed var(--line-strong, #c4b9a8);
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 253, 248, .45);
  color: var(--faint, #8a95a3);
  font: 600 12px/1.4 var(--font-ui, Inter);
  text-align: center;
}
#view-pipeline .v6-kanban-empty::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1.5px dashed var(--line-strong, #c4b9a8);
  opacity: .85;
}

/* ── Calm degraded / loading / error notice (Defect 2) ─────────────────────
   The Lofty "Active Leads" panel renders error + loading + empty copy into
   .lofty-empty-wrap. Its base style is set by a RUNTIME-injected <style id=
   "lofty-leads-style"> at (1,1,0) specificity that also lands after this sheet
   in document order — so we use #view-pipeline #lofty-active-leads … (2,1,0)
   to win without !important. Recast as a warm-neutral pill with a gold "tick"
   (calm, never alarming red), so HTTP errors read as graceful degradation. */
#view-pipeline #lofty-active-leads .lofty-empty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 9px 14px;
  font: 500 13px/1.4 var(--font-ui, Inter);
  color: var(--muted, #647184);
  background: var(--surface-3, #f0eee8);
  border: 1px solid var(--line, #d7d0c3);
  border-left: 3px solid var(--warn, #c18a25);
  border-radius: var(--radius-sm, 6px);
}
#view-pipeline #lofty-active-leads .lofty-empty-wrap::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn, #c18a25);
}

/* "Active Leads · LOFTY · LIVE" source tag → a small champagne status pill,
   so the section header reads premium (ties the calm-notice treatment to a
   designed header rather than raw log text). Same (2,1,0) win as above. */
#view-pipeline #lofty-active-leads .lofty-src {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--champagne-soft, #fbecd0);
  color: var(--gold, #c18a25);
  font: 800 10px/1.4 var(--font-ui, Inter);
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Tighten the injected section's vertical rhythm a touch so the added panel
   never threatens the 1080 no-scroll frame. (2,0,0) beats the injected ID. */
#view-pipeline #lofty-active-leads {
  margin: 14px 0 16px;
}

/* ── Deal-Focus sidebar — premium cards (Defect 4) ─────────────────────────
   Flat enterprise elevation (subtle two-layer shadow, calm hover lift), a big
   value (works whether it's a name or an honest em-dash), small label with a
   tasteful gold accent rule, and refined buttons. */
#view-pipeline .v6-focus-panel {
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(29, 24, 14, .05), 0 1px 3px rgba(29, 24, 14, .08));
  padding: 16px 18px;
  transition: box-shadow .16s ease, transform .16s ease;
}
#view-pipeline .v6-focus-panel:hover {
  box-shadow: var(--shadow-card-hover, 0 6px 16px rgba(29, 24, 14, .10), 0 2px 6px rgba(29, 24, 14, .06));
  transform: translateY(-1px);
}
#view-pipeline .v6-focus-label {
  position: relative;
  padding-left: 12px;
  font: 800 11px/1.2 var(--font-ui, Inter);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #647184);
  margin-bottom: 8px;
}
#view-pipeline .v6-focus-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: 2px;
  background: var(--gold, #c18a25);
}
/* Big value — dominates the card; an em-dash here reads as an intentional
   "no data yet" placeholder, never a broken field. */
#view-pipeline .v6-focus-panel h4 {
  font: 850 22px/1.15 var(--font-display, "Aptos Display", Inter);
  letter-spacing: -.01em;
  color: var(--ink, #101722);
  margin: 8px 0 2px;
}

/* Sidebar CTAs — calm hover (background + shadow + border-COLOR only; width
   unchanged → no layout shift), gold focus-visible. */
#view-pipeline .v6-action-btn {
  margin-top: 12px;
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line-strong, #c4b9a8);
  color: var(--ink, #101722);
  padding: 9px 12px;
  border-radius: var(--radius-sm, 6px);
  font: 700 13px/1 var(--font-ui, Inter);
  transition: background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
#view-pipeline .v6-action-btn:hover {
  background: var(--bg2, #fbfaf7);
  border-color: var(--gold, #c18a25);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(29, 24, 14, .05), 0 1px 3px rgba(29, 24, 14, .08));
}
#view-pipeline .v6-action-btn:focus-visible {
  outline: 2px solid var(--gold, #c18a25);
  outline-offset: 2px;
}

/* ── Stage chips refinement (Defect 5) ─────────────────────────────────────
   Keep the established semantic stage palette; refine the count badge, add a
   calm lift on hover and a gold focus ring. Per-color bg/border from the base
   sheet are preserved (not overridden here). */
#view-pipeline .v6-stage-chip {
  height: 30px;
  padding: 0 7px 0 12px;
  gap: 8px;
  font: 700 12.5px/1 var(--font-ui, Inter);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(29, 24, 14, .05), 0 1px 3px rgba(29, 24, 14, .08));
  transition: box-shadow .14s ease, transform .14s ease;
}
#view-pipeline .v6-stage-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover, 0 6px 16px rgba(29, 24, 14, .10), 0 2px 6px rgba(29, 24, 14, .06));
}
#view-pipeline .v6-stage-chip:focus-visible {
  outline: 2px solid var(--gold, #c18a25);
  outline-offset: 2px;
}
#view-pipeline .v6-stage-chip .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 255, 255, .58);
  font: 800 11px/1 var(--font-mono, "Cascadia Mono", monospace);
}

/* Active sub-nav tab — pipeline-scoped only. The sub-nav (.v7-subnav) is shared
   chrome used by Transactions & CRM too, so this rule activates ONLY when the
   Pipeline view is the active surface (:has) and cannot bleed into others.
   Adds a faint gold ring on top of the existing champagne active pill. */
body:has([data-view="pipeline"].active) #v7-subnav .v7-subnav-tab.is-active {
  box-shadow: inset 0 0 0 1px rgba(193, 138, 37, .32);
}

/* ── Responsive guard: under ~1100px stack the Deal-Focus sidebar below the
   board so nothing clips (desktop demo is 1920, but keep it honest). ─────── */
@media (max-width: 1100px) {
  #view-pipeline .v6-pipe-main {
    grid-template-columns: minmax(0, 1fr);
  }
  #view-pipeline .v6-dual-focus {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #view-pipeline .v6-dual-focus .v6-focus-panel {
    flex: 1 1 220px;
  }
}

/* Respect reduced-motion — gate every transform/transition added above. */
@media (prefers-reduced-motion: reduce) {
  #view-pipeline .v6-focus-panel,
  #view-pipeline .v6-focus-panel:hover,
  #view-pipeline .v6-action-btn,
  #view-pipeline .v6-stage-chip,
  #view-pipeline .v6-stage-chip:hover {
    transition: none;
    transform: none;
  }
}