/* ═══════════════════════════════════════════════════════════════════════════════
   BRICK BY BRICK — Global Chrome v1.0
   Additive stylesheet extending components.css
   Implements ADS v1.0 Part A2 — 7 sidebar variants + 2 top bar variants
   Created: 2026-04-20

   HOW TO USE:
   1. Include AFTER components.css in the stylesheet chain
   2. New classes are prefixed .bxb-chrome-* to avoid collision with deployed
      .sidebar and .nav-bar classes.
   3. Variants switched via data attribute on the sidebar element:
        <aside class="bxb-chrome-sidebar" data-variant="pre-build">...
        <aside class="bxb-chrome-sidebar" data-variant="in-build-4a">...
        etc.

   7 SIDEBAR VARIANTS:
     1. pre-build          Setup phases (Readiness → Source Review)
     2. in-build-4a        Phase 4a — dimension dots, view-only
     3. in-build-4b        Phase 4b — Temporal Memory progress list
     4. processing         Phases 5-9 — processing progress list
     5. home               Delivered / Update Hub / My Account
     6. scope-assessment   Purple-accented for $59 diagnostic flow
     7. error              Error / Unpaid / Reauth — color-coded phase block

   2 TOP BAR VARIANTS:
     A. in-build-header    Dimension header strip (Phase 4a Build Session)
     B. none               No top bar (default — content extends to top)
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────────
   SHARED SIDEBAR BASE — all 7 variants inherit this
   ─────────────────────────────────────────────────────────────────────────────── */

.bxb-chrome-sidebar {
  width: 200px;
  background: var(--forest-deep);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--font-ui);
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.bxb-chrome-brand {
  color: var(--stone-light);
  font-family: var(--font-display);
  font-weight: 700;
  /* WO-SHARED-CHROME-TYPOGRAPHY — enlarge the brand mark app-wide (was 14px). Target
     was var(--fs-xl) 24px, but "Brick-by-Brick" (Playfair) wraps in the 200px rail at
     24px; var(--fs-lg) 18px is the prominent one-line size. Bump to 24px only if the
     rail is widened or a two-line brand is accepted (Scott's eyeball call on deploy). */
  font-size: var(--fs-lg);
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.bxb-chrome-brand .ai {
  color: var(--teal);
  font-weight: 400;
}

/* ─── Phase block — the current status indicator ────────────────────────────── */

.bxb-chrome-phase-block {
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: all var(--ease);
}

.bxb-chrome-phase-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.bxb-chrome-phase-name {
  color: var(--stone-light);
  font-family: var(--font-display);
  /* WO-SHARED-SETUP-RAIL-TYPOGRAPHY — the current-phase title ("Setup" / "Dashboard" /
     "Update Hub") reads as prominent, up from 13px, consistent with the 16px step names +
     nav items (also corrects the nav rails, where the title sat below the 16px items).
     The eyebrow (.bxb-chrome-phase-label, 9px) stays subordinate — not enlarged. */
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
}

/* ─── Nav section base (used by Variants 5, 6, 7) ───────────────────────────── */

.bxb-chrome-nav-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bxb-chrome-nav-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(138, 154, 138, 1);  /* Stone-muted green */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.bxb-chrome-nav-item {
  /* WO-SHARED-CHROME-TYPOGRAPHY — rail nav items are the app's MAJOR wayfinding
     categories on every surface; 12px/0.55-opacity read as minor rows. Restore to
     16px / emphasis weight / full cream (promoted from the 4a dashboard-scoped
     override to the shared chrome — applies to all nav-destination rails: c18/c20/
     c21/c22 + the marketing welcome). Setup rails c4-c9/c19 use .bxb-chrome-step,
     which is unaffected. Active item stays distinct via teal + dot + background below. */
  font-size: var(--fs-md);
  font-weight: var(--fw-emphasis);
  color: var(--cream);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color var(--ease);
}
.bxb-chrome-nav-item:hover {
  color: var(--cream);
}
.bxb-chrome-nav-item.active {
  color: var(--teal);
  background: rgba(78, 235, 194, 0.08);
  font-weight: 600;
}
.bxb-chrome-nav-item.active::before {
  content: "●";
  font-size: 7px;
}
.bxb-chrome-nav-item.disabled {
  color: rgba(245, 239, 227, 0.28);
  cursor: not-allowed;
}

/* ─── Steps list (Variants 1, 6) ───────────────────────────────────────────── */

.bxb-chrome-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bxb-chrome-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.bxb-chrome-step-number {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: rgba(245, 239, 227, 0.12);
  color: rgba(245, 239, 227, 0.6);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bxb-chrome-step.completed .bxb-chrome-step-number {
  background: var(--green-success);
  color: var(--cream);
}
.bxb-chrome-step.completed .bxb-chrome-step-number::before { content: "✓"; }
.bxb-chrome-step.completed .bxb-chrome-step-number-num { display: none; }

.bxb-chrome-step.active .bxb-chrome-step-number {
  background: var(--teal);
  color: var(--forest-deep);
}

.bxb-chrome-step-label {
  /* WO-SHARED-SETUP-RAIL-TYPOGRAPHY — step names are this rail's MAJOR categories;
     11px read as tiny. Raise to 16px to match the nav-destination rails. Weight/opacity
     unchanged here so NOT-YET-REACHED steps keep their dimmed (0.65, normal-weight)
     progress treatment — only the base size grows. */
  font-size: var(--fs-md);
  color: rgba(245, 239, 227, 0.65);
  flex: 1;
}
.bxb-chrome-step.active .bxb-chrome-step-label {
  /* Active/current step → full cream + emphasis, matching the nav-destination active
     item; distinct from the dimmed upcoming steps (progress state preserved). */
  color: var(--cream);
  font-weight: var(--fw-emphasis);
}

/* ─── Dimension dots list (Variant 2 — Phase 4a) ───────────────────────────── */

.bxb-chrome-dimensions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bxb-chrome-dim-dot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: default;         /* view-only per P0-4 */
}

.bxb-chrome-dim-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(245, 239, 227, 0.18);
  flex-shrink: 0;
  transition: background var(--ease);
}

