/* ═══════════════════════════════════════════════════════════════
   AgencyOS — Project Workspace
   Premium Dark SaaS · Linear + Vercel + GitHub Actions
   ═══════════════════════════════════════════════════════════════ */

/* Design System Consolidation Sprint, Phase 1 — every `font-weight: 450
   /550/650/750` in this file was rounded to its nearest standard value
   (400/500/600/700 respectively) throughout. These were non-standard,
   ad hoc "a bit bolder/lighter" nudges found during the Typography &
   Readability investigation — visually near-identical to their nearest
   standard neighbor, now consistent with the rest of the file's weight
   usage instead of a fifth/sixth/seventh distinct weight value. */

/* ── DESIGN TOKENS ── */
:root {
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239a9a9f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Core */
  /* Dark Theme Final Flat Theme — a deliberate final design decision to
     drop surface hierarchy entirely for dark: every background surface
     token (base/elevated/hover/overlay/modal/active) now resolves to the
     same #080808. Visual separation between canvas, chrome, cards, and
     floating layers comes entirely from the existing --border-* tokens
     and spacing, not from background brightness steps. Selectors and
     interaction logic (hover/active/focus) are unchanged — only what
     color those states render at.  Light theme is untouched; its
     multi-level surface hierarchy remains exactly as it was. */
  --bg-base:       #080808;
  --bg-elevated:   #080808;
  --bg-hover:      #080808;
  --bg-overlay:    #080808;
  --bg-modal:      #080808;
  --bg-active:     #080808;

  /* Borders */
  --border-subtle: rgba(255,255,255,0.06);
  --border-muted:  rgba(255,255,255,0.09);
  --border-accent: rgba(255,255,255,0.14);
  /* Text */
  /* Dark Theme Final Flat Theme — text tokens unchanged; every background
     surface now resolves to the same #080808, so there's a single
     contrast case to check (--text-muted: ~6.73:1 vs #080808 — clears
     WCAG AA 4.5:1 with wide margin). */
  --text-primary:   #e8e8e8;
  --text-secondary: #9a9a9f;
  --text-muted:     #95959c;
  --text-faint:     #30363d;

  /* Accents */
  --cyan:       #00d4ff;
  --cyan-dim:   rgba(0, 212, 255, 0.12);
  --cyan-glow:  rgba(0, 212, 255, 0.25);
  --green:      #3fb950;
  --green-dim:  rgba(63, 185, 80, 0.12);
  --amber:      #d29922;
  --amber-dim:  rgba(210, 153, 34, 0.12);
  --red:        #f85149;
  --red-dim:    rgba(248, 81, 73, 0.12);
  /* UI/UX Consistency Sprint 1, item 9 — was self-referential
     (`--purple: var(--purple);`, invalid, computed to nothing) before this
     fix. Set to match its own --purple-dim/--purple-glow siblings below
     (both already rgba(139, 92, 246, ...)) rather than an invented value. */
  --purple:     #8b5cf6;

  /* Sidebar */
  --sidebar-w:  220px;
  --right-w:    290px;
  --header-h:   52px;
  /* Sprint 1.4 — the workspace header grew a second row (identity row +
     pipeline row) for the redesigned hierarchy. A distinct variable, not a
     new value for --header-h itself, since --header-h is also used by the
     unrelated .right-panel-header, which must not change size. */
  --ws-header-h: 88px;
  --tabs-h:     44px;

  /* Type */
  --font-ui:   'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radius */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Transitions */
  --t-fast: 120ms ease;
  --t-mid:  150ms ease;
  --t-med:  200ms ease;

  /* Easing curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── MISSING TOKEN ALIASES ── */
  /* These map undefined references to canonical tokens.           */
  /* Adding here (not changing call sites) is the zero-risk fix.  */
  /* UI/UX Consistency Sprint 1, item 9 — --border used to also be declared
     earlier in this file (Sprint 9.5.42, aliased to --border-subtle); that
     duplicate silently lost the cascade to this one and has been removed
     rather than left as dead, contradictory documentation. This is the
     value that has actually been rendering all along — unchanged here. */
  --border:         var(--border-muted);
  --border-default: var(--border-muted);
  --border-strong:  var(--border-accent);
  --surface-1:      var(--bg-elevated);
  --surface-2:      var(--bg-overlay);
  --surface-3:      var(--bg-overlay);
  --bg-secondary:   var(--bg-elevated);
  --bg-tertiary:    var(--bg-hover);
  --text:           var(--text-primary);
  --muted:          var(--text-muted);

  /* Purple — missing dim/glow variants (cyan/green/amber/red all had them) */
  --purple-dim:  rgba(139, 92, 246, 0.12);
  --purple-glow: rgba(139, 92, 246, 0.25);

  /* ── DESIGN TOKENS — Sprint 1.7 (Release Candidate Architecture),
     Blocking Issue 5. Only genuinely NEW scales are added here — radius
     (--r-*), transitions (--t-*), color, background, and text scales
     already existed above and are reused as-is, not duplicated under a
     second naming scheme. Applied this sprint to the new shared Page
     Layout (below) and the New Project Wizard; a full retroactive
     token-migration of every pre-existing component in Homepage/Pages/QA/
     Convert/Deliver was NOT undertaken (out of proportion for one sprint,
     and higher-risk than this sprint's "no functionality change" instruction
     allows for those explicitly-protected screens) — see the sprint report's
     own "Remaining blockers" section. */

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Shadow scale — consolidates the ad-hoc box-shadow values already
     scattered across this file (0 1px 4px / 0 2px 8px / 0 4px 14px / 0 8px
     24px / 0 32px 80px were all already in real use; named here rather
     than inventing new values) */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 32px 80px rgba(0,0,0,0.55);

  /* Control heights (buttons/inputs) and icon sizes */
  --control-h-sm: 28px;
  --control-h-md: 34px;
  --control-h-lg: 40px;
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 22px;

  /* Card / page padding */
  --card-padding: var(--space-4);
  --page-padding-x: var(--space-8);
  --page-header-padding-y: var(--space-6);
  --page-toolbar-padding-y: var(--space-5);
  --page-content-padding-y: var(--space-6);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  /* Simplified Premium Surface System — the exact opposite philosophy from
     dark, same two-family structure. --bg-base is the canvas (body only,
     pure white, nothing else may use it). --bg-elevated is the ONE shared
     surface for every interactive container — sidebar, header, right
     panel, cards, panels, tables, previews, everything. Light Theme Final
     Flat Theme — final design decision: light theme drops surface
     hierarchy entirely, same as dark. --bg-base/--bg-elevated/--bg-overlay/
     --bg-modal all now resolve to the same #F8F8FF; visual separation
     comes from the existing --border-* tokens and spacing, not background
     brightness steps. --bg-hover/--bg-active are deliberately left
     UNCHANGED per this sprint's explicit instruction ("hover and active
     states should remain exactly as they are") — they still dim down from
     the shared surface exactly as before. Ordering/contrast verified via
     WCAG relative luminance/contrast math. */
  --bg-base:       #f8f8ff;
  --bg-elevated:   #f8f8ff;
  --bg-hover:      #f2f2f2;
  --bg-overlay:    #f8f8ff;
  --bg-modal:      #f8f8ff;
  --bg-active:     #ececec;

  --border-subtle: rgba(0,0,0,0.07);
  --border-muted:  rgba(0,0,0,0.10);
  --border-accent: rgba(0,0,0,0.16);

  /* Simplified Premium Surface System — text tokens unchanged; still clear
     WCAG AA 4.5:1 with wide margin against every surface in the collapsed
     scale (--text-muted: ~5.78:1 vs --bg-active, the darkest/tightest
     surface in this light scale). */
  --text-primary:   #0a0a0c;
  --text-secondary: #3a3a40;
  --text-muted:     #5a5a62;
  --text-faint:     #9ca3af;

  --cyan-dim:   rgba(0,180,220,0.10);
  --cyan-glow:  rgba(0,180,220,0.22);
  --green-dim:  rgba(34,160,74,0.10);
  --amber-dim:  rgba(180,120,10,0.10);
  --red-dim:    rgba(220,60,50,0.10);
  --purple-dim: rgba(139, 92, 246, 0.08);
  --purple-glow:rgba(139, 92, 246, 0.18);
}

/* Light mode overrides that can't be handled by variables alone */
[data-theme="light"] body::before {
  background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
}
[data-theme="light"] .terminal-window,
[data-theme="light"] .terminal-body {
  background: #1a1f2e;
}
[data-theme="light"] .pmb-page { background: #f8fafc; }
[data-theme="light"] .convert-select,
[data-theme="light"] .model-select,
[data-theme="light"] select.nd-input {
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666e7a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text-primary);
}

/* Active tab — light mode: bg-base (#f4f5f7) matches content area exactly,
   so the active tab becomes invisible. Override with pure white to lift it. */
[data-theme="light"] .tab-btn.active {
  background: #ffffff;
  border-color: var(--border-accent);
  border-bottom-color: #ffffff;
}
[data-theme="light"] .tab-btn.active::after {
  background: #ffffff;
}

/* Modal shadows — dark-mode values are too heavy on light backgrounds */
[data-theme="light"] .modal {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
}
[data-theme="light"] .modal-backdrop {
  background: rgba(0,0,0,0.3);
}
[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,0.3);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 13px; }
body {
  height: 100%;
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Dot grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; cursor: pointer; }
select { font-family: var(--font-ui); }

/* ── GLOBAL FOCUS RING ── */
/* Single canonical focus treatment. Inputs use border-color on :focus instead
   (already defined per-component), so we suppress the outline for them here. */
*:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* ── GLOBAL INPUT FOCUS GLOW ── */
/* Pairs with per-component border-color: var(--cyan) on :focus.
   The box-shadow adds a soft outer glow without changing layout. */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px var(--cyan-dim);
}

/* ═══════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   LEFT SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100%;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  flex: 1;
}
.brand-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  letter-spacing: 0.3px;
}

/* Sprint 1.4 (Workspace & Projects Page Redesign) — the sidebar's
   "ACTIVE PROJECT" card (name/meta chips/progress bar) was removed along
   with the HTML that used it; the workspace header now owns project
   identity display (see .ws-project-* above). @keyframes pulseGlow is
   kept — it's shared by several other elements (runner-status-badge,
   tab-status-dot, activity-dot, etc.), not exclusive to the removed card. */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 6px var(--cyan-glow); }
  50% { box-shadow: 0 0 12px var(--cyan-glow), 0 0 20px rgba(0,212,255,0.1); }
}

/* Nav */
.sidebar-nav {
  padding: 8px 6px;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

.nav-section-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.8px;
  padding: 8px 8px 4px;
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  user-select: none;
  cursor: pointer;
  margin-bottom: 1px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); transform: translateX(1px); }
.nav-item.active:hover { transform: none; }
.nav-item.active {
  background: var(--bg-active);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
  border-left-color: rgba(0, 212, 255, 0.6);
}
.nav-icon { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; }
.nav-item span:not(.nav-badge) { flex: 1; }
.nav-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.nav-badge.cyan { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(0,212,255,0.2); }
.nav-badge.amber { background: var(--amber-dim); color: var(--amber); border-color: rgba(210,153,34,0.2); }
.nav-divider { height: 1px; background: var(--border-subtle); margin: 6px 8px; }

/* Sprint 1.4 — the sidebar's single-entry "RECENT PROJECTS" list (it only
   ever showed the one active project — the real Projects page is what
   shows every project now) was removed along with its HTML. */
.sidebar-new-project-btn {
  margin: 4px 10px 10px;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 10px 10px 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.engine-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.engine-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulseGreen 5s infinite;
  animation-delay: 1.2s;
}
@keyframes pulseGreen {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Claude Usage Sidebar (AGENCYOS_CLAUDE_USAGE_SIDEBAR_AND_LOGO_PROMPT_
   FIDELITY_TRACE, Part 1) — compact global left-sidebar widget, rendered by
   assets/js/claude-usage-sidebar.js from GET /api/claude-accounts/pool.
   Kept intentionally small/quiet: it lives in the same footer slot the
   previous static "Claude Engine — Active" stub occupied. ─────────────── */
.cus-widget {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
  min-width: 0;
}
.cus-muted { color: var(--text-muted); }
.cus-error {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cus-error-text { color: var(--text-muted); }
.cus-dot, .cus-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cus-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  min-width: 0;
}
.cus-summary-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}
.cus-summary-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cus-summary-meta {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cus-caret {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.cus-caret-open { transform: rotate(180deg); }
.cus-autoswitch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: var(--text-muted);
  cursor: default;
}
.cus-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}
.cus-account-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cus-account-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cus-account-label {
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.cus-account-state {
  font-size: 9.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.cus-account-detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 12px;
}
.cus-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  color: var(--text-muted);
}
.cus-detail-row span:first-child {
  flex-shrink: 0;
  opacity: 0.8;
}
.cus-detail-row span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.cus-detail-model { opacity: 0.85; }
.cus-detail-muted { opacity: 0.7; }
.cus-details-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}
.cus-refresh-btn {
  background: none;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 9.5px;
  padding: 3px 8px;
  cursor: pointer;
}
.cus-refresh-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-accent); }
.cus-refresh-btn:disabled { opacity: 0.6; cursor: default; }
.cus-refresh-error { color: var(--red); font-size: 9.5px; }
.cus-settings-link {
  color: var(--cyan);
  font-size: 9.5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.cus-settings-link:hover { text-decoration: underline; }

.sidebar-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.theme-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  color: var(--text-primary);
}
.user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b21b6, #00d4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN AREA
   ═══════════════════════════════════════════════════════════════ */
.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Surface Fix (dark + light) — .main-area is the workspace CANVAS
     wrapper (it sits behind the header/tabs/cards, not a floating panel
     itself), so it must stay --bg-base like body, not --bg-elevated, in
     both themes. A prior sprint incorrectly grouped it into the shared
     "everything interactive" surface, which made the whole workspace read
     as flat gray/off-white instead of a canvas with floating panels on
     top — fixed for dark first, then this light-theme sprint removed the
     interim override that had deliberately kept light on the old
     (incorrect) --bg-elevated value while dark was fixed in isolation. */
  background: var(--bg-base);
}

/* Workspace Header — redesigned Sprint 1.4 (Workspace & Projects Page
   Redesign) into two rows: an identity row (name/client/stack/phase, plus
   version/Runner status on the right) and the existing pipeline stepper
   below it, for clearer hierarchy than the original single dense row. */
.workspace-header {
  height: var(--ws-header-h);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.ws-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ws-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.ws-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ws-header-divider {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  flex-shrink: 0;
}
.ws-project-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}
.ws-project-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-project-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.ws-id-chip {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-id-phase {
  color: var(--cyan);
  font-weight: 500;
}
.ws-id-dot {
  color: var(--text-faint);
  flex-shrink: 0;
}
.ws-version-chip {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: 20px;
}

.breadcrumb-root { color: var(--text-muted); }
.breadcrumb-sep { width: 6px; height: 10px; color: var(--text-faint); }
/* .breadcrumb-current: Sprint 1.4 gives this element .ws-project-name as
   its real style (see above) — this class name is kept only because
   app.js's _renderProjectIdentityUI() still selects it by this name to
   write the project name text; no separate declaration is needed here. */
.ws-project-name.breadcrumb-current { color: var(--text-primary); }
.project-delivered-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(63,185,80,0.12);
  border: 1px solid rgba(63,185,80,0.35);
  color: var(--green);
  margin-left: 6px;
}

/* FRONTEND_F1 Sprint 2 — persistent Runner connectivity indicator.
   Written to exclusively by job-queue.js's _renderRunnerStatusBadge(). */
.runner-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}
.runner-status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.runner-status-badge.connecting { background: var(--amber-dim); border: 1px solid rgba(210,153,34,0.35); color: var(--amber); }
.runner-status-badge.connecting::before { animation: pulseGlow 1.2s infinite; }
.runner-status-badge.connected  { background: var(--green-dim); border: 1px solid rgba(63,185,80,0.35); color: var(--green); }
.runner-status-badge.offline    { background: var(--red-dim);  border: 1px solid rgba(248,81,73,0.35);  color: var(--red); }

/* Lane A Runtime + Workflow E2E Closure Corrective — a Runner running with
   FAKE_CLAUDE=true must be unmistakable in the always-visible status badge,
   never quietly indistinguishable from a real-Claude Runner. */
.runner-status-badge.runner-status-fake { background: var(--red-dim); border: 1px solid rgba(248,81,73,0.5); color: var(--red); font-weight: 700; }

/* FRONTEND_F1 Sprint 2 — a job that ran as a local simulation (Runner
   unavailable/mock fallback) must never look like a real Runner result. */
.job-mock-banner {
  font-size: 10px;
  font-weight: 600;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid rgba(210,153,34,0.35);
  border-radius: 4px;
  padding: 3px 6px;
  margin: 4px 0;
}

/* Pipeline */
/* ── Top Claude Usage Bar (AGENCYOS_TOP_CLAUDE_USAGE_BAR_LOCAL_TIME_AND_
   LOGO_FIDELITY_CORRECTIVE, Part 2) — occupies the exact same strip/row the
   removed pipeline stepper used (same flex:1/padding/min-height), rendered
   by assets/js/claude-usage-topbar.js from GET /api/claude-accounts/pool.
   Kept compact and operational, not a dashboard card. ─────────────────── */
.claude-usage-topbar {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  gap: 0;
  padding: 0 20px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.cut-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.cut-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cut-identity .cut-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cut-identity-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cut-meters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cut-meter {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.cut-meter-label {
  font-size: 9.5px;
  color: var(--text-muted);
  opacity: 0.8;
  min-width: 26px;
}
/* PROJECT_NAVIGATION_AND_CLAUDE_USAGE_FRESHNESS_CLOSURE — proportional
   progress bars. Root cause of "29% doesn't visually read as ~29% filled":
   the WIDTH was always already correct (_pctWidth() clamps to the real
   backend percentage and _meter() applies it as `style.width` — verified
   by existing fill-width tests), but the TRACK's own background
   (--border-muted, a ~9%-opacity white-on-dark overlay) was too faint to
   see against the page background, so the unfilled remainder was
   effectively invisible — a viewer could see the filled cyan sliver but
   had no visible track boundary to judge it against, making every
   percentage look like "a small blob" regardless of its real value. Fixed
   by giving the track its own clearly visible (but still subtle/compact)
   background + a hairline border for definition at any theme, and a real
   height a 0-100% fill can actually be perceived across. The fill itself
   gained a width transition — the "subtle animation when a new real
   percentage arrives" the mission asked for — never a substitute for the
   real backend value, which still drives the literal width on every
   render, immediately, from whichever surface (automatic or manual ↻)
   just refreshed it. */
.cut-meter-track {
  width: 46px;
  height: 6px;
  border-radius: 3px;
  /* --border-accent (0.14 opacity) as a FILL, not just a border edge — this
     theme is deliberately flat (every bg-* surface token resolves to the
     same #080808; see this file's own "Dark Theme Final Flat Theme"
     comment above) and relies on border-strength overlays for surface
     separation, so reusing its brightest existing border token as the
     track's own background is the correct, design-system-consistent way
     to make the unfilled remainder actually visible — real tokens only,
     nothing invented. */
  background: var(--border-accent);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  flex-shrink: 0;
}
.cut-meter-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 3px;
  background: var(--cyan);
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cut-meter-fill { transition: none; }
}
.cut-meter-pct {
  font-size: 10px;
  color: var(--text-secondary);
  min-width: 34px;
}
/* FINAL WORKSPACE RELIABILITY CORRECTIVE — Part 3: each meter carries its
   OWN reset (replaces the old single, ambiguous shared .cut-reset field
   that could show the wrong meter's reset time or hide Fable's entirely).
   Also exposed via the meter's own `title` tooltip so the information
   survives even where this text is hidden at narrower widths. */
.cut-meter-reset {
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}
.cut-state {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cut-state .cut-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cut-autoswitch {
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.cut-error {
  font-size: 11px;
  color: var(--text-muted);
}
/* PROJECT_NAVIGATION_AND_CLAUDE_USAGE_FRESHNESS_CLOSURE — the compact
   manual ↻ refresh button. Fixed square footprint at every state
   (idle/spinning/disabled) so it never causes a layout jump in the bar. */
.cut-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast, 0.15s), color var(--t-fast, 0.15s);
}
.cut-refresh-btn:hover:not(:disabled) {
  background: var(--border-muted);
  color: var(--text-secondary);
}
.cut-refresh-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
.cut-refresh-btn:disabled {
  cursor: default;
  opacity: 0.7;
}
.cut-refresh-btn.cut-refresh-spinning svg {
  animation: cut-refresh-spin 0.8s linear infinite;
}
@keyframes cut-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cut-refresh-btn.cut-refresh-spinning svg { animation: none; }
}
.cut-refresh-error {
  font-size: 11px;
  color: var(--amber, #d29922);
  flex-shrink: 0;
  cursor: default;
}

/* Responsive compaction (Part 7) — never disappears, never overflows, never
   overlaps the real workflow tab bar below it; meters/state stay, labels
   and reset text drop first as space shrinks. */
@media (max-width: 1400px) {
  .cut-meter-label { display: none; }
  .cut-meter-reset { display: none; }
}
@media (max-width: 1100px) {
  .cut-bar { gap: 8px; }
  .cut-meters { gap: 6px; }
  .cut-meter-track { width: 32px; }
  .cut-identity { max-width: 160px; }
  .cut-autoswitch { display: none; }
}
.pipeline-stage {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast), font-weight var(--t-fast);
}
.pipeline-stage.done { color: var(--green); }
.pipeline-stage.active {
  color: var(--cyan);
  font-weight: 600;
  background: rgba(0,212,255,0.07);
  border-radius: var(--r-md);
}
.stage-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pipeline-stage.active .stage-dot {
  width: 8px;
  height: 8px;
  animation: pulseGlow 1.5s infinite;
  animation-delay: 0.4s;
}
.pipeline-connector {
  width: 28px;
  height: 1px;
  background: var(--border-subtle);
}
.pipeline-connector.done { background: var(--green); opacity: 0.4; }

.workspace-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}

/* Action Buttons — Sprint 1.8: base height standardized onto the shared
   control-height scale (was implicit ~24px from padding alone). */
.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h-md);
  padding: 0 var(--space-3);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--t-fast);
  cursor: pointer;
  letter-spacing: -0.1px;
}
.action-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.action-btn.ghost {
  background: transparent;
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
}
.action-btn.ghost:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  color: var(--text-primary);
}
.action-btn.primary {
  background: var(--cyan);
  color: #0a0c10;
  font-weight: 600;
  border: 1px solid var(--cyan);
}
.action-btn.primary:hover {
  background: #33ddff;
  box-shadow: 0 0 16px rgba(0,212,255,0.35);
}
.action-btn.primary:active { transform: scale(0.97); }
.action-btn.ghost:active   { transform: scale(0.97); }
.action-btn.small { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 11.5px; }
.action-btn:disabled,
.action-btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* ── WORKSPACE TABS ── */
.workspace-tabs {
  height: var(--tabs-h);
  display: flex;
  align-items: flex-end;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 2px;
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
  letter-spacing: -0.1px;
}
.tab-btn svg { width: 13px; height: 13px; }
.tab-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
.tab-btn.active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-base);
  border-color: var(--border-muted);
  border-bottom-color: var(--bg-base);
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bg-base);
}
.tab-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}
.tab-status-dot.active { background: var(--cyan); animation: pulseGlow 1.5s infinite; animation-delay: 0.8s; }

/* ── TAB CONTENT ── */
.tab-content-area {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.tab-panel {
  display: none;
  height: 100%;
  overflow-y: auto;
}
.tab-panel.active { display: block; }
.tab-panel.active .tab-panel-inner { animation: tabFadeIn 0.18s ease both; }
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-panel::-webkit-scrollbar { width: 4px; }
.tab-panel::-webkit-scrollbar-track { background: transparent; }
.tab-panel::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: var(--r-xs); }
.tab-panel-inner {
  padding: var(--space-5) var(--space-5);
  max-width: 100%;
}

/* Section header — Sprint 1.8: tokenized (was 18px/14px raw values) so every
   Workspace sub-tab (Brief/Homepage/Pages/QA/Convert/Deliver) shares the exact
   same header rhythm instead of each drifting by a couple of pixels. */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.section-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meta-tag {
  font-size: 11px;
  color: var(--text-muted);
}

/* Inline buttons — Sprint 1.8: height standardized onto the shared
   control-height scale (was an implicit ~19px from padding alone, one of
   several different small-button heights scattered across the app). */
.inline-btn {
  height: var(--control-h-sm);
  font-size: 11px;
  font-weight: 500;
  padding: 0 var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
}
.inline-btn:hover { border-color: var(--border-accent); color: var(--text-primary); background: var(--bg-hover); }
.inline-btn.amber { border-color: rgba(210,153,34,0.3); color: var(--amber); }
.inline-btn.amber:hover { background: var(--amber-dim); }
.inline-btn.green { border-color: rgba(63,185,80,0.3); color: var(--green); }
.inline-btn.green:hover { background: var(--green-dim); }
.inline-btn.primary { background: var(--cyan); border-color: var(--cyan); color: #0a0c10; font-weight: 600; }
.inline-btn.primary:hover { background: #33ddff; box-shadow: 0 0 12px rgba(0,212,255,0.3); }
.inline-btn:active { transform: scale(0.97); }
.inline-btn:disabled,
.inline-btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   BRIEF TAB
   ═══════════════════════════════════════════════════════════════ */
.panel-two-col {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
}
/* LANE B RBI 2.0 FINAL 7-STEP CORRECTIVE — .brief-main is the 1fr grid
   item above and had no rule of its own, so it defaulted to min-width:auto
   (a grid/flex item's own default), which lets its content's natural
   width win over the 1fr track and overflow the page horizontally. Found
   via real-browser verification: the new .rbi-stepper's natural (pre-wrap)
   content width pushed #tab-brief to ~1998px inside a ~930px pane at
   desktop width. min-width:0 lets the grid track — and therefore
   .rbi-stepper's own overflow-x:auto — actually do its job. */
.brief-main { min-width: 0; }
.brief-field-group { margin-bottom: 14px; }
.field-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
  display: block;
}
.field-value {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 400;
}
.brief-field-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-muted);
  font-family: var(--font-ui);
}

/* Pages list */
.brief-pages-list { display: flex; flex-direction: column; gap: 4px; }
.page-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.page-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); min-width: 20px; }
.page-line span:nth-child(2) { flex: 1; color: var(--text-primary); }
.page-status { font-size: 10.5px; font-weight: 600; }
.page-status.done { color: var(--green); }
.page-status.pending { color: var(--text-muted); }

/* Raw brief text */
.brief-raw-text {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-style: italic;
}
.brief-editable-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-mid);
  box-sizing: border-box;
}
.brief-editable-input:hover { border-bottom-color: var(--border-strong); }
.brief-editable-input:focus { border-bottom-color: var(--cyan); }
.brief-editable-textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-family: inherit;
  font-style: italic;
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--t-mid);
  box-sizing: border-box;
}
.brief-editable-textarea:focus { border-color: var(--cyan); }

/* Sprint 9.5.19 (LC-013) — Brief locking. The panel remains fully visible
   (Rule 4: viewing, scrolling, copying, expand/collapse all still work) —
   only a subtle dimming + not-allowed cursor on disabled controls signals
   read-only, never a hidden/blocked overlay. brief-view-toggle-marked
   controls (section expand/collapse, the Advanced-tools dropdown) are
   plain buttons the lock never disables, so they need no override here. */
#tab-brief.brief-locked .brief-editable-textarea,
#tab-brief.brief-locked input:disabled,
#tab-brief.brief-locked textarea:disabled,
#tab-brief.brief-locked select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
#tab-brief.brief-locked button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* References */
.brief-references { display: flex; flex-direction: column; gap: 5px; }
.ref-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.ref-favicon {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.ref-url { font-size: 11.5px; color: var(--text-secondary); flex: 1; }
.ref-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  background: var(--cyan-dim);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(0,212,255,0.15);
}

/* Brief sidebar cards */
.brief-sidebar { display: flex; flex-direction: column; gap: 12px; }
.info-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 12px;
  transition: border-color var(--t-fast);
}
.info-card:hover { border-color: var(--border-muted); }
.info-card-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.build-status-list { display: flex; flex-direction: column; gap: 5px; }
.build-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.build-status-item:last-child { border-bottom: none; }
.bs-label { color: var(--text-secondary); }
.bs-value { font-weight: 500; font-size: 11px; }
.bs-value.done { color: var(--green); }
.bs-value.active { color: var(--cyan); }
.bs-value.idle { color: var(--text-faint); }
/* Sprint 9.5.44 (LC-030) — QA Bypassed is a valid workflow path, not an
   error/failure state, so it gets its own distinct (amber) color rather
   than reusing .done/.active/.failed. */
.bs-value.bypassed { color: var(--amber); }

/* Asset list */
.asset-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.asset-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  padding: 4px 0;
}
.asset-icon { font-size: 12px; }
.asset-name { flex: 1; color: var(--text-secondary); }
.asset-size { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); }
.upload-btn {
  width: 100%;
  padding: 6px;
  border: 1px dashed var(--border-muted);
  border-radius: var(--r-md);
  font-size: 11.5px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
}
.upload-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }

/* ═══════════════════════════════════════════════════════════════
   ANALYSIS TAB
   ═══════════════════════════════════════════════════════════════ */
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.analysis-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.analysis-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.analysis-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.analysis-icon { font-size: 14px; }
.analysis-card h3 { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.analysis-card p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.keyword-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kw-chip {
  font-size: 10.5px;
  padding: 3px 8px;
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE TAB
   ═══════════════════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}
.status-badge.running {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.2);
}
.status-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulseOpacity 1.2s ease-in-out infinite;
}
@keyframes pulseOpacity {
  0%,100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.homepage-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Sprint 1.4 — was --header-h; the workspace header this calc accounts
     for is the two-row one, now --ws-header-h (see that variable's own
     comment for why --header-h itself couldn't just change value). */
  height: calc(100vh - var(--ws-header-h) - var(--tabs-h) - 80px);
}

/* Sprint 9.5.45 (LC-031, Task 1) — the .hps-tab* section-navigation tab bar
   rules were removed along with their markup; @keyframes spin is reused
   elsewhere (.job-spin) and is kept. */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Preview pane */
.homepage-preview-pane {
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.preview-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.preview-pane-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.preview-pane-actions { display: flex; gap: 4px; }
.icon-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--bg-hover); border-color: var(--border-muted); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.92); }
.preview-pane-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}