.bxb-chrome-dim-dot-row.completed .bxb-chrome-dim-dot {
  background: var(--green-success);
}

.bxb-chrome-dim-dot-row.active .bxb-chrome-dim-dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(78, 235, 194, 0.18);
}

.bxb-chrome-dim-code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(245, 239, 227, 0.55);
  font-weight: 600;
}
.bxb-chrome-dim-dot-row.active .bxb-chrome-dim-code {
  color: var(--teal);
}
.bxb-chrome-dim-dot-row.completed .bxb-chrome-dim-code {
  color: rgba(245, 239, 227, 0.85);
}

/* ─── Session footer — shared across all variants ─────────────────────────── */

.bxb-chrome-session-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 239, 227, 0.08);
  font-size: 10px;
  color: rgba(245, 239, 227, 0.5);
  line-height: 1.4;
  flex-shrink: 0;
}

.bxb-chrome-session-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(245, 239, 227, 0.7);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 1 — Pre-Build (Setup phases)
   Teal-accented phase block, 5-step progress list
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="pre-build"] .bxb-chrome-phase-block {
  background: rgba(78, 235, 194, 0.08);
  border: 1px solid rgba(78, 235, 194, 0.25);
}

.bxb-chrome-sidebar[data-variant="pre-build"] .bxb-chrome-phase-label {
  color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 2 — In-Build Phase 4a
   Teal phase block + 11 dimension dots (view-only)
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="in-build-4a"] .bxb-chrome-phase-block {
  background: rgba(78, 235, 194, 0.08);
  border: 1px solid rgba(78, 235, 194, 0.25);
}

.bxb-chrome-sidebar[data-variant="in-build-4a"] .bxb-chrome-phase-label {
  color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 3 — In-Build Phase 4b
   Teal phase block + build progress list (4a done, 4b current)
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="in-build-4b"] .bxb-chrome-phase-block {
  background: rgba(78, 235, 194, 0.08);
  border: 1px solid rgba(78, 235, 194, 0.25);
}

.bxb-chrome-sidebar[data-variant="in-build-4b"] .bxb-chrome-phase-label {
  color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 4 — Processing (Phases 5-9)
   Teal phase block + processing progress
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="processing"] .bxb-chrome-phase-block {
  background: rgba(78, 235, 194, 0.08);
  border: 1px solid rgba(78, 235, 194, 0.25);
}

.bxb-chrome-sidebar[data-variant="processing"] .bxb-chrome-phase-label {
  color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 5 — Home (Delivered / Update Hub / My Account)
   Teal phase block + Update Hub/My Account nav
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="home"] .bxb-chrome-phase-block {
  background: rgba(78, 235, 194, 0.08);
  border: 1px solid rgba(78, 235, 194, 0.25);
}

.bxb-chrome-sidebar[data-variant="home"] .bxb-chrome-phase-label {
  color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 6 — Scope Assessment
   PURPLE-accented phase block (distinguishes diagnostic flow from main Build)
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="scope-assessment"] .bxb-chrome-phase-block {
  background: rgba(127, 119, 221, 0.12);
  border: 1px solid rgba(127, 119, 221, 0.40);
}

.bxb-chrome-sidebar[data-variant="scope-assessment"] .bxb-chrome-phase-label {
  color: var(--purple-accent);
}

/* Purple-accent step indicators for assessment step list */
.bxb-chrome-sidebar[data-variant="scope-assessment"] .bxb-chrome-step.active .bxb-chrome-step-number {
  background: var(--purple-accent);
  color: var(--cream);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   VARIANT 7 — Error / Unpaid / Reauth
   Color-coded by severity. Use sub-variant data attribute.

   2026-05-20 — Path 1.5 Stream 3 (canonical wins for chrome colors):
     - recoverable     → bronze (unchanged)
     - unrecoverable   → canonical's error-red #B23A3A (was deployed red-halt #B85c44)
     - chargeback      → canonical's error-red #B23A3A (same family as unrecoverable)
     - webhook-pending → purple-accent #7F77DD (unchanged)
     - purchase-failed → canonical's amber #B5860D (was deployed bronze)
     - neutral         → UNCHANGED (used for c23 404 not-found pattern)
     - maintenance     → NEW: purple-accent matching webhook-pending family
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-sidebar[data-variant="error"][data-severity="recoverable"] .bxb-chrome-phase-block {
  background: rgba(181, 125, 67, 0.12);
  border: 1px solid rgba(181, 125, 67, 0.40);
}
.bxb-chrome-sidebar[data-variant="error"][data-severity="recoverable"] .bxb-chrome-phase-label {
  color: var(--bronze);
}

.bxb-chrome-sidebar[data-variant="error"][data-severity="unrecoverable"] .bxb-chrome-phase-block,
.bxb-chrome-sidebar[data-variant="error"][data-severity="chargeback"] .bxb-chrome-phase-block {
  background: rgba(178, 58, 58, 0.12);   /* canonical-wins 2026-05-20 (was rgba(184,92,68,0.12)) */
  border: 1px solid rgba(178, 58, 58, 0.40);
}
.bxb-chrome-sidebar[data-variant="error"][data-severity="unrecoverable"] .bxb-chrome-phase-label,
.bxb-chrome-sidebar[data-variant="error"][data-severity="chargeback"] .bxb-chrome-phase-label {
  color: var(--error);   /* canonical-wins 2026-05-20 (was var(--red-halt)) */
}

.bxb-chrome-sidebar[data-variant="error"][data-severity="webhook-pending"] .bxb-chrome-phase-block,
.bxb-chrome-sidebar[data-variant="error"][data-severity="maintenance"] .bxb-chrome-phase-block {
  background: rgba(127, 119, 221, 0.12);
  border: 1px solid rgba(127, 119, 221, 0.40);
}
.bxb-chrome-sidebar[data-variant="error"][data-severity="webhook-pending"] .bxb-chrome-phase-label,
.bxb-chrome-sidebar[data-variant="error"][data-severity="maintenance"] .bxb-chrome-phase-label {
  color: var(--purple-accent);
}

.bxb-chrome-sidebar[data-variant="error"][data-severity="purchase-failed"] .bxb-chrome-phase-block {
  background: rgba(212, 160, 23, 0.12);   /* canonical-wins 2026-05-20 amber (was rgba(181,125,67,0.12) bronze) */
  border: 1px solid rgba(212, 160, 23, 0.40);
}
.bxb-chrome-sidebar[data-variant="error"][data-severity="purchase-failed"] .bxb-chrome-phase-label {
  color: var(--amber-strong);   /* canonical-wins 2026-05-20 (was var(--bronze)) */
}

.bxb-chrome-sidebar[data-variant="error"][data-severity="neutral"] .bxb-chrome-phase-block {
  background: rgba(26, 58, 42, 0.08);
  border: 1px solid rgba(26, 58, 42, 0.30);
}
.bxb-chrome-sidebar[data-variant="error"][data-severity="neutral"] .bxb-chrome-phase-label {
  color: rgba(138, 154, 138, 1);
}

/* Pulsing phase-name dot — appears on webhook-pending + maintenance only.
   Imported from canonical c17/c18 decoration; promoted to chrome per Path 1.5
   architect ratification. Scoped to severity (does NOT affect other variants). */
.bxb-chrome-sidebar[data-variant="error"][data-severity="webhook-pending"] .bxb-chrome-phase-name,
.bxb-chrome-sidebar[data-variant="error"][data-severity="maintenance"] .bxb-chrome-phase-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bxb-chrome-sidebar[data-variant="error"][data-severity="webhook-pending"] .bxb-chrome-phase-name::before,
.bxb-chrome-sidebar[data-variant="error"][data-severity="maintenance"] .bxb-chrome-phase-name::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple-accent);
  animation: bxb-chrome-pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bxb-chrome-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.85); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   ORPHAN-DECLARATIONS CLEANUP (Design-WO-3 Phase B1-E, 2026-05-16)
   168 LoC removed: TOP BAR VARIANT A + Category Breadcrumb Strip sections
   (21 selectors: .bxb-chrome-topbar* + .bxb-chrome-category-chip* + container).
   Empirical recon (Design-WO-3 B1-A Dim 4) confirmed zero consumption across
   all production HTML + JS files. Production C10 uses .c10-* scoped classes;
   future surfaces that need topbar/breadcrumb styling should re-derive from
   design-canon/ canonical sources rather than reviving orphan declarations.
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   APP SHELL — Two-column grid (sidebar + main content)
   Replaces deployed ad-hoc layout with canonical grid.
   ═══════════════════════════════════════════════════════════════════════════════ */

.bxb-chrome-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
  background: var(--stone-light);
}

.bxb-chrome-main {
  background: var(--stone-light);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Mobile fallback — stack sidebar below main. 
   ADS v1.0 C5 item 4 restricts desktop/laptop only. Mobile is a
   courtesy view, not a supported work environment. */
@media (max-width: 768px) {
  .bxb-chrome-shell {
    grid-template-columns: 1fr;
  }
  .bxb-chrome-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    order: 2;
  }
  .bxb-chrome-main {
    order: 1;
  }
}