/* Section mock preview */
.section-preview-mock { width: 100%; max-width: 400px; }
.mock-hero {
  background: #0f172a;
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock-eyebrow {
  height: 8px;
  width: 80px;
  background: rgba(20,184,166,0.3);
  border-radius: var(--r-xs);
}
.mock-h1 {
  height: 16px;
  width: 100%;
  background: rgba(255,255,255,0.15);
  border-radius: var(--r-xs);
}
.mock-h1.short { width: 70%; }
.mock-sub {
  height: 9px;
  width: 90%;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
}
.mock-sub.shorter { width: 65%; }
.mock-ctas { display: flex; gap: 8px; margin-top: 6px; }
.mock-cta-primary {
  height: 26px;
  width: 100px;
  background: #14b8a6;
  border-radius: 4px;
}
.mock-cta-ghost {
  height: 26px;
  width: 110px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
}
.mock-screenshot {
  height: 90px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGES TAB
   ═══════════════════════════════════════════════════════════════ */
.pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.page-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.page-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.page-card.done { border-color: rgba(63,185,80,0.2); }
.page-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.page-card-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}
.page-card-status-chip {
  font-size: 9.5px;
  font-weight: 600; /* Sprint 9.5.42 (LC-028) — matches every other status-badge weight (was 700, an outlier) */
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background var(--t-mid), color var(--t-mid), border-color var(--t-mid);
}
.page-card-status-chip.done,
.page-card-status-chip.approved {
  background: rgba(63,185,80,0.1);
  color: var(--green);
  border: 1px solid rgba(63,185,80,0.2);
}
.page-card-status-chip.pending {
  background: var(--bg-overlay);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.page-card-status-chip.building {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.2);
}
.page-card-status-chip.ready {
  background: rgba(210,153,34,0.1);
  color: var(--amber);
  border: 1px solid rgba(210,153,34,0.2);
}
.page-card-status-chip.sent {
  background: var(--purple-dim);
  color: var(--purple);
  border: 1px solid rgba(139,92,246,0.2);
}
.page-card.approved { border-color: rgba(63,185,80,0.25); }
.page-card.building { border-color: rgba(0,212,255,0.2); }
.page-card.ready    { border-color: rgba(210,153,34,0.2); }

/* Approved badge on page card */
.page-approved-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(63,185,80,0.08);
  border: 1px solid rgba(63,185,80,0.2);
  border-radius: 4px;
  font-size: 10px;
  color: var(--green);
}
.page-approved-badge span { color: var(--text-muted); }

/* All-approved banner */
.pages-all-approved {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(63,185,80,0.07);
  border: 1px solid rgba(63,185,80,0.25);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.paa-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(63,185,80,0.15);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.paa-title { font-size: 12px; font-weight: 600; color: var(--green); }
.paa-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Page approve modal summary */
.page-approve-summary {
  margin-top: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 4px 14px;
}
.page-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.page-card-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.page-card-actions { display: flex; gap: 5px; }
.pc-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
}
.pc-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.pc-btn.primary { background: var(--cyan); border-color: var(--cyan); color: #080c10; font-weight: 600; }
.pc-btn.primary:hover { background: #33ddff; box-shadow: 0 0 10px rgba(0,212,255,0.3); }
.pc-btn.amber { background: var(--amber-dim); border-color: rgba(210,153,34,0.35); color: var(--amber); }
.pc-btn.amber:hover { background: rgba(210,153,34,0.18); box-shadow: 0 0 8px rgba(210,153,34,0.2); }
.pc-btn.purple { background: var(--purple-dim); border-color: rgba(139,92,246,0.3); color: #a78bfa; }
.pc-btn.purple:hover { background: rgba(139,92,246,0.18); box-shadow: 0 0 8px rgba(139,92,246,0.2); }
.add-card {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 120px;
}
.add-card:hover { border-color: var(--cyan); background: var(--cyan-dim); }
.add-card-icon { font-size: 22px; color: var(--text-muted); }
.add-card-label { font-size: 11.5px; color: var(--text-muted); }
.add-card:hover .add-card-icon,
.add-card:hover .add-card-label { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════
   QA TAB
   ═══════════════════════════════════════════════════════════════ */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.qa-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.qa-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.qa-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.qa-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.qa-icon.pass { background: var(--green-dim); color: var(--green); }
.qa-icon.warn { background: var(--amber-dim); color: var(--amber); }
.qa-icon.fail { background: var(--red-dim); color: var(--red); }
.qa-result {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.qa-result.pass { color: var(--green); }
.qa-result.warn { color: var(--amber); }
.qa-result.fail { color: var(--red); }
.qa-detail { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   CONVERT TAB
   ═══════════════════════════════════════════════════════════════ */
.convert-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
}
.checklist-group { margin-bottom: 20px; }
.checklist-group-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.check-item:hover { background: var(--bg-hover); }
.check-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--cyan);
  cursor: pointer;
}
.convert-option { margin-bottom: 10px; }
.convert-select {
  width: 100%;
  padding: 7px 30px 7px 10px;
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237d8590' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  margin-top: 4px;
  transition: border-color var(--t-fast);
}
.convert-select:focus { border-color: var(--cyan); }
.convert-cta-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.convert-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--amber-dim);
  border: 1px solid rgba(210,153,34,0.25);
  border-radius: var(--r-lg);
  font-size: 12px;
  color: var(--amber);
  line-height: 1.55;
}
.warn-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(210,153,34,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}
.convert-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.convert-btn svg { width: 16px; height: 16px; }
.convert-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }

/* ═══════════════════════════════════════════════════════════════
   CONVERT TAB — NEW
   ═══════════════════════════════════════════════════════════════ */

/* Stack banner */
.cv-stack-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.cv-stack-left { display: flex; flex-direction: column; gap: 2px; }
.cv-stack-eyebrow {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cv-stack-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
/* Sprint 1.8 — pill shape aligned to the shared status-badge convention
   (was a 4px squared radius, a fourth distinct badge shape in the app). */
.cv-stack-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(63,185,80,0.12);
  color: var(--green);
  border: 1px solid rgba(63,185,80,0.25);
}

/* Layout */
.cv-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
.cv-col-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Platform cards */
.cv-targets-col { display: flex; flex-direction: column; gap: 0; }
.cv-targets-col .cv-col-label { margin-bottom: 10px; }
.cv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  padding: 14px 14px;
  transition: border-color var(--t-mid), background var(--t-mid);
}
.cv-card:first-of-type { border-radius: 8px 8px 0 0; }
.cv-card:last-of-type { border-bottom: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; }
.cv-card:hover { background: var(--bg-overlay); }
.cv-card[data-status="completed"] { border-left: 2px solid var(--green); }
.cv-card[data-status="converting"] { border-left: 2px solid var(--cyan); }
.cv-card[data-status="failed"] { border-left: 2px solid var(--red); }

.cv-card-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-overlay);
  color: var(--text-secondary);
}
.cv-icon-wp      { background: rgba(33,117,155,0.12); color: #21759b; }
.cv-icon-shopify { background: rgba(149,191,71,0.12); color: #95bf47; }
.cv-icon-react   { background: rgba(97,218,251,0.12); color: #61dafb; }

.cv-card-body { flex: 1; min-width: 0; }
.cv-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.cv-card-sub {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.cv-card-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.cv-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.cv-status-dot[data-status="not-started"] { background: var(--text-muted); }
.cv-status-dot[data-status="queued"]      { background: var(--amber); }
.cv-status-dot[data-status="converting"]  { background: var(--cyan); animation: pulseGlow 1.2s infinite; }
.cv-status-dot[data-status="completed"]   { background: var(--green); }
.cv-status-dot[data-status="failed"]      { background: var(--red); }

/* Sprint 1.8 — brought onto the same pill shape as every other status
   indicator (.status-badge/.hp-status-badge/.dc-block-badge) instead of
   being bare, unstyled text (the one status label in the app with no
   background/padding/radius of its own). */
.cv-card-status-label {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-overlay);
  color: var(--text-secondary);
}
.cv-card[data-status="completed"] .cv-card-status-label { color: var(--green); }
.cv-card[data-status="converting"] .cv-card-status-label { color: var(--cyan); }
.cv-card[data-status="failed"] .cv-card-status-label { color: var(--red); }
.cv-card[data-status="queued"] .cv-card-status-label { color: var(--amber); }

/* FRONTEND_F1 Sprint 1 — Convert compliance findings (validation.shopify-
   convert-compliance / validation.wordpress-convert-compliance failures[]).
   Populated by setConvertFindings(); hidden whenever there's nothing to show. */
.cv-card-findings {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-muted);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.cv-card-findings-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--red);
  margin-bottom: 3px;
}
.cv-card-findings ul {
  margin: 0;
  padding-left: 14px;
}
.cv-card-findings li {
  margin-bottom: 2px;
  line-height: 1.35;
}

.cv-convert-btn {
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--t-mid);
  flex-shrink: 0;
  white-space: nowrap;
}
.cv-convert-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }
.cv-convert-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
/* Fresh Conversion recovery action — the secondary, destructive-ish sibling
   of the failed card's primary "Retry Conversion" button. Same control
   geometry as .cv-convert-btn (no new button shape); only the hover accent
   differs, so the two recovery actions never read as equally routine. */
.cv-fresh-btn:hover { border-color: var(--amber); color: var(--amber); background: rgba(210,153,34,0.1); }

/* Sprint 9.5.17 (LC-011, Part 3) — package-download actions, shown only
   once a conversion has completed (see setConvertStatus in app.js). */
.cv-package-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cv-package-btn {
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--t-mid);
  white-space: nowrap;
}
.cv-package-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim, var(--cyan-dim)); }

/* Progress bar on card when converting */
.cv-card-progress {
  width: 100%;
  height: 2px;
  background: var(--bg-overlay);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 6px;
}
.cv-card-progress-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 1px;
  transition: width 0.3s ease;
}
.cv-card[data-status="completed"] .cv-card-progress-fill { background: var(--green); }
.cv-card[data-status="failed"] .cv-card-progress-fill { background: var(--red); }

/* History */
.cv-history-col { display: flex; flex-direction: column; }
.cv-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 11px;
}
.cv-history-list { display: flex; flex-direction: column; gap: 6px; }
.cv-history-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cv-history-item:hover {
  border-color: var(--border-accent);
  background: var(--bg-overlay);
}
.cv-history-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cv-history-dot.completed { background: var(--green); }
.cv-history-dot.failed    { background: var(--red); }
.cv-history-dot.converting { background: var(--cyan); }
.cv-history-body { flex: 1; min-width: 0; }
.cv-history-platform {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.cv-history-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.cv-history-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.cv-history-badge.completed { background: rgba(63,185,80,0.12); color: var(--green); }
.cv-history-badge.failed    { background: rgba(248,81,73,0.12); color: var(--red); }
.cv-history-badge.converting { background: var(--cyan-dim); color: var(--cyan); }

/* Convert scope selector */
.cv-scope-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.cv-scope-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: 7px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-mid), background var(--t-mid);
  width: 100%;
}
.cv-scope-btn:hover { border-color: var(--border-accent); background: var(--bg-overlay); }
.cv-scope-btn.active { border-color: var(--cyan); background: var(--cyan-dim); }
.cv-scope-icon { font-size: 16px; flex-shrink: 0; }
.cv-scope-body { display: flex; flex-direction: column; gap: 1px; }
.cv-scope-label { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.cv-scope-sub   { font-size: 10px; color: var(--text-secondary); }

/* Convert modal summary */
.cv-modal-summary {
  margin-top: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 4px 14px;
}
.cv-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cv-summary-row:last-child { border-bottom: none; }
.cv-summary-label { font-size: 11px; color: var(--text-secondary); }
.cv-summary-value { font-size: 11px; font-weight: 500; color: var(--text-primary); }

/* Convert history — enhanced with scope */
.cv-history-scope {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-overlay);
  color: var(--text-muted);
  margin-top: 2px;
  display: inline-block;
}

/* Convert modal */
.cv-modal-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
}
.cv-modal-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cv-modal-stack-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cv-modal-stack-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.cv-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(210,153,34,0.07);
  border: 1px solid rgba(210,153,34,0.2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.cv-modal-warning svg { color: var(--amber); }

/* ═══════════════════════════════════════════════════════════════
   DELIVER TAB
   ═══════════════════════════════════════════════════════════════ */
.deliver-layout { display: flex; flex-direction: column; gap: 20px; }
.deliver-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.deliver-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 16px;
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
}
.deliver-card:hover {
  border-color: var(--cyan);
  background: var(--bg-active);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 3px rgba(0,212,255,0.12);
}
.deliver-card.selected {
  border-color: var(--cyan);
  background: var(--cyan-dim);
}
/* Sprint 1.8 — boxed to match Convert's .cv-card-icon treatment (fixed
   size, tinted rounded container) instead of bare, ungrounded 24px emoji
   glyphs floating on the card — the same icon language now applies on
   both tabs instead of two different ones. */
.deliver-card-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto var(--space-2);
  border-radius: var(--r-md);
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.deliver-card-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.deliver-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.deliver-history {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
}
.deliver-history-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.deliver-history-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 20px 0; }
.deliver-history-list { display: flex; flex-direction: column; gap: 1px; }

/* History row */
.dh-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.dh-row:last-child { border-bottom: none; }
.dh-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dh-dot.green  { background: var(--green); }
.dh-dot.cyan   { background: var(--cyan); }
.dh-dot.amber  { background: var(--amber); }
.dh-action {
  flex: 1;
  font-size: 11px;
  color: var(--text-primary);
}
.dh-meta {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.4;
}

/* Sprint 9.5.17 (LC-011, Part 1) — "Download Again" for a completed ZIP
   delivery history row (see addDeliverHistory/renderDeliverHistory). */
.dh-download-again-btn {
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--r-sm); /* Sprint 9.5.42 (LC-028) — was a literal 5px, an orphan value matching no shared token; aligned to the radius its sibling small buttons (.pc-btn/.inline-btn/.version-pill) already use */
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.dh-download-again-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }

/* Mark Complete card — Sprint 1.8: spans the full grid row instead of
   starting a new row as a lone card beside three empty column slots. It's
   a lifecycle action, not a delivery method, so it's styled as a distinct
   full-width bar rather than pretending to belong to the method grid. */
.deliver-card-complete {
  grid-column: 1 / -1;
  border-style: solid;
  border-color: rgba(63,185,80,0.3);
  background: rgba(63,185,80,0.04);
}
.deliver-card-complete:hover {
  border-color: var(--green);
  border-style: solid;
  background: rgba(63,185,80,0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.deliver-card.locked {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
/* Temporary per-card lock while its own delivery job is in flight — distinct
   from .locked (the permanent post-delivery state) so multiple-click
   protection never gets confused with "project already delivered." */
.deliver-card.action-pending {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* Delivered banner */
.delivered-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(63,185,80,0.08);
  border: 1px solid rgba(63,185,80,0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.delivered-banner-left { display: flex; align-items: center; gap: 12px; }
.delivered-banner-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(63,185,80,0.15);
  border: 1px solid rgba(63,185,80,0.3);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-style: normal;
  flex-shrink: 0;
}
.delivered-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}
.delivered-banner-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.reopen-btn {
  background: none;
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--t-mid);
}
.reopen-btn:hover { border-color: var(--amber); color: var(--amber); }

/* Project Complete modal */
.complete-summary {
  margin-top: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 12px 14px;
}
.complete-summary-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.complete-summary-grid { display: flex; flex-direction: column; gap: 0; }
.cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cs-row:last-child { border-bottom: none; }
.cs-label { font-size: 11px; color: var(--text-secondary); }
.cs-value { font-size: 11px; font-weight: 500; color: var(--text-primary); }
.cs-green { color: var(--green) !important; }
.complete-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  background: rgba(210,153,34,0.07);
  border: 1px solid rgba(210,153,34,0.2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.complete-warning svg { color: var(--amber); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   RIGHT UTILITY PANEL
   ═══════════════════════════════════════════════════════════════ */
.right-panel {
  width: var(--right-w);
  min-width: var(--right-w);
  height: 100%;
  /* Simplified Premium Surface System — part of the single shared
     "everything interactive" surface, same as sidebar/cards/panels. */
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.28s var(--ease-spring), min-width 0.28s var(--ease-spring);
  position: relative;
}
.right-panel.resizing {
  transition: none;
  user-select: none;
}
.rp-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background var(--t-mid);
}
.rp-resize-handle:hover,
.rp-resize-handle.active {
  background: var(--cyan);
  opacity: 0.4;
}
/* Collapsed: shrink to just the header button */
.right-panel.collapsed {
  width: 38px;
  min-width: 38px;
}
.right-panel.collapsed #rpTabs,
.right-panel.collapsed .rp-panel {
  display: none;
}
.right-panel.collapsed .right-panel-header {
  justify-content: center;
  padding: 0;
}
.right-panel-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 8px 0 10px;
  flex-shrink: 0;
  height: var(--header-h);
}
.rp-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}
.rp-tab {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 5px 9px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  background: transparent;
  border: 1px solid transparent;
}
.rp-tab:hover { color: var(--text-secondary); background: var(--bg-hover); }
.rp-tab.active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
}
/* Panel collapse button in header */
.panel-collapse-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.panel-collapse-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.rp-panel { display: none; padding: 12px 12px; overflow-y: auto; flex: 1; min-height: 0; }
.rp-panel.active { display: block; }
.rp-panel::-webkit-scrollbar { width: 4px; }
.rp-panel::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

/* Project Telemetry — always-visible bottom section */
.rp-telemetry {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rp-telemetry::-webkit-scrollbar { width: 4px; }
.rp-telemetry::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }
.rpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rpt-title {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rpt-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
.rpt-section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Hide telemetry when sidebar is collapsed */
.right-panel.collapsed .rp-telemetry { display: none; }

.rp-section-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Activity Feed */
.activity-feed { display: flex; flex-direction: column; gap: 1px; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  animation: activityIn var(--t-med) var(--ease-out) both;
}
@keyframes activityIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.activity-item:hover { background: var(--bg-hover); }
.activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.activity-dot.green { background: var(--green); }
.activity-dot.cyan { background: var(--cyan); }
.activity-dot.red { background: var(--red); }
.activity-dot.pulse { animation: pulseGlow 1.5s infinite; }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: 11.5px; color: var(--text-primary); font-weight: 500; }
.activity-time { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

/* Engine Metrics */
.engine-metrics { display: flex; flex-direction: column; gap: 5px; }
.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.metric-row:last-child { border-bottom: none; }
.metric-label { font-size: 11px; color: var(--text-muted); }
.metric-val { font-size: 11px; font-family: var(--font-mono); color: var(--text-primary); }

/* Decisions Feed */
.decisions-feed { display: flex; flex-direction: column; gap: 8px; }
.decision-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 10px 11px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  animation: decisionIn 0.22s var(--ease-spring) both;
}
@keyframes decisionIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.decision-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.decision-badge {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-dim);
  border: 1px solid rgba(139,92,246,0.2);
  padding: 1px 7px;
  border-radius: var(--r-xs);
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.decision-text { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 5px; }
.decision-time { font-size: 10px; color: var(--text-faint); }

/* ── HOMEPAGE STATUS BADGE ── */
.hp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--t-med) ease;
}
.hp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* States */
.hp-status-badge[data-status="draft"]           { background: var(--bg-overlay); color: var(--text-muted); border-color: var(--border-muted); }
.hp-status-badge[data-status="building"]        { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(0,212,255,0.2); }
.hp-status-badge[data-status="building"] .hp-status-dot { animation: pulseOpacity 1.2s ease-in-out infinite; }
.hp-status-badge[data-status="ready"]           { background: var(--green-dim); color: var(--green); border-color: rgba(63,185,80,0.2); }
.hp-status-badge[data-status="changes"]         { background: var(--amber-dim); color: var(--amber); border-color: rgba(210,153,34,0.2); }
.hp-status-badge[data-status="sent"]            { background: var(--purple-dim); color: #a78bfa; border-color: rgba(139,92,246,0.25); }
.hp-status-badge[data-status="waiting-client"]  { background: var(--purple-dim); color: #a78bfa; border-color: rgba(139,92,246,0.25); }
.hp-status-badge[data-status="waiting-client"] .hp-status-dot { animation: pulseOpacity 1.6s ease-in-out infinite; }
.hp-status-badge[data-status="approved"]        { background: var(--green-dim); color: var(--green); border-color: rgba(63,185,80,0.2); }

/* ── VERSION BAR (Homepage tab) ── */
.version-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-bottom: 8px; /* Sprint 9.5.45 (LC-031, Task 2) — trimmed from 10px so the preview pane sits closer beneath it */
  flex-shrink: 0;
}
.version-bar-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.7px;
  flex-shrink: 0;
}
.version-pills {
  display: flex;
  gap: 4px;
}
.version-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.version-pill:hover { border-color: var(--border-accent); color: var(--text-primary); }
.version-pill.active { background: var(--cyan-dim); border-color: rgba(0,212,255,0.3); color: var(--cyan); }
.vp-time { font-size: 9.5px; font-weight: 400; color: inherit; opacity: 0.7; font-family: var(--font-ui); }
.version-bar-current {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-faint);
  font-style: italic;
  flex-shrink: 0;
}
.vp-tag {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 0 3px;
  margin-left: 2px;
  font-family: var(--font-ui);
  vertical-align: 1px;
  color: var(--text-faint);
}
.version-pill[data-direction="B"] .vp-tag {
  background: var(--purple-dim);
  border-color: rgba(139,92,246,0.3);
  color: #a78bfa;
}
.version-pill.active .vp-tag { opacity: 0.8; }

/* ── NEW DIRECTION / REQUEST CHANGES MODAL FIELDS ── */
.nd-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.nd-field { display: flex; flex-direction: column; gap: 5px; }
.nd-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
select.nd-input {
  padding: 8px 30px 8px 10px;
  cursor: pointer;
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237d8590' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.nd-input:focus { border-color: var(--cyan); }
.nd-textarea { resize: vertical; min-height: 60px; line-height: 1.55; }
.nd-optional { font-size: 10px; color: var(--text-faint); font-weight: 400; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.nd-required { font-size: 10px; color: var(--red); font-weight: 400; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.nd-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  background: rgba(210,153,34,0.08);
  border: 1px solid rgba(210,153,34,0.2);
  border-radius: var(--r-md);
  font-size: 11.5px;
  color: var(--amber);
  line-height: 1.5;
  margin-top: 12px;
}
.nd-info {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  background: var(--cyan-dim);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--r-md);
  font-size: 11.5px;
  color: var(--cyan);
  line-height: 1.5;
}

/* ── PAGE VERSION ROW (Pages tab cards) ── */
.page-version-row {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.pv-chip {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.pv-chip:hover { border-color: var(--border-accent); color: var(--text-primary); }
.pv-chip.active { background: var(--cyan-dim); border-color: rgba(0,212,255,0.25); color: var(--cyan); }

.page-version-bar {
  margin: 6px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.page-version-bar .version-pills { flex-wrap: wrap; gap: 4px; }
.page-version-bar .version-pill { font-size: 10.5px; padding: 2px 8px; }
.page-version-bar .vp-time { font-size: 9px; }

/* ── MODEL SELECTOR ── */
.model-select {
  width: 100%;
  padding: 6px 28px 6px 8px;
  background: var(--bg-overlay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237d8590' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-mono);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-fast);
}
.model-select:focus { border-color: var(--cyan); }

/* ── TOKEN TABLE ── */
.token-table {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 2px;
}
.token-table-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}
.token-table-header span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.token-table-header span:nth-child(2),
.token-table-header span:nth-child(3) { text-align: right; }
.token-table-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.token-table-row:last-child { border-bottom: none; }
.token-table-row.total {
  background: rgba(0,212,255,0.04);
  border-top: 1px solid var(--border-subtle);
}
.token-table-row.total .tt-label { color: var(--text-primary); font-weight: 600; }
.token-table-row.total .tt-cost { color: var(--cyan); font-weight: 600; }
.tt-label { font-size: 11px; color: var(--text-muted); }
.tt-val { font-size: 11px; font-family: var(--font-mono); color: var(--text-primary); text-align: right; }
.tt-cost { font-size: 11px; font-family: var(--font-mono); color: var(--green); text-align: right; }

/* ── TERMINAL INPUT ── */
.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
}
.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  caret-color: var(--cyan);
}
.terminal-input::placeholder { color: var(--text-faint); }

/* ── STACK STATUS BAR (Pages tab) ── */
.stack-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
}
.stack-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stack-icon-wrap {
  width: 28px;
  height: 28px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.stack-icon-wrap.active { background: var(--cyan-dim); border-color: rgba(0,212,255,0.2); color: var(--cyan); }
.stack-status-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  display: block;
  margin-bottom: 2px;
}
.stack-status-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.stack-status-value.set { color: var(--cyan); }
.stack-status-note {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
.stack-status-note.approved { color: var(--green); font-style: normal; }

/* Build confirm modal extras */
.build-confirm-stack { margin-top: 14px; }
.build-confirm-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
  font-style: italic;
}

/* Analysis in right panel */
.analysis-rp-list { display: flex; flex-direction: column; gap: 8px; }
.arp-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 10px 11px;
}
.arp-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.arp-card p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}
.arp-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.arp-keywords span {
  font-size: 10px;
  padding: 2px 7px;
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
}

/* Terminal */
.terminal-window {
  background: #0d1117;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.terminal-body {
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-height: 500px;
  overflow-y: auto;
}
.terminal-body::-webkit-scrollbar { width: 4px; }
.terminal-body::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }
.log-line { display: block; }
.log-prompt { color: var(--green); margin-right: 4px; }
.log-cmd { color: var(--text-primary); }
.log-info { color: var(--text-muted); }
.log-success { color: var(--green); }
.log-warn { color: var(--amber); }
.log-error { color: var(--red); }
.log-cursor { margin-top: 2px; }
.cursor-blink {
  color: var(--cyan);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════
   PREVIEW BAR (BOTTOM)
   ═══════════════════════════════════════════════════════════════ */
.preview-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: var(--right-w);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-spring);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}
.preview-bar.open { transform: translateY(0); }

.preview-bar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.preview-bar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.preview-bar-title svg { width: 14px; height: 14px; }
.preview-device-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 2px;
}
.device-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all var(--t-fast);
}
.device-btn svg { width: 13px; height: 13px; }
.device-btn.active { background: var(--bg-overlay); color: var(--text-primary); }
.device-btn:hover:not(.active) { color: var(--text-secondary); }
.preview-url-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  max-width: 400px;
}
.preview-url-icon svg { width: 13px; height: 13px; color: var(--text-muted); }
.preview-url-text { font-size: 11.5px; font-family: var(--font-mono); color: var(--text-muted); }
.preview-actions { display: flex; gap: 4px; margin-left: auto; }

.preview-viewport {
  height: 340px;
  overflow: auto;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.preview-iframe-wrap {
  width: 100%;
  max-width: 1200px;
  height: 100%;
}
.preview-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}
.preview-building-label {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.preview-building-label .status-pulse { background: var(--cyan); }

/* Browser mockup */
.preview-mock-browser {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.pmb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-subtle);
}
.pmb-dots { display: flex; gap: 4px; }
.pmb-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-muted); }
.pmb-dots span:nth-child(1) { background: #f85149; }
.pmb-dots span:nth-child(2) { background: var(--amber); }
.pmb-dots span:nth-child(3) { background: var(--green); }
.pmb-url {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.pmb-page { padding: 12px; }
.pmb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.pmb-logo { width: 50px; height: 12px; background: var(--border-accent); border-radius: var(--r-xs); }
.pmb-navlinks { display: flex; gap: 8px; flex: 1; }
.pmb-navlinks span { width: 30px; height: 8px; background: var(--border-subtle); border-radius: 2px; }
.pmb-cta-btn { width: 60px; height: 22px; background: #0f172a; border: 1px solid rgba(20,184,166,0.4); border-radius: 4px; }
.pmb-hero { padding: 12px 0; display: flex; flex-direction: column; gap: 7px; }
.pmb-eyebrow { width: 60px; height: 8px; background: rgba(20,184,166,0.3); border-radius: 2px; }
.pmb-h1 { height: 14px; background: rgba(255,255,255,0.12); border-radius: var(--r-xs); }
.pmb-h1.w60 { width: 60%; }
.pmb-sub { height: 8px; background: rgba(255,255,255,0.06); border-radius: 2px; }
.pmb-sub.w50 { width: 50%; }
.pmb-btns { display: flex; gap: 6px; margin-top: 6px; }
.pmb-btn-primary { width: 80px; height: 22px; background: #14b8a6; border-radius: 4px; }
.pmb-btn-ghost { width: 90px; height: 22px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; }
.pmb-screen-mock {
  margin-top: 10px;
  background: rgba(15,23,42,0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 10px;
}
.pmb-screen-inner { display: flex; flex-direction: column; gap: 6px; }
.pmb-screen-row { height: 8px; background: var(--border-subtle); border-radius: 2px; }
.pmb-screen-row.w70 { width: 70%; }
.pmb-screen-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; height: 40px; }
.pmb-screen-grid > div { background: var(--bg-overlay); border-radius: var(--r-sm); }


/* ═══════════════════════════════════════════════════════════════
   APPROVAL MODAL
   ═══════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) ease;
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* Sprint 1.8 — bug fix: #amUploadModal shares this generic .modal-backdrop
   class (z-index: 500), which sits BELOW the New Project Wizard's
   .pc-screen (z-index: 2000). Opening the asset upload dialog from inside
   the wizard's Assets step therefore rendered it behind the wizard overlay
   — invisible, and only revealed once the wizard itself closed. Every
   other .modal-backdrop consumer (Approval modal, QA single-check modal)
   only ever opens from a plain page context with nothing above it, so
   raising just this one modal's z-index above the wizard's entire stack
   (.pc-screen 2000 / .welcome-screen 2010) fixes the one modal that can
   actually be opened from on top of another full-screen overlay, without
   touching the shared .modal-backdrop tier used by every other consumer. */
#amUploadModal {
  z-index: 2050;
}
.modal {
  /* Premium Surface Hierarchy — Surface 5, the highest elevation.
     Previously shared --bg-elevated with the sidebar, so modals didn't
     read as sitting above everything else. */
  background: var(--bg-modal);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-xl);
  width: 420px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition: transform 0.22s var(--ease-spring), opacity var(--t-mid) ease;
}
.modal-backdrop.open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid rgba(63,185,80,0.3);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.modal-close:hover {
  background: var(--bg-hover);
  border-color: var(--border-muted);
  color: var(--text-primary);
}
.modal-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-left: 36px;
  line-height: 1.5;
}
.modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-fast);
}
.modal-option:hover {
  border-color: var(--cyan);
  background: var(--bg-active);
  transform: translateX(2px);
}
.modal-option-icon { font-size: 20px; flex-shrink: 0; }
.modal-option-body { flex: 1; }
.modal-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.modal-option-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.modal-option-arrow { color: var(--text-faint); flex-shrink: 0; }
.modal-option:hover .modal-option-arrow { color: var(--cyan); }

/* Client approval status row */
.client-status-row {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-top: 4px;
}
.client-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.client-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.client-status-dot.waiting {
  background: var(--amber);
  animation: pulseOpacity 1.4s ease-in-out infinite;
}
.client-status-dot.approved { background: var(--green); animation: none; }
.client-status-dot.changes  { background: var(--red);   animation: none; }

.modal-back {
  font-size: 11.5px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  display: block;
  transition: color var(--t-fast);
}
.modal-back:hover { color: var(--text-primary); }
.modal-convert-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.modal-convert-btn {
  width: 100%;
  margin-top: 4px;
  color: var(--cyan);
  border-color: rgba(0,212,255,0.3);
}
.modal-convert-btn:hover { background: var(--cyan-dim); }

/* ── QA SINGLE CHECK MODAL ── */
/* Uses .modal-overlay + .modal-box pattern (display toggled via JS style.display).
   Mirrors .modal-backdrop + .modal styling so the QA check flow matches all other modals. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  /* Premium Surface Hierarchy — Surface 5, same reasoning as .modal. */
  background: var(--bg-modal);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  max-width: calc(100vw - 40px);
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION SYSTEM (Sprint 9.5.50 / LC-036 — Unified Notification
   System & Premium UX)
   ═══════════════════════════════════════════════════════════════ */
/* One typed .toast-item per NotificationService entry (assets/js/utils.js).
   Position/stacking/container semantics inherited unchanged from Sprint
   9.5.38 (LC-024); everything else — icon, per-type color, wrapping,
   spacing, shadow, animation — is new for this sprint. */
/* Sprint 1.8 — anchored to the bottom-right corner rather than bottom-center.
   Center anchoring sat directly over centered modal footers (e.g. the New
   Project Wizard's Back/Continue buttons), physically blocking them mid-flow.
   The corner keeps the stack clear of every centered dialog's own footer. */
.toast-container {
  position: fixed;
  bottom: 24px;
  /* UI/UX Consistency Sprint 1, item 2 — a flush 24px from the viewport's
     right edge sat directly over the right telemetry panel's own content
     (confirmed during the live visual audit — toast text overlapping/
     appearing clipped against "Project Telemetry" rows). Offsetting by
     --right-w (already 0px on the narrow/mobile layout — see the existing
     media query below — so this stays correct at every width with no new
     breakpoint) keeps the stack inside the main content area, clear of
     that panel, same reasoning Sprint 1.8's corner-anchor fix already
     used for centered modal footers. */
  right: calc(var(--right-w) + 24px);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-lg);
  padding: 13px 14px 13px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.22s var(--ease-out), transform 0.32s var(--ease-spring), border-color var(--t-med) ease;
  pointer-events: auto;
  width: max-content;
  min-width: 280px;
  /* Sprint 1.8 — narrowed from 420px so the stack's left edge clears a
     centered 860px-wide modal's right edge at common viewport widths,
     instead of extending far enough left to sit over the modal's footer. */
  max-width: min(320px, calc(100vw - 40px));
  position: relative;
  overflow: hidden;
}
.toast-item::before {
  /* Semantic left accent rail — the fastest-scanned signal of type,
     before the reader even parses the icon or text. */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--text-muted);
}
.toast-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Re-triggerable "pulse" — plays once whenever NotificationService.update()
   transitions an existing toast to a new state (e.g. Loading → Success),
   so the change reads as a deliberate transition rather than a silent
   text swap. Kept subtle — a border flash, not a bounce. */
@keyframes ntfPulse {
  0%   { border-color: var(--border-accent); }
  30%  { border-color: rgba(255,255,255,0.32); }
  100% { border-color: var(--border-accent); }
}
.toast-item.ntf-pulse { animation: ntfPulse 0.5s var(--ease-out); }

.toast-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.ntf-icon { width: 18px; height: 18px; }
.ntf-icon-spin { animation: spin 0.9s linear infinite; }

.toast-item-text {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Convert Error Toast Corrective — a defensive height floor for the rare
     long message (e.g. an unbounded Convert backend failure string) that
     reaches showToast() from any of this component's ~168 call sites.
     Scoped to the text node, not .toast-item itself: .toast-item is a flex
     row with align-items: flex-start, so .toast-item-icon and
     .toast-item-close are siblings that size to their own natural (small)
     height and stay pinned at the top — they never grow or scroll with
     this element, so the close button stays reachable with no DOM/JS
     change. An ordinary short message never approaches this height, so
     normal toasts are visually unaffected — the scrollbar only appears
     once content actually exceeds it. */
  max-height: min(360px, calc(100vh - 40px));
  overflow-y: auto;
}

.toast-item-close {
  background: none;
  border: none;
  padding: 2px;
  margin: -2px -2px 0 0;
  color: inherit;
  opacity: 0.5;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  transition: opacity var(--t-mid) ease, background var(--t-mid) ease;
}
.toast-item-close svg { width: 13px; height: 13px; }
.toast-item-close:hover {
  opacity: 1;
  background: rgba(255,255,255,0.06);
}
.toast-item-close:focus-visible,
.toast-item-icon:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ── Per-type identity — one accent color + icon color per type, applied
   consistently to the rail and the icon only (the card body itself stays
   neutral so text remains high-contrast/readable regardless of type). ── */
.toast-item--success .toast-item-icon { color: var(--green); }
.toast-item--success::before { background: var(--green); }

.toast-item--error .toast-item-icon { color: var(--red); }
.toast-item--error::before { background: var(--red); }
.toast-item--error { border-color: rgba(248,81,73,0.35); }

.toast-item--warning .toast-item-icon { color: var(--amber); }
.toast-item--warning::before { background: var(--amber); }

.toast-item--info .toast-item-icon { color: var(--cyan); }
.toast-item--info::before { background: var(--cyan); }

.toast-item--loading .toast-item-icon { color: var(--text-secondary); }
.toast-item--loading::before { background: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .toast-item, .toast-item.show { transition: opacity var(--t-fast) linear; transform: none; }
  .toast-item.ntf-pulse { animation: none; }
  .ntf-icon-spin { animation-duration: 1.6s; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR GLOBAL
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: var(--r-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--border-muted); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root { --right-w: 0px; }
  /* Mobile + Tablet UI/UX Redesign — the previous rule here was
     `.right-panel { display: none; }` with no replacement access at all:
     Telemetry and Brief Analysis simply vanished below 1200px (confirmed
     live: user-reported, and reproduced via production audit screenshots).
     This turns the right panel into a slide-over drawer instead of hiding
     it — same `body.<x>-open` + fixed-position + backdrop pattern already
     proven for `.sidebar`/`.mobile-nav-open` (see mobile-responsive.css),
     so it's a consistent interaction, not a second bespoke mechanism.
     `--right-w:0px` is kept so `.main-area` still uses the full available
     width (the drawer overlays rather than pushing content). */
  .right-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(360px, 88vw);
    max-width: 360px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 500;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  }
  body.right-panel-open .right-panel { transform: translateX(0); }
  .rp-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 490;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.right-panel-open .rp-drawer-backdrop { opacity: 1; pointer-events: auto; }
  .rp-mobile-trigger { display: inline-flex; }
  .preview-bar { right: 0; }
}

@media (min-width: 1201px) {
  /* Drawer-only affordances have no meaning at desktop width — the
     existing always-visible right panel + its own collapse button take
     over unchanged. */
  .rp-drawer-backdrop, .rp-mobile-trigger { display: none; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 52px; }
  /* Sprint 1.5 (Legacy Code Cleanup) — .sidebar-project-card/.sidebar-recent
     removed from this list; both were removed from the DOM in Sprint 1.4. */
  .brand-name, .brand-badge,
  .nav-item span:not(.nav-badge),
  .nav-badge, .nav-section-label, .engine-status span,
  .user-chip span { display: none; }
  .nav-item { justify-content: center; }
  .nav-icon { width: 16px; height: 16px; }
  .user-avatar { margin: 0 auto; }
  .claude-usage-topbar { display: none; }
  .panel-two-col { grid-template-columns: 1fr; }
  .deliver-options { grid-template-columns: 1fr 1fr; }
}

/* Fade-in animation on load */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-panel.active .tab-panel-inner {
  animation: fadeIn var(--t-med) ease forwards;
}

/* ── REQUEST CHANGES — TYPE DROPDOWN ── */
.rc-type-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237d8590' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}
.rc-type-helper {
  margin-top: 5px;
  font-size: 10px;
  color: var(--text-secondary);
  min-height: 14px;
}
.rc-type-helper.creates { color: var(--cyan); }
.rc-type-helper.updates { color: var(--amber); }

/* Expected Result block */
.rc-expected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-muted);
  background: var(--bg-elevated);
}
.rc-expected-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.rc-expected-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
}
.rc-expected-value.creates { color: var(--cyan); }

/* ── JOB QUEUE PANEL ── */
.queue-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.queue-clear-btn {
  background: none;
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--t-mid);
}
.queue-clear-btn:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}
.queue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 0;
  color: var(--text-muted);
  font-size: 11px;
}
.job-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Job Card */
.job-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
  animation: jobCardIn 0.22s var(--ease-spring) both;
}
@keyframes jobCardIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.job-card:hover { border-color: var(--border-accent); }
.job-card[data-status="running"] { border-color: rgba(0,212,255,0.3); box-shadow: 0 0 0 3px rgba(0,212,255,0.06), 0 2px 12px rgba(0,0,0,0.2); }
.job-card[data-status="completed"] { border-color: rgba(63,185,80,0.2); }
.job-card[data-status="failed"] { border-color: rgba(248,81,73,0.25); }
.job-card[data-status="cancelled"] { border-color: var(--border-subtle); opacity: 0.65; }

.job-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.job-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.job-card[data-status="running"] .job-icon { color: var(--cyan); background: var(--cyan-dim); }
.job-card[data-status="completed"] .job-icon { color: var(--green); background: rgba(63,185,80,0.1); }
.job-card[data-status="failed"] .job-icon { color: var(--red); background: rgba(248,81,73,0.1); }

.job-meta {
  flex: 1;
  min-width: 0;
}
.job-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-sub {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.job-sub-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.job-status-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  flex-shrink: 0;
}
.job-status-badge.queued  { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.job-status-badge.running { background: var(--cyan-dim); color: var(--cyan); }
.job-status-badge.completed { background: rgba(63,185,80,0.12); color: var(--green); }
.job-status-badge.failed { background: rgba(248,81,73,0.12); color: var(--red); }
.job-status-badge.cancelled { background: rgba(255,255,255,0.04); color: var(--text-muted); }

/* Progress bar */
.job-progress-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.job-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--bg-overlay);
  border-radius: 2px;
  overflow: hidden;
}
.job-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--cyan);
  transition: width 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.job-card[data-status="running"] .job-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: progressShimmer 1.6s ease-in-out infinite;
}
@keyframes progressShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.job-card[data-status="completed"] .job-progress-fill { background: var(--green); }
.job-card[data-status="failed"] .job-progress-fill { background: var(--red); }
.job-progress-pct {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  min-width: 28px;
  text-align: right;
}

/* TIME-2 (Backend Execution & Generation Timing Telemetry) — job timing line */
.job-timing-line {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  padding: 2px 0;
}
.job-timing-attempts {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.job-timing-attempts summary {
  cursor: pointer;
  color: var(--text-muted);
}
.job-attempt-row {
  padding: 1px 0 1px 10px;
}

/* Job footer */
.job-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.job-time {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.job-actions {
  display: flex;
  gap: 4px;
}
.job-action-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all var(--t-mid);
}
.job-action-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.job-action-btn.danger:hover { border-color: rgba(248,81,73,0.4); color: var(--red); }

/* job-spin uses the shared @keyframes spin defined at line 1053 */
.job-spin { animation: spin 1s linear infinite; transform-origin: center; }

/* rp-tab-badge */
.rp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 3px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════
   PROJECT CREATION SCREEN
   ═══════════════════════════════════════════════════════ */

/* Backdrop */
.pc-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.25s ease;
}
.pc-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Floating dialog — Sprint 1.7 (Release Candidate Architecture), Blocking
   Issue 5: radius/shadow now use the shared token scale (--r-xl already
   existed at 12px, 2px off this shell's prior one-off 14px — imperceptible
   difference, consolidates onto the existing scale rather than keeping a
   unique value; --shadow-lg is an exact match for the prior literal). */
.pc-shell {
  position: relative;
  display: flex;
  width: 860px;
  max-width: 100%;
  /* UI/UX Consistency Sprint 1, item 7 — 680px left a large empty gap
     below shorter steps (e.g. Step 1's 5 fields, confirmed during the live
     visual audit). Reduced to hug shorter-step content more closely;
     .pc-body's existing overflow-y:auto (unchanged) still handles any step
     whose real content exceeds this height — no per-step height logic
     added, no step content/markup changed. */
  height: min(600px, calc(100vh - 48px));
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Left sidebar ── */
.pc-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--bg-overlay);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}

.pc-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.pc-step-nav {
  display: flex;
  flex-direction: column;
}

.pc-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: default;
  transition: background var(--t-mid);
}

.pc-step-item.active {
  background: var(--bg-elevated);
}

.pc-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--border-muted);
  background: transparent;
  flex-shrink: 0;
  transition: all var(--t-med);
}

.pc-step-item.active .pc-step-dot {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}

.pc-step-item.done .pc-step-dot {
  border-color: var(--green);
  background: var(--green);
}

.pc-step-label {
  font-size: 12.5px;
  color: var(--text-faint);
  font-weight: 400;
  transition: color var(--t-med);
}

.pc-step-item.active .pc-step-label {
  color: var(--text-primary);
  font-weight: 500;
}

.pc-step-item.done .pc-step-label {
  color: var(--green);
}

.pc-step-connector {
  width: 1.5px;
  height: 14px;
  background: var(--border-subtle);
  margin-left: 11px;
}

.pc-sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.pc-sidebar-hint {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.pc-sidebar-sub {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ── Right body ── */
.pc-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  min-width: 0;
}

.pc-body-inner {
  width: 100%;
  padding: var(--space-8) var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
}

.pc-step-panel {
  display: none;
  flex-direction: column;
  flex: 1;
}

.pc-step-panel.active {
  display: flex;
}

/* Step header */
.pc-step-header {
  margin-bottom: 22px;
}

.pc-step-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}

.pc-step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 5px;
}

.pc-step-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Form */
.pc-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.pc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pc-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pc-required {
  color: #f85149;
  margin-left: 2px;
}

.pc-input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-mid);
  box-sizing: border-box;
}

.pc-input:focus {
  border-color: var(--cyan);
  background: var(--bg-overlay);
}

.pc-input::placeholder {
  color: var(--text-faint);
}

.pc-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
}

.pc-select {
  background: var(--bg-base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237d8590' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.pc-field-hint {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.45;
}

/* Assets */
.pc-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.pc-asset-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 10px;
  border: 1.5px dashed var(--border-muted);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color var(--t-mid), background var(--t-mid);
  text-align: center;
}

.pc-asset-drop:hover {
  border-color: var(--cyan);
  background: var(--cyan-dim);
}

.pc-asset-drop.uploaded {
  border-color: var(--green);
  border-style: solid;
  background: rgba(63,185,80,0.06);
}

.pc-asset-icon {
  color: var(--text-muted);
  display: flex;
}

.pc-asset-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pc-asset-sub {
  font-size: 10px;
  color: var(--text-faint);
}

.pc-asset-status {
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  min-height: 13px;
}

/* Assignment */
.pc-role-legend {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc-role-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.pc-role-chip {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pc-role-chip.lead {
  background: rgba(0,212,255,0.1);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.2);
}

.pc-role-chip.member {
  background: var(--purple-dim);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.2);
}

.pc-role-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Review (step 5) */
.pc-review-card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.pc-review-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pc-review-grid {
  display: flex;
  flex-direction: column;
}

.pc-review-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pc-review-row:last-child { border-bottom: none; }

.pc-review-label {
  font-size: 11.5px;
  color: var(--text-muted);
  width: 110px;
  flex-shrink: 0;
}

.pc-review-value {
  font-size: 11.5px;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
  word-break: break-word;
}

.pc-review-value.brief-preview {
  color: var(--text-secondary);
  font-weight: 400;
  font-style: italic;
}

.pc-start-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.pc-start-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.pc-start-info-row strong { color: var(--text-primary); }
.pc-start-info-row svg { flex-shrink: 0; color: var(--cyan); }

/* Footer navigation */
.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.pc-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pc-progress-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.pc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-muted);
  transition: all var(--t-med);
}

.pc-dot.active {
  background: var(--cyan);
  width: 16px;
  border-radius: var(--r-xs);
}

.pc-dot.done { background: var(--green); }

.pc-btn-back {
  background: none;
  border: 1px solid var(--border-muted);
  border-radius: 7px;
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-mid), color var(--t-mid);
}

.pc-btn-back:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.pc-btn-next {
  background: var(--cyan);
  border: none;
  border-radius: 7px;
  height: var(--control-h-md);
  padding: 0 var(--space-5);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  transition: opacity var(--t-mid);
}

.pc-btn-next:hover { opacity: 0.88; }

.pc-btn-next.create {
  background: #3fb950;
  color: #000;
}

/* New Project sidebar button */
.new-project-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: rgba(0,212,255,0.07);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--cyan);
  cursor: pointer;
  margin-bottom: 16px;
  transition: background var(--t-mid), border-color var(--t-mid);
}

.new-project-btn:hover {
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.35);
}

/* Bug fix — the Projects toolbar's own "+ New Project" button reuses this
   same class (see index.html's .pd-toolbar), inheriting the sidebar-only
   width:100%/margin-bottom:16px. This went unnoticed while a separate CSS
   parsing bug (a comment terminated early by a literal "*/" inside its own
   text, elsewhere in this file) was silently collapsing #mainContent to its
   min-content width — once that's fixed and the toolbar has real width to
   fill, width:100% here stretched this button across nearly the whole row
   instead of staying a normal compact button. Scoped back to auto-sized
   here without touching the sidebar's own (still width:100%) button. */
.pd-toolbar .new-project-btn {
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Light theme */
[data-theme="light"] .pc-screen { background: rgba(0,0,0,0.4); }
[data-theme="light"] .pc-shell { background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.18); }
[data-theme="light"] .pc-sidebar { background: #f6f8fa; }
[data-theme="light"] .pc-input { background: #fff; }
[data-theme="light"] .pc-select {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666e7a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 30px;
}
[data-theme="light"] .pc-input:focus { background: #fff; }
[data-theme="light"] .pc-review-card,
[data-theme="light"] .pc-start-info,
[data-theme="light"] .pc-role-legend { background: #f6f8fa; }

/* ═══════════════════════════════════════════════════════
   ASSET MANAGEMENT
   ═══════════════════════════════════════════════════════ */

.am-section {
  margin-top: 24px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
}

/* Header */
.am-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.am-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.am-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.am-total-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1px 7px;
}

.am-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.am-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-mid), color var(--t-mid);
}

.am-action-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.am-action-btn.primary {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.25);
  color: var(--cyan);
}

.am-action-btn.primary:hover {
  background: rgba(0,212,255,0.14);
  border-color: rgba(0,212,255,0.4);
}

/* Category tabs */
.am-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0;
}

.am-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--t-mid);
}

.am-tab:hover { color: var(--text-primary); }

.am-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--cyan);
  font-weight: 500;
}

.am-tab-missing { color: #f85149; }
.am-tab-missing.active { border-bottom-color: #f85149; }

.am-missing-badge {
  font-size: 9px;
  font-weight: 700;
  background: rgba(248,81,73,0.15);
  color: #f85149;
  border-radius: 8px;
  padding: 0 5px;
  min-width: 14px;
  text-align: center;
}

/* Table */
.am-table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.am-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.am-table thead tr {
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-subtle);
}

.am-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.am-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
}

.am-row:last-child { border-bottom: none; }
.am-row:hover { background: var(--bg-overlay); }
.am-row-missing { background: rgba(248,81,73,0.03); }
.am-row-missing:hover { background: rgba(248,81,73,0.06); }

.am-table td {
  padding: 9px 12px;
  vertical-align: middle;
}

.am-cell-file {
  display: flex;
  align-items: center;
  gap: 9px;
}

.am-file-icon {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}

.am-file-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.am-file-name {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 12px;
}

.am-file-size {
  color: var(--text-faint);
  font-size: 10.5px;
}

/* Badges */
.am-type-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 2px 6px;
}

.am-status-chip {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 2px 8px;
}

.am-status-ready {
  background: rgba(63,185,80,0.1);
  color: var(--green);
  border: 1px solid rgba(63,185,80,0.25);
}

.am-status-missing {
  background: rgba(248,81,73,0.1);
  color: #f85149;
  border: 1px solid rgba(248,81,73,0.25);
}

.am-usage-chip {
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 10px;
  padding: 2px 8px;
  border: 1px solid transparent;
}

.am-usage-used {
  background: rgba(0,212,255,0.08);
  color: var(--cyan);
  border-color: rgba(0,212,255,0.2);
}

.am-usage-none {
  color: var(--text-faint);
  background: none;
  border-color: var(--border-subtle);
}

/* Row action buttons */
.am-cell-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.am-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.am-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--bg-overlay);
}

.am-btn-danger:hover {
  border-color: rgba(248,81,73,0.4);
  color: #f85149;
  background: rgba(248,81,73,0.06);
}

.am-btn-warn:hover {
  border-color: rgba(63,185,80,0.4);
  color: var(--green);
  background: rgba(63,185,80,0.06);
}

.am-btn-toggle:hover {
  border-color: rgba(0,212,255,0.35);
  color: var(--cyan);
  background: rgba(0,212,255,0.06);
}

.am-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-faint);
  font-size: 12px;
}

/* AP-3 — Asset Manager: grid view, loading/error states, details modal. */
.am-panel-loading, .am-panel-error {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.am-panel-error { color: var(--red); }

.am-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.am-grid-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-mid);
}
.am-grid-card:hover { border-color: var(--border-accent); }
.am-grid-card.am-grid-card-deleted { opacity: 0.5; }
.am-grid-thumb {
  width: 100%;
  height: 90px;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}
.am-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.am-grid-name {
  font-size: 11px;
  color: var(--text-primary);
  padding: 6px 8px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-grid-meta {
  font-size: 9.5px;
  color: var(--text-muted);
  padding: 0 8px 6px;
  display: flex;
  justify-content: space-between;
}

.am-details-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.am-details-row:last-child { border-bottom: none; }
.am-details-label { color: var(--text-muted); }
.am-details-value { color: var(--text-primary); font-weight: 500; text-align: right; }
.am-version-history { margin-top: 10px; }
.am-version-history-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.am-version-row { font-size: 11.5px; color: var(--text-secondary); padding: 3px 0; }

/* Sidebar mini list */
.am-sidebar-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0 6px;
  margin-left: 5px;
  vertical-align: middle;
}

.am-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.am-sidebar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
}

.am-sidebar-item.missing .am-sidebar-name { color: #f85149; }

.am-sidebar-icon { font-size: 13px; flex-shrink: 0; }

.am-sidebar-name {
  font-size: 11.5px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-sidebar-size {
  font-size: 10px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* Upload drop zone */
.am-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  border: 1.5px dashed var(--border-muted);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12.5px;
  transition: border-color var(--t-mid), background var(--t-mid);
}

.am-upload-drop:hover {
  border-color: var(--cyan);
  background: var(--cyan-dim);
}

/* ═══════════════════════════════════════════════════════
   ROLE SWITCHER + ROLE BANNER
   ═══════════════════════════════════════════════════════ */

/* Role switcher trigger */
.role-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--t-mid);
  position: relative;
  flex: 1;
  min-width: 0;
}
.role-switcher:hover { background: var(--bg-overlay); }

.rs-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .03em;
}
.rs-avatar.super-admin { background: rgba(0,212,255,0.15); color: var(--cyan); }
.rs-avatar.team-lead   { background: var(--purple-dim); color: #a78bfa; }
.rs-avatar.team-member { background: rgba(63,185,80,0.12); color: var(--green); }

.rs-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.rs-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-label {
  font-size: 9.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rs-caret { color: var(--text-faint); flex-shrink: 0; }

/* Dropdown */
.rs-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 500;
  flex-direction: column;
  gap: 2px;
}
.rs-dropdown.open { display: flex; }

.rs-dropdown-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 4px 8px 6px;
}

.rs-option {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 7px 8px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
  font-family: inherit;
  width: 100%;
}
.rs-option:hover { background: var(--bg-elevated); }
.rs-option.active { background: var(--bg-elevated); }

.rs-opt-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.rs-opt-avatar.sa { background: rgba(0,212,255,0.15); color: var(--cyan); }
.rs-opt-avatar.tl { background: var(--purple-dim); color: #a78bfa; }
.rs-opt-avatar.tm { background: rgba(63,185,80,0.12); color: var(--green); }

.rs-opt-info { flex: 1; min-width: 0; }
.rs-opt-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.rs-opt-desc {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 1px;
}
.rs-check {
  font-size: 11px;
  color: var(--cyan);
  flex-shrink: 0;
}

/* Role banner */
.role-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: var(--purple-dim);
  border-bottom: 1px solid rgba(139,92,246,0.2);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.role-banner strong { color: var(--text-primary); }

.role-banner-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}
.role-tag-team-lead {
  background: var(--purple-dim);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.25);
}
.role-tag-team-member {
  background: rgba(63,185,80,0.1);
  color: var(--green);
  border: 1px solid rgba(63,185,80,0.2);
}

/* sidebar-footer-bottom needs relative for dropdown */
.sidebar-footer-bottom {
  position: relative;
}

.pc-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color var(--t-mid), color var(--t-mid), background var(--t-mid);
  flex-shrink: 0;
}
.pc-close-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--bg-overlay);
}

/* ═══════════════════════════════════════════════════════════════
   WORKFLOW AUDIT TAB
   ═══════════════════════════════════════════════════════════════ */

/* Tab badge */
.tab-btn-audit { position: relative; }
.tab-audit-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0,212,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.2);
  margin-left: 4px;
  font-family: var(--font-mono);
}

/* Audit wrap */
.audit-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 4px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 16px;
  flex-wrap: wrap;
}
.audit-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.audit-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.audit-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Progress ring */
.audit-progress-ring-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.audit-ring { display: block; }
.audit-ring-track { stroke: var(--border-subtle); }
.audit-ring-fill {
  stroke: var(--cyan);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ease-in-out);
}
.audit-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.audit-progress-text { display: flex; flex-direction: column; gap: 2px; }
.audit-progress-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.audit-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Refresh */
.audit-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-mid), color var(--t-mid), background var(--t-mid);
}
.audit-refresh-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Validation alerts */
.audit-alerts { display: flex; flex-direction: column; gap: 8px; }
.audit-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
  font-size: 12px;
  color: var(--text-secondary);
  animation: audit-alert-in var(--t-med) ease;
}
.audit-alert-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #f87171;
}
.audit-alert strong { color: #f87171; font-weight: 600; }
@keyframes audit-alert-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* Steps grid */
.audit-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Step card */
.audit-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
  position: relative;
  transition: border-color var(--t-med), background var(--t-med);
}
.audit-step.status-completed {
  border-color: rgba(63,185,80,0.25);
  background: rgba(63,185,80,0.04);
}
.audit-step.status-in-progress {
  border-color: rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.04);
}
.audit-step.status-blocked {
  border-color: rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.04);
}
.audit-step.status-pending {
  border-color: var(--border-subtle);
  background: var(--bg-overlay);
}

/* Step number bubble */
.audit-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono);
  transition: background var(--t-med), color var(--t-med);
}
.status-pending .audit-step-num    { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.status-in-progress .audit-step-num { background: rgba(0,212,255,0.15); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }
.status-completed .audit-step-num  { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
.status-blocked .audit-step-num    { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }

/* Step body */
.audit-step-body { flex: 1; min-width: 0; }
.audit-step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-step-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Status chip */
.audit-step-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.status-pending .audit-step-chip    { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.status-in-progress .audit-step-chip { background: rgba(0,212,255,0.12); color: var(--cyan); border: 1px solid rgba(0,212,255,0.2); }
.status-completed .audit-step-chip  { background: rgba(63,185,80,0.12); color: var(--green); border: 1px solid rgba(63,185,80,0.2); }
.status-blocked .audit-step-chip    { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* Connector lines between step groups */
.audit-steps-group-label {
  grid-column: 1 / -1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 2px 0;
}

/* Audit log */
.audit-log-section {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
}
.audit-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.audit-log-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.audit-log-clear {
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color var(--t-mid), background var(--t-mid);
}
.audit-log-clear:hover { color: var(--text-secondary); background: var(--bg-overlay); }

.audit-log-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 0;
}
.audit-log-list::-webkit-scrollbar { width: 4px; }
.audit-log-list::-webkit-scrollbar-track { background: transparent; }
.audit-log-list::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: var(--r-xs); }

.audit-log-empty {
  padding: 20px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.audit-log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  animation: audit-log-in var(--t-med) ease;
}
.audit-log-entry:last-child { border-bottom: none; }
@keyframes audit-log-in { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } }
.audit-log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.audit-log-dot.green  { background: var(--green); }
.audit-log-dot.cyan   { background: var(--cyan); }
.audit-log-dot.amber  { background: var(--amber); }
.audit-log-dot.red    { background: #f87171; }
.audit-log-body { flex: 1; }
.audit-log-msg { font-size: 12px; color: var(--text-secondary); }
.audit-log-msg strong { color: var(--text-primary); font-weight: 600; }
.audit-log-time { font-size: 10px; color: var(--text-muted); margin-top: 1px; font-family: var(--font-mono); }

/* Sprint 7 Phase 2 (Analysis panel) / Phase 2.5 (AI Decisions execution
   timeline). Compact execution-card look (status icon + title + metadata
   rows + timestamp), closer to a CI/CD run list than a chat/log view —
   still built on the same spacing/border tokens as .audit-log-entry. */
.ai-decision-entry {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  animation: audit-log-in var(--t-med) ease;
}
.ai-decision-entry:last-child { border-bottom: none; }

.ai-card-header { display: flex; align-items: center; gap: 8px; }
.ai-card-icon { font-size: 12px; flex-shrink: 0; width: 14px; text-align: center; }
.ai-card-icon.completed { color: var(--green); }
.ai-card-icon.failed    { color: #f87171; }
.ai-card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; }
.ai-card-time  { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }

.ai-card-fields {
  margin-top: 6px;
  margin-left: 22px; /* aligns under the title, past the status icon */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-card-field { display: flex; gap: 6px; font-size: 11px; }
.ai-card-field-label { color: var(--text-muted); min-width: 70px; flex-shrink: 0; }
.ai-card-field-value { color: var(--text-secondary); font-family: var(--font-mono); }

.ai-card-details { margin-top: 6px; margin-left: 22px; }
.ai-card-details summary {
  font-size: 10px;
  color: var(--cyan);
  cursor: pointer;
  user-select: none;
}
.ai-card-details pre {
  margin-top: 4px;
  padding: 8px;
  background: var(--bg-inset, rgba(0,0,0,0.15));
  border-radius: var(--r-md, 4px);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.analysis-rp-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.analysis-rp-row:last-child { border-bottom: none; }
.analysis-rp-label { font-size: 11px; color: var(--text-muted); }
.analysis-rp-value { font-size: 12px; color: var(--text-secondary); text-align: right; }

/* Light theme overrides */
[data-theme="light"] .audit-step { background: #fff; }
[data-theme="light"] .audit-step.status-completed { background: rgba(63,185,80,0.05); }
[data-theme="light"] .audit-step.status-in-progress { background: rgba(0,212,255,0.05); }
[data-theme="light"] .audit-step.status-blocked { background: rgba(239,68,68,0.04); }
[data-theme="light"] .audit-log-section { background: #fff; }
[data-theme="light"] .audit-log-header { background: #f8f9fa; }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS TAB
   ═══════════════════════════════════════════════════════════════ */
.settings-section { margin-bottom: 28px; }
.settings-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
/* FRONTEND_F1 Sprint 2 — honest role-system disclosure (Settings tab). */
.settings-role-notice { font-size: 11px; color: var(--text-secondary); background: var(--bg-overlay); border: 1px solid var(--border-muted); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.4; }
.settings-cards { display: flex; flex-direction: column; gap: 6px; }
.settings-role-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-muted); border-radius: 6px; cursor: pointer; transition: border-color var(--t-mid), background var(--t-mid); background: var(--bg-elevated); }
.settings-role-card:hover { border-color: var(--border-accent); }
.settings-role-card.active { border-color: var(--cyan); background: rgba(0,212,255,0.06); }
.settings-role-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.settings-role-info { flex: 1; }
.settings-role-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.settings-role-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-role-check { color: var(--cyan); font-size: 13px; opacity: 0; }
.settings-role-card.active .settings-role-check { opacity: 1; }
.settings-model-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-muted); border-radius: 6px; cursor: pointer; transition: border-color var(--t-mid), background var(--t-mid); background: var(--bg-elevated); }
.settings-model-card:hover { border-color: var(--border-accent); }
.settings-model-card.active { border-color: var(--cyan); background: rgba(0,212,255,0.06); }
.settings-model-card.active .settings-role-check { opacity: 1; }
.settings-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.settings-label { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.settings-input { background: var(--bg-elevated); border: 1px solid var(--border-muted); border-radius: 5px; padding: 7px 10px; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: none; transition: border-color var(--t-mid); }
.settings-input:focus { border-color: var(--cyan); }
.settings-select { background: var(--bg-elevated); border: 1px solid var(--border-muted); border-radius: 5px; padding: 7px 10px; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: none; }
.settings-theme-row { display: flex; gap: 8px; }
.settings-theme-btn { flex: 1; padding: 8px; border: 1px solid var(--border-muted); border-radius: 5px; background: var(--bg-elevated); color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all var(--t-mid); text-align: center; }
.settings-theme-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,0.06); }

/* ── PAGE STRUCTURE MANAGER ── */
.psm-stats-row {
  display: flex;
  gap: 0;
  margin: 14px 0 12px;
  border: 1px solid var(--border-muted);
  border-radius: 7px;
  overflow: hidden;
}
.psm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  border-right: 1px solid var(--border-muted);
}
.psm-stat:last-child { border-right: none; }
.psm-stat-value { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.psm-stat-label { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
/* UI/UX Consistency Sprint 1, item 6 — #psmStatOrder holds a word ("Auto"),
   not a numeral like its two siblings; at the same 20px numeral size it
   reads visually heavier/wider than "6" or "0" despite being the same
   semantic weight (one summary value). Sized down to balance, not to
   de-emphasize it. */
#psmStatOrder { font-size: 15px; }
.psm-info-banner {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.psm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.psm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  transition: border-color var(--t-mid), background var(--t-mid);
  cursor: default;
}
.psm-row:hover { border-color: var(--border-accent); }
.psm-row.psm-dragging { opacity: 0.4; }
.psm-row.psm-drag-over { border-color: var(--cyan); background: rgba(0,212,255,0.05); box-shadow: 0 0 0 3px var(--cyan-dim); }
.psm-row-drag { color: var(--text-muted); cursor: grab; opacity: 0.4; flex-shrink: 0; }
.psm-row-drag:hover { opacity: 1; }
.psm-row-num { font-size: 11px; color: var(--text-muted); font-weight: 600; min-width: 22px; flex-shrink: 0; }
.psm-row-name { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.psm-custom-badge { font-size: 10px; padding: 2px 6px; border-radius: var(--r-xs); background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(139,92,246,0.2); flex-shrink: 0; }
.psm-row-actions { display: flex; gap: 6px; opacity: 0; transform: translateX(4px); transition: opacity var(--t-mid), transform var(--t-mid); }
.psm-row:hover .psm-row-actions { opacity: 1; transform: translateX(0); }
.psm-action-btn { font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-muted); background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all var(--t-mid); }
.psm-action-btn:hover { border-color: var(--border-accent); color: var(--text-primary); }
.psm-action-btn.danger:hover { border-color: rgba(239,68,68,0.4); color: #ef4444; background: rgba(239,68,68,0.06); }
.psm-add-row { display: flex; gap: 8px; align-items: center; padding: 10px 0 4px; }
.psm-add-input { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border-muted); border-radius: 5px; padding: 7px 10px; font-size: 12.5px; color: var(--text-primary); font-family: inherit; outline: none; transition: border-color var(--t-mid); }
.psm-add-input:focus { border-color: var(--cyan); }
.psm-rename-input { flex: 1; background: var(--bg-elevated); border: 1px solid var(--cyan); border-radius: 4px; padding: 2px 7px; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: none; font-weight: 500; }

/* ── SM-F1 — Section Management panel ────────────────────────────────────
   Reuses the Page Structure Manager's row/badge/action-button pattern
   (.psm-*) rather than inventing a second visual language. */
.homepage-main-row {
  display: flex;
  flex: 1;
  gap: 12px;
  min-height: 0;
}
.homepage-main-row .homepage-preview-pane { flex: 1; min-width: 0; }
.sm-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.sm-panel-title { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sm-panel-actions { display: flex; gap: 6px; align-items: center; }
.sm-add-btn {
  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-sm);
  border: 1px solid rgba(0,212,255,0.3); background: var(--cyan-dim); color: var(--cyan);
  cursor: pointer; font-family: inherit; transition: all var(--t-mid);
}
.sm-add-btn:hover:not(:disabled) { background: var(--cyan-glow); }
.sm-add-btn:disabled { opacity: 0.5; cursor: default; }
.sm-panel-loading, .sm-panel-empty {
  padding: 24px 14px; text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.sm-panel-error { padding: 16px 14px; text-align: center; }
.sm-panel-error-title { font-size: 12.5px; font-weight: 600; color: var(--red); margin-bottom: 4px; }
.sm-panel-error-msg { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.sm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.sm-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  transition: border-color var(--t-mid), background var(--t-mid), box-shadow var(--t-mid);
}
.sm-row:hover { border-color: var(--border-accent); }
.sm-row.sm-row-locked { background: rgba(210,153,34,0.04); }
.sm-row.sm-row-removed { opacity: 0.55; }
.sm-row.sm-row-highlight {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
  animation: smRowPulse 1.3s ease-in-out 2;
}
@keyframes smRowPulse {
  0%, 100% { background: var(--bg-elevated); }
  50%      { background: rgba(0,212,255,0.08); }
}
.sm-row-main { display: flex; align-items: flex-start; gap: 8px; }
.sm-row-pos { font-size: 10.5px; color: var(--text-muted); font-weight: 600; min-width: 16px; flex-shrink: 0; padding-top: 1px; }
.sm-row-info { flex: 1; min-width: 0; }
.sm-row-name { font-size: 12.5px; color: var(--text-primary); font-weight: 500; margin-bottom: 3px; word-break: break-word; }
.sm-row-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sm-type-pill {
  font-size: 10px; padding: 1.5px 6px; border-radius: var(--r-xs);
  background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-muted);
  text-transform: lowercase;
}
.sm-id-pill {
  font-size: 9.5px; padding: 1.5px 6px; border-radius: var(--r-xs);
  background: var(--bg-hover); color: var(--text-faint); border: 1px solid var(--border-muted);
  font-family: var(--font-mono); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-lock-badge {
  font-size: 10px; padding: 1.5px 6px; border-radius: var(--r-xs);
  background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(210,153,34,0.25);
}
.sm-removed-badge {
  font-size: 10px; padding: 1.5px 6px; border-radius: var(--r-xs);
  background: var(--red-dim); color: var(--red); border: 1px solid rgba(248,81,73,0.25);
}
.sm-row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.sm-action-btn {
  font-size: 10.5px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-muted);
  background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all var(--t-mid);
}
.sm-action-btn:hover:not(:disabled) { border-color: var(--border-accent); color: var(--text-primary); }
.sm-action-btn:disabled { opacity: 0.4; cursor: default; }
.sm-action-btn.sm-action-danger:hover:not(:disabled) { border-color: rgba(239,68,68,0.4); color: #ef4444; background: rgba(239,68,68,0.06); }
/* LANE-B SECTION-MANIFEST-UX-CORRECTIVE — More Actions (⋯) dropdown.
   .sm-dropdown-menu is a single shared, portal-style element appended to
   document.body (never nested inside .sm-list) so it is never clipped by
   .sm-list's own `overflow-y: auto` — positioned via getBoundingClientRect
   at open time (see section-management.js's own _toggleRowMenu). */
.sm-more-btn {
  font-size: 13px; line-height: 1; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border-muted);
  background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all var(--t-mid);
}
.sm-more-btn:hover:not(:disabled) { border-color: var(--border-accent); color: var(--text-primary); }
.sm-more-btn[aria-expanded="true"] { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }
.sm-dropdown-menu {
  position: fixed; display: none; z-index: 1000; min-width: 168px;
  background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: 4px; flex-direction: column; gap: 1px;
}
.sm-dropdown-menu.open { display: flex; }
.sm-dropdown-item {
  display: block; width: 100%; text-align: left; font-size: 11.5px; padding: 6px 9px; border-radius: 4px;
  border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.sm-dropdown-item:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.sm-dropdown-item:disabled { opacity: 0.4; cursor: default; }
.sm-dropdown-item.sm-action-danger { color: #ef4444; }
.sm-dropdown-item.sm-action-danger:hover:not(:disabled) { background: rgba(239,68,68,0.08); color: #ef4444; }
.sm-dropdown-sep { height: 1px; background: var(--border-subtle); margin: 3px 2px; }
.sm-row-id-subtle {
  font-size: 9px; color: var(--text-faint); font-family: var(--font-mono); opacity: 0.7;
}

.sm-modal-error {
  font-size: 11.5px; color: var(--red); background: var(--red-dim); border: 1px solid rgba(248,81,73,0.25);
  border-radius: var(--r-sm); padding: 7px 10px; margin-top: 8px;
}

/* Visual Reference Upload, Phase 2 — Fix/Redesign Section modal attachment.
   Reuses existing tokens/classes (nd-field, field-label, inline-btn,
   sm-modal-error) — only the upload-area/thumbnail/filename layout below
   is new. Phase 4.3 — .sm-vr-list stacks 0-5 .sm-vr-preview rows (one per
   attachment) with a small gap; each row's own layout is unchanged. */
.sm-vr-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.sm-vr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.sm-vr-preview {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-muted); border-radius: var(--r-md);
  padding: 8px; background: var(--bg-elevated);
}
.sm-vr-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--border-muted); flex-shrink: 0;
}
.sm-vr-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.sm-vr-filename {
  font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.sm-vr-actions { display: flex; gap: 8px; }

@media (max-width: 1100px) {
  .homepage-main-row { flex-direction: column; }
  .sm-panel { width: 100%; max-height: 260px; }
}

/* Brief Mode Switcher */
.brief-mode-switcher {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  width: fit-content;
}
.brief-mode-btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-mid);
  border-right: 1px solid var(--border);
}
.brief-mode-btn:last-child { border-right: none; }
.brief-mode-btn.active { background: var(--surface-2); color: var(--text-primary); }
.brief-mode-btn:hover:not(.active) { color: var(--text-primary); }

/* Structured Brief sections */
.brief-struct-section { border: 1px solid var(--border); border-radius: 7px; margin-bottom: 8px; overflow: hidden; }
.brief-struct-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: var(--surface-1); user-select: none; }
.brief-struct-header:hover { background: var(--surface-2); }
.brief-struct-num { font-size: 10.5px; font-weight: 700; color: var(--text-muted); min-width: 20px; }
.brief-struct-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.brief-struct-arrow { color: var(--text-muted); flex-shrink: 0; transition: transform var(--t-med); }
.brief-struct-body { padding: 12px 14px; border-top: 1px solid var(--border); }
.brief-struct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Feature / stack chip buttons */
.brief-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.brief-chip-btn { padding: 5px 12px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: inherit; transition: all var(--t-mid); }
.brief-chip-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.brief-chip-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,0.06); }

/* Asset checkboxes */
.brief-asset-checks { display: flex; flex-direction: column; gap: 8px; }
.brief-asset-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.brief-asset-row input[type=checkbox] { accent-color: var(--cyan); width: 14px; height: 14px; }

/* Build setting toggles */
.brief-toggles { display: flex; flex-direction: column; gap: 0; }
.brief-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.brief-toggle-row:last-child { border-bottom: none; }
.brief-toggle-label { font-size: 12.5px; color: var(--text-primary); }
.brief-toggle-check { accent-color: var(--cyan); width: 15px; height: 15px; cursor: pointer; }

/* Ref remove button */
.ref-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 0 4px; margin-left: auto; opacity: 0; transition: opacity var(--t-mid); }
.ref-item:hover .ref-remove-btn { opacity: 1; }
.ref-item { display: flex; align-items: center; gap: 8px; }

/* brief.md preview */
.brief-md-preview {
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-mono);
}

/* ── BRIEF ZIP WORKFLOW ── */
.brief-processing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cyan);
  padding: 8px 0;
  animation: fadeIn var(--t-med) ease both;
}
.brief-adv-wrap { position: relative; }
.brief-adv-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  z-index: 100;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  animation: dropdownIn 0.16s var(--ease-spring) both;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.brief-adv-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  font-size: 12.5px;
  font-family: inherit;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.brief-adv-item:hover { background: var(--surface-2); }
.brief-detected {
  color: var(--cyan) !important;
}
.brief-detected:focus { color: var(--text-primary) !important; }
.brief-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  letter-spacing: 0.05em;
  margin-left: 8px;
}
.brief-status-badge[data-status="clear"] {
  background: rgba(34,197,94,0.12);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.25);
}
.brief-status-badge[data-status="needs-decision"] {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.25);
}
.brief-status-row { display: flex; gap: 8px; }
.brief-status-opt {
  flex: 1;
  padding: 7px 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: all var(--t-mid);
}
.brief-status-opt:hover { border-color: var(--border-strong); color: var(--text-primary); }
.brief-status-opt.active[data-status="clear"] { border-color: rgba(34,197,94,0.4); color: var(--green); background: rgba(34,197,94,0.07); }
.brief-status-opt.active[data-status="needs-decision"] { border-color: rgba(251,191,36,0.4); color: #fbbf24; background: rgba(251,191,36,0.07); }
.brief-q-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,212,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 8px;
}
.brief-question-item {
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}
.brief-q-header { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.brief-q-num { font-size: 10.5px; font-weight: 700; color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.brief-q-text { font-size: 12.5px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }
.brief-q-reason { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
/* LANE B RBI 2.0 REMAINING UI + QUESTIONS CLOSURE §8-13 — Required/
   Recommended/Optional answer control (answered state + edit/reset). */
.brief-q-answered { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.brief-q-answered-label { color: var(--green); font-weight: 600; }
.brief-q-answered-value { color: var(--text-primary); }
.brief-q-answer-wrap { margin-top: 2px; }

/* Clarifying Questions — AI Decide */
.brief-q-ai-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-mid);
  white-space: nowrap;
}
.brief-q-ai-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.brief-q-ai-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,0.08); }
.brief-q-ai-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--cyan);
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 5px;
  padding: 7px 10px;
}
.brief-q-undo {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}
.brief-q-undo:hover { color: var(--text-primary); }
.brief-q-ai-mode { opacity: 0.75; }

/* ── QA RESULTS PANEL ── */
.qa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 10px;
  color: var(--text-muted);
}
.qa-empty-icon { margin-bottom: 4px; color: var(--text-muted); }
.qa-empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.qa-empty-sub { font-size: 12px; max-width: 340px; line-height: 1.6; }

/* Summary row */
.qa-summary-row {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.qa-summary-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.qa-score-ring {
  position: relative;
  width: 56px;
  height: 56px;
}
.qa-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.qa-score-label { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.qa-summary-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}
.qa-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.qa-stat-num {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}
.qa-stat-label { font-size: 10.5px; color: var(--text-muted); }
.qa-stat-pass .qa-stat-num { color: var(--green); }
.qa-stat-warn .qa-stat-num { color: var(--amber); }
.qa-stat-fail .qa-stat-num { color: var(--red); }
.qa-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
  border-left: 1px solid var(--border);
  padding-left: 20px;
  margin-left: 4px;
}
.qa-meta-line { line-height: 1.5; }

/* Category card score badge */
.qa-cat-score {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.qa-cat-score-pass { color: var(--green); }
.qa-cat-score-warn { color: var(--amber); }
.qa-cat-score-fail { color: var(--red); }

/* Issues table */
.qa-issues-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.qa-issues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.qa-issues-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.qa-issues-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.qa-issues-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
}
.qa-issues-table tbody tr:last-child td { border-bottom: none; }
.qa-issues-table tbody tr:hover { background: var(--surface-2); }
.qa-issue-resolved td { opacity: 0.5; }
.qa-issue-cat  { color: var(--text-muted); white-space: nowrap; }
.qa-issue-page { color: var(--text-muted); white-space: nowrap; }
.qa-issue-desc { color: var(--text-primary); max-width: 240px; }
.qa-issue-rec  { color: var(--text-muted); max-width: 220px; font-size: 11px; }
.qa-issues-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* Severity badges */
.qa-sev-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.qa-sev-high   { background: var(--red-dim);   color: var(--red);   }
.qa-sev-medium { background: var(--amber-dim); color: var(--amber); }
.qa-sev-low    { background: rgba(100,116,139,0.12); color: var(--text-muted); }

/* Filter buttons */
.qa-filter-btn {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast);
}
.qa-filter-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.qa-filter-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,0.07); }

/* Resolve button */
.qa-resolve-btn {
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.qa-resolve-btn:hover { border-color: var(--green); color: var(--green); }

/* ── DEPLOYMENT CONFIGURATION ── */
.dc-config-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
}
.dc-config-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.dc-config-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.dc-overall-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  letter-spacing: 0.02em;
}
.dc-overall-badge[data-ready="true"] {
  color: var(--green);
  border-color: rgba(34,197,94,0.3);
  background: var(--green-dim);
}

/* Readiness row */
.dc-readiness-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.dc-ready-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 11.5px;
  border-right: 1px solid var(--border);
}
.dc-ready-item:last-child { border-right: none; }
.dc-ready-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background var(--t-med);
}
.dc-ready-item[data-ready="true"] .dc-ready-dot { background: var(--green); }
.dc-ready-label {
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 48px;
}
.dc-ready-status { color: var(--text-muted); font-size: 11px; }
.dc-ready-item[data-ready="true"] .dc-ready-status { color: var(--green); }

/* Config blocks */
.dc-blocks-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.dc-block {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}
.dc-block:last-child { border-right: none; }
.dc-block-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.dc-block-icon { font-size: 14px; }
.dc-block-name { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; }
/* Sprint 1.8 — pill shape aligned to .status-badge/.hp-status-badge (both
   fully-rounded 20px); this was the one status badge in the app using the
   squarer --r-xs radius instead of the pill shape everywhere else. */
.dc-block-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--red-dim);
  color: var(--red);
  background: var(--red-dim);
  white-space: nowrap;
}
.dc-block-badge[data-ready="true"] {
  border-color: rgba(34,197,94,0.25);
  color: var(--green);
  background: var(--green-dim);
}
.dc-block-fields { display: flex; flex-direction: column; gap: 9px; }
.dc-field-row { display: flex; flex-direction: column; gap: 4px; }
.dc-field-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dc-required { color: var(--red); margin-left: 2px; }
.dc-field-input {
  background: var(--surface-3, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--t-fast);
}
.dc-field-input:focus {
  outline: none;
  border-color: var(--cyan);
}
.dc-field-input::placeholder { color: var(--text-faint, var(--text-muted)); opacity: 0.6; }

/* Card blocked state */
.deliver-card.dc-card-blocked {
  opacity: 0.55;
  cursor: default;
  pointer-events: auto;
}
.deliver-card.dc-card-blocked:hover {
  border-color: var(--border);
  background: transparent;
  transform: none;
}
.dc-card-hint {
  font-size: 10.5px;
  color: var(--amber);
  margin-top: 5px;
  font-style: italic;
}

/* FRONTEND_F1 Sprint 1 — validation.delivery-verification classification
   (success | partial | failed | unsupported_method), keyed off the
   Runner's own error.code (already delivered to the client today — no
   backend change needed; see this sprint's Documentation report). */
.dc-card-result {
  font-size: 10.5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-muted);
  line-height: 1.4;
}
.dc-card-result-badge {
  display: inline-block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 3px;
}
.dc-card-result-badge.success           { background: var(--green-dim, rgba(46,160,67,.12)); color: var(--green); }
.dc-card-result-badge.partial           { background: var(--amber-dim, rgba(210,153,34,.12)); color: var(--amber); }
.dc-card-result-badge.failed            { background: var(--red-dim); color: var(--red); }
.dc-card-result-badge.unsupported_method{ background: var(--red-dim); color: var(--red); }
.dc-card-result-message { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   System Nav Group & EngineOS Core  (added: Access Control phase)
   ═══════════════════════════════════════════════════════════════ */

/* Sub-items under SYSTEM — slightly smaller, same hover as .nav-item */
.nav-item-system {
  font-size: 12px;
  padding: 6px 12px 6px 14px;
  gap: 8px;
}
.nav-item-system .nav-icon {
  width: 13px;
  height: 13px;
  opacity: 0.75;
}
.nav-item-system:hover .nav-icon { opacity: 1; }

/* ── EngineOS Core file cards ── */
.ec-file-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color var(--t-mid), background var(--t-mid);
}
.ec-file-card:hover {
  border-color: rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.03);
}
.ec-file-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ec-icon-md  { background: rgba(0,212,255,0.08); color: #00d4ff; }
.ec-icon-cmd { background: rgba(167,139,250,0.1); color: #a78bfa; }
.ec-icon-dir { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.ec-file-info { flex: 1; min-width: 0; }
.ec-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  font-family: var(--font-mono, monospace);
}
.ec-file-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ec-file-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint, var(--text-muted));
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── System placeholder cards ── */
.sys-placeholder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}
.sys-placeholder-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-muted));
}
.sys-placeholder-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.5;
}
.sys-placeholder-desc code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: var(--r-xs);
}

/* ── BRIEF SUMMARY CARD ────────────────────────────────────────── */
.brief-summary-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
}
.brief-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.brief-summary-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.brief-summary-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: rgba(0,255,136,0.1);
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brief-summary-badge.needs-decision {
  background: rgba(255,170,0,0.1);
  color: var(--amber);
  border-color: rgba(255,170,0,0.2);
}
.brief-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.brief-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.brief-summary-row:last-child { border-bottom: none; }
.brief-summary-label {
  color: var(--text-secondary);
  font-size: 11.5px;
}
.brief-summary-value {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 11.5px;
  text-align: right;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-approve-btn {
  width: 100%;
  padding: 9px 0;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--t-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brief-approve-btn:hover { opacity: 0.88; }
.brief-approve-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── PROJECT UNDERSTANDING GROUPED SUBSECTIONS ──────────────────── */
.brief-pu-group {
  margin-bottom: 14px;
}
.brief-pu-group:last-child { margin-bottom: 0; }
.brief-pu-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.brief-pu-group-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* ── RECOMMENDED BUILD PATH CARD ────────────────────────────────── */
.brief-build-path-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
.brief-build-path-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.brief-build-path-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.brief-build-path-step {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
.brief-build-path-step-first {
  color: var(--cyan);
  border-color: rgba(0,212,255,0.2);
  background: rgba(0,212,255,0.06);
}
.brief-build-path-arrow {
  font-size: 10px;
  color: var(--text-muted);
  padding-left: 8px;
  line-height: 1;
}

/* ── CLAUDE UNDERSTANDING SUMMARY ──────────────────────────────────── */
.bcu-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.bcu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bcu-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
}
.bcu-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: rgba(0,255,136,0.1);
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bcu-badge.bcu-badge-warn {
  background: rgba(255,170,0,0.1);
  color: var(--amber);
  border-color: rgba(255,170,0,0.25);
}
.bcu-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bcu-row {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.bcu-row:last-child { border-bottom: none; }
.bcu-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 110px;
  flex-shrink: 0;
  padding-top: 1px;
}
.bcu-value {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}
.bcu-row-has-gaps .bcu-value {
  color: var(--amber);
}
.bcu-gaps {
  font-size: 11.5px;
}
.bcu-auto-label {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11px;
}

/* ── COMPACT STATUS + CONTINUE ROW ─────────────────────────────────── */
.bcu-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bcu-status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.18);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}
.bcu-status-chip.bcu-status-issues {
  background: rgba(255,170,0,0.06);
  border-color: rgba(255,170,0,0.2);
  color: var(--amber);
}
.bcu-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.bcu-status-issues .bcu-status-dot { background: var(--amber); }
.bcu-continue-btn {
  flex: 1;
  padding: 9px 0;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--t-mid);
}
.bcu-continue-btn:hover { opacity: 0.88; }
.bcu-continue-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── ALWAYS-VISIBLE CLARIFYING QUESTIONS ──────────────────────────── */
.bcu-questions-wrap {
  margin-bottom: 8px;
}
.bcu-questions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.bcu-questions-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── BRIEF ANALYSIS CONFIDENCE INDICATORS ───────────────────────── */
.brief-editable-input.brief-conf-high {
  border-color: rgba(0,255,136,0.35);
}
.brief-editable-input.brief-conf-medium {
  border-color: rgba(255,170,0,0.35);
}
.brief-editable-input.brief-conf-low {
  border-color: rgba(255,170,0,0.2);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════
   CLAUDE BRIEF INTELLIGENCE REVIEW (cbir)
   ═══════════════════════════════════════════════════════ */

/* Two-column layout */
.cbir-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Individual column card */
.cbir-col {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Column header */
.cbir-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.cbir-col-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  flex: 1;
}
.cbir-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: rgba(0,255,136,0.12);
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.2);
  letter-spacing: 0.3px;
  /* LANE B RBI 2.0 STEP3/4/5 CONSISTENCY PASS — REAL BUG found via live
     390px browser verification: a two-word badge (e.g. "AI Detected") sitting
     inside a narrow flex row (Homepage/Inner Pages plan rows) wrapped
     mid-phrase onto two lines ("AI" / "Detected") because no nowrap was set
     here. Badges are always short, fixed labels — they must never break. */
  white-space: nowrap;
  flex-shrink: 0;
}
.cbir-badge.cbir-badge-warn {
  background: rgba(255,170,0,0.12);
  color: var(--amber);
  border-color: rgba(255,170,0,0.2);
}
.cbir-badge.cbir-badge-readonly {
  margin-left: 6px;
  background: rgba(148,163,184,0.12);
  color: var(--text-muted, #94a3b8);
  border-color: rgba(148,163,184,0.25);
}
/* RBI-2.0-M — compact, functional-only Homepage/Inner Pages plan editing
   controls (add/delete/reorder/edit/reset/confirm). Deliberately minimal —
   no redesign of the surrounding Read Brief cards, matching this phase's
   own "compact/SaaS-like, no giant JSON editor" scope. */
.cbir-plan-btn {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
}
.cbir-plan-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }
.cbir-plan-btn-primary {
  background: rgba(0,255,136,0.12);
  color: var(--green);
  border-color: rgba(0,255,136,0.25);
}
.cbir-plan-btn-danger {
  background: rgba(255,80,80,0.1);
  color: #ff6b6b;
  border-color: rgba(255,80,80,0.25);
}
/* LANE B VIDEO UX CORRECTIVE §5.3/§6.2 — lower-emphasis variant for
   Reset-to-AI actions, distinct from the plain/secondary Edit button and
   the destructive Delete button, so button hierarchy reads Edit (secondary)
   > Reset (lowest emphasis) > Delete (destructive) > Confirm (primary). */
.cbir-plan-btn-subtle {
  background: transparent;
  color: var(--text-muted);
  border-color: rgba(255,255,255,0.08);
  opacity: 0.75;
}
.cbir-plan-btn-subtle:hover { opacity: 1; }
.cbir-hp-section-title { font-size: 12px; margin-top: 2px; }
.rbi-add-section-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}
.cbir-hp-section-row-editable {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.cbir-hp-section-row-editable:last-child { border-bottom: none; }
.cbir-hp-section-main { flex: 1; min-width: 0; }
/* RBI-2.0-N — drag handle + inline edit form (replaces prompt() dialogs). */
.cbir-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  padding: 2px 2px;
  user-select: none;
}
.cbir-drag-handle:active { cursor: grabbing; }
.cbir-hp-section-row-editable[draggable="true"]:hover { background: rgba(255,255,255,0.03); }
.cbir-hp-section-row-editing, .cbir-inner-page-row-editing {
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: var(--r-xs);
  padding: 6px 8px;
  background: rgba(0,212,255,0.04);
}
.cbir-plan-edit-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cbir-plan-edit-title { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cbir-plan-edit-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.cbir-plan-edit-input {
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
}
.cbir-plan-edit-actions { display: flex; gap: 6px; margin-top: 2px; }
.cbir-hp-section-actions { display: flex; gap: 3px; flex-shrink: 0; }
.cbir-inner-page-row-editable {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.cbir-editable-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: rgba(0,212,255,0.08);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.18);
  letter-spacing: 0.3px;
}

/* Left column — intelligence fields */
.cbir-fields {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cbir-field {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cbir-field:last-child { border-bottom: none; }
.cbir-field-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cbir-field-value {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.cbir-field-has-gaps .cbir-field-value { color: var(--amber); }
.cbir-gaps { color: var(--amber); }

/* LANE B RBI 2.0 REMAINING UI + QUESTIONS CLOSURE §4 — Business
   Intelligence Full Breakdown redesign: 4 compact groups (Business
   Identity / Audience & Positioning / Goals / Delivery & Constraints),
   one group surface each, simple rows with subtle dividers and
   whitespace — never a separate heavy card around every value. */
.bbd-groups { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 10px; }
.bbd-group { border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.bbd-group:first-child { border-top: none; padding-top: 0; }
.bbd-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.bbd-grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.bbd-rows-wide, .bbd-rows-full { display: flex; flex-direction: column; gap: 4px; }
.bbd-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 11.5px;
  min-width: 0;
}
.bbd-row-wide, .bbd-row-full { align-items: flex-start; }
.bbd-row-label { flex: 0 0 auto; min-width: 96px; color: var(--text-faint); font-weight: 600; }
.bbd-row-value { color: var(--text-secondary); line-height: 1.5; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 820px) {
  .bbd-grid-2col { grid-template-columns: 1fr; }
}

/* Right column — auto-detected inputs */
.cbir-col-right .cbir-fields,
.cbir-col-right {
  overflow-y: auto;
}
.cbir-detect-group {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.cbir-detect-group:last-of-type { border-bottom: none; }
.cbir-detect-group-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}
.cbir-detect-group .brief-field-group {
  margin-bottom: 6px;
}
.cbir-detect-group .brief-field-group:last-child { margin-bottom: 0; }
.cbir-confidence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}
.cbir-conf-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cbir-conf-value {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Clarifying Questions */
/* ── Project Summary panel ── */
.cbir-project-summary {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--bg-tertiary);
}
.cbir-project-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cbir-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.cbir-summary-field {}
.cbir-summary-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.cbir-summary-value {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-word;
}

/* ── Missing Information panel ── */
.cbir-missing-section {
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(251,191,36,0.04);
}
.cbir-missing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cbir-missing-icon { color: #fbbf24; font-size: 13px; }
.cbir-missing-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.brief-unresolved-list {
  margin: 0;
  padding-left: 18px;
}
.brief-unresolved-item {
  font-size: 12px;
  color: #fbbf24;
  margin-bottom: 4px;
}

.cbir-questions-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  overflow: hidden;
}
.cbir-questions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}
.cbir-questions-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ── Sprint 2 (Frontend Integration) — Brief Intelligence redesign ──
   Additive to the existing cbir-* / am-* system above: new grouping/hierarchy
   only, no new visual language introduced. Subsection labels reuse the exact
   type scale as .cbir-detect-group-label; risk/status colors reuse the
   existing --green/--amber/--red tokens. */

.cbir-subsection-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.cbir-subsection-label:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }
.cbir-subsection-label-design { color: var(--text-muted); }

.ai-intel-section {
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: rgba(0,212,255,0.03);
}
.ai-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ai-intel-subsection { margin-bottom: 16px; }
.ai-intel-subsection:last-child { margin-bottom: 0; }
.ai-intel-subsection-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.ai-intel-empty {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}
.ai-intel-list {
  margin: 0;
  padding-left: 18px;
}
.ai-intel-list li {
  font-size: 12px;
  color: var(--text-secondary, var(--text-muted));
  margin-bottom: 4px;
}
.ai-intel-risk-list { display: flex; flex-direction: column; gap: 6px; }
.ai-intel-risk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md, 8px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}
.ai-intel-risk-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--amber-dim);
  color: var(--amber);
}
.ai-intel-risk-blocking .ai-intel-risk-badge { background: var(--red-dim); color: var(--red); }
.ai-intel-risk-flag { font-size: 12px; font-weight: 600; color: var(--text-primary, #fff); }
.ai-intel-risk-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ai-intel-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.ai-intel-stack-field {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}
.ai-intel-stack-key { color: var(--text-muted); text-transform: capitalize; }
.ai-intel-stack-val { color: var(--text-primary, #fff); font-weight: 600; }

/* Clarifying Questions — three tiers */
.brief-q-tier-group { margin-bottom: 14px; }
.brief-q-tier-group:last-child { margin-bottom: 0; }
.brief-q-tier-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.brief-q-tier-heading-required { color: var(--red); }
.brief-q-tier-heading-recommended { color: var(--amber); }
.brief-q-tier-heading-optional { color: var(--text-muted); }
.brief-q-tier-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.brief-q-tier-required .brief-q-tier-badge, .brief-q-tier-badge.brief-q-tier-required { background: var(--red-dim); color: var(--red); }
.brief-q-tier-recommended .brief-q-tier-badge, .brief-q-tier-badge.brief-q-tier-recommended { background: var(--amber-dim); color: var(--amber); }
.brief-question-item-required, .brief-question-item-recommended {
  padding: 8px 10px;
  border-radius: var(--r-md, 8px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}
.brief-question-item-required .brief-q-header,
.brief-question-item-recommended .brief-q-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Assets — visual status strip */
.am-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.am-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.am-status-pill-ok { border-color: rgba(63,185,80,0.3); color: var(--green); background: rgba(63,185,80,0.08); }
.am-status-pill-missing { border-color: rgba(248,81,73,0.3); color: var(--red); background: var(--red-dim); }
.am-status-pill-icon { font-size: 11px; }

/* AI Analysis tab dashboard */
.ai-dash-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.ai-dash-gauge {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  background: var(--bg-elevated);
}
.ai-dash-gauge-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.ai-dash-gauge-track {
  height: 6px;
  border-radius: 4px;
  background: var(--border-subtle);
  overflow: hidden;
  margin-bottom: 6px;
}
.ai-dash-gauge-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}
.ai-dash-gauge-pct {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  font-variant-numeric: tabular-nums;
}
.ai-dash-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.ai-dash-col {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px;
  background: var(--bg-elevated);
}
.ai-dash-stack-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  text-transform: capitalize;
}

/* ── Sprint 3 (UI/UX Redesign) — presentation-only. New hierarchy/visual
   language layered on the existing cbir-* / am-* / ai-intel-* system above;
   no new data, no new logic, no removed capability. ── */

/* HERO — the page's new visual entry point (§1/§2/§10) */
.brief-hero {
  border-radius: var(--r-xl, 14px);
  padding: 24px 28px;
  margin-bottom: 18px;
  background: linear-gradient(145deg, rgba(0,212,255,0.08), rgba(63,185,80,0.03) 60%, transparent);
  border: 1px solid rgba(0,212,255,0.18);
  position: relative;
  overflow: hidden;
}
/* LANE B RBI 2.0 REMAINING UI + QUESTIONS CLOSURE §3 — Step 1 Analysis
   Summary: demoted from a dominant hero (giant rings, invented confidence/
   readiness percentages) to one compact factual status strip. Smaller
   footprint than the prior hero and no gauge — the actual source review
   below remains the visually dominant content of this step. */
.brief-analysis-summary { padding: 16px 20px; }
.brief-analysis-summary .brief-hero-stats { margin-top: 12px; }
.brief-analysis-status {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  white-space: nowrap;
  align-self: flex-start;
}
.brief-analysis-status-ok { color: var(--green); border-color: rgba(63,185,80,0.35); background: var(--green-dim); }
.brief-analysis-status-warn { color: var(--amber); border-color: rgba(210,153,34,0.35); background: var(--amber-dim); }
.brief-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(0,212,255,0.10), transparent 55%);
  pointer-events: none;
}
.brief-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}
.brief-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cyan);
  margin-bottom: 6px;
}
.brief-hero-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 6px;
  line-height: 1.2;
}
.brief-hero-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.brief-hero-dot { opacity: 0.5; }
.brief-hero-confidence {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brief-hero-ring { position: absolute; inset: 0; }
.brief-hero-ring-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.brief-hero-ring-label span {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  font-variant-numeric: tabular-nums;
}
.brief-hero-ring-label small {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.brief-hero-goal {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, var(--text-muted));
  margin: 16px 0 0;
  max-width: 68ch;
  position: relative;
}
.brief-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 18px;
  position: relative;
}
.brief-hero-stat {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 8px);
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
}
.brief-hero-stat-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.brief-hero-stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  font-variant-numeric: tabular-nums;
}
.brief-hero-stat-value-ok { color: var(--green); }
.brief-hero-stat-value-warn { color: var(--amber); }
.brief-hero-stat-alert { border-color: rgba(248,81,73,0.35); background: var(--red-dim); }
.brief-hero-stat-alert .brief-hero-stat-value { color: var(--red); }

/* Executive Summary narrative (§3) */
.exec-narrative {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary, var(--text-muted));
  margin: 0 0 14px;
}
.exec-details { margin-top: 4px; }
.exec-details-summary {
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  list-style: none;
}
.exec-details-summary::-webkit-details-marker { display: none; }
.exec-details-summary::before { content: '▸ '; }
.exec-details[open] .exec-details-summary::before { content: '▾ '; }
.exec-details .cbir-fields { margin-top: 10px; }

/* AI Intelligence as centerpiece (§6) */
.ai-intel-section {
  border: 1px solid rgba(0,212,255,0.28);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.04), 0 12px 32px -20px rgba(0,212,255,0.35);
  padding: 20px 22px;
}
.ai-intel-header .cbir-col-title { font-size: 13.5px; }
.ai-intel-subsection-primary {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 8px);
  padding: 12px 14px;
  background: rgba(255,255,255,0.015);
}
.ai-intel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.ai-intel-row-secondary { opacity: 0.9; }
.ai-intel-row-secondary .ai-intel-subsection-title { font-weight: 500; }
.ai-intel-row .cbir-missing-section { margin-top: 8px; margin-bottom: 0; padding: 10px 12px; }
.ai-intel-row .cbir-missing-header { margin-bottom: 4px; }

/* Clarifying Questions — visual emphasis by tier (§7) */
.brief-question-item-required {
  border-left: 3px solid var(--red);
}
.brief-question-item-recommended {
  border-left: 3px solid var(--amber);
  opacity: 0.92;
}
.brief-q-tier-group-optional { margin-top: 2px; }
.brief-q-tier-group-optional summary.brief-q-tier-heading-optional {
  cursor: pointer;
  list-style: none;
}
.brief-q-tier-group-optional summary::-webkit-details-marker { display: none; }
.brief-q-tier-group-optional summary::before { content: '▸ '; }
.brief-q-tier-group-optional[open] summary::before { content: '▾ '; }

/* Assets — completeness overview (§8) */
.am-completeness-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.am-completeness-bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--border-subtle);
  overflow: hidden;
}
.am-completeness-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--amber), var(--green));
}
.am-completeness-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.am-status-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* AI Analysis dashboard — overall confidence headline (§9) */
.ai-dash-overall {
  text-align: center;
  padding: 18px 0 22px;
}
.ai-dash-overall-pct {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-dash-overall-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .brief-hero-top { flex-direction: column; }
  .brief-hero-rings { align-self: flex-end; margin-top: -8px; }
}

/* ── Sprint 4 (Final UI Polish) — presentation only. Increases hierarchy/
   spacing on top of the Sprint 2/3 structure; no new markup targets beyond
   what those sprints already introduced, and every id below already exists
   in index.html. ── */

/* §2 — Hero: stronger separation from the cards below it */
.brief-hero {
  padding: 30px 32px 26px;
  margin-bottom: 26px;
}
.brief-hero-title { font-size: 27px; letter-spacing: -0.3px; }
.brief-hero-eyebrow { margin-bottom: 8px; }
.brief-hero-goal { font-size: 14.5px; margin-top: 20px; }
.brief-hero-stats { margin-top: 22px; gap: 12px; }
.brief-hero-stat { padding: 12px 14px; }
.brief-hero-rings { display: flex; gap: 14px; flex-shrink: 0; }

/* §1 — Project Readiness ring (distinct color from Confidence) */
.brief-hero-readiness .brief-hero-ring-label span { color: var(--green); }

/* §3 — Business Intelligence: grid instead of a stacked single column, and
   a per-section confidence badge next to the subsection label. */
.cbir-subsection-label { display: flex; align-items: center; gap: 8px; }
.cbir-conf-badge {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.cbir-conf-badge-high { color: var(--green); border-color: rgba(63,185,80,0.3); }
.cbir-conf-badge-medium { color: var(--cyan); border-color: rgba(0,212,255,0.3); }
.cbir-conf-badge-low { color: var(--amber); border-color: rgba(210,153,34,0.3); }

.cbir-detect-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px;
  margin-bottom: 18px;
}
.cbir-detect-group .brief-field-group { margin-bottom: 0; }
.cbir-detect-group-label { grid-column: 1 / -1; margin-bottom: 2px; }

/* §4 — Design Intelligence: bigger, more visual swatches */
.cbir-swatch { width: 34px; height: 34px; border-radius: 8px; }
.cbir-palette-row { gap: 16px; }
.cbir-typo-value { font-size: 15px; }

/* §5 — AI Intelligence: strict vertical priority, decreasing weight */
.ai-intel-subsection-tertiary {
  opacity: 0.85;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
}
.ai-intel-subsection-tertiary .ai-intel-subsection-title { font-weight: 500; font-size: 10px; }

/* §7 — AI Analysis: one clear primary metric, gauges become supporting */
.ai-dash-overall-pct { font-size: 52px; }
.ai-dash-gauges { margin-top: 4px; }
.ai-dash-gauge { padding: 10px 12px; opacity: 0.92; }
.ai-dash-gauge-label { font-size: 9.5px; }
.ai-dash-gauge-pct { font-size: 13px; }

/* §8 — Assets: readiness headline replaces the old plain completeness bar */
.am-readiness-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.am-readiness-pct {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.am-readiness-detail { flex: 1; }
.am-readiness-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.am-readiness-counts {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* §9 — Build Settings: reduced visual emphasis while collapsed */
.brief-struct-section-muted .brief-struct-header {
  opacity: 0.75;
  font-size: 12px;
}
.brief-struct-section-muted .brief-struct-title { font-weight: 500; }

/* ── Sprint 9.5.21 (LC-015) — "Ready To Build" workflow-completion card ──
   Replaces the old single-row action bar (a status-dot chip + a plain
   button, functionally a dev placeholder) with a card that reads as a real
   milestone: an icon badge, a title + subtitle explaining what's verified
   and what happens next, and a clearly primary CTA with its own supporting
   microcopy. #briefCompactStatus/#briefCompactStatusText/#briefContinueBtn
   are the exact same ids app.js already targets — only the structure and
   styling around them changed. */
.rtb-card {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-top: auto;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-elevated));
  border: 1px solid var(--green-dim);
  border-radius: var(--r-xl);
  box-shadow: 0 -8px 20px -12px rgba(0,0,0,0.35);
  transition: border-color var(--t-med);
}
.rtb-card.cbir-status-issues { border-color: var(--amber-dim); }

.rtb-card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.rtb-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-dim);
  color: var(--green);
  margin-top: 1px;
}
.rtb-card.cbir-status-issues .rtb-badge { background: var(--amber-dim); color: var(--amber); }
.rtb-icon-warn { display: none; }
.rtb-card.cbir-status-issues .rtb-icon-check { display: none; }
.rtb-card.cbir-status-issues .rtb-icon-warn  { display: block; }

.rtb-copy { min-width: 0; }
.rtb-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.rtb-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.rtb-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.rtb-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 200px;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px -6px var(--green-dim);
}
.rtb-continue-btn .rtb-btn-arrow { transition: transform var(--t-mid); }
.rtb-continue-btn:hover .rtb-btn-arrow { transform: translateX(2px); }
.rtb-continue-btn:disabled { box-shadow: none; opacity: 0.45; }
.rtb-cta-note {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  max-width: 220px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .rtb-card { flex-direction: column; align-items: stretch; }
  .rtb-cta-group { align-items: stretch; }
  .rtb-continue-btn { width: 100%; }
  .rtb-cta-note { text-align: left; max-width: none; }
}

/* ── Sprint 3 Phase 1 — Read Brief 2.0 ─────────────────────────────────── */

.cbir-palette-row {
  display: flex;
  gap: 10px;
  padding: 8px 0 4px;
}
.cbir-swatch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.cbir-swatch {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
  transition: box-shadow var(--t-mid);
}
.cbir-swatch[style*="background:#"],
.cbir-swatch[style*="background: #"] {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.cbir-swatch-info { min-width: 0; overflow: hidden; }
.cbir-swatch-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cbir-swatch-hex {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbir-typo-row {
  display: flex;
  gap: 12px;
  padding: 8px 0 4px;
}
.cbir-typo-item { flex: 1; min-width: 0; }
.cbir-typo-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cbir-typo-value {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbir-intel-card {
  background: rgba(255,255,255,0.02);
  /* Sprint 9.5.42 (LC-028) — var(--border) does not exist (only
     --border-subtle/--border-muted/--border-accent are defined), which made
     the entire `border` shorthand invalid at computed-value time and this
     card's border never actually rendered. Aligned to --border-subtle,
     the same token every sibling card (.page-card/.qa-card/
     .cbir-project-summary) already uses. */
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.cbir-intel-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cbir-intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.cbir-intel-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.cbir-intel-value {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.cbir-sections-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}
.cbir-section-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0,212,255,0.07);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.15);
  white-space: nowrap;
}

/* ── LANE B RBI 2.0 FINAL FUNCTIONAL + VISUAL CLOSURE — Website
   Intelligence Overrides (Navigation Intent editable field, Site-Wide
   Capabilities selectable chip grid) ─────────────────────────────────── */
.cbir-nav-intent-editable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cbir-nav-intent-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cbir-caps-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cbir-cap-chip {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cbir-cap-chip:hover {
  background: rgba(255,255,255,0.08);
}
.cbir-cap-chip-selected {
  background: rgba(0,212,255,0.12);
  color: var(--cyan);
  border-color: rgba(0,212,255,0.35);
  font-weight: 600;
}
/* LANE B RBI 2.0 REMAINING UI + QUESTIONS CLOSURE §5 — a user-added custom
   capability is only SUBTLY distinguished (dashed border), never a loud
   separate treatment. */
.cbir-cap-chip-custom { border-style: dashed; }
.cbir-caps-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Sprint 3 Phase 1.1 — BDR Dropdowns ─────────────────────── */

.bdr-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

/* Sprint 9.5.32 (LC-017E) — Detection Review UI Polish. Makes it immediately
   obvious whether a detected field is still AI-sourced or has been manually
   overridden, reusing the exact confidence states already computed by
   setField()/_syncDetectedFieldToAnalysis() — no new confidence value, no
   new logic, purely a small label next to the field name. */
.bdr-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.bdr-label-row .field-label { margin-bottom: 0; }
/* LANE B VIDEO UX CORRECTIVE §9 — one lightweight, reused visible helper-text
   pattern (small muted paragraph under a field), additive to the existing
   native-tooltip `title` attributes (BDR_FIELD_HELP) — never replacing them,
   just making the same explanation visible without requiring a hover. */
.bdr-field-help {
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted, #8a8fa3);
}
.bdr-source-badge {
  display: none;
  font-size: 8.5px;
  font-weight: 600; /* Sprint 9.5.42 (LC-028) — matches every other status-badge weight (was 700, an outlier) */
  padding: 1px 6px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px; /* was 0.4px — aligned to .cbir-badge's letter-spacing, the nearest equivalent badge */
  white-space: nowrap;
}
.bdr-source-badge.bdr-src-high {
  display: inline-block;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
}
.bdr-source-badge.bdr-src-medium {
  display: inline-block;
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}
.bdr-source-badge.bdr-src-low {
  display: inline-block;
  background: rgba(255,107,53,0.12);
  color: #ff6b35;
  border: 1px solid rgba(255,107,53,0.3);
}
.bdr-source-badge.bdr-src-manual {
  display: inline-block;
  background: rgba(0,212,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,0.3);
}

.bdr-select {
  width: 100%;
  padding: 6px 10px;
  padding-right: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Chevron via inline SVG background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 6px;
  background-blend-mode: normal;
  transition: border-color var(--t-mid), background-color var(--t-mid);
  outline: none;
}

.bdr-select:focus {
  border-color: rgba(0,212,255,0.4);
  background-color: rgba(0,212,255,0.04);
}

.bdr-select option {
  background: #1a1a1f;
  color: var(--text-primary);
}

.bdr-select.brief-conf-high    { border-color: rgba(34,197,94,0.4);   }
.bdr-select.brief-conf-medium  { border-color: rgba(251,191,36,0.35); }
.bdr-select.brief-conf-low     { border-color: rgba(255,107,53,0.3);  }
/* Sprint 9.5.31 (LC-017D) — Manual Override state: a user-edited field is no
   longer AI-detected, so it gets a visually distinct treatment from the
   high/medium/low confidence colors above rather than keeping a stale one. */
.bdr-select.brief-conf-manual  { border-color: rgba(0,212,255,0.45); background-color: rgba(0,212,255,0.05); }

.bdr-other-input {
  width: 100%;
  padding: 5px 9px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.bdr-other-input::placeholder { color: var(--text-muted); }
.bdr-other-input:focus        { border-color: rgba(0,212,255,0.5); }

/* ── Sprint 3 Phase 2 — Navigation Review Modal ─────────────────────────────── */

.nav-review-modal { width: 680px; max-width: 96vw; }

.nav-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 14px 0 18px;
}

.nav-review-col { display: flex; flex-direction: column; gap: 6px; }
.nav-review-col-footer { opacity: 0.65; }

.nav-review-col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-review-col-label-dim { color: rgba(255,255,255,0.3); }

.nav-review-info-tag {
  font-size: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
}

.nav-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-review-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-primary);
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
}
.nav-review-match  { background: rgba(34,197,94,0.06);  }
.nav-review-missing { background: rgba(255,107,53,0.06); color: rgba(255,255,255,0.5); }
.nav-review-new    { background: rgba(251,191,36,0.07); }
.nav-review-dim    { background: transparent; color: rgba(255,255,255,0.35); font-size: 11px; }

.nav-review-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.15);
}
.nav-review-match  .nav-review-dot  { background: rgba(34,197,94,0.7); }
.nav-review-missing .nav-review-dot { background: rgba(255,107,53,0.5); }
.nav-review-new    .nav-review-dot  { background: rgba(251,191,36,0.7); }

.nav-review-tag {
  font-size: 9px;
  background: rgba(255,107,53,0.12);
  border: 1px solid rgba(255,107,53,0.2);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: rgba(255,107,53,0.9);
  margin-left: auto;
  white-space: nowrap;
}
.nav-review-tag-new {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.25);
  color: rgba(251,191,36,0.9);
}

.nav-review-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}

.nav-review-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity var(--t-mid), background var(--t-mid);
  font-family: inherit;
}
.nav-review-btn:hover { opacity: 0.85; }

.nav-review-btn-secondary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}
.nav-review-btn-manual {
  background: var(--purple-dim);
  border-color: rgba(139,92,246,0.25);
  color: #a78bfa;
}
.nav-review-btn-primary {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.3);
  color: rgba(34,197,94,0.95);
}

/* ── PSM Nav Reference Banner (Manual reconcile path) ────────────────────────── */

.psm-nav-ref-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.18);
  border-radius: 6px;
}

.psm-nav-ref-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(251,191,36,0.8);
  margin-bottom: 7px;
}

.psm-nav-ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.psm-nav-ref-list li {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — Sprint 5 Phase 3
   Disable all decorative animations for users who prefer it.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 5 — Brief Intelligence: Final Production Polish
   Presentation-only refinements on top of Sprints 2-4. No new markup
   targets beyond what those sprints already introduced (a couple of new
   ids/classes for the Readiness "preliminary" flag and compact empty
   states — both additive, described inline below).
   ═══════════════════════════════════════════════════════════════ */

/* §1 — Hero: more presence without growing oversized */
.brief-hero {
  padding: 34px 36px 30px;
  margin-bottom: 32px;
  border-color: rgba(0,212,255,0.24);
}
.brief-hero-eyebrow { font-size: 10.5px; letter-spacing: 1.2px; }
.brief-hero-title { font-size: 29px; margin-bottom: 8px; }
.brief-hero-meta { font-size: 13px; }
.brief-hero-goal { font-size: 15px; line-height: 1.6; margin-top: 22px; }
.brief-hero-stats { margin-top: 24px; gap: 14px; }
.brief-hero-stat-label { font-size: 10px; }
.brief-hero-stat-value { font-size: 18px; }

/* §2 — Readiness: visible "preliminary / placeholder" signal, no calc change */
.brief-hero-readiness-provisional .brief-hero-ring { opacity: 0.85; }
.brief-hero-provisional-flag {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(210,153,34,0.35);
}

/* §4 — Executive Summary: the natural first read */
.exec-narrative {
  font-size: 14px;
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 16px;
}

/* §5/§6 — Business & Design Intelligence: less border, more air */
.cbir-detect-group {
  gap: 14px 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cbir-detect-group:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.cbir-subsection-label {
  border-top: none;
  padding-top: 0;
  margin: 22px 0 12px;
}
.cbir-subsection-label:first-of-type { margin-top: 0; }
.bdr-select { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); }
.cbir-palette-row { margin-top: 4px; }
.cbir-typo-row { gap: 20px; }

/* §7 — AI Intelligence: clear breathing room between subsections */
.ai-intel-section { padding: 24px 26px; }
.ai-intel-subsection { margin-bottom: 22px; }
.ai-intel-subsection:last-child { margin-bottom: 0; }
.ai-intel-subsection-primary { margin-bottom: 24px; padding: 14px 16px; }
.ai-intel-subsection-tertiary { margin-top: 4px; padding-top: 14px; }

/* §9 — Project Intelligence / Detected Sections: compact when empty,
   so an empty card reads as a calm one-liner, not a broken/oversized box. */
.cbir-intel-card-compact { padding: 12px 16px; }
.cbir-intel-card-compact .cbir-intel-grid {
  grid-template-columns: 1fr;
  gap: 4px;
}
.cbir-intel-card-compact .cbir-intel-field:not(:first-child) { display: none; }
.cbir-intel-card-compact .cbir-intel-label { display: none; }
.cbir-intel-card-compact .cbir-intel-value { color: var(--text-faint); font-style: italic; font-size: 11.5px; }
.cbir-intel-card-compact .cbir-sections-tags { color: var(--text-faint); font-style: italic; font-size: 11.5px; }

/* §10 — Final consistency pass: shared rhythm across every polished section */
.brief-hero,
.ai-intel-section,
.cbir-project-summary,
.exec-details,
.brief-struct-section {
  border-radius: var(--r-xl, 12px);
}
.cbir-intel-card,
.cbir-missing-section,
.am-status-pill,
.brief-question-item-required,
.brief-question-item-recommended {
  border-radius: var(--r-md, 8px);
}
.brief-hero-stat,
.ai-dash-gauge,
.ai-dash-col {
  border-radius: var(--r-md, 8px);
}

/* ═══════════════════════════════════════════════════════
   WELCOME SCREEN & PROJECT DIRECTORY — Sprint 1.2
   Reuses the .pc-screen overlay mechanism's mechanics (fixed inset,
   opacity/pointer-events transition on .hidden) rather than duplicating
   it, with its own visual shell since this is a landing hero, not a form
   wizard.
   ═══════════════════════════════════════════════════════ */

.welcome-screen {
  position: fixed;
  inset: 0;
  /* Stacking order: .pc-screen (2000, existing) < .welcome-screen <
     .pd-modal (2200). Sprint 1.6 (Application Shell / View Router
     Refactor) removed .pd-screen from this list — it's a plain flow
     element inside #viewProjects now, not a layered overlay, so it has no
     z-index of its own to worry about relative to this splash. */
  z-index: 2010;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.3s ease;
}
.welcome-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.welcome-shell {
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: welcomeRise 0.4s ease;
}
@keyframes welcomeRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.welcome-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.welcome-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--cyan), var(--cyan-glow));
  color: var(--bg-base);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px var(--cyan-glow);
}
.welcome-brand-name {
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.welcome-tagline {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 32px;
}

/* Sprint 1.5 (Legacy Code Cleanup) — .welcome-actions / .welcome-action-*
   / .welcome-recent-* were removed: Sprint 1.3 (Workspace Navigation &
   Project Integration) simplified the Welcome Screen to a splash-only
   transition with no actions or recent-list markup, and confirmed (this
   sprint, full-repo grep) that no HTML or JS anywhere still references any
   of these class names. */

/* ── Application Shell / View Router (Sprint 1.6) ─────────────────────────
   #mainContent holds exactly two real DOM siblings — #viewWorkspace and
   #viewProjects — never both visible: view-router.js toggles a
   `view-hidden` class (display:none) on whichever is inactive. No
   position:fixed/absolute, no z-index layering, no opacity/pointer-events
   fade between them — the inactive one is genuinely not rendered. */
.main-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.view-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* #viewWorkspace reproduces the flex-row context .app-shell used to
   provide directly to .main-area/.right-panel when they were its own
   direct children — neither of those two elements' own CSS changed. */
#viewWorkspace {
  display: flex;
  flex-direction: row;
}
#viewProjects {
  display: flex;
  flex-direction: column;
}
/* This must win over the two ID-selector display rules directly above
   regardless of source order — an ID selector otherwise always beats a
   class selector on specificity alone, which (caught live, via an actual
   getComputedStyle check, not just visual inspection) left the "hidden"
   view still computing to display:flex. This is the one rule in this
   entire stylesheet allowed to use !important, because it is the single
   authoritative "this view must not render" signal ViewRouter depends on
   — nothing should ever be able to out-specificity it. */
.view-page.view-hidden {
  display: none !important;
}

/* ── Shared Page Layout (Sprint 1.7 — Release Candidate Architecture,
   Blocking Issue 4) ───────────────────────────────────────────────────────
   ONE reusable layout, not a page-specific system: Persistent Sidebar →
   Main Content → Page Header → Toolbar → Content → (optional) Footer.

   Projects is the first consumer (.pd-shell/.pd-header/.pd-toolbar/
   .pd-body carry these classes ALONGSIDE their existing specific classes —
   additive, so nothing about their own existing rules had to change).
   Workspace is the second consumer (.workspace-header/.workspace-tabs/
   .tab-content-area carry these same classes) — its own tab system,
   header content, and every existing rule are completely untouched; this
   only standardizes the outer padding/spacing rhythm both pages share.

   Any future page (Queue/Approvals/Settings/Logs/AI/Analytics) should
   reuse these same four classes rather than inventing its own spacing. */
.page-layout {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.page-header {
  padding: var(--page-header-padding-y) var(--page-padding-x) var(--space-1);
  flex-shrink: 0;
}
.page-toolbar {
  padding: var(--page-toolbar-padding-y) var(--page-padding-x);
  flex-shrink: 0;
}
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--page-content-padding-y) var(--page-padding-x) var(--space-10);
}
.page-footer {
  padding: var(--space-4) var(--page-padding-x);
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
}

/* Workspace opts into the shared layout's structural role (page-header/
   page-toolbar/page-content are still applied as classes in index.html,
   for consistency and so future pages copy the same pattern) but keeps
   its own, already-correct padding/overflow values exactly as they were —
   "Do NOT redesign Workspace" means these three re-assertions are
   deliberate, not an oversight. Combined-class selectors (higher
   specificity than the generic .page-header/.page-toolbar/.page-content
   alone) guarantee these win regardless of source order. */
.workspace-header.page-header {
  padding: 0;
}
.workspace-tabs.page-toolbar {
  padding: 0 16px;
}
.tab-content-area.page-content {
  padding: 0;
  overflow: hidden;
}

/* ── Projects page ──────────────────────────────────────────────────────
   Sprint 1.2/1.3 built this as a floating modal dialog (dark backdrop,
   blur, centered card, fixed max-width/height). Sprint 1.4 turned it into
   a first-class page via a fixed-position inset (still layered over the
   Workspace underneath, just invisible when "closed"). Sprint 1.6
   (Application Shell / View Router Refactor) removes the layering
   entirely: .pd-screen is now a plain flex child of #viewProjects, sized
   by its container — the "never rendered simultaneously" guarantee now
   comes from #viewProjects/#viewWorkspace's own display:none toggling
   (see above), not from this element's own positioning. */
.pd-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
}

/* Sprint 1.7 (Release Candidate Architecture) — Blocking Issue 4. .pd-shell
   is a .page-layout consumer now (see index.html) — its own flex/height
   structure comes from that shared class; the max-width:1400px/
   margin:0 auto constraint is removed entirely so Projects fills the
   entire content area, per that sprint's explicit instruction. */
.pd-shell {
  width: 100%;
}

/* .page-header (shared) provides flex/padding/flex-shrink; only the
   Projects-specific arrangement (title left, actions right) stays here. */
.pd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pd-title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* .page-toolbar (shared) provides padding/flex-shrink; flex/gap/border are
   Projects-specific toolbar arrangement. */
.pd-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.pd-search {
  flex: 1;
  max-width: 320px;
  /* UI/UX Consistency Sprint 1, item 4 — 160px was too narrow for the
     full "Search by name or client…" placeholder (13px .pc-input font) to
     render without clipping; raised to comfortably fit it, same
     "min-width floor without breaking the row" pattern as the Sprint 1.8
     fix on the neighboring selects above. */
  min-width: 220px;
}
/* Sprint 1.8 — the Sort/Filter selects had no min-width, so the flex row
   shrank them below their own label's width ("Sort: Last Ope…" truncating
   itself). min-width alone (not flex-shrink:0 — these inherit .pc-input's
   width:100%, which needs the default shrink behavior to still cooperate
   with its toolbar siblings) guarantees a floor without breaking the row. */
.pd-toolbar select.pc-select {
  min-width: 150px;
  max-width: 190px;
}
.pd-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-overlay);
  border-radius: 7px;
  padding: 2px;
}
.pd-view-btn {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.pd-view-btn.active {
  background: var(--bg-elevated);
  color: var(--cyan);
}

/* .page-content (shared) provides flex/overflow/padding entirely now. */
.pd-loading {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 80px 0;
}
/* UI/UX Consistency Sprint 1, item 5 — reworked to match .sys-placeholder-card's
   icon + dashed-card treatment (Bridge Settings) instead of bare centered
   text in a large empty void; contained + vertically nudged down (not
   full-viewport centered — that would need restructuring .pd-body's
   layout, out of scope for a presentation-only fix) for better balance. */
.pd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  max-width: 420px;
  margin: 15vh auto 0;
  padding: 48px 32px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.pd-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 4px;
}
.pd-empty-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Dense grid, tuned for scale (100+ projects): smaller min card width and
   tighter gap than the original modal's layout so meaningfully more cards
   fit on screen at once, with the page's own scroll (.pd-body) handling
   any overflow — no pagination/virtualization added (would be new
   functionality; out of scope for a presentation-only redesign). */
.pd-grid {
  display: grid;
  gap: 12px;
}
.pd-grid.pd-grid-view {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pd-grid.pd-list-view {
  grid-template-columns: 1fr;
}

.pd-card {
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  /* 10px is already this app's established card-radius convention (used
     consistently across Homepage/Pages/QA cards elsewhere) — kept exactly
     as-is rather than snapped to the --r-* scale, since that would make
     THIS card inconsistent with every other card in the app instead of
     more consistent. Not tokenized as a new custom property this sprint
     to avoid a wider, riskier sweep of the ~9 other existing call sites
     that share this same literal value. */
  border-radius: 10px;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.pd-card:hover {
  border-color: var(--border-accent);
}
.pd-card-current {
  border-color: rgba(0, 212, 255, 0.35);
}
.pd-list-view .pd-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}
.pd-list-view .pd-card-facts {
  grid-template-columns: repeat(4, auto);
  gap: 20px;
}

.pd-card-main {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pd-card-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pd-card-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pd-card-client {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Sprint 1.4 — Stack/Phase/Created/Updated, denser 2×2 grid replacing the
   single-row "Created · Last opened" text from Sprint 1.2/1.3. */
.pd-card-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  margin-top: 2px;
}
.pd-card-fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pd-card-fact-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.pd-card-fact-value {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-card-current-tag {
  font-size: 9px;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
  align-self: flex-start;
}

.pd-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.pd-status-green {
  color: var(--green);
  background: var(--green-dim);
}
.pd-status-muted {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.pd-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.pd-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.pd-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.pd-icon-danger:hover {
  color: var(--red);
  background: var(--red-dim);
}

/* ── Rename/Delete modal ── */
.pd-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity var(--t-med) ease;
}
.pd-modal.hidden {
  opacity: 0;
  pointer-events: none;
}
.pd-modal-shell {
  width: 380px;
  max-width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.pd-modal-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.pd-modal-body {
  margin-bottom: 18px;
}
.pd-modal-warning {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pd-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

[data-theme="light"] .welcome-screen { background: var(--bg-base); }
/* Sprint 1.4 — .pd-screen is a solid page background now, not a dark
   backdrop, so it already tracks --bg-base with no override needed here. */
[data-theme="light"] .pd-modal { background: rgba(0,0,0,0.4); }

/* ═══════════════════════════════════════════════════════
   Sprint 1.3 — Workspace Navigation & Project Integration
   ═══════════════════════════════════════════════════════ */

/* "← Projects" back-navigation — reuses .breadcrumb-root (see index.html's
   own comment on why this element, not a new one). */
.breadcrumb-root-link {
  cursor: pointer;
  transition: color var(--t-fast);
}
.breadcrumb-root-link:hover {
  color: var(--cyan);
}

/* Welcome Screen — splash-only now; the actions/recent-list styling above
   is unused (kept for now in case a later sprint wants the fuller layout
   again) but the splash itself gets its own compact, centered treatment. */
.welcome-shell-splash {
  gap: 18px;
}
/* Splash progress bar — replaces the old indeterminate spinner with a real
   0→100% fill, driven by welcome-screen.js's boot() over SPLASH_MS, so the
   splash visibly completes before handing off to Projects instead of
   disappearing after an arbitrary short spinner delay. */
.welcome-splash-progress {
  width: 180px;
  height: 3px;
  border-radius: var(--r-xs);
  background: var(--border-subtle);
  margin-top: 8px;
  overflow: hidden;
}
.welcome-splash-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--cyan);
  border-radius: var(--r-xs);
  transition: width linear;
}

/* Sprint 1.7 (Release Candidate Architecture) — the Projects screen's own
   close button (and this rule that conditionally hid it) was removed
   entirely (see project-directory.js's open()). Empty-state CTA hidden via
   plain display:none, unrelated to that removed button. */
.pd-empty-cta {
  margin: 16px auto 0;
}
.pd-empty-cta.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   WORKSPACE-BUILD-UX-2 — Homepage/Inner Page active-build state.
   Shown only for a real, backend-confirmed queued/running job (never
   merely because no output exists yet — see _syncHpActiveBuild()/
   _syncPdvActiveBuild() in app.js). Elapsed time is repainted by the
   existing JobQueue elapsed ticker (job-queue.js) via the shared
   [data-elapsed-for] convention — no second timer is introduced here.
   ═══════════════════════════════════════════════════════════════ */
.active-build-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
/* WORKSPACE-BUILD-UX-2.1 — the initial-build takeover (no version exists
   yet) now fills essentially the whole usable Homepage/Inner-Page content
   canvas below the toolbar, matching .homepage-layout's own established
   "fill the remaining viewport" calc — never AgencyOS's left nav, project
   header, workflow tabs, Homepage toolbar, or the right Activity/Queue/AI/
   Logs/Analysis rail, all of which live outside this container. Purely
   responsive (vh/clamp/min/max) — never a dimension hardcoded for one
   screenshot's viewport. */
.active-build-panel-full {
  max-width: none;
  width: 100%;
  height: calc(100vh - var(--ws-header-h) - var(--tabs-h) - 80px);
  justify-content: center;
  padding: clamp(16px, 3vh, 40px) 24px;
  gap: clamp(8px, 1.4vh, 16px);
}
.abp-media {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  background: var(--bg-elevated, #0d1117);
  border: 1px solid var(--border-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
/* Full-workspace variant — large and prominent, aspect ratio preserved
   (object-fit: contain, never distorted/cropped), bounded by both an
   available-height share and a sane max-width so it scales sensibly on
   a wide desktop instead of growing absurdly oversized. */
.abp-media-full {
  max-width: min(920px, 92%);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(58vh, 620px);
  aspect-ratio: auto;
  background: transparent;
  border: none;
}
.abp-video, .abp-gif {
  width: 100%;
  height: 100%;
  display: block;
}
.abp-video { object-fit: cover; }
.abp-gif   { object-fit: contain; } /* preserve aspect ratio, never crop/distort the approved asset */
/* Fallback spinner — shown instead of the video on load/decode failure, or
   when prefers-reduced-motion is set (see the media query below). Reuses
   the existing .cw-spinner/cwSpin primitive (convert-workspace.css), only
   sized up for this larger context — never a new animation. */
.abp-spinner {
  width: 32px !important;
  height: 32px !important;
  border-width: 3px !important;
}
.abp-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.abp-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.abp-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
}
.abp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulseGlow 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.abp-elapsed {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.abp-note {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 340px;
  margin-top: 4px;
}

/* Compact non-blocking banner — shown ABOVE an existing preview during
   New Direction/Request/Apply Changes, which never replaces the visible
   previous version with the full active-build takeover above. */
.regen-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-sm, 6px);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-size: 12px;
  color: var(--text-secondary);
}
.regen-banner-elapsed {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Respect prefers-reduced-motion — static/fallback spinner treatment
   instead of forcing the looping video (Part 16, explicit requirement). */
@media (prefers-reduced-motion: reduce) {
  .abp-video { display: none !important; }
  .abp-spinner { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   LANE-B-ASSETS-IMAGES-WORKSPACE-FRONTEND-1 — Image Workspace
   Reuses existing design tokens (--text, --text-muted, --border-muted,
   --cyan, --green, --amber, --red, --space-*, --r-*) — no new palette.
   ═══════════════════════════════════════════════════════════════ */

.iw-root { display: flex; gap: var(--space-4); min-height: 320px; }
.iw-section-list { width: 200px; flex-shrink: 0; border-right: 1px solid var(--border-muted); padding-right: var(--space-3); }
.iw-section-list-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-2); }
.iw-section-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 3px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text); cursor: pointer; font-family: inherit; }
.iw-section-row:hover { background: var(--bg-hover); border-color: var(--border-muted); }
.iw-section-row-active { background: var(--cyan-dim); border-color: var(--cyan); }
.iw-section-name { font-size: 13px; font-weight: 500; }
.iw-section-id { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); }

.iw-inspector { flex: 1; min-width: 0; }
.iw-inspector-header { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.iw-inspector-title { font-size: 15px; font-weight: 600; color: var(--text); }
.iw-inspector-sectionid { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

.iw-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-muted); margin-bottom: var(--space-4); }
.iw-tab-btn { padding: 8px 14px; font-size: 12.5px; font-weight: 500; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.iw-tab-btn:hover { color: var(--text); }
.iw-tab-btn-active { color: var(--cyan); border-bottom-color: var(--cyan); }

.iw-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.iw-badge-neutral { background: var(--bg-hover); color: var(--text-muted); }
.iw-badge-ready { background: var(--green-dim); color: var(--green); }
.iw-badge-generating { background: var(--cyan-dim); color: var(--cyan); }
.iw-badge-failed { background: var(--red-dim); color: var(--red); }

.iw-images-grid { display: flex; gap: var(--space-5); margin-bottom: var(--space-5); }
.iw-image-preview-col { width: 300px; flex-shrink: 0; }
.iw-image-preview-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-2); }
.iw-image-preview-box { width: 100%; border: 1px solid var(--border-muted); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; }
.iw-image-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-image-preview-empty { text-align: center; padding: var(--space-4); color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.iw-source-row { margin-top: var(--space-2); display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-muted); }

/* IMAGES TAB HOMEPAGE SECTION MAPPING — read-only grid for a section's
   real, discovered-but-unmanaged images (no Replace/Generate controls;
   same tokens/rhythm as the managed-slot preview above). */
.iw-legacy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.iw-legacy-card { border: 1px solid var(--border-muted); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); }
.iw-legacy-thumb { aspect-ratio: 4/3; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.iw-legacy-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-legacy-meta { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.iw-legacy-meta .iw-badge { align-self: flex-start; }
/* IMAGES / MEDIA SYSTEM — detected-visual cards: identity line, truthful
   source/status badges, exact-target actions, and the assign control for
   Detected / Unassigned items. */
.iw-legacy-card-active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
/* IMAGE DIRECTOR PHASE 1 — N requirement rows per section: a strip of
   selectable requirement cards above the managed-slot detail panel; the
   active card is the exact requirement every action targets. */
.iw-req-strip { margin-bottom: var(--space-3); }
.iw-req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.iw-req-card { text-align: left; padding: 0; border: 1px solid var(--border-muted); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); cursor: pointer; color: inherit; font: inherit; }
.iw-req-card:hover { border-color: var(--border-strong, var(--border-muted)); }
.iw-req-card-active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.iw-req-thumb { aspect-ratio: 4/3; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.iw-req-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-req-label { padding: var(--space-2) var(--space-2) 0; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.iw-req-meta { padding: 4px var(--space-2) var(--space-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.iw-legacy-thumb { cursor: pointer; }
.iw-media-title { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.iw-media-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.iw-media-path { font-family: var(--font-mono); font-size: 10.5px; word-break: break-all; }
.iw-media-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }
.iw-media-assign { align-items: center; }
.iw-assign-select { flex: 1; min-width: 120px; font-size: 11.5px; padding: 4px 6px; background: var(--bg-hover); color: var(--text); border: 1px solid var(--border-muted); border-radius: var(--r-md); font-family: inherit; }
.iw-section-row-unassigned { border-top: 1px dashed var(--border-muted); margin-top: var(--space-2); }

.iw-meta-col { flex: 1; min-width: 0; }
.iw-meta-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: var(--space-2); }
.iw-kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-3); }
.iw-kv-row { display: contents; }
.iw-kv-key { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.iw-kv-val { font-size: 12px; color: var(--text); word-break: break-word; }

.iw-intent-panel, .iw-prompt-panel { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--border-muted); border-radius: var(--r-lg); background: var(--bg-elevated); }
.iw-intent-text { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: var(--space-2); }
.iw-raw-details summary { cursor: pointer; font-size: 11.5px; color: var(--text-muted); }
.iw-raw-details[open] summary { margin-bottom: var(--space-2); }

.iw-prompt-text { width: 100%; min-height: 100px; resize: vertical; background: var(--bg-hover); border: 1px solid var(--border-muted); border-radius: var(--r-md); color: var(--text); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; padding: var(--space-3); }
.iw-prompt-actions { margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-3); }

.iw-actions-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.iw-guard-banner { display: none; margin-bottom: var(--space-3); padding: 10px 14px; border: 1px solid var(--amber); background: var(--amber-dim); color: var(--amber); border-radius: var(--r-md); font-size: 12px; }
.iw-guard-banner.iw-guard-banner-error { border-color: var(--red); background: var(--red-dim); color: var(--red); }
.iw-guard-banner.iw-guard-banner-success { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.iw-blocked-note { color: var(--text-muted); font-size: 11.5px; margin-top: var(--space-2); }
.iw-final-image-prompt { background: var(--bg-elevated); border-color: var(--accent, var(--border-muted)); min-height: 100px; }
.iw-auto-apply-note { margin-top: var(--space-2); font-style: italic; }

.iw-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.iw-error-text { color: var(--red); font-size: 12px; }
.iw-empty { padding: 40px 20px; text-align: center; }
.iw-empty-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.iw-empty-sub { font-size: 12px; color: var(--text-muted); }
.iw-panel-loading, .iw-panel-error { padding: 24px; text-align: center; color: var(--text-muted); font-size: 12px; }
.iw-panel-error-title { color: var(--red); font-weight: 600; margin-bottom: 4px; }

.iw-history { display: flex; flex-direction: column; gap: var(--space-3); }
.iw-job-card { border: 1px solid var(--border-muted); border-radius: var(--r-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.iw-job-card-row { font-size: 12px; }

.iw-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 500; }
.iw-modal { width: 480px; max-height: 70vh; overflow: auto; background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: var(--r-lg); }
.iw-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-muted); font-size: 13px; font-weight: 600; color: var(--text); }
.iw-modal-body { padding: var(--space-4); }
.iw-asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.iw-asset-card { text-align: left; padding: var(--space-3); border: 1px solid var(--border-muted); border-radius: var(--r-md); background: transparent; cursor: pointer; font-family: inherit; }
.iw-asset-card:hover { border-color: var(--cyan); }
.iw-asset-card-name { font-size: 12px; color: var(--text); font-weight: 500; margin-bottom: 3px; word-break: break-all; }

.iw-dev-marker-outline { outline: 3px solid var(--cyan) !important; outline-offset: 2px; }

@media (max-width: 900px) {
  .iw-root { flex-direction: column; }
  .iw-section-list { width: 100%; border-right: none; border-bottom: 1px solid var(--border-muted); padding-right: 0; padding-bottom: var(--space-3); }
  .iw-images-grid { flex-direction: column; }
  .iw-image-preview-col { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   LANE-B-ASSETS-IMAGES-WORKSPACE-FRONTEND-1-QV1 — Quick View / Lightbox
   Scoped .iw-qv-* / .iw-history-* only — reuses existing tokens.
   ═══════════════════════════════════════════════════════════════ */

.iw-image-preview-clickable { cursor: zoom-in; }
.iw-image-preview-clickable:hover { outline: 2px solid var(--cyan); outline-offset: -2px; }

.iw-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.iw-history-thumb { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--border-muted); border-radius: var(--r-md); background: transparent; cursor: pointer; font-family: inherit; }
.iw-history-thumb:hover { border-color: var(--cyan); }
.iw-history-thumb-img-box { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; }
.iw-history-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.iw-history-thumb-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; }

.iw-asset-card-thumb-btn { display: block; width: 100%; aspect-ratio: 4/3; border: none; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-hover); padding: 0; margin-bottom: 6px; cursor: zoom-in; }
.iw-asset-card-thumb-btn:disabled { cursor: default; }
.iw-asset-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-asset-card-select { width: 100%; margin-top: 8px; }

.iw-qv-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 32px; }
.iw-qv-modal { width: min(1100px, 100%); height: min(820px, 100%); display: flex; flex-direction: column; background: #0c0c0c; border: 1px solid var(--border-accent); border-radius: var(--r-lg); overflow: hidden; }
.iw-qv-header { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--space-4); border-bottom: 1px solid var(--border-muted); flex-shrink: 0; }
.iw-qv-title { font-size: 13px; font-weight: 600; color: var(--text); }
.iw-qv-body { flex: 1; min-height: 0; background: #050505; }
.iw-qv-image-viewport { position: relative; width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; }
.iw-qv-image { display: block; }
.iw-qv-image-fit { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.iw-qv-broken { color: var(--text-muted); font-size: 13px; padding: 40px; text-align: center; }
.iw-qv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-accent); background: rgba(0,0,0,0.5); color: var(--text); font-size: 20px; cursor: pointer; }
.iw-qv-nav:hover { background: rgba(0,0,0,0.75); }
.iw-qv-nav-prev { left: 16px; }
.iw-qv-nav-next { right: 16px; }
.iw-qv-footer { flex-shrink: 0; border-top: 1px solid var(--border-muted); padding: 10px var(--space-4); display: flex; flex-direction: column; gap: 8px; max-height: 30%; overflow-y: auto; }
.iw-qv-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.iw-qv-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .iw-qv-backdrop { padding: 0; }
  .iw-qv-modal { width: 100%; height: 100%; border-radius: 0; }
  .iw-qv-nav { width: 32px; height: 32px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   LANE B — RBI 2.0 BRIEF WORKSPACE UX / NAVIGATION REDESIGN CORRECTIVE
   Replaces the horizontal, scroll-away 7-step tab strip with a
   persistent vertical step navigator + focused single-step content
   column. Container/presentation only — no existing card's own
   internal styling changed.

   Scrolling model: `.tab-panel` (ancestor) is ALREADY the app's
   existing internal scroll container for every workspace tab
   (`overflow-y:auto; height:100%` — see line ~837), not something new
   introduced here. `.rbi-rail` below is `position: sticky; top: 0`
   relative to that existing scroller, so it stays visible while
   `.rbi-content` scrolls — no new nested-scroller architecture, no
   conflict with the global AgencyOS document, modals, dropdowns, or
   color/font pickers, which live in normal fixed/absolute layers above
   this scroll context untouched.
   ═══════════════════════════════════════════════════════════════ */
#rbiStepShell {
  /* Flex/grid ancestors (.tab-panel-inner/.panel-two-col in the existing
     AgencyOS shell) default a flex item's min-width to `auto` (content-
     based), which lets a wide child refuse to shrink and push the whole
     page into horizontal overflow. width:100%+min-width:0 here forces
     this whole block to respect the available width. */
  width: 100%;
  min-width: 0;
}

/* ── A. Compact workspace header (replaces nothing existing — the large
   AI Project Intelligence detail already lives in Step 7 via
   #briefAiIntelSection's reparenting; this is a small new label). ── */
.rbi-workspace-header {
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--border-muted);
  margin-bottom: 16px;
}
.rbi-workspace-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
.rbi-workspace-helper {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 68ch;
}

/* ── B. Two-column workspace body: sticky rail + content column. ── */
.rbi-workspace-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* ── C. Vertical rail — persistent, sticky within the existing
   .tab-panel scroll context. `top` matches .tab-panel-inner's own
   top padding so the rail doesn't visually collide with the section
   header above it. ── */
.rbi-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: var(--space-5, 20px);
  align-self: start;
  /* Only scrolls internally if the viewport is genuinely too short for
     all 7 rows — not a routine nested scroller. */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  min-width: 0;
}
.rbi-step-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-md, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
}
.rbi-step-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.rbi-step-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.rbi-step-btn.rbi-step-active {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.3);
  color: var(--text);
  font-weight: 600;
  /* Current step must be unmistakable without relying on color alone. */
  border-left: 3px solid var(--cyan);
  padding-left: 9px;
}
.rbi-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  font-size: 10.5px;
  flex-shrink: 0;
  margin-top: 1px;
}
.rbi-step-active .rbi-step-num { background: var(--cyan); color: #001018; }
.rbi-step-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rbi-step-label { font-size: 12.5px; line-height: 1.3; }
.rbi-step-badge {
  align-self: flex-start;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rbi-step-badge-ready         { color: var(--green); border-color: rgba(63,185,80,0.35); background: var(--green-dim); }
.rbi-step-badge-needs-review  { color: var(--amber); border-color: rgba(210,153,34,0.35); background: var(--amber-dim); }
.rbi-step-badge-conflict      { color: var(--red);   border-color: rgba(248,81,73,0.35);  background: var(--red-dim); }
.rbi-step-badge-missing       { color: var(--text-muted); border-color: var(--border-muted); background: rgba(255,255,255,0.04); }

/* ── D. Mobile/narrow-viewport current-step chooser. Hidden by default;
   shown instead of the vertical rail below the tablet breakpoint. ── */
.rbi-mobile-chooser { display: none; }

/* ── E. Selected step content column. ── */
.rbi-content { width: 100%; min-width: 0; box-sizing: border-box; }

.rbi-step-status-line {
  padding: 0 2px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-muted);
  margin-bottom: 14px;
}
.rbi-step-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
.rbi-step-status-title { display: block; font-weight: 600; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.rbi-step-status-helper { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; max-width: 68ch; }
.rbi-step-status-hint { font-size: 11px; color: var(--text-muted); }

.rbi-step-container { padding-top: 4px; width: 100%; min-width: 0; box-sizing: border-box; }
.rbi-step-container[hidden] { display: none !important; }

/* ── F. Back/Continue workflow footer. ── */
.rbi-step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-muted);
}
.rbi-footer-back { color: var(--text-secondary); }
.rbi-footer-continue { margin-left: auto; }

/* ── G. Tablet — compact vertical rail (labels stay, narrower gutter). No
   horizontal step-tab row is ever used at any width. ── */
@media (max-width: 1024px) and (min-width: 761px) {
  .rbi-workspace-body { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
  .rbi-step-btn { padding: 8px 10px; font-size: 12px; }
}

/* ── H. Mobile — no wide left rail. Compact "Step X of 7" select +
   Previous/Next instead. Verified: no horizontal overflow, no clipped
   labels, no navigator overlap. ── */
@media (max-width: 760px) {
  .rbi-workspace-body { grid-template-columns: 1fr; gap: 0; }
  .rbi-rail { display: none; }
  .rbi-mobile-chooser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 2px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-muted);
  }
  .rbi-mobile-chooser-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }
  .rbi-mobile-select {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--border-muted);
    background: var(--bg-elevated, #14161b);
    color: var(--text);
    font-size: 12.5px;
    font-family: inherit;
  }
  .rbi-mobile-chooser-nav { display: flex; gap: 8px; }
  .rbi-mobile-chooser-nav .inline-btn { flex: 1; text-align: center; }
  .rbi-step-status-line { padding-bottom: 10px; }
  .rbi-step-footer { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   LANE B — RBI 2.0 BRIEF STEP CONTENT UX / VISUAL HIERARCHY CORRECTIVE
   ───────────────────────────────────────────────────────────────────
   CSS-only (plus two additive, non-structural presentation classes on
   already-existing elements — see index.html comments at each spot).
   Does NOT touch #rbiStepShell/.rbi-rail/.rbi-mobile-chooser/the grid
   breakpoints above (certified navigation, section G/H) and does NOT
   touch any element id read by app.js or read-brief-steps.js. Purely
   widens/regroups/de-emphasizes the EXISTING cards already reparented
   by NODE_MANIFEST into each #rbiStepNContainer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Wider content column: on desktop, let the intel-grid use the
   full available width instead of a fixed 2-col that leaves dead
   space when content is asymmetric. Two related cards inside the same
   step (e.g. Step 3's Website Intelligence, Step 6's Design
   Intelligence + its Colors/Typography groups) may sit side-by-side
   above the tablet breakpoint when there is room; below it they always
   stack full-width like before. ── */
@media (min-width: 1180px) {
  .rbi-step-container[data-rbi-step="1"],
  .rbi-step-container[data-rbi-step="6"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .rbi-step-container[data-rbi-step="1"] > *,
  .rbi-step-container[data-rbi-step="6"] > * { grid-column: 1 / -1; }
  /* Step 1: Existing Website + Reference Websites pair naturally. */
  .rbi-step-container[data-rbi-step="1"] #bExistingWebsiteCard { grid-column: 1 / 2; }
  .rbi-step-container[data-rbi-step="1"] #bReferenceWebsiteMultiCard { grid-column: 2 / 3; }
}

/* ── 2. Reduce nested-card visual noise: a .cbir-detect-group that is
   the ONLY content of a step (i.e. was moved here bare, without its
   original .cbir-intel-card chrome, per NODE_MANIFEST) gets its own
   card treatment so it doesn't look like an orphaned unstyled block.
   This targets exactly #bInnerPagesPlanBlock in Step 5. ── */
.rbi-step-container > .cbir-detect-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-subtle);
}

/* ── 3. Step 5 — Inner Pages Intelligence: turn the previous cramped
   inline row (name · AI Detected · Edit · Reset · purpose all fighting
   for space) into a proper page-planning row: identity row on top,
   purpose as its own full-width line, actions demoted to a small
   trailing group. No markup change to the row's contents — only to
   how the existing children lay out. ── */
.rbi-step-container[data-rbi-step="5"] #bInnerPagesPlanBlock {
  padding: 18px 20px;
}
.rbi-step-container[data-rbi-step="5"] .cbir-detect-group-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cbir-inner-page-row-editable {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "identity actions" "purpose purpose";
  align-items: start;
  column-gap: 10px;
  row-gap: 4px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 8px);
  background: rgba(255,255,255,0.015);
}
.cbir-inner-page-row-editable:last-child { margin-bottom: 0; }
.cbir-inner-page-row-editable > .cbir-section-tag {
  grid-area: identity;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
}
.cbir-inner-page-row-editable > .cbir-section-tag + span {
  /* role chip (e.g. "about", "generic") — secondary, inline with name */
  margin-left: 8px;
  vertical-align: middle;
}
.cbir-inner-page-row-editable > span[style*="font-size:11px"] {
  grid-area: purpose;
  color: var(--text-secondary);
  line-height: 1.4;
}
.cbir-inner-page-row-editable > .cbir-inner-page-actions,
.cbir-inner-page-row-editable > .cbir-editable-badge {
  grid-area: actions;
  justify-self: end;
}
/* The one actions container per row (see app.js's _renderInnerPagesPlan) —
   lays the provenance badge + Edit + Reset out as a normal horizontal
   row, fixing the "overlapping controls in the same grid cell" bug found
   during LANE B VIDEO UX CORRECTIVE browser verification (§6.1). */
.cbir-inner-page-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cbir-inner-page-row-editable .cbir-plan-btn {
  font-size: 10.5px;
  padding: 3px 8px;
  opacity: 0.85;
}
/* One clear primary action per row: Edit/Rename get full-strength
   treatment; "Reset" is visually quieter, per §13 action-hierarchy.
   RBI 2.0 PAGE STRUCTURE AUTHORITY CORRECTIVE — this previously selected
   `:last-of-type:not(.cbir-plan-btn-primary)`, which worked only while
   Reset happened to be the last button in the row. Now that a destructive
   "Remove" button sits last, that positional selector would have stripped
   the danger styling off the one button that most needs it. Re-anchored to
   the semantic `.cbir-plan-btn-subtle` class Reset already carries, so the
   de-emphasis follows meaning rather than DOM position. */
.cbir-inner-page-row-editable .cbir-plan-btn-subtle {
  opacity: 0.55;
  background: transparent;
}
.cbir-inner-page-row-editable .cbir-plan-btn-danger { opacity: 0.85; }
.cbir-inner-page-row-editable .cbir-plan-btn-danger:hover {
  opacity: 1;
  background: rgba(255,80,80,0.18);
  color: #ff6b6b;
}
.cbir-inner-page-row-editing { display: block; background: rgba(0,212,255,0.03); border-color: rgba(0,212,255,0.2); }
/* LANE B VIDEO UX CORRECTIVE §6.2 — REAL BUG FOUND VIA BROWSER VERIFICATION:
   #bInnerPagesPlanBlock carries the generic `.cbir-detect-group` class,
   which is `display:grid; grid-template-columns: repeat(auto-fit,
   minmax(150px,1fr))` (see that rule above). Without an explicit
   grid-column, #bInnerPagesPlanList (the page-card list) and
   #bInnerPagesPlanControls (the Reset/Confirm action bar) each became
   their OWN separate auto-fit grid column, and — because CSS Grid items
   default to align-items:stretch — the flex row of buttons inside
   #bInnerPagesPlanControls was stretched to the full height of the (much
   taller) page-card column next to it, rendering as the exact "full-height
   vertical block" anti-pattern this corrective's own brief explicitly
   prohibits. Fix: both children span the full grid width and stack
   normally, exactly like `.cbir-detect-group-label` already does above. */
#bInnerPagesPlanList,
#bInnerPagesPlanControls {
  grid-column: 1 / -1;
}
/* RBI 2.0 PAGE STRUCTURE AUTHORITY CORRECTIVE — the Add Page / Reset
   Structure control bar and the Homepage-ownership note are children of the
   same auto-fit grid (#bInnerPagesPlanBlock carries `.cbir-detect-group`),
   so they need the identical full-width span as the two rules above or they
   would each claim their own stretched grid column — the exact layout bug
   the comment above already documents fixing once. */
#bInnerPagesStructureControls,
#bInnerPagesHomepageNote,
#bInnerPagesPlanBlock > .bdr-field-help {
  grid-column: 1 / -1;
}
/* RBI 2.0 STEP 5 INNER PAGES DETECTED SECTIONS UI CORRECTIVE — the exact
   same #bInnerPagesPlanBlock auto-fit grid bug documented and fixed twice
   above, recurring a third time: #bInnerPageSectionsWorkspace (the "Page
   Sections" per-page detected-section workspace added by the INNER PAGES
   SECTION INTELLIGENCE CORRECTIVE) is ALSO a direct child of
   #bInnerPagesPlanBlock and was never added to this override list, so it
   collapsed into its own ~150-280px auto-fit grid column instead of
   spanning the card's full width. Real-browser proof: with this rule
   missing, .cbir-ips-section-main rendered at ~16px computed width,
   wrapping every purpose sentence to one word per line — functionally
   present but visually unrecognizable as a section-detection UI, which is
   exactly what a real user watching Step 5 would perceive as "section
   plans aren't shown here the way Step 4 shows them." No JS/data change
   needed — the underlying section data was always correct. */
#bInnerPageSectionsWorkspace {
  grid-column: 1 / -1;
}
.cbir-page-structure-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}
.cbir-page-structure-controls .cbir-plan-edit-input {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 280px;
}
/* LANE B VIDEO UX CORRECTIVE §6.4 — actionable "Purpose missing" warning,
   styled as a small warm-toned inline button (not plain muted text) so it
   reads as something to act on, and clicking it opens the same Edit form
   the row's own Edit button opens. */
.cbir-inner-page-purpose-missing {
  background: rgba(255,170,0,0.1);
  color: var(--amber, #ffaa00);
  border: 1px solid rgba(255,170,0,0.25);
  border-radius: var(--r-xs, 4px);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
}
.cbir-inner-page-purpose-missing:hover { background: rgba(255,170,0,0.18); }
.cbir-inner-page-row-editing .cbir-plan-edit-form { display: flex; flex-direction: column; gap: 8px; }

/* ── 4. Status-noise reduction (§5/M): provenance/"AI Detected" badges
   inside per-page and per-field rows are secondary information, not a
   headline — shrink and mute them everywhere they appear inside a
   step body so they read as metadata, not as a repeated warning. ── */
.rbi-step-container .cbir-editable-badge {
  font-size: 8.5px;
  opacity: 0.7;
  font-weight: 500;
}

/* ── 5. Step 7 — Review, Questions & Approval: decision hierarchy.
   Questions & Conflicts is the primary review surface while unresolved
   items exist (existing #bQuestionsConflictsBadge text already reads
   "N open" vs "0 open" — driven by existing JS, unchanged here); AI
   Intelligence supporting detail is visually secondary; the final
   Ready-to-Build CTA card stays last and stays visually dominant. No
   new gating logic — purely visual weight. ── */
.rbi-step-container[data-rbi-step="7"] { display: flex; flex-direction: column; gap: 14px; }
.rbi-step-container[data-rbi-step="7"] #bQuestionsConflictsCard {
  border-color: rgba(210,153,34,0.35);
  background: rgba(210,153,34,0.04);
  padding: 18px 20px;
}
.rbi-step-container[data-rbi-step="7"] #bQuestionsConflictsCard .cbir-col-title {
  font-size: 14px;
}
.rbi-step-container[data-rbi-step="7"] #briefAiIntelSection {
  opacity: 0.92;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.rbi-step-container[data-rbi-step="7"] #briefAiIntelSection .ai-intel-header .cbir-col-title {
  font-size: 12.5px;
  color: var(--text-secondary);
}
/* Final CTA is the last thing in the decision flow and must read as
   the single obvious primary action on the step. */
.rbi-step-container[data-rbi-step="7"] #briefCompactStatus {
  order: 5;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.08);
}
.rbi-step-container[data-rbi-step="7"] #bss-buildsettings { order: 6; }

/* ── 6. Comfortable line length for prose values (helper text,
   summaries) so long sentences don't stretch edge-to-edge on wide
   desktop viewports (§4). ── */
.rbi-step-container .cbir-intel-value { max-width: 74ch; }
.rbi-step-container .ai-intel-list,
.rbi-step-container .ai-intel-risk-list { max-width: 80ch; }

/* ── 7. Tablet: collapse the two-column step bodies back to one
   column (matches the certified rail's own tablet collapse point). ── */
@media (max-width: 1179px) {
  .rbi-step-container[data-rbi-step="1"],
  .rbi-step-container[data-rbi-step="6"] {
    display: block;
  }
  .rbi-step-container[data-rbi-step="1"] #bExistingWebsiteCard,
  .rbi-step-container[data-rbi-step="1"] #bReferenceWebsiteMultiCard { grid-column: auto; }
}

/* ── 7b. The single highest-leverage width fix in this corrective:
   the entire Read Brief review workspace (rail + step content) lives
   inside .brief-main, itself the 1fr track of .panel-two-col — whose
   OTHER track is a fixed 260px .brief-sidebar holding a raw brief.md
   text dump + a duplicate mini Assets list (the full Assets manager
   already lives inside .brief-main itself, further down). Before this
   fix, at a 1440px viewport the actual step-content column measured
   only ~350px (614px .brief-main minus the 240px rail minus gap) —
   the real cause of "cramped narrow-block controls" across every
   step, not something introduced by this corrective. The raw brief.md
   preview is technical metadata (§14 progressive-disclosure) with no
   unique action beyond Copy (Developer Tools ▾ above still exposes an
   equivalent raw view) and the mini Assets list duplicates the real
   Assets manager — so once Read Brief has completed and the step
   review workspace is showing, that sidebar collapses out of the grid
   entirely, handing its width to the step content. Uses :has() (guard
   against #briefAutoDetect's OWN inline style, set by existing JS —
   'display:none' pre-Read-Brief, emptied to '' once ready) so no JS
   changed. Pre-Read-Brief (still pasting a brief) the sidebar and its
   260px track are untouched. */
#tab-brief .panel-two-col:has(#briefAutoDetect:not([style*="none"])) {
  grid-template-columns: 1fr;
}
#tab-brief .panel-two-col:has(#briefAutoDetect:not([style*="none"])) .brief-sidebar {
  display: none;
}

/* ── 8. Mobile: full-width controls, no horizontal scroll from the
   new grid rows. ── */
@media (max-width: 760px) {
  .cbir-inner-page-row-editable {
    grid-template-columns: 1fr;
    grid-template-areas: "identity" "purpose" "actions";
  }
  .cbir-inner-page-row-editable > .cbir-inner-page-actions,
  .cbir-inner-page-row-editable > .cbir-editable-badge {
    justify-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LANE B RBI 2.0 — VIDEO-VERIFIED CERTIFICATION CLOSURE CORRECTIVE
   Builds on the 7b width fix above; does not replace it.
   ═══════════════════════════════════════════════════════════════ */

/* ── 9. Post-Read-Brief page simplification (§3/§E). Once Read Brief has
   completed, the old always-full-height "Paste Full Brief" textarea (the
   one piece of pre-analysis intake UI that lives OUTSIDE #briefAutoDetect,
   so it was never covered by the 7b sidebar-collapse rule) no longer needs
   to visually dominate the top of the page, above the compact hero +
   7-step workspace. It is NOT removed or hidden — the client brief must
   stay editable/re-readable — only shrunk to a scrollable strip once the
   step-review workspace is the primary content. Uses the exact same
   :has(#briefAutoDetect:not([style*="none"])) guard as 7b, so the
   pre-Read-Brief paste experience is provably unchanged. ── */
#tab-brief .brief-main:has(#briefAutoDetect:not([style*="none"])) #briefPasteArea {
  min-height: 56px;
  height: 56px;
  opacity: 0.82;
  transition: opacity var(--t-mid, 0.15s);
}
#tab-brief .brief-main:has(#briefAutoDetect:not([style*="none"])) #briefPasteArea:focus {
  height: 180px;
  opacity: 1;
}

/* ── 10. Step 2 semantic grouping (§4/§G) — reuses the existing
   .cbir-detect-group / .cbir-intel-grid visual language exactly, so the
   5 new groups (Business Identity / Audience / Positioning / Goals /
   Additional Intelligence) read as a natural continuation of the
   existing design system, not a new component. ── */
.rbi-step2-semantic-group { margin-top: 4px; }
.rbi-step2-semantic-group .cbir-intel-grid { margin-top: 2px; }

/* ── 11. Step 6 Design Intelligence dedup (§8/§K) — the demoted raw
   AI-detection swatches/typography/confidence row now live inside a
   collapsed <details>, closed by default, clearly labeled secondary. ── */
.rbi-step6-raw-detection {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle, rgba(255,255,255,0.08));
}
.rbi-step6-raw-detection > summary {
  cursor: pointer;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.8;
  list-style: revert;
}
.rbi-step6-raw-detection > summary:hover { opacity: 1; }
.rbi-step6-raw-detection[open] > summary { margin-bottom: 8px; }

/* ── 12. Palette label fix (§L) — the pre-existing "PRIMARY"/"SECONDARY"/
   "ACCENT" swatch labels were clipped to "PRI"/"SEC"/"ACC" by a fixed-width
   truncation rule inherited from a narrower ancestor. Now that Step 6 has
   real width (§O of the prior corrective) there is no reason to truncate
   these at all. ── */
.cbir-palette-row .cbir-swatch-info {
  overflow: visible;
  min-width: 72px;
}
.cbir-swatch-info .cbir-swatch-label,
.cbir-palette-row .cbir-swatch-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

/* ── 13. Step 7 truthful CTA (§9/§M) — visually demotes the Generate
   Homepage CTA (without disabling it — the click-time check in
   briefApproveSummary() is the actual gate) whenever real, authoritative
   "blocks progression" required decisions are outstanding, so the button's
   own look stops silently contradicting the Required Decisions list right
   above it. ── */
.brief-approve-btn.brief-approve-btn-required-blocked {
  background: var(--amber-dim, rgba(255,176,32,0.18));
  color: var(--amber, #ffb020);
}
.brief-approve-btn.brief-approve-btn-required-blocked:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   LANE B — RBI 2.0 FINAL NARROW VISUAL UX CLOSURE
   Step 6 single-workspace consolidation + Step 7 final hierarchy.
   ═══════════════════════════════════════════════════════════════ */

/* ── 14. Step 6 — ONE primary Design Intelligence workspace (§6). The
   workspace itself is the sole direct child once read-brief-steps.js
   reparents Creative Direction / Palette&Typography / AI Detection
   Details into it, so the existing 1180px 2-col grid's `> * { grid-column:
   1 / -1 }` rule already makes it span full width — no extra override
   needed there. Internal groups get a little breathing room so they read
   as sections of one workspace, not stacked unrelated cards. ── */
.rbi-step6-workspace .cbir-detect-group,
.rbi-step6-workspace > #bDesignIntelCard {
  margin-top: 14px;
}
.rbi-step6-workspace > .cbir-intel-card-header:first-child {
  margin-bottom: 4px;
}
.rbi-step6-workspace #bDesignIntelCard {
  border: none;
  padding: 0;
  background: none;
}
.rbi-step6-workspace #bDesignIntelCard .cbir-intel-card-header {
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
}

/* ── 15. Step 6 — improved Exact Color Palette presentation (§6.5): full
   role name (never clipped), a larger obvious swatch, a clear edit
   affordance, and provenance/Reset visually demoted to a trailing,
   secondary group. ── */
/* LANE B — RBI 2.0 FINAL ONE-PASS: the Exact Color Palette was a long,
   sparse vertical debug list (flat rows) that left the desktop layout with
   a wide blank area next to a narrow squeezed column. It is now a
   responsive grid of color-role TILES — 3 columns at desktop widths where
   space supports it, gracefully reducing at narrower breakpoints, so the
   palette actually uses the available RBI content width. Same data,
   same data-color-key hook, same _designIntelEditColor/_designIntelResetColor
   handlers as before — only the layout/shape changed. */
/* LANE B RBI 2.0 REMAINING UI + QUESTIONS CLOSURE §6 — FULL redesign,
   replacing the prior 3-column tile grid (still considered bad — small
   swatch, competing controls, no room to breathe). Each of the 7
   canonical roles is now a full-width ROW: a large, meaningful swatch on
   the left, role name + ALWAYS-VISIBLE full #RRGGBB (or arbitrary
   rgb()/hsl()/named-color value — never truncated) as the dominant
   content, with Edit revealing the picker/text input on demand and
   provenance/Reset demoted to a small secondary trailing row. Uses the
   full available desktop width naturally (a single column of wide rows)
   instead of a narrow multi-column tile island. Same data, same
   data-color-key hook, same _designIntelEditColor/_designIntelResetColor
   handlers as before — only the layout/shape changed. */
/* RBI 2.0 PALETTE LAYOUT + FONT AUDIT CORRECTIVE — the prior full-width
   vertical stack of 7 tall rows made Exact Color Palette read as a long,
   space-hungry column (each row full width but the section overall very
   tall). Target layout (per corrective spec): a full-width, compact,
   responsive GRID of role tiles directly below Visual Direction, using
   desktop width efficiently and collapsing cleanly at narrower widths.
   Same data, same data-color-key hook, same
   _designIntelEditColor/_designIntelResetColor handlers — layout only. */
/* STEP6 HORIZONTAL PALETTE CORRECTIVE — root-cause fix: the generic
   "comfortable line length" rule `.rbi-step-container .cbir-intel-value {
   max-width: 74ch }` (§6 above) was ALSO matching this element (it
   carries both `.cbir-intel-value` and `.cbir-design-intel-colors`),
   capping the whole grid CONTAINER itself to ~629px regardless of the
   real ~1180px available desktop width — that 629px ceiling only leaves
   room for 2 grid tracks at minmax(230px,1fr)+12px gap, which is exactly
   why the prior grid-based CSS still rendered as a tall, chunky, near-
   single-column stack in the real UI despite being technically a grid.
   Same fix applies to `.cbir-design-intel-fonts` (§Typography), which
   carries the same `.cbir-intel-value` class and was equally capped,
   preventing the two font panels from ever sharing a full-width row. */
.rbi-step-container .cbir-design-intel-colors,
.rbi-step-container .cbir-design-intel-fonts {
  max-width: none;
}
/* SECOND, DEEPER root cause found by live-render measurement: the
   generic `.cbir-detect-group` wrapper (shared by many unrelated small
   label/value field groups app-wide) is itself `display:grid;
   grid-template-columns:repeat(auto-fit,minmax(150px,1fr))`. Inside
   #bDesignIntelBody it wraps 3 auto-placed grid ITEMS — the group title,
   the helper <p>, and #bDesignIntelColors/#bDesignIntelFonts — so the
   palette/typography value block was being auto-placed into a SINGLE
   ~150-300px track of that unrelated field-pair grid instead of ever
   reaching its own full-width `.cbir-design-intel-colors` grid rule
   above. This — not the grid rule itself — is why the palette still
   rendered as a narrow, tall stack in the real UI even though the
   auto-fit/minmax CSS on `.cbir-design-intel-colors` was technically
   correct. Force these two value blocks (and their title/help siblings)
   to always span the full group row, regardless of the parent's own
   column count. */
#bDesignIntelBody .cbir-detect-group-title,
#bDesignIntelBody .bdr-field-help,
#bDesignIntelBody .cbir-design-intel-colors,
#bDesignIntelBody .cbir-design-intel-fonts {
  grid-column: 1 / -1;
}
.cbir-design-intel-colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
}
.cbir-color-role-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  min-width: 0;
}
.cbir-color-role-row-edited { background: rgba(0,212,255,0.04); }
.cbir-color-role-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  flex: none;
}
.cbir-color-role-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cbir-color-role-toprow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cbir-color-role-label {
  font-size: 11.5px;
  font-weight: 700;
  white-space: normal;
}
.cbir-color-role-hexvalue {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  /* Full value always visible — never truncated/ellipsized. */
  white-space: nowrap;
}
.cbir-color-role-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cbir-color-role-editrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.cbir-color-role-editrow[hidden] { display: none; }
.cbir-color-role-picker {
  width: 34px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: none;
}
.cbir-color-role-hex {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.cbir-color-role-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
  font-size: 11px;
}
@media (max-width: 820px) {
  .cbir-design-intel-colors { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .cbir-color-role-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .cbir-design-intel-colors { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .cbir-color-role-row { padding: 12px; gap: 12px; }
  .cbir-color-role-hexvalue { font-size: 13px; }
}

/* ── 16. Step 6 — Typography panels with live font preview (§6.6). Two
   clear panels (Heading Font / Body Font), each showing the current
   selection, its selector/upload/reset controls, and a sample sentence
   rendered in the actual selected font (falls back gracefully for
   non-browser-safe names). ── */
/* LANE B RBI 2.0 REMAINING UI + QUESTIONS CLOSURE §6 — Typography FULL
   presentation redesign. Heading Font / Body Font are side-by-side cards
   at desktop widths where each has sufficient room, stacking at narrower
   widths. Each card: label -> selected family name -> a LARGE real
   preview (heading-sized / paragraph-sized) -> "Change Font" control ->
   provenance/reset/custom-upload demoted to a small tertiary row. Same
   select/onchange/upload/reset handlers and data-font-slot hook as
   before — presentation only. */
/* STEP6 HORIZONTAL PALETTE CORRECTIVE — switched from flex-wrap to a
   grid, same fix class as the palette above: with flex-wrap:wrap, the
   CSS wrap decision is made from each item's flex-basis (320px) BEFORE
   flex-shrink is ever applied — two 320px bases (640px) always exceeded
   the real (now correctly full-width, but still content-column-capped,
   ~590-990px) available width and forced a permanent stack even though
   both panels would easily fit side-by-side once shrunk to their own
   280px min-width. A grid with auto-fit/minmax divides the real
   available width directly, so it doesn't have this wrap-before-shrink
   pitfall — same visual side-by-side/stack behavior, computed properly. */
#bDesignIntelFonts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  width: 100%;
}
.cbir-font-slot-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 8px);
  padding: 16px;
  background: rgba(255,255,255,0.015);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cbir-font-slot-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cbir-font-slot-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.cbir-font-slot-family { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cbir-font-slot-preview {
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text);
}
.cbir-font-slot-preview-lg.cbir-font-slot-preview-headingFont { font-size: 28px; font-weight: 700; line-height: 1.25; }
.cbir-font-slot-preview-lg.cbir-font-slot-preview-bodyFont { font-size: 15px; line-height: 1.7; }
.cbir-font-slot-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cbir-font-slot-change-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.cbir-font-slot-controls select { font-size: 12px; }
.cbir-font-slot-meta { display: flex; align-items: center; gap: 8px; opacity: 0.75; font-size: 11px; margin-top: 2px; }
/* #bDesignIntelFonts is a grid now (see STEP6 HORIZONTAL PALETTE
   CORRECTIVE above) — auto-fit/minmax already collapses to 1 column at
   narrow widths on its own; no flex-specific override needed. */
@media (max-width: 480px) {
  #bDesignIntelFonts { grid-template-columns: 1fr; }
}

/* ── 17. §6.2 — visible "Describe Custom X" caption for an Other/Custom
   text input, shown/hidden in sync with the input by bdrShowOther/
   bdrHideOther. ── */
.bdr-other-input-label {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin: 2px 0 4px;
}

/* ── 18. Step 7 — Review Status summary (§7.1): compact real-count chips,
   strongest visual weight after the Required Decisions list itself. ── */
.rbi-step7-review-status { order: 0; }
.rbi-step7-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rbi-step7-review-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.rbi-step7-review-chip-blocking {
  background: rgba(255,176,32,0.14);
  border-color: rgba(255,176,32,0.35);
  color: var(--amber, #ffb020);
}
.rbi-step7-review-summary {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.rbi-step7-review-summary-blocking { color: var(--amber, #ffb020); }

/* ── 19. Step 7 — AI Review Notes (§7.5): one lighter, collapsed-by-
   default disclosure combining Recommendations/Detected Opportunities/
   Missing Information (briefAiIntelSection) with Questions & Conflicts'
   open items — informational, never styled like a blocker. ── */
.rbi-step7-ai-review-notes {
  order: 3;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.015);
  opacity: 0.94;
}
.rbi-step7-ai-review-notes > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  list-style: revert;
}
.rbi-step7-ai-review-notes > summary:hover { color: var(--text); }
.rbi-step7-ai-review-notes[open] > summary { margin-bottom: 10px; }
.rbi-step7-ai-review-notes #briefAiIntelSection,
.rbi-step7-ai-review-notes #bQuestionsConflictsCard {
  border: none;
  padding: 0;
  background: none;
  margin-top: 10px;
}
.rbi-step7-ai-review-notes #briefAiIntelSection:first-of-type { margin-top: 0; }
.rbi-step-container[data-rbi-step="7"] #bss-questions { order: 1; }

/* ── 20. Step 3 — inline "Go to Step 5" pointer button (§3.B): reuses the
   existing vertical-nav gotoStep() API, styled as a plain inline link so
   it never competes visually with real primary actions. ── */
.rbi-inline-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--cyan, #00d4ff);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.rbi-inline-link-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════
   LANE B — RBI 2.0 BRIEF CLEAN TYPOGRAPHY, SPACING & CONTENT-DENSITY
   VISUAL CORRECTIVE
   Frontend/assets/css/style.css (appended block)
   ═══════════════════════════════════════════════════════════════

   Scope: everything below is scoped under `.rbi-workspace` (the root
   container of #rbiStepShell — see index.html) and touches ONLY
   presentation (font-size/line-height/spacing/grid track sizing/
   opacity/border) of the existing `.cbir-*`/`.bdr-*`/`.ai-intel-*`
   classes. No id is renamed, no markup structure is required beyond
   the new tooltip trigger button (added by read-brief-steps.js) and
   the `.rbi-long-content` class (applied additively, in-place, by the
   same file) — nothing here changes what data is shown, only how.

   1. Spacing scale (scoped custom properties)
   2. Typography hierarchy (scoped)
   3. Tooltip / popover component (reusable, shared by every converted
      field)
   4. Grid / wrapping corrective (§6 of the task brief — the Step 2
      Goals/Positioning and Step 6 palette priority fixes live here)
   5. Card simplification + badge/provenance de-emphasis
   6. Button hierarchy normalization
   7. Long-text readability class
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Spacing scale — scoped to the RBI workspace only ── */
.rbi-workspace {
  --rbi-space-1: 4px;   /* label -> control */
  --rbi-space-2: 8px;   /* tightly related metadata */
  --rbi-space-3: 14px;  /* field groups */
  --rbi-space-4: 22px;  /* subsections */
  --rbi-space-5: 30px;  /* major logical groups */
}

/* ── 2. Typography hierarchy — scoped, does not touch any class outside
   .rbi-workspace and does not change any class definition itself
   (would leak to non-RBI screens) — every rule below is written as
   `.rbi-workspace <existing-class>` so specificity wins only inside
   the workspace. ── */
.rbi-workspace .rbi-step-title,
.rbi-workspace .brief-hero-title { font-size: 22px; font-weight: 700; }
.rbi-workspace .cbir-detect-group-label,
.rbi-workspace .cbir-detect-group-title,
.rbi-workspace .cbir-col-title,
.rbi-workspace .cbir-subsection-label { font-size: 12.5px; letter-spacing: 0.4px; }
.rbi-workspace .field-label,
.rbi-workspace .cbir-field-label,
.rbi-workspace .cbir-intel-label,
.rbi-workspace .cbir-typo-label,
.rbi-workspace .cbir-swatch-label { font-size: 12px; font-weight: 600; }
.rbi-workspace .cbir-field-value,
.rbi-workspace .cbir-intel-value,
.rbi-workspace .cbir-typo-value,
.rbi-workspace .bdr-other-input,
.rbi-workspace .bdr-select,
.rbi-workspace .cbir-swatch-hex { font-size: 13.5px; line-height: 1.5; }
.rbi-workspace .exec-narrative { font-size: 14px; line-height: 1.65; }
.rbi-workspace .cbir-badge,
.rbi-workspace .cbir-editable-badge,
.rbi-workspace .bdr-source-badge,
.rbi-workspace .cbir-conf-badge { font-size: 10px; }

/* ── 3. Tooltip / popover component — ONE reusable pattern for every
   field that previously carried a permanent `.bdr-field-help`
   paragraph. Mouse (hover), keyboard (focus) and click all open it;
   Escape and click-outside (wired in read-brief-steps.js) close it;
   `aria-describedby` on the trigger links it to its own field for
   screen readers. Causes no layout shift — it is `position:absolute`,
   floated above surrounding content. ── */
.rbi-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}
.rbi-info-trigger:hover,
.rbi-info-trigger:focus-visible,
.rbi-info-trigger[aria-expanded="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
  background: var(--cyan-dim);
  outline: none;
}
.rbi-tooltip-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: 300px;
  padding: 9px 11px;
  border-radius: var(--r-md, 8px);
  background: #16171c;
  border: 1px solid var(--border-accent);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.55);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.rbi-tooltip-popover[hidden] { display: none; }
.rbi-info-trigger-wrap { position: relative; display: inline-flex; }

/* ── 4. Grid / wrapping corrective ──
   Short atomic fields (Tone, Complexity, Website Type, Revenue Stage,
   small dropdowns) may keep a tighter multi-column track — raised from
   150px to 190px so a label like "Business Model" never wraps onto
   its own line inside a column. */
.rbi-workspace .cbir-detect-group {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--rbi-space-3) var(--rbi-space-4);
  margin-bottom: var(--rbi-space-4);
}
/* Step 2 Full Breakdown (`.cbir-fields` inside `.exec-details`) — Goal /
   Deliverables / Key Requirements / Success Criteria / Timeline read as
   full-width rows (a `.cbir-fields` column is already flex/column, i.e.
   already full-width — this just gives each row breathing room instead
   of the old cramped 9px/11.5px density). */
.rbi-workspace .exec-details .cbir-fields { gap: var(--rbi-space-2); }
.rbi-workspace .exec-details .cbir-field { padding: var(--rbi-space-2) 0; }
/* Project Intelligence grid — Target Audience/Competitors/Specific Goals/
   Marketing Interests. 2 columns at desktop is fine for short values, but
   Specific Goals and Marketing Interests routinely hold full sentences —
   promote them to a full-width row instead of a squeezed half column. */
.rbi-workspace .cbir-intel-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rbi-workspace #bSpecificGoals,
.rbi-workspace #bMarketingInterests,
.rbi-workspace #bTargetAudience,
.rbi-workspace #bCompetitors {
  grid-column: 1 / -1;
}
/* Step 6 — Exact Color Palette: was a cramped flex row with 30px swatches
   and 9-10px labels; now a real grid so each swatch item stays comfortably
   wide instead of shrinking to fit an arbitrary number of colors, with a
   visibly larger swatch as the focal element. */
.rbi-workspace .cbir-palette-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--rbi-space-3);
}
.rbi-workspace .cbir-swatch {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.rbi-workspace .cbir-typo-row { gap: var(--rbi-space-4); }
/* Long-content-bearing groups (Purpose & Goal, Navigation Intent,
   Recommended Pages note, Synthesis note, AI Intelligence lists,
   Questions & Conflicts open list) always get the full container width —
   never placed in a narrow auto-fit track. */
.rbi-workspace #bWsPurposeGroup,
.rbi-workspace #bWsNavGroup,
.rbi-workspace #bWsCapsGroup,
.rbi-workspace #bWsReviewGroup,
.rbi-workspace .ai-intel-row { grid-column: 1 / -1; }

/* ── 5. Card simplification + badge/provenance de-emphasis ──
   Nested `.cbir-detect-group` inside an already-bordered `.cbir-intel-card`
   (or inside the AI Detection Details <details>) drop their own
   border/background — the outer card already establishes the boundary,
   so the inner group becomes plain spacing instead of a second box. */
.rbi-workspace .cbir-intel-card .cbir-detect-group,
.rbi-workspace .rbi-step6-raw-detection .cbir-detect-group {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--rbi-space-2) 0;
  margin-bottom: 0;
  background: none;
}
.rbi-workspace .cbir-intel-card .cbir-detect-group:last-child { border-bottom: none; }
/* Provenance/state badges (AI Detected / Read-only evidence / Edited)
   are the weakest tier in the hierarchy — smaller and more muted than
   the field value or an actionable badge next to it. */
.rbi-workspace .cbir-badge-readonly,
.rbi-workspace .bdr-source-badge {
  opacity: 0.8;
  font-weight: 500;
}
.rbi-workspace .cbir-detect-group-title .cbir-badge {
  font-size: 9px;
  vertical-align: middle;
}

/* ── 6. Button hierarchy normalization ──
   Primary: Continue / Confirm Plan / Save / Generate Homepage
   (`.cbir-plan-btn-primary`, `.inline-btn.primary`, `.rtb-continue-btn`).
   Secondary: Edit / Add / Back (`.inline-btn`, `.cbir-plan-btn`).
   Tertiary/subtle: Reset to AI / Reset / Details (`.cbir-plan-btn-subtle`).
   Destructive: Delete (`.cbir-plan-btn-danger`). No new classes — this
   only tightens the existing ones so they read as 4 distinct weights
   instead of 4 nearly-identical grey pills. */
.rbi-workspace .cbir-plan-btn { font-weight: 500; }
.rbi-workspace .cbir-plan-btn-primary { font-weight: 700; }
.rbi-workspace .cbir-plan-btn-subtle { opacity: 0.65; font-weight: 500; }
.rbi-workspace .cbir-plan-btn-subtle:hover { opacity: 1; }

/* ── 7. Long-text readability class ──
   Applied (by read-brief-steps.js, additively, to existing value nodes —
   never a new element) to: exec narrative, Goal/Purpose/Positioning
   values, AI recommendations/opportunities/missing-information list
   items, Navigation Intent value, Synthesis note, conflicts text. */
.rbi-long-content {
  max-width: 74ch;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: break-word;
}
.rbi-long-content p { margin: 0 0 8px; }
.rbi-long-content p:last-child { margin-bottom: 0; }
.rbi-long-content ul { margin: 4px 0 0; padding-left: 18px; }

@media (max-width: 1280px) {
  .rbi-workspace .cbir-detect-group { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .rbi-workspace .cbir-palette-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (max-width: 820px) {
  .rbi-workspace .cbir-columns,
  .rbi-workspace .cbir-detect-group,
  .rbi-workspace .cbir-intel-grid,
  .rbi-workspace .cbir-palette-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rbi-tooltip-popover { max-width: calc(100vw - 48px); }
}

/* ── Step 6 — Exact Color Palette (canonical, editable rows) — real-
   browser verification found the CANONICAL swatch list
   (#bDesignIntelColors, rendered by app.js's _renderDesignIntelligence
   as `.cbir-color-role-row`) is a DIFFERENT markup shape from the
   collapsed AI Detection Details raw-detection swatches
   (`.cbir-palette-row`/`.cbir-swatch`) already resized above — this is
   the one the user actually edits, so it gets the same "larger, more
   visual swatch" treatment. Presentation-only: no id/handler/data-
   color-key touched. ── */
/* LANE B FINAL ONE-PASS: the palette is now a grid of tiles (see
   .cbir-design-intel-colors / .cbir-color-role-row above) — the swatch is
   full tile width, so this override no longer forces a small fixed square. */
.rbi-workspace .cbir-color-role-hex { font-size: 12px; }
.rbi-workspace .cbir-color-role-label { font-size: 13px; }

/* ── LANE B — RBI 2.0 FINAL ONE-PASS: Step 3 Website Strategy/Structure ──
   Website Type / Primary Goal as separate labeled rows (never a
   concatenated "Type: X · Goal: Y" debug string), and the page list as a
   clean two-column name/purpose table instead of one long narrow
   concatenated paragraph stack. Uses the full available RBI content
   width; gracefully collapses to a single column at narrow widths. ── */
.cbir-labeled-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
}
.cbir-labeled-row-label {
  flex: 0 0 150px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #9aa);
}
.cbir-labeled-row-value {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}
.cbir-page-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cbir-page-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}
.cbir-page-row:last-child { border-bottom: none; }
.cbir-page-row-name { font-weight: 600; font-size: 13px; }
.cbir-page-row-purpose { font-size: 13px; opacity: 0.85; }
@media (max-width: 820px) {
  .cbir-labeled-row { flex-direction: column; gap: 2px; }
  .cbir-labeled-row-label { flex: none; }
  .cbir-page-row { grid-template-columns: 1fr; gap: 2px; }
}

/* LANE B — RBI 2.0 FINAL ONE-PASS: real-browser verification (live
   FAKE_CLAUDE Read Brief run) caught the exact "wasted width" bug the
   brief described for Step 3 — read-brief-steps.js's _applyStep3Grouping
   wraps #bWsPagesGroup and #bWsRecommendedGroup as two children of one
   "Website Structure" wrapper (`.rbi-step2-semantic-group`, itself a
   `.cbir-detect-group`, i.e. `display:grid; grid-template-columns:
   repeat(auto-fit, minmax(190px,1fr))`). With no explicit span, the two
   groups were auto-placed as separate grid items side by side, squeezing
   the Pages table's "purpose" column down to roughly half the available
   width and forcing every page purpose to wrap into a tall, narrow,
   near-unreadable column — while Recommended Pages sat in a mostly empty
   second column. Each must instead take the FULL row width and stack
   vertically, exactly like every other full-width Website
   Structure/Strategy group. */
#bWsPagesGroup,
#bWsRecommendedGroup {
  grid-column: 1 / -1;
}
/* #bWsPagesGroup/#bWsRecommendedGroup are THEMSELVES `.cbir-detect-group`
   (display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,
   1fr))) — without an explicit span, their own direct children (the
   group title, the help paragraph, and the actual page-table/tag-list
   value div) were ALSO auto-placed as separate grid items side by side
   in up to 3 columns, which is what actually produced the narrow
   ~190-350px page-table column with the help text floating to its right.
   Only `.cbir-detect-group-label` (not `-title`) previously spanned the
   full row, so `.cbir-detect-group-title`, the help `<p>`, and the value
   div must all explicitly span the full row too. */
/* The same internal-grid-scattering issue affects every Website
   Intelligence sub-group (Purpose & Goal, Navigation Intent, Sitewide
   Capabilities, Review Items) — each is `.cbir-detect-group` (its own
   internal auto-fit grid) with a title + optional help text + one value
   node as direct children, which were never meant to sit side by side.
   Every direct child of a Website Intelligence sub-group now explicitly
   spans the full row, so each group reads as simple stacked
   title -> help -> value, exactly like every other single-value
   Website Intelligence field. */
#bWebsiteIntelBody .cbir-detect-group > * {
  grid-column: 1 / -1;
}

/* ── RBI 2.0 INNER PAGES SECTION INTELLIGENCE CORRECTIVE ──────────────────
   Compact page-tab selector + one selected-page workspace + flat section
   rows. Deliberately NOT a card-per-page/card-per-section layout — a
   horizontal chip row for page selection, subtle dividers between section
   rows, small provenance/status text, compact inline actions. ── */
.cbir-ips-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.cbir-ips-tab {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.12));
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}
.cbir-ips-tab:hover { opacity: 0.95; }
.cbir-ips-tab.cbir-ips-tab-active {
  opacity: 1;
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.4);
  color: var(--cyan, #00d4ff);
}
.cbir-ips-tab-status {
  margin-left: 5px;
  font-size: 9px;
  opacity: 0.75;
}

.cbir-ips-body { display: flex; flex-direction: column; gap: 2px; }
.cbir-ips-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cbir-ips-page-title { font-size: 12.5px; font-weight: 700; }
.cbir-ips-page-actions { display: flex; gap: 6px; align-items: center; }

.cbir-ips-section-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.cbir-ips-section-row:first-of-type { border-top: none; }
.cbir-ips-section-role {
  flex: 0 0 auto;
  min-width: 78px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.85;
  padding-top: 1px;
}
.cbir-ips-section-main { flex: 1 1 auto; min-width: 0; }
.cbir-ips-section-purpose { font-size: 11.5px; line-height: 1.4; }
.cbir-ips-section-meta { font-size: 10px; opacity: 0.65; margin-top: 2px; }
.cbir-ips-section-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.cbir-ips-section-actions .cbir-plan-btn { font-size: 10px; padding: 2px 6px; }
.cbir-ips-add-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.cbir-ips-add-row select, .cbir-ips-add-row input { font-size: 11px; }
.cbir-ips-empty { font-size: 11px; opacity: 0.7; padding: 8px 0; }
/* RBI 2.0 STEP 5 INNER PAGES DETECTED SECTIONS UI CORRECTIVE — real 390px
   browser proof found the row's fixed three-in-a-row flex layout (role |
   purpose | actions) squeezes .cbir-ips-section-main to a sliver on narrow
   viewports (role's 78px min-width + the 5-button actions group leave
   almost nothing), reproducing the exact one-word-per-line wrap the desktop
   grid-column bug above also caused. Below this breakpoint, let role+actions
   share a top line and drop purpose/meta to their own full-width line —
   same "identity/actions on top, content below" shape already used by
   .cbir-inner-page-row-editable just above in this file. */
@media (max-width: 560px) {
  .cbir-ips-section-row { flex-wrap: wrap; }
  .cbir-ips-section-role { flex: 1 1 auto; }
  .cbir-ips-section-actions { order: 2; }
  .cbir-ips-section-main { order: 3; flex: 1 1 100%; }
}

/* ─── LANE B THEME CONTROLS T3 — Global Theme drawer ───────────────────────
   Right-anchored slide-in panel, built on this codebase's existing
   design-token/color palette rather than any new visual language. Opened
   via .gtd-open on #gtdDrawer (theme-drawer.js) — mirrors the existing
   .modal-backdrop.open pattern's show/hide convention. */
.gtd-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.gtd-backdrop.gtd-backdrop-open { opacity: 1; pointer-events: auto; }
.gtd-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--panel-bg, #12161c); color: var(--text, #e8eaed);
  box-shadow: -8px 0 32px rgba(0,0,0,0.35); z-index: 1201;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.gtd-drawer.gtd-open { transform: translateX(0); }
.gtd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); flex: 0 0 auto;
}
.gtd-header-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gtd-scope-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(0,212,255,0.15); color: var(--cyan, #00d4ff); border: 1px solid rgba(0,212,255,0.3);
  border-radius: 4px; padding: 2px 6px;
}
.gtd-title { font-size: 15px; margin: 0; }
.gtd-status-badge { font-size: 11px; opacity: 0.75; }
.gtd-unsaved-badge {
  font-size: 11px; font-weight: 600; color: #f59e0b; background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35); border-radius: 4px; padding: 2px 6px;
}
/* LANE B THEME CONTROLS T4 — Global/Page scope toggle + inherited/overridden
   row badge. Reuses this drawer's own existing token/badge visual language
   (same font-size/border-radius conventions as .gtd-scope-badge/.gtd-row-
   provenance above) — no new design system introduced for this phase. */
.gtd-scope-toggle { display: flex; gap: 4px; }
.gtd-scope-toggle-btn {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: inherit; cursor: pointer;
}
.gtd-scope-toggle-btn-active {
  background: rgba(0,212,255,0.18); border-color: rgba(0,212,255,0.4); color: var(--cyan, #00d4ff);
}
.gtd-row-inherit-badge {
  font-size: 10px; opacity: 0.65; font-style: italic;
}
.gtd-row-inherit-badge-overridden {
  opacity: 1; font-style: normal; font-weight: 600; color: var(--cyan, #00d4ff);
}
.gtd-preview-status { font-size: 11px; opacity: 0.6; padding: 0 16px 8px; flex: 0 0 auto; }
/* LANE B THEME CONTROLS T6 RECOVERY 6 — Device selector, Preset picker,
   Previous-Version-preview banner, and History panel. Reuses the exact same
   visual language as .gtd-scope-toggle/.gtd-scope-toggle-btn/.gtd-unsaved-
   badge above — no new design system introduced. */
.gtd-device-row, .gtd-preset-row {
  display: flex; align-items: center; gap: 8px; padding: 0 16px 8px; flex: 0 0 auto;
}
.gtd-device-row-label, .gtd-preset-row-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7;
}
.gtd-device-toggle { display: flex; gap: 4px; }
.gtd-device-toggle-btn {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: inherit; cursor: pointer;
}
.gtd-device-toggle-btn-active {
  background: rgba(0,212,255,0.18); border-color: rgba(0,212,255,0.4); color: var(--cyan, #00d4ff);
}
.gtd-preset-select { flex: 1 1 auto; font-size: 12px; padding: 4px 6px; }
.gtd-history-preview-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; color: #f59e0b; background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35); border-radius: 4px; margin: 0 16px 8px; padding: 6px 10px;
}
/* FINAL PRE-VEYRA CORRECTIVE — the banner is toggled with the `hidden`
   attribute (theme-drawer.js _renderHistoryPanel), but the class rule above
   sets display:flex at the same specificity as the browser's own
   [hidden]{display:none} and therefore won: the "Previewing a previous
   version — not saved" banner was visible permanently, even with a saved
   theme and no history preview active. */
.gtd-history-preview-banner[hidden] { display: none !important; }
.gtd-history-panel { padding: 0 16px 12px; flex: 0 0 auto; max-height: 180px; overflow-y: auto; }
.gtd-history-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  opacity: 0.8; margin: 0 0 6px;
}
.gtd-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gtd-history-empty { font-size: 12px; opacity: 0.6; padding: 6px 0; }
.gtd-history-row {
  display: flex; align-items: center; gap: 8px; font-size: 11px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 4px 8px;
}
.gtd-history-version { font-weight: 700; flex: 0 0 auto; }
.gtd-history-meta { opacity: 0.75; flex: 1 1 auto; }
.gtd-history-time { opacity: 0.55; flex: 0 0 auto; }
.gtd-history-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.gtd-history-btn {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: inherit; cursor: pointer;
}
.gtd-history-btn-restore { background: rgba(0,212,255,0.15); border-color: rgba(0,212,255,0.35); color: var(--cyan, #00d4ff); }
.gtd-history-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gtd-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; }
.gtd-empty { padding: 24px 4px; opacity: 0.7; font-size: 13px; }
.gtd-empty-error { color: #ef4444; }
.gtd-family { margin-bottom: 18px; }
.gtd-family-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  opacity: 0.8; margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.gtd-derived-badge {
  font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: normal;
  background: rgba(255,255,255,0.08); border-radius: 3px; padding: 1px 5px; opacity: 0.85;
}
.gtd-family-rows { display: flex; flex-direction: column; gap: 8px; }
.gtd-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.03);
}
.gtd-row-edited { background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.2); }
.gtd-row-derived { opacity: 0.85; }
.gtd-row-label-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gtd-row-label { font-size: 12px; font-weight: 600; }
.gtd-row-tech { font-size: 10px; opacity: 0.5; font-family: monospace; }
.gtd-row-provenance { font-size: 10px; opacity: 0.6; }
.gtd-row-derived-note { font-size: 10px; opacity: 0.6; font-style: italic; }
.gtd-row-control-col { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gtd-row-actions-col { display: flex; align-items: center; }
.gtd-color-picker { width: 28px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; }
.gtd-text-input, .gtd-select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: inherit;
  border-radius: 4px; font-size: 12px; padding: 3px 6px;
}
.gtd-text-input { width: 90px; }
.gtd-narrow { width: 56px; }
.gtd-subfield { font-size: 10px; display: flex; align-items: center; gap: 3px; }
.gtd-clamp-preview { font-size: 9px; opacity: 0.55; font-family: monospace; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtd-derived-value { font-size: 11px; font-family: monospace; opacity: 0.8; }
.gtd-reset-btn { background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 13px; }
.gtd-reset-btn:hover { opacity: 1; }
.gtd-gap-note { font-size: 10px; opacity: 0.55; font-style: italic; margin: 6px 0 0; }
.gtd-footer {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); gap: 8px;
}
.gtd-footer-main-actions { display: flex; gap: 8px; }
.gtd-unsaved-choice {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex;
  align-items: center; justify-content: center; z-index: 5;
}
/* RECOVERY B — root cause of the dialog appearing to show (and blocking
   clicks on the real controls beneath it) immediately on every drawer
   open, with zero edits: the class rule above's `display: flex` beats the
   browser's own `[hidden] { display: none }` UA rule at equal specificity
   (author stylesheets always win over the UA stylesheet), so the `hidden`
   attribute theme-drawer.js correctly sets/clears was never actually
   taking visual effect. */
.gtd-unsaved-choice[hidden] { display: none; }
.gtd-unsaved-choice-box {
  background: var(--panel-bg, #12161c); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 16px; width: 280px; text-align: center;
}
.gtd-unsaved-choice-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
@media (max-width: 640px) {
  .gtd-drawer { width: 100vw; max-width: 100vw; }
}

/* ─────────────────────────────────────────────────────────────────────────
   GAP-004 / GAP-005 (Lane A -> Canonical) — .ptu-* AI-usage and .ct-*
   capability-transparency styling for the two right-sidebar panels restored
   by this corrective. Additive only: every colour below is an existing design
   token, and nothing here touches the base status palette, job badges,
   .cv-status-dot/[data-status] rules, toasts, or any Theme Controls styling.
   ───────────────────────────────────────────────────────────────────────── */
   AI USAGE — Token / Cost Telemetry UI Placement Corrective (§8)
   Reuses the EXISTING right-sidebar telemetry visual language (rpt-section-
   label / metric-row / token-table). No new card shape, no chart, no
   progress bar, no dashboard. Both themes are covered because every colour
   below is an existing --token, not a literal.
   ───────────────────────────────────────────────────────────────────────── */
.ptu-block { display: flex; flex-direction: column; gap: 5px; }
.ptu-state {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
  line-height: 1.5;
}
.ptu-tokens { margin-top: 4px; }
.ptu-disclosure {
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-faint);
  border-left: 2px solid var(--border-muted);
  padding: 4px 0 4px 8px;
  margin-top: 6px;
}
.ptu-disclosure b { color: var(--text-muted); font-weight: 700; }
.ptu-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ptu-flags:empty { display: none; }
.ptu-flag {
  font-size: 9.5px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  background: var(--bg-overlay);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ptu-flag.warn { color: var(--amber, #f0a020); border-color: var(--amber, #f0a020); }
.ptu-ops { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ptu-ops:empty { display: none; }
.ptu-op {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--text-muted);
}
.ptu-op b { font-family: var(--font-mono); color: var(--text-primary); font-weight: 500; }
.ptu-op span:first-child { overflow-wrap: anywhere; min-width: 0; }
/* ─────────────────────────────────────────────────────────────────────────
   CAPABILITIES — SKILLS & MCP  (MCP + Skills Stage E)
   Same visual language as the AI USAGE block directly above: existing
   right-sidebar tokens only, no new card shape, no chart, no progress bar,
   no percentage. Both themes are covered because every colour below is an
   existing --token rather than a literal. Nothing here is styled as an
   alert: "0 MCP active" is normal operating truth, so its tone is `info`,
   which is muted — never red.
   ───────────────────────────────────────────────────────────────────────── */
.ct-block { display: flex; flex-direction: column; gap: 5px; }
.ct-state {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ct-state.err { color: var(--amber, #f0a020); }
.ct-body { display: flex; flex-direction: column; gap: 6px; }
/* An explicit `display` beats the UA's own `[hidden] { display: none }`, so
   without this the summary would still paint in the error and empty states
   even though the module had correctly set `hidden`. */
.ct-body[hidden], .ct-drawer[hidden] { display: none !important; }

/* Compact summary — the collapsed affordance. */
.ct-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-sm, 4px);
  padding: 7px 8px;
  color: var(--text-primary);
  font: inherit;
}
.ct-toggle:hover { border-color: var(--border-strong, var(--border-muted)); }
.ct-summary { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-summary-line {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.ct-caret { font-size: 10px; color: var(--text-faint); flex: 0 0 auto; }

/* Expanded detail. */
.ct-drawer { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.ct-group { display: flex; flex-direction: column; gap: 3px; }
.ct-group-title {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.ct-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--text-muted);
}
.ct-row-label { min-width: 0; overflow-wrap: anywhere; }
.ct-row-val {
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ct-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 0;
}
.ct-item-id {
  font-family: var(--font-mono);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  min-width: 0;
}
.ct-item-reason {
  flex: 1 1 100%;
  font-size: 9.5px;
  color: var(--text-faint);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ct-tag {
  font-size: 9px;
  font-family: var(--font-mono);
  padding: 1px 5px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  flex: 0 0 auto;
}
.ct-tag.ok   { color: var(--green, #3fb950); border-color: var(--green, #3fb950); }
.ct-tag.warn { color: var(--amber, #f0a020); border-color: var(--amber, #f0a020); }

/* The five MCP gate states — distinguished by dot colour AND by an explicit
   text label, never by colour alone (colour alone is not an accessible
   distinction and would also be lost in a screenshot review). */
.ct-mcp-state { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.ct-mcp-head { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); }
.ct-mcp-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ct-mcp-count { font-family: var(--font-mono); color: var(--text-primary); }
.ct-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-faint);
}
.ct-dot.ok    { background: var(--green, #3fb950); }
.ct-dot.warn  { background: var(--amber, #f0a020); }
.ct-dot.info  { background: var(--text-muted); }
.ct-dot.muted { background: var(--border-muted); }

.ct-note, .ct-empty {
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-faint);
  border-left: 2px solid var(--border-muted);
  padding: 4px 0 4px 8px;
  overflow-wrap: anywhere;
}
.ct-limitation { display: flex; flex-direction: column; gap: 3px; }

.ct-raw { font-size: 9.5px; color: var(--text-faint); }
.ct-raw > summary { cursor: pointer; color: var(--text-muted); }

/* FINAL PRE-VEYRA CORRECTIVE (project open) — non-blocking sync pill shown
   while the canonical server snapshot reconciles behind an open workspace. */
.workspace-sync-pill { position: fixed; right: 18px; bottom: 18px; z-index: 1900; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--text-muted, #95959c); background: var(--bg-elevated, #15181d); border: 1px solid var(--border-muted, #262b33); box-shadow: 0 6px 20px rgba(0,0,0,.35); pointer-events: none; }
.workspace-sync-pill[hidden] { display: none; }
/* FINAL PRE-VEYRA CORRECTIVE (Claude usage) — truthful freshness markers. */
.cut-freshness, .cus-freshness { font-size: 10px; letter-spacing: .02em; color: var(--text-muted, #95959c); }
.cut-freshness-refreshing, .cus-freshness-refreshing { color: var(--accent, #00d4ff); }
.cut-freshness-stale, .cus-freshness-stale { color: var(--amber, #d29922); }

/* ── Cloud Engine (CLOUD ENGINE MODEL GOVERNANCE) ─────────────────────────── */
.cloud-engine { display: flex; flex-direction: column; gap: 14px; }
.ce-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ce-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ce-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.ce-muted { color: var(--text-muted); font-size: 12px; }
.ce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ce-kv { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-overlay); min-width: 0; }
.ce-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ce-v { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.ce-kv .mono, .ce-table .mono { font-family: var(--font-mono); font-size: 11px; }
.ce-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border-muted); color: var(--text-secondary); }
.ce-pill.ok { color: #3fb950; border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.08); }
.ce-pill.warn { color: #f5c76a; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.ce-pill.danger { color: #ff8a8a; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
.ce-pill.muted { color: var(--text-muted); }
.ce-controls { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(200px, 1fr); gap: 12px 14px; padding: 14px; border: 1px solid var(--border-muted); border-radius: 10px; background: var(--bg-elevated); }
.ce-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; min-width: 0; }
.ce-field > span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ce-field select, .ce-field input { height: 36px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border-muted); background: var(--bg-base); color: var(--text-primary); font-size: 13px; font-family: var(--font-ui); }
.ce-field select:focus-visible, .ce-field input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.ce-note { grid-column: 1 / -1; }
.ce-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ce-spacer { flex: 1; }
.ce-unsaved { color: #f5c76a; font-size: 12px; font-weight: 600; }
.ce-notice { font-size: 12.5px; padding: 9px 12px; border-radius: 8px; border: 1px solid transparent; line-height: 1.5; }
.ce-notice.info { background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.25); }
.ce-notice.ok { background: rgba(63,185,80,0.10); border-color: rgba(63,185,80,0.35); color: #9fe3ac; }
.ce-notice.warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); color: #f5c76a; }
.ce-notice.error { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); color: #ff8a8a; }
.ce-details { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); padding: 10px 12px; border-left: 2px solid var(--cyan-dim); }
.ce-details code { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); }
.ce-diagnostics { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 12px; }
.ce-diagnostics > summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.ce-diag-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ce-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ce-table th, .ce-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ce-table th { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ce-row-off td { color: var(--text-muted); }
.engine-model-label { font-size: 11.5px; overflow-wrap: anywhere; }
.engine-model-label.is-degraded { color: #ff8a8a; }
@media (max-width: 720px) { .ce-controls { grid-template-columns: 1fr; } }

/* Claude Engine — inline Retry controls inside notices (urgent loading corrective) */
.cloud-engine .ce-inline-btn { margin-left: 8px; padding: 3px 10px; font-size: 12px; vertical-align: middle; }
.cloud-engine .ce-notice[role="status"] { display: flex; align-items: center; gap: 8px; }
.cloud-engine .ce-notice[role="status"]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cyan, #00d4ff); border-top-color: transparent; animation: ce-spin 0.9s linear infinite; flex: 0 0 auto; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cloud-engine .ce-notice[role="status"]::before { animation: none; } }

/* Claude Engine › Claude Code (update manager) */
.cloud-engine .ce-cc { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, rgba(255,255,255,.08)); display: flex; flex-direction: column; gap: 10px; }
.cloud-engine .ce-cc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cloud-engine .ce-cc-title { font-weight: 600; font-size: 14px; }
.cloud-engine .ce-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.cloud-engine .ce-toggle input { width: 16px; height: 16px; accent-color: var(--cyan, #00d4ff); }
.cloud-engine .ce-toggle input:disabled + span { opacity: .7; }
.cloud-engine .ce-cc-actions { margin-top: 2px; }


/* ── AUTH BOOT + GLOBAL NAVIGATION / CONTEXT corrective ─────────────────── */
/* Global/system pages that live inside the workspace tab strip (Workspace
   Settings, API Integrations) must never inherit project chrome. */
body.shell-global #viewWorkspace .workspace-header,
body.shell-global #viewWorkspace .workspace-tabs,
body.shell-global #viewWorkspace #roleBanner,
body.shell-global #viewWorkspace #rightPanel,
body.shell-global #rightPanel { display: none !important; }
body.shell-global #viewWorkspace .main-area { flex: 1 1 auto; }
/* boot gate states */
.welcome-status { margin-top: 14px; font-size: 13px; color: var(--text-muted, #8b93a7); letter-spacing: .01em; }
.welcome-error { margin-top: 18px; max-width: 460px; text-align: center; }
.welcome-error-message { font-size: 13px; color: var(--danger, #ef4444); line-height: 1.5; margin-bottom: 12px; }
.welcome-error-actions { display: flex; gap: 10px; justify-content: center; }
body.agencyos-boot-failed .welcome-splash-progress-fill { background: var(--danger, #ef4444); }
/* global pages (Build Queue / Approvals) */
.gp-root { display: flex; flex-direction: column; gap: 14px; }
.gp-state { padding: 18px; color: var(--text-muted, #8b93a7); font-size: 13px; }
.gp-error { color: var(--danger, #ef4444); }
.gp-empty { padding: 40px 24px; text-align: center; border: 1px dashed var(--border, rgba(255,255,255,.12)); border-radius: 12px; }
.gp-empty-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.gp-empty-sub, .gp-sub { font-size: 13px; color: var(--text-muted, #8b93a7); max-width: 560px; margin: 0 auto; line-height: 1.5; }
.gp-actions { margin-top: 16px; }
.gp-summary { font-size: 13px; color: var(--text-muted, #8b93a7); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-table-wrap { overflow-x: auto; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gp-table th, .gp-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.gp-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: rgba(255,255,255,.06); }
.gp-running, .gp-queued { background: rgba(0,212,255,.14); color: var(--cyan, #00d4ff); }
.gp-failed { background: rgba(239,68,68,.14); color: var(--danger, #ef4444); }
.gp-completed { background: rgba(34,197,94,.14); color: #22c55e; }
.gp-list { list-style: none; padding: 0; margin: 12px auto 0; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.gp-link { background: none; border: 1px solid var(--border, rgba(255,255,255,.12)); color: inherit; border-radius: 8px; padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; font: inherit; }
.gp-link:hover { border-color: var(--cyan, #00d4ff); }

/* ── ONBOARDING TOUR + NOTIFICATION CENTER mission ───────────────────────── */
.notif-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,.1)); background: transparent; color: var(--text-secondary, #9aa4b8); cursor: pointer; flex: 0 0 auto; }
.notif-bell-btn:hover, .notif-bell-btn.is-open { color: var(--cyan, #00d4ff); border-color: var(--cyan, #00d4ff); }
.notif-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--danger, #ef4444); color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-weight: 700; }
.notif-panel { position: fixed; z-index: 2400; bottom: 84px; left: 16px; width: 340px; max-height: 60vh; display: flex; flex-direction: column; background: var(--bg-elevated, #14161c); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45); overflow: hidden; }
.notif-panel.hidden { display: none; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); flex: 0 0 auto; }
.notif-panel-title { font-weight: 600; font-size: 13px; }
.notif-mark-all { background: none; border: none; color: var(--cyan, #00d4ff); font-size: 12px; cursor: pointer; padding: 0; }
.notif-panel-body { overflow-y: auto; }
.notif-state, .notif-state-error { padding: 20px 14px; font-size: 12px; color: var(--text-muted, #8b93a7); }
.notif-empty { padding: 32px 18px; text-align: center; }
.notif-empty-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.notif-empty-sub { font-size: 12px; color: var(--text-muted, #8b93a7); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-row { display: flex; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.05)); }
.notif-row:last-child { border-bottom: none; }
.notif-row-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: transparent; }
.notif-row.is-unread .notif-row-dot { background: var(--cyan, #00d4ff); }
.notif-row-body { min-width: 0; flex: 1; }
.notif-row-title { font-size: 12.5px; font-weight: 600; }
.notif-row.is-unread .notif-row-title { color: var(--text-primary, #f2f4f8); }
.notif-row:not(.is-unread) .notif-row-title { color: var(--text-secondary, #9aa4b8); font-weight: 500; }
.notif-row-msg { font-size: 12px; color: var(--text-muted, #8b93a7); margin-top: 2px; line-height: 1.4; }
.notif-row-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.notif-row-time { font-size: 11px; color: var(--text-muted, #8b93a7); }
.notif-cta, .notif-mark { background: none; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; color: inherit; }
.notif-cta { border-color: var(--cyan, #00d4ff); color: var(--cyan, #00d4ff); }
.notif-cta:hover { background: rgba(0,212,255,.1); }

.tour-overlay { position: fixed; inset: 0; z-index: 2500; }
.tour-overlay.hidden { display: none; }
.tour-backdrop { position: absolute; inset: 0; background: rgba(4,6,10,.35); }
.tour-spotlight { position: fixed; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(4,6,10,.62); border: 2px solid var(--cyan, #00d4ff); pointer-events: none; transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.tour-card { position: fixed; z-index: 2501; width: 320px; max-width: calc(100vw - 24px); background: var(--bg-elevated, #14161c); border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 12px; padding: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.tour-card-welcome { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; text-align: center; }
.tour-card-progress { font-size: 11px; color: var(--cyan, #00d4ff); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 6px; }
.tour-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.tour-card-desc { font-size: 12.5px; color: var(--text-secondary, #9aa4b8); line-height: 1.5; }
.tour-card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; }
.tour-card-welcome .tour-card-actions { justify-content: center; }
.tour-card-actions-right { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .tour-spotlight { transition: none; } }

/* FINAL VIDEO ONBOARDING INTEGRATION — the video player card reuses the
   same .tour-card visual language (background/border/radius/shadow tokens)
   at a wider size to fit a responsive 16:9 player. */
.tour-card-video { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); }
.tour-card-video-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tour-card-video-header .tour-card-title { margin-bottom: 0; }
.tour-card-video-close { background: transparent; border: none; color: var(--text-secondary, #9aa4b8); font-size: 14px; line-height: 1; cursor: pointer; padding: 4px; border-radius: var(--r-xs, 4px); }
.tour-card-video-close:hover { color: var(--text-primary, #e6e9ef); background: var(--bg-overlay, rgba(255,255,255,.06)); }
.tour-card-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.tour-card-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* WELCOME VIDEO THUMBNAIL/POSTER CORRECTIVE — the first-login welcome card
   gets its own width (independent of .tour-card-welcome, which the Guided
   Tour's own welcome/done cards still use unmodified) so a 16:9 thumbnail
   has room without disturbing the Guided Tour's design. Sized as the
   product-introduction moment (760-820px on desktop), not a small utility
   popup, while staying within the viewport height and never overflowing. */
.tour-card-video-welcome {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(800px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  text-align: center; padding: 28px;
}
.tour-card-video-welcome .tour-card-actions { justify-content: center; margin-top: 20px; }
.tour-card-video-welcome .tour-card-title { font-size: 20px; margin-bottom: 10px; }
.tour-card-video-welcome .tour-card-desc { font-size: 14px; max-width: 560px; margin: 0 auto; }
@media (max-width: 640px) {
  .tour-card-video-welcome { width: 92vw; padding: 16px; }
  .tour-card-video-welcome .tour-card-title { font-size: 17px; }
  .tour-card-video-welcome .tour-card-desc { font-size: 13px; }
}
/* Full-viewport, translucent backdrop specific to this welcome/what's-new
   moment — the base .tour-backdrop (shared with the Guided Tour) is left
   unchanged. The blur applies only to whatever sits behind this backdrop
   layer; the modal card is a separate, higher z-index sibling and stays
   crisp. */
.tour-backdrop-video-welcome { background: rgba(0,0,0,.60); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tour-card-thumb-wrap {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 18px;
  padding: 0; border: 1px solid var(--border, rgba(255,255,255,.12)); cursor: pointer;
}
.tour-card-thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-card-thumb-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(4,6,10,.55); border: 2px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.tour-card-thumb-play svg { width: 24px; height: 24px; margin-left: 2px; } /* optical centering for the play triangle */
.tour-card-thumb-wrap:hover .tour-card-thumb-play,
.tour-card-thumb-wrap:focus-visible .tour-card-thumb-play {
  background: var(--cyan, #00d4ff); border-color: var(--cyan, #00d4ff); color: #04141a;
  transform: translate(-50%, -50%) scale(1.08);
}
.tour-card-thumb-wrap:focus-visible { outline: 2px solid var(--cyan, #00d4ff); outline-offset: 2px; }

/* Conversion UX — live authoritative conversion activity inside the Convert tab card */
.cv-activity { margin-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); padding-top: 10px; }
.cv-activity-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; font-size: 12px; }
.cv-activity-title { font-weight: 600; }
.cv-activity-meta { opacity: 0.85; }
.cv-activity-meta code { font-size: 11px; }
.cv-activity-timeline { max-height: 420px; overflow: auto; padding-right: 4px; }