/* ============================================================
   Sigma Org Setup Wizard — stylesheet
   ============================================================ */

/* ----------------------------------------------------------
   0. Design-language principles (read before adding styles)

   These principles are the contract every component author follows.
   Pinned by docs/PRD-gui-facelift.md and enforced via the token
   smoke test (test/unit/style-tokens.test.js).

   1. NO HARDCODED COLORS.   Every color value in a component must
      reference a var(--token). The only place a literal hex appears
      is the :root token block below. If a new color is needed, add
      it to the token system before using it.

   2. NO HARDCODED SPACING.  Every padding / margin / gap must
      reference var(--space-N). The scale is built on a 4px base unit
      (--space-1 = 4px, --space-2 = 8px, ...). If a new spacing is
      needed, audit whether an existing token fits first.

   3. NO HARDCODED RADII.    Only var(--radius-sm) / var(--radius) /
      var(--radius-lg). Modals, cards, pills, inputs all draw from
      the same four-rung scale.

   4. NO HARDCODED SHADOWS.  Only var(--shadow-sm) / var(--shadow) /
      var(--shadow-lg) / var(--shadow-modal). Depth carries semantic
      meaning — sm for resting, modal for overlay.

   5. NO HARDCODED FONT SIZES.  Only var(--text-xs) through
      var(--text-xl). Five-rung type scale is sufficient for an
      admin tool; reach for an existing rung before inventing one.

   6. INLINE STYLES ARE A CODE SMELL.  `.style.cssText = '…'` and
      `style="…"` template literals are a tool of last resort
      — they exist for dynamic computed values (progress bar width,
      d3 graph node positions, etc.). Static styling belongs in CSS
      classes. The facelift PRD's exit criteria is zero inline styles
      in the 5 hotspot components except those tagged with a
      `// dynamic` comment.

   7. NO EMOJIS OR UNICODE GLYPHS IN UI CHROME.  Emojis (🗑 🔒 ▶) and
      Unicode symbols (✦ ⚠ ↗ ↺ → ←) read as user content, not
      product chrome — their visual weight varies by OS font and
      they break style coherence. Use the SVG icon set at
      gui/static/icons.js instead:
        import { iconHtml } from '/icons.js';
        button.innerHTML = `${iconHtml('refresh', { size: 'sm' })} Refresh`;
      Adding a new icon: drop one entry in icons.js. Keep the set
      tight; if the call site needs a one-off, it's likely the
      wrong call site.

   New component authors: skim docs/PRD-gui-facelift.md §4-5 for the
   component spec. Showcase page at gui/static/showcase.html renders
   every component variant in both themes.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   1. CSS Custom Properties (design tokens)
   ---------------------------------------------------------- */
:root {
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --surface-alt:   #f9fafb;
  --border:        #e1e4e8;
  --border-focus:  #F16D44;

  --text:          #1a1d23;
  --text-muted:    #6e7681;
  --text-inverse:  #ffffff;

  /* Sigma coral accent */
  --accent:        #F16D44;
  --accent-hover:  #d95f38;
  --accent-light:  #fdf0eb;
  --primary:       #F16D44;   /* alias — keeps var(--primary) references valid */

  /* Intelegance brand periwinkle — paired with the Sigma coral in the
     header partnership lockup + the Intelegance Migration Hub
     branding. Sampled from the actual Intelegance brand glyph (May
     2026) — a touch lighter than the deeper navy on the company's
     business card so the woven-knot lines stay legible at 24×24. */
  --intelegance:        #4F58B0;
  --intelegance-hover:  #3a4090;
  --intelegance-light:  #edeef7;

  --danger:        #cf222e;
  --danger-hover:  #a8121b;
  --danger-light:  #ffebe9;
  --danger-bg:     #fff0ee;

  --success:       #1a7f37;
  --success-hover: #116329;
  --success-light: #dafbe1;
  --success-bg:    #f0fdf4;

  --warning:       #9a6700;
  --warning-hover: #7a5200;
  --warning-light: #fff8c5;
  --warning-bg:    #fffbeb;

  --neutral:       #57606a;
  --neutral-bg:    #f6f8fa;
  --neutral-light: #eaeef2;

  /* AI affordance accent (Setup Wizard's purple "✦ Custom" lane,
     Build stage chooser, Edit-with-Claude buttons). Promoted from a
     fallback-only var to a formal token so dark mode can override. */
  --ai-accent:        #7c3aed;
  --ai-accent-hover:  #6d28d9;
  --ai-accent-light:  #f0e6ff;
  --ai-accent-border: #c4b5fd;

  --nav-width:     240px;
  --header-h:      56px;
  --bar-h:         64px;

  --radius-sm:     4px;
  --radius:        6px;
  --radius-lg:     10px;

  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow:        0 2px 8px rgba(0, 0, 0, 0.12);

  /* Inter typeface — matches Sigma's product UI */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Helvetica, Arial, sans-serif;
  --font-mono:     "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
                   monospace;

  /* Type scale */
  --text-xs:       0.75rem;    /* 12px — metadata, timestamps */
  --text-sm:       0.875rem;   /* 14px — table cells, labels */
  --text-base:     1rem;       /* 16px — body */
  --text-lg:       1.125rem;   /* 18px — section headings */
  --text-xl:       1.25rem;    /* 20px — page headings */

  /* Table density (canonical) */
  --table-cell-py: 8px;
  --table-cell-px: 12px;

  --transition:    150ms ease;

  /* --------------------------------------------------------
     SPACING SCALE — 4px base unit.
     Every padding / margin / gap in component CSS references one
     of these. New components MUST use the scale; if a new size is
     needed, add the next rung to the system first.
     -------------------------------------------------------- */
  --space-1:       4px;   /* hairline gap, badge inner padding */
  --space-2:       8px;   /* default control padding-y, chip padding */
  --space-3:       12px;  /* default control padding-x, card inner gap */
  --space-4:       16px;  /* card padding, section gap */
  --space-5:       20px;  /* page section spacing */
  --space-6:       24px;  /* page header padding */
  --space-7:       32px;  /* stage-frame padding */
  --space-8:       48px;  /* hero / page-level breathing room */

  /* --------------------------------------------------------
     MOTION VOCABULARY — three durations + two easings.
     Hover-state changes use --motion-fast. Panels / accordions
     use --motion-base. Modal enter/exit uses --motion-slow.
     -------------------------------------------------------- */
  --motion-fast:   120ms;
  --motion-base:   180ms;
  --motion-slow:   320ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------
     Z-INDEX LADDER — canonical stacking order.
     Components must reference this scale; no inline z-index ints.
     -------------------------------------------------------- */
  --z-base:        1;     /* page content */
  --z-rail:        10;    /* left rail nav, action bar */
  --z-header:      20;    /* app header */
  --z-panel:       100;   /* ClaudePanel slide-in, drawer */
  --z-modal:       1000;  /* modal overlays */
  --z-popover:     1100;  /* dropdowns + tooltips above modals */
  --z-toast:       2000;  /* always-on-top notifications */

  /* --------------------------------------------------------
     DEPTH SCALE — extends the existing two-rung shadow system.
     --shadow-sm / --shadow defined above. --shadow-lg for
     popovers and sticky cards; --shadow-modal for dialog
     overlays and the ClaudePanel.
     -------------------------------------------------------- */
  --shadow-lg:     0 4px 12px rgba(0, 0, 0, 0.16);
  --shadow-modal:  0 16px 48px rgba(0, 0, 0, 0.24);
}

/* ----------------------------------------------------------
   1b. Dark theme overrides — applied via [data-theme="dark"] on <html>.
   The pre-paint script in index.html sets the attribute synchronously
   so the very first frame is correct (no flash-of-wrong-theme).
   ---------------------------------------------------------- */
[data-theme="dark"] {
  /* Surfaces — GitHub-Dark-inspired greys, slightly warmer to match
     the coral accent. Picked for AAA-equivalent contrast against the
     light text below. */
  --bg:             #0d1117;
  --surface:        #161b22;
  --surface-alt:    #1c2128;
  --border:         #30363d;
  --border-focus:   #F16D44;

  --text:           #e6edf3;
  --text-muted:     #8b949e;
  --text-inverse:   #1a1d23;

  /* Brand coral stays — it's the identity. Light tint flips to a
     dark coral wash usable as a hover/selected background on dark. */
  --accent:         #F16D44;
  --accent-hover:   #ff8966;
  --accent-light:   #2a1a14;
  --primary:        #F16D44;

  /* Intelegance navy lifts to a periwinkle blue on dark so it stays
     visible against the near-black surface while still reading as
     "Intelegance" next to the Sigma coral. */
  --intelegance:        #8B95F0;
  --intelegance-hover:  #a4adff;
  --intelegance-light:  #1a1d3a;

  --danger:         #f85149;
  --danger-hover:   #ff6b62;
  --danger-light:   #2d1416;
  --danger-bg:      #2d1416;

  --success:        #3fb950;
  --success-hover:  #56d364;
  --success-light:  #102a16;
  --success-bg:     #102a16;

  --warning:        #d29922;
  --warning-hover:  #e3b341;
  --warning-light:  #2a2010;
  --warning-bg:     #2a2010;

  --neutral:        #8b949e;
  --neutral-bg:     #1c2128;
  --neutral-light:  #21262d;

  /* AI accent in dark mode — lighter purple so it pops against
     dark surfaces. */
  --ai-accent:        #a78bfa;
  --ai-accent-hover:  #c4b5fd;
  --ai-accent-light:  #1f1736;
  --ai-accent-border: #4c3a8a;

  /* Slightly heavier shadows for elevation on dark */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow:         0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg:      0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-modal:   0 16px 48px rgba(0, 0, 0, 0.60);
}

/* ----------------------------------------------------------
   1c. Reduced-motion respect.
   Users who set the prefers-reduced-motion OS preference get
   near-instant transitions across the entire app. The .synonym-
   cycle component already opts out of its float animation per-
   element (see below); this global rule extends the courtesy
   to every other transition + keyframe animation without
   per-component changes.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}

/* ----------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Focus ring — Sigma coral, consistent across all interactive elements */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Button transitions — all interactive elements get smooth state changes */
button, .btn, input, select, textarea, a {
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition),
              opacity var(--transition);
}

/* ----------------------------------------------------------
   3. App Shell Layout
   ---------------------------------------------------------- */
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  /* Extra right padding reserves space for the fixed-position settings gear
     (34px gear + 16px offset + ~14px breathing room). */
  padding: 0 64px 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

.app-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Partnership lockup — Sigma papercrane × Intelegance diamond, equal
   visual weight. The × separator is a real character so it scales with
   the surrounding type and screen readers ignore it as decorative. */
.app-header__partnership {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.app-header__partnership .app-header__logo {
  /* Both logos rendered at the same 24×24 footprint (set inline on the
     <svg> width/height) — the wrapper just centers and protects flex. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-header__partnership-x {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  /* Tighten line-height so the × sits visually centered between the
     two logos at any zoom level. */
  line-height: 1;
  user-select: none;
}
.app-header__logo--intelegance {
  /* No additional styling needed today — the inline `color:` style on
     the wrapper drives the SVG via currentColor. This class is the
     hook for future per-brand tweaks (e.g. a hover-state lift). */
}

.app-header__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
}

/* Brand wordmark group: title stacked over the cycling-synonym subtitle. */
.app-header__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.app-header__subtitle {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cycling synonym — fades the swapped word in/out so the line settles
   gracefully instead of snapping. The JS toggles `is-fading` between
   text changes; CSS handles the visuals. */
.synonym-cycle {
  display: inline-block;
  color: var(--text);
  font-weight: 500;
  transition: opacity 0.22s ease;
}
.synonym-cycle.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .synonym-cycle { transition: none; }
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Body splits into nav rail + content */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left rail */
.phase-rail {
  width: var(--nav-width);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 0;
}

/* Main content */
.phase-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  background: var(--bg);
}

/* Action bar */
.action-bar {
  display: flex;
  align-items: center;
  height: var(--bar-h);
  padding: 0 32px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

.action-bar__spacer {
  flex: 1;
}

.action-bar__buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ----------------------------------------------------------
   4. Phase Nav (left rail items)
   ---------------------------------------------------------- */
#phase-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.phase-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: default;
  user-select: none;
  transition: background var(--transition);
  position: relative;
}

.phase-nav-item:hover {
  background: var(--surface-alt);
}

/* Number bubble */
.phase-nav-item__bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--border);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}

/* Phase name */
.phase-nav-item__label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  transition: color var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status dot */
.phase-nav-item__status {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
}

/* Active state */
.phase-nav-item.active .phase-nav-item__bubble {
  background: var(--accent);
  color: var(--text-inverse);
}

.phase-nav-item.active .phase-nav-item__label {
  color: var(--accent);
  font-weight: 600;
}

/* Done state */
.phase-nav-item.done .phase-nav-item__bubble {
  background: var(--success-light);
  color: var(--success);
}

.phase-nav-item.done .phase-nav-item__label {
  color: var(--text);
}

.phase-nav-item.done .phase-nav-item__status {
  background: var(--success);
}

/* ----------------------------------------------------------
   5. Buttons

   Visual-polish PR refinements (post-M3):
   - Subtle box-shadow on resting state for definition
   - 1px transform lift on hover (paired with shadow promotion)
   - Tighter horizontal padding (16 → 14) for a more deliberate feel
   - Letter-spacing nudge (-0.005em) to tighten the wordmark
   - Motion via --motion-fast / --ease-out tokens (not the old --transition)
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
  transition: background  var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              box-shadow   var(--motion-fast) var(--ease-out),
              transform    var(--motion-fast) var(--ease-out),
              opacity      var(--motion-fast) var(--ease-out);
  -webkit-font-smoothing: antialiased;
}

.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* SVG icon nested in a .btn — sizing + alignment for the icons.js icons.
   Pairs with .icon (1em). The 14px font-size of .btn gives a 14px icon
   square, but the 2px stroke + lucide proportions render closer to
   15px optical — explicit width/height keeps it crisp. */
.btn .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.btn--sm .icon  { width: 13px; height: 13px; }
.btn--xs .icon  { width: 12px; height: 12px; }
.btn--lg .icon  { width: 16px; height: 16px; }

/* Legacy class kept for the (rare) emoji-glyph button labels still in
   the codebase. New buttons should use the icon system. */
.btn__icon {
  font-size: 14px;
  line-height: 1;
}

/* Primary — solid accent with subtle shadow for elevation.
   Pre-polish was flat; the shadow gives it presence without being
   loud. */
.btn--primary {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 2px 6px rgba(241, 109, 68, 0.28);
  transform: translateY(-1px);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Secondary — bordered surface, hover gains shadow + slight lift.
   The 1px shadow on rest catches enough light to read as a button
   (vs flat surface) without competing with primaries. */
.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-alt);
  border-color: var(--text-muted);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn--secondary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* AI affordance — gradient purple. Used by ✦ Edit with Claude /
   ✦ Custom with Claude buttons. Var-driven so dark mode picks up the
   --ai-accent override automatically. Now with same shadow + lift
   choreography as .btn--primary for visual parity. */
.btn--ai-accent {
  background: linear-gradient(
    135deg,
    var(--ai-accent),
    color-mix(in srgb, var(--ai-accent) 65%, white)
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn--ai-accent:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--ai-accent-hover, var(--ai-accent)),
    color-mix(in srgb, var(--ai-accent-hover, var(--ai-accent)) 65%, white)
  );
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.28);
  transform: translateY(-1px);
}
.btn--ai-accent:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Success */
.btn--success {
  background: var(--success);
  color: var(--text-inverse);
  border-color: var(--success);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn--success:hover:not(:disabled) {
  background: var(--success-hover);
  border-color: var(--success-hover);
  box-shadow: 0 2px 6px rgba(26, 127, 55, 0.22);
  transform: translateY(-1px);
}

.btn--success:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Danger */
.btn--danger {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn--danger:hover:not(:disabled) {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  box-shadow: 0 2px 6px rgba(207, 34, 46, 0.22);
  transform: translateY(-1px);
}

.btn--danger:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Ghost (icon-only or minimal action — no border/bg until hover) */
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding: 5px 8px;
  box-shadow: none;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-alt);
  color: var(--text);
  /* No lift on ghosts — they sit inline with text and shouldn't draw
     focus the way primaries do. */
  transform: none;
  box-shadow: none;
}

/* Small variant */
.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* ----------------------------------------------------------
   6. Phase Content — shared section chrome
   ---------------------------------------------------------- */
.phase-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.phase-header__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.phase-header__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.phase-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}

.phase-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.phase-section__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.phase-section__body {
  padding: 16px 18px;
}

/* ----------------------------------------------------------
   7. Checkbox Grid (multi-select phases)
   ---------------------------------------------------------- */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--surface);
}

.checkbox-item:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.checkbox-item--checked {
  border-color: var(--accent);
  background: var(--accent-light);
}

.checkbox-item__input {
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.checkbox-item__label {
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-item__meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ----------------------------------------------------------
   8. Accordion (expandable grant rows)
   ---------------------------------------------------------- */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion + .accordion {
  margin-top: 8px;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: background var(--transition);
}

.accordion__trigger:hover {
  background: var(--surface-alt);
}

.accordion__trigger[aria-expanded="true"] {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.accordion__chevron {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__body {
  padding: 14px 16px;
  background: var(--surface);
  display: none;
}

.accordion__body.open {
  display: block;
}

/* ----------------------------------------------------------
   9. Grant Rows (team + permission pair)
   ---------------------------------------------------------- */
.grant-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grant-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grant-row__select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--transition);
  appearance: auto;
}

.grant-row__select:focus {
  outline: none;
  border-color: var(--border-focus);
}

.grant-row__perm {
  flex: 0 0 160px;
}

.grant-row__add {
  margin-top: 8px;
}

/* ----------------------------------------------------------
   10. Tags / Badges
   ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge--accent {
  background: var(--accent-light);
  color: var(--accent);
}

.badge--success {
  background: var(--success-light);
  color: var(--success);
}

.badge--warning {
  background: var(--warning-light);
  color: var(--warning);
}

.badge--danger {
  background: var(--danger-light);
  color: var(--danger);
}

.badge--neutral {
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* AI-accent badge — Claude-tinted pill used for "custom" markers
   on Review-phase sections + agent-generated objects. Same shape as
   the other .badge variants so it can sit alongside them visually.
   For larger AI surfaces (preset card chips, attachment chips) use
   .chip / .chip--ai (taller, more breathing room). */
.badge--ai {
  background: var(--ai-accent-light);
  color: var(--ai-accent);
  border: 1px solid var(--ai-accent-border);
}

/* Tag color swatch (for tag selection grid) */
.tag-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* ----------------------------------------------------------
   11. Table (member listings, etc.)
   ---------------------------------------------------------- */
.data-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background: var(--surface-alt);
}

.data-table th {
  padding: var(--table-cell-py) var(--table-cell-px);
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: var(--surface-alt);
}

/* Checkbox column */
.data-table .col-check {
  width: 36px;
  text-align: center;
}

.data-table input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ----------------------------------------------------------
   12. Script Output Area
   ---------------------------------------------------------- */
.script-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.script-output-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.script-output-actions {
  display: flex;
  gap: 8px;
}

.script-textarea {
  width: 100%;
  min-height: 360px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  background: #1e1e2e;
  color: #cdd6f4;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  tab-size: 2;
  outline: none;
  transition: border-color var(--transition);
}

.script-textarea:focus {
  border-color: var(--border-focus);
}

.script-textarea::placeholder {
  color: #6c7086;
}

/* ----------------------------------------------------------
   13. Search / Filter Input
   ---------------------------------------------------------- */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper__icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   14. Form Controls (generic)
   ---------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input,
.form-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  transition: border-color var(--transition);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* ----------------------------------------------------------
   15. Selection Count Badge (phase header)
   ---------------------------------------------------------- */
.selection-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: var(--text-inverse);
}

/* ----------------------------------------------------------
   16. Empty State
   ---------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state__icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.empty-state__body {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
}

/* ----------------------------------------------------------
   17. Loading Spinner
   ---------------------------------------------------------- */
.spinner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 24px;
  color: var(--text-muted);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   18. Notice / Alert banners
   ---------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}

.notice--info {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid #b3d4f5;
}

.notice--warning {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid #fcd34d;
}

.notice--error {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid #fca5a5;
}

.notice--success {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid #6ee7b7;
}

.notice__icon {
  flex-shrink: 0;
  font-size: 15px;
}

/* ----------------------------------------------------------
   19. Divider
   ---------------------------------------------------------- */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* ----------------------------------------------------------
   20. Utility helpers
   ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--text-muted);
}

.text-sm {
  font-size: 12px;
}

.font-mono {
  font-family: var(--font-mono);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}

.w-full {
  width: 100%;
}

/* ----------------------------------------------------------
   21. Phase container (root element for each phase component)
   ---------------------------------------------------------- */
.phase-container {
  width: 100%;
}

/* Legacy aliases — some phase components use phase-title / phase-subtitle
   directly instead of the BEM names. Both map to the same styles. */
.phase-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.phase-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 0;
}

/* Phase toolbar: Select All / Clear All row */
.phase-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.phase-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ----------------------------------------------------------
   22. Collapsible section (used in Teams, Workspaces, etc.)
   ---------------------------------------------------------- */
.collapsible-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.collapsible-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-alt);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: background var(--transition);
}

.collapsible-header:hover {
  background: var(--border);
}

.collapsible-caret {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.collapsible-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapsible-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
}

.collapsible-body[hidden] {
  display: none;
}

/* ----------------------------------------------------------
   23. Tag card grid (Phase 1 — Tags)
   ---------------------------------------------------------- */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .tag-grid { grid-template-columns: repeat(2, 1fr); }
}

.tag-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}

.tag-card:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.tag-card--selected {
  border-color: var(--accent);
  background: var(--accent-light);
}

.tag-card__checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.tag-card__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid rgba(0,0,0,0.12);
}

.tag-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tag-card__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.tag-card__desc {
  font-size: 11px;
  color: var(--text-muted);
}

.tag-card__category {
  margin-top: 2px;
}

/* ----------------------------------------------------------
   24. Team rows (Phase 2 — Teams)
   ---------------------------------------------------------- */
.teams-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  flex-wrap: wrap;
}

.team-row:hover {
  background: var(--surface-alt);
}

.team-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex-shrink: 0;
}

.team-row__checkbox {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.team-row__name {
  font-weight: 500;
}

.team-row__desc {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-row__chip {
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.team-row__members {
  width: 100%;
  padding: 6px 0 2px 23px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.member-badge {
  font-size: 11px;
}

/* ----------------------------------------------------------
   25. Resource rows (Workspaces, Data Models, Workbooks)
   ---------------------------------------------------------- */
.resource-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  transition: background var(--transition);
}

.resource-row:hover {
  background: var(--surface-alt);
}

.resource-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.resource-row__checkbox {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.resource-row__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.resource-row__desc {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-row__badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------
   26. User Attribute items (Phase 3)
   ---------------------------------------------------------- */
.attrs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attr-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.attr-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  flex-wrap: wrap;
}

.attr-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.attr-item__checkbox {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.attr-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.attr-item__desc {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

.attr-item__values {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface-alt);
}

.attr-item__values[hidden] {
  display: none;
}

.attr-item__no-teams {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.attr-values-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.attr-values-table th,
.attr-values-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.attr-values-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.attr-values-table tbody tr:last-child td {
  border-bottom: none;
}

.attr-value__team {
  font-weight: 500;
  width: 200px;
}

.attr-value__input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition);
}

.attr-value__input:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* ----------------------------------------------------------
   27. Members table (Phase 4)
   ---------------------------------------------------------- */
.members-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.members-table th {
  padding: var(--table-cell-py) var(--table-cell-px);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.members-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.members-table tbody tr:last-child td {
  border-bottom: none;
}

.members-table tbody tr:hover td {
  background: var(--surface-alt);
}

.member-row--excluded td {
  opacity: 0.45;
  text-decoration: line-through;
}

.member-row__checkbox {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.member-row__type {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
}

.member-row__teams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ----------------------------------------------------------
   28. Grants editor (shared component)
   ---------------------------------------------------------- */
.grants-editor {
  padding: 10px 0;
}

.grants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}

.grants-table th {
  padding: var(--table-cell-py) var(--table-cell-px);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.grants-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.grants-table tbody tr:last-child td {
  border-bottom: none;
}

.grants-row__team,
.grants-row__perm {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  cursor: pointer;
}

.grants-row__team:focus,
.grants-row__perm:focus {
  outline: none;
  border-color: var(--border-focus);
}

.grants-row__remove {
  padding: 3px 8px;
  font-size: 16px;
  line-height: 1;
}

.grants-add-btn {
  margin-top: 4px;
}

.grants-panel {
  width: 100%;
  padding-top: 8px;
}

.grants-panel[hidden] {
  display: none;
}

/* ----------------------------------------------------------
   29. Grants review table (Phase 7)
   ---------------------------------------------------------- */
.grants-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grants-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.grants-review-table th {
  padding: var(--table-cell-py) var(--table-cell-px);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: left;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.grants-review-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.grants-review-table tbody tr:last-child td {
  border-bottom: none;
}

.grants-review-table tbody tr:hover td {
  background: var(--surface-alt);
}

/* Inline edit selects */
.grant-edit__team,
.grant-edit__perm {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ----------------------------------------------------------
   30. Review phase (Phase 9)
   ---------------------------------------------------------- */
.review-summaries {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.review-chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
}

.review-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 0;
}

.review-generate {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.review-output {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 16px 18px;
}

.review-output[hidden] {
  display: none;
}

.review-output__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.review-output__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.review-output__textarea {
  width: 100%;
  min-height: 380px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  background: #1e1e2e;
  color: #cdd6f4;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  tab-size: 2;
  outline: none;
}

.review-members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.review-members-table th,
.review-members-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.review-members-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-alt);
}

.review-members-table tbody tr:last-child td {
  border-bottom: none;
}

.review-grant-line {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  padding: 2px 0;
}

/* ----------------------------------------------------------
   31. Badge color variants missing from section 10
   ---------------------------------------------------------- */
.badge--blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge--cyan {
  background: #cffafe;
  color: #0e7490;
}

.badge--info {
  background: #e0e7ff;
  color: #4338ca;
}

/* Permission-level badges */
.badge--perm {
  font-family: var(--font-mono);
  font-size: 11px;
}

.badge--perm-view    { background: #f0fdf4; color: #15803d; }
.badge--perm-explore { background: #eff6ff; color: #1d4ed8; }
.badge--perm-edit    { background: #fefce8; color: #a16207; }
.badge--perm-manage  { background: #fdf4ff; color: #7e22ce; }

/* ----------------------------------------------------------
   32. Button size variants missing from section 5
   ---------------------------------------------------------- */
.btn--xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* ----------------------------------------------------------
   33. Generic select / input helpers (used inline in components)
   ---------------------------------------------------------- */
.select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition);
}

.select:focus {
  outline: none;
  border-color: var(--border-focus);
}

.select--sm {
  padding: 4px 7px;
  font-size: 12px;
}

.input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color var(--transition);
}

.input:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* ── Execution log panel ─────────────────────────────────────────── */
.exec-log {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.exec-log__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exec-log__body {
  max-height: 480px;
  overflow-y: auto;
  padding: 0;
}

.exec-log__phase {
  border-bottom: 1px solid var(--border);
}

.exec-log__phase-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: var(--surface-alt);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
}

.exec-log__phase-trigger:hover {
  background: var(--bg);
}

.exec-log__phase-rows {
  padding: 4px 0 6px 32px;
}

.exec-log__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 2px 14px 2px 0;
  color: var(--text);
}

.exec-log__row--ok    { color: var(--success); }
.exec-log__row--warn  { color: var(--warning); }
.exec-log__row--error { color: var(--danger);  }
.exec-log__row--info  { color: var(--text-muted); font-style: italic; }

.exec-log__detail {
  color: var(--text-muted);
  font-size: 11px;
}

.exec-log__completion {
  margin: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}

.exec-log__completion--success {
  background: var(--success-light);
  border: 1px solid #bbf7d0;
  color: var(--success-hover);
}

.exec-log__completion--error {
  background: var(--danger-light);
  border: 1px solid #fecaca;
  color: var(--danger-hover);
}

/* ── Execution CTA row ───────────────────────────────────────────── */
.exec-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Confirm modal ───────────────────────────────────────────────── */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  box-shadow: var(--shadow);
}

.confirm-modal__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.confirm-modal__body {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.confirm-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
/* @keyframes spin defined at line 870 */

.spin {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   Stage Rail — Lifecycle Edition top-of-page navigation.
   Bootstrap → Build → Govern → Migrate. Replaces the legacy
   `Command Center | Setup Wizard` segmented control.
   See gui/static/components/StageRail.js + .agent/plans/lifecycle-edition-prd.md.
   ═══════════════════════════════════════════════════════════════ */

.stage-rail {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 16px;
}

.stage-rail__stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 14px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  outline-offset: 2px;
}

/* Connector line between stages — drawn via ::before on every stage
   except the first, so the rail-line colour can flip per stage based on
   active state without managing separate connector elements. */
.stage-rail__stage + .stage-rail__stage::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  width: 16px;
  height: 1px;
  background: var(--border);
  transform: translateY(-50%);
}

.stage-rail__circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.stage-rail__stage:hover {
  color: var(--text);
}

.stage-rail__stage:hover .stage-rail__circle {
  border-color: var(--accent);
}

.stage-rail__stage--active {
  color: var(--accent);
  font-weight: 600;
}

.stage-rail__stage--active .stage-rail__circle {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Alert badge — rendered after the label. Shows a count by default;
   collapses to a small dot when the user has dismissed the alert via
   StageRail.dismissBadge(stage) (per Curtis 2026-05-04: "load with an
   indicator, then make it minimal once the user dismisses"). */
.stage-rail__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The badge defaults to `hidden` via the HTML attribute. Class-based
   `display: inline-flex` would otherwise override it; force the attribute
   to win so JS can show/hide the badge via `el.hidden = true|false`. */
.stage-rail__badge[hidden] {
  display: none;
}

.stage-rail__badge--dismissed {
  min-width: 6px;
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: var(--danger, #ef4444);
}

/* Migrate stage shell — wraps the existing MigrationPanel. */
.migrate-stage__shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.migrate-stage__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.migrate-stage__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.migrate-stage__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.migrate-stage__body {
  display: flex;
  flex-direction: column;
}

.migrate-stage__placeholder {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Present stage — HTML presentation authoring landing.
   PRD: docs/PRD-present-stage.md §3, §6.
   M1 ships the empty-state Library only; Editor surface lands in M2/M4.
   Mirrors migrate-stage structure (__shell / __header / __title / __subtitle)
   so the rail's stages feel like the same family. */
.present-stage__shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.present-stage__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.present-stage__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.present-stage__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  max-width: 640px;
}

.present-stage__body {
  display: flex;
  flex-direction: column;
}

.present-stage__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.present-stage__empty-icon {
  color: var(--ai-accent);
  font-size: 32px;
  margin-bottom: var(--space-1);
}

.present-stage__empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.present-stage__empty-body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  max-width: 520px;
  line-height: 1.55;
}

.present-stage__empty-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.present-stage__empty-cta {
  margin-top: var(--space-2);
}

.present-stage__empty-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
  opacity: 0.8;
}

/* M4 — Library grid + Editor view */
.present-stage__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.present-stage__cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.present-stage__new-btn,
.present-stage__upload-btn {
  flex-shrink: 0;
}

/* Upload status banner — shown briefly above the Library grid /
   Editor preview during upload + on success/error. */
.present-stage__upload-status {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
.present-stage__upload-status[data-kind="success"] {
  background: var(--success-bg);
  border-color: var(--success-light);
  color: var(--text);
}
.present-stage__upload-status[data-kind="error"] {
  background: var(--danger-bg);
  border-color: var(--danger-light);
  color: var(--danger);
}

.present-stage__loading {
  padding: var(--space-6) var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.present-stage__error {
  padding: var(--space-5);
  background: var(--danger-bg);
  border: 1px solid var(--danger-light);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.present-stage__error strong { display: block; color: var(--danger); margin-bottom: var(--space-1); }
.present-stage__error p      { margin: var(--space-1) 0; }
.present-stage__hint         { color: var(--text-muted); font-size: var(--text-xs); }

.present-stage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.present-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.present-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--ai-accent-border);
}
.present-card:focus-visible {
  outline: 2px solid var(--ai-accent);
  outline-offset: 2px;
}

.present-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Inline delete on each Library card. Visible on hover/focus; hidden
   otherwise so the grid stays calm. Click is stopped from bubbling to
   the card's open-editor handler in PresentStage.js. */
.present-card__delete {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
.present-card:hover .present-card__delete,
.present-card:focus-within .present-card__delete,
.present-card__delete:focus-visible {
  opacity: 1;
}
.present-card__delete:hover {
  color: var(--danger);
  border-color: var(--danger-light);
  background: var(--danger-bg);
}

.present-card__intent {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  background: var(--ai-accent-light);
  color: var(--ai-accent);
}

.present-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
  /* clamp to 2 lines so cards have a stable height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.present-card__slug code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.present-card__foot {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: auto;
}

/* Editor view */
.present-stage__editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h, 80px) - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.present-editor__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

.present-editor__title {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  transition: border-color var(--motion-fast) var(--ease-out),
              background  var(--motion-fast) var(--ease-out);
}
.present-editor__title:hover  { border-color: var(--border); background: var(--surface); }
.present-editor__title:focus  { border-color: var(--ai-accent); background: var(--surface); outline: none; }

.present-editor__intent {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  background: var(--ai-accent-light);
  color: var(--ai-accent);
}

.present-editor__spacer { flex: 1; }

.present-editor__preview {
  flex: 1;
  background: #fff;
  overflow: hidden;
}

.present-editor__iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.present-editor__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
}
.present-editor__meta code { font-family: var(--font-mono); }

/* Present-stage confirm dialog — shared between Library card delete,
   Editor toolbar delete, and (eventually) the agent's delete-intent
   in-transcript card. Uses native <dialog> so keyboard nav + screen
   readers work out of the box. */
.present-confirm-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 92vw;
  width: 460px;
}
.present-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(2px);
}
.present-confirm__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-modal);
}
.present-confirm__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-3);
}
.present-confirm__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.present-confirm__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.present-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Govern stage — the existing Command Center renders inside, plus the
   provenance-ribbon slot Step 8 will populate. */
.govern-header-ribbon:empty {
  display: none;
}

/* GitHub provenance ribbon at the top of the Govern stage (Step 8 / PRD §4.1).
   Links the user to the blueprint repo + last sync timestamp; drift count
   surfaces inline. */
.govern-header-ribbon {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.govern-header-ribbon__label {
  font-weight: 500;
  color: var(--text);
}

.govern-header-ribbon__repo {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.govern-header-ribbon__repo:hover {
  text-decoration: underline;
}

.govern-header-ribbon__sep {
  color: var(--border);
}

.govern-header-ribbon__drift {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
  color: var(--danger, #ef4444);
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: inherit;
}

.govern-header-ribbon__drift:hover {
  background: color-mix(in srgb, var(--danger, #ef4444) 20%, transparent);
}

.govern-header-ribbon__drift--clear {
  background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
  color: var(--success, #16a34a);
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   Type-to-Confirm modal — high-blast-radius op gate (PRD §9 / Q3).
   ═══════════════════════════════════════════════════════════════ */

.ttc-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.ttc-modal__header {
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
}

.ttc-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.ttc-modal__body {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ttc-modal__description {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.ttc-modal__label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ttc-modal__confirm-text {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text);
}

.ttc-modal__input {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.ttc-modal__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.ttc-modal__footer {
  padding: 12px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Build stage — dual-lane chooser + inventory pane.
   See gui/static/components/BuildStage.js
   ═══════════════════════════════════════════════════════════════ */

.build-stage {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.build-stage__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.build-stage__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.build-stage__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.build-stage__section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
  letter-spacing: 0.01em;
}

.build-stage__chooser {
  display: flex;
  flex-direction: column;
}

.build-stage__lanes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.build-stage__tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  font-family: var(--font-sans);
}

.build-stage__tile:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.build-stage__tile:active {
  transform: translateY(1px);
}

.build-stage__tile-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.build-stage__tile-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* The ✦ Custom lane gets a lightly differentiated treatment so the AI
   affordance reads as its own pattern (like Setup Wizard Phase 0's
   purple-accented Claude button). Same dual-lane visual language. */
.build-stage__tile--custom {
  border-color: color-mix(in srgb, var(--ai-accent, #7c3aed) 40%, var(--border));
  background: color-mix(in srgb, var(--ai-accent, #7c3aed) 4%, var(--surface));
}

.build-stage__tile--custom .build-stage__tile-title {
  color: var(--ai-accent, #7c3aed);
}

.build-stage__tile--custom:hover {
  border-color: var(--ai-accent, #7c3aed);
  background: color-mix(in srgb, var(--ai-accent, #7c3aed) 8%, var(--surface));
}

.build-stage__inventory {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

/* Segmented control: "I want to build…  [ Data Models ] [ Workbooks ]"
   Switches the entire chooser + inventory body between resources.
   Mirrors the visual language of the ✦ Custom lane below — accent text
   on the active segment so the user reads "what mode am I in" without
   needing to scan further down the page. */
.build-stage__control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 0 0;
}

.build-stage__control-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.build-stage__seg-group {
  display: inline-flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 3px;
}

.build-stage__seg {
  padding: 5px 14px;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.build-stage__seg:hover {
  color: var(--text);
}

/* Active + active-hover share the rule so hovering the already-active
   segment doesn't fall through to the .build-stage__seg:hover rule
   (`:hover` carries class + pseudo-class specificity, which outranks
   the single-class --active selector). */
.build-stage__seg--active,
.build-stage__seg--active:hover {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--border);
}

.build-stage__inventory-pane {
  min-height: 320px;
}

/* ═══════════════════════════════════════════════════════════════
   Command Center shell
   ═══════════════════════════════════════════════════════════════ */

#command-center-root {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.cc-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

/* Body: sidebar + main */
.cc-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.cc-sidebar {
  width: 224px;        /* default — overridden inline by _applySidebarWidth */
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  overflow-x: hidden;  /* labels truncate cleanly when narrowing */
  padding: 12px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Anchor for the right-edge drag handle. */
  position: relative;
}

/* Drag handle for sidebar resize / collapse. 6px wide vertical strip on
   the right edge. Visible-on-hover affordance + keyboard support via
   tabindex on the JS side. */
#cc-sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  user-select: none;
  z-index: 1;
}
#cc-sidebar-resize-handle:hover,
#cc-sidebar-resize-handle:focus-visible {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
#cc-sidebar-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

body.cc-sidebar-dragging {
  cursor: ew-resize !important;
  user-select: none;
}
body.cc-sidebar-dragging iframe {
  pointer-events: none;
}

/* ── Collapsed sidebar (icon-only mode) ──────────────────────────────────
   Hide labels + section headings, center the icon, and keep the count
   chip / drift-alert badge inline next to the icon so the user still sees
   the "X items" hint at a glance. The ✦ trigger stays visible; refresh
   gets out of the way. */
.cc-sidebar--collapsed .cc-sidebar__label,
.cc-sidebar--collapsed .cc-sidebar__item-label {
  display: none;
}
.cc-sidebar--collapsed .cc-sidebar__section {
  padding: 0 4px;
}
.cc-sidebar--collapsed .cc-sidebar__item {
  justify-content: center;
  padding: 8px 4px;
  gap: 4px;
}
.cc-sidebar--collapsed .cc-sidebar__item-count {
  margin-left: 0;
  font-size: 10px;
  padding: 0 4px;
  min-width: 0;
}
.cc-sidebar--collapsed .cc-sidebar__label-row {
  flex-direction: column;
  gap: 4px;
  padding-right: 0;
}
/* Hide refresh in collapsed mode — the ✦ trigger is the priority entry-point;
   the user can expand the sidebar to access refresh. */
.cc-sidebar--collapsed #cc-resources-refresh {
  display: none;
}

/* ── Mobile breakpoint (≤ 900px) ─────────────────────────────────────────
   Chat panel becomes full-width overlay; drag handles disabled so a touch
   user can't accidentally trigger a resize. The sidebar's collapsed-width
   forcing is handled in the JS (_applySidebarWidth reads window.innerWidth)
   so the user's persisted desktop width is preserved across viewport
   changes. */
@media (max-width: 900px) {
  #claude-panel {
    width: 100vw !important;
    max-width: 100vw;
  }
  #claude-panel-resize-handle,
  #cc-sidebar-resize-handle {
    pointer-events: none;
  }
}

.cc-sidebar__section {
  padding: 0 8px;
}

.cc-sidebar__section + .cc-sidebar__section {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.cc-sidebar__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 8px;
  margin: 0 0 4px;
}

.cc-sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cc-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 450;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

.cc-sidebar__item:hover {
  background: var(--bg);
  color: var(--text);
}

.cc-sidebar__item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.cc-sidebar__item.active .cc-sidebar__item-icon svg {
  stroke: var(--accent);
}

/* Icon container — svg stroke inherits color */
.cc-sidebar__item-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
}

/* Count pill */
.cc-sidebar__item-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--neutral-bg);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition);
}

.cc-sidebar__item.active .cc-sidebar__item-count {
  background: rgba(241, 109, 68, 0.15);
  color: var(--accent);
}

.cc-sidebar__item-count--error {
  color: var(--danger);
  background: var(--danger-light);
}

/* Drift alert badge — red pill with count, pulses when non-zero */
.cc-drift-alert {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  animation: drift-pulse 2s ease-in-out infinite;
  font-variant-numeric: tabular-nums;
}

@keyframes drift-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 34, 46, 0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(207, 34, 46, 0); }
}

/* Main content area */
.cc-main {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.cc-placeholder {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  margin-top: 40px;
}

/* "Clear filter" inline link inside an empty-state placeholder.
   Renders as a quiet text link (underline-on-hover) rather than a button —
   the empty state is a dead-end recovery affordance, not a primary action. */
.cc-clear-filter {
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  font: inherit;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.cc-clear-filter:hover { text-decoration: underline; }
.cc-clear-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.cc-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 40px;
  justify-content: center;
}

/* Resource table view */
.cc-resource-view__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.cc-resource-view__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-resource-view__title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.cc-resource-view__count {
  font-size: 12px;
  color: var(--text-muted);
}

.cc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cc-table th {
  padding: var(--table-cell-py) var(--table-cell-px);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.cc-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-table tr:last-child td {
  border-bottom: none;
}

.cc-table tbody tr:hover td {
  background: var(--bg);
}

/* ----------------------------------------------------------
   OrgInventory — Card Grid
   ---------------------------------------------------------- */

.cc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 4px 2px;
}

.cc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  outline: none;
  position: relative;
  overflow: hidden;
}

.cc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 2px solid var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.cc-card:hover {
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}

.cc-card:hover::after {
  opacity: 1;
}

/* ── Card header row: icon + meta + chevron ── */
.cc-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}

.cc-card__icon svg {
  display: block;
}

.cc-card__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cc-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.cc-card__updated {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-card__arrow {
  color: var(--neutral);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color var(--transition), transform var(--transition);
}

.cc-card:hover .cc-card__arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* ── Count row ── */
.cc-card__count-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-card__count {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cc-card__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.cc-card__status--ok      { background: var(--success); }
.cc-card__status--error   { background: var(--danger); }
.cc-card__status--loading { background: var(--warning); animation: cc-pulse 1s ease-in-out infinite; }

@keyframes cc-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Breakdown chips ── */
.cc-card__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}

.cc-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--neutral-bg);
  color: var(--neutral);
}

.cc-card__chip b {
  font-weight: 700;
}

.cc-card__chip--admin   { background: var(--danger-light);   color: var(--danger); }
.cc-card__chip--creator { background: var(--accent-light);   color: var(--accent); }
.cc-card__chip--viewer  { background: var(--neutral-bg);     color: var(--neutral); }
.cc-card__chip--success { background: var(--success-light);  color: var(--success); }
.cc-card__chip--neutral { background: var(--neutral-bg);     color: var(--neutral); }
.cc-card__chip--warning { background: var(--warning-light);  color: var(--warning); }

/* ── Drift footer ── */
.cc-card__drift {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 18px;
  padding-top: 2px;
  border-top: 1px solid var(--border);
  margin-top: -4px;
}

.cc-card__drift:empty {
  display: none;
}

.cc-card__drift-loading {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.cc-card__drift-sync {
  font-size: 11px;
  font-weight: 500;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 3px;
}

.cc-card__drift-new,
.cc-card__drift-missing,
.cc-card__drift-diverged {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.cc-card__drift-new {
  color: var(--success);
  background: var(--success-light);
}

.cc-card__drift-missing {
  color: var(--danger);
  background: var(--danger-light);
}

.cc-card__drift-diverged {
  color: var(--warning);
  background: var(--warning-light);
}

/* ----------------------------------------------------------
   OrgInventory — Breadcrumb
   ---------------------------------------------------------- */

.cc-breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.cc-breadcrumb__back {
  font-size: 13px;
}

/* ----------------------------------------------------------
   OrgInventory — Filter bar
   ---------------------------------------------------------- */

.cc-filter-bar {
  margin-bottom: 10px;
}

.cc-filter-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition);
  outline: none;
}

.cc-filter-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}

.cc-filter-input::placeholder {
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   OrgInventory — Pagination
   ---------------------------------------------------------- */

.cc-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.cc-pagination__info {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}

/* ----------------------------------------------------------
   Detail Panel
   ---------------------------------------------------------- */

#detail-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

#detail-panel-overlay.detail-panel-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

#detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#detail-panel.detail-panel--open {
  transform: translateX(0);
}

.detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.detail-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.detail-panel__close {
  font-size: 18px;
  line-height: 1;
  padding: 2px 8px;
}

.detail-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.detail-panel__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.detail-panel__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.detail-panel__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-panel__input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition);
  outline: none;
}

.detail-panel__input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}

.detail-panel__readonly {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 0;
  word-break: break-all;
}

.detail-panel__message {
  margin-top: 4px;
}

/* ----------------------------------------------------------
   EmbedFrame
   ---------------------------------------------------------- */
.embed-frame-wrapper {
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------
   EmbedModal
   ---------------------------------------------------------- */
.embed-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.embed-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3001;
  width: 96vw;
  height: 94vh;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.embed-modal__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.embed-modal__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.embed-modal__close:hover {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
}

.embed-modal__body {
  flex: 1;
  overflow: hidden;
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
}

.embed-modal__body iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.embed-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
}

.embed-modal__error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px;
  padding: 12px 14px;
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
  font-size: 13px;
}

/* ----------------------------------------------------------
   Embed button in inventory table (Release 2.2)
   ---------------------------------------------------------- */
.cc-embed-btn {
  margin-left: 4px;
}

/* ----------------------------------------------------------
   Governance Panels (Release 2.4)
   ---------------------------------------------------------- */

.gov-panel {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gov-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* Page-level H1 used by DriftPanel + LifecyclePanel — same compact size
   as the inventory `cc-resource-view__title` so the chrome looks coherent
   across surfaces without browser-default H1 ballooning the layout. */
.gov-page-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.gov-section__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.gov-section__desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.gov-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.gov-section__file-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.gov-diff-table {
  font-size: 13px;
}

.gov-diff-table td.diff-added {
  color: var(--success);
  font-weight: 500;
}

.gov-diff-table td.diff-removed {
  color: var(--danger);
  font-weight: 500;
}

.gov-diff-table td.diff-changed {
  color: var(--warning);
  font-weight: 500;
}

.gov-diff-table td.diff-ok {
  color: var(--text-muted);
}

.gov-summary-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gov-summary-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.gov-summary-card__count {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.gov-summary-card__label {
  font-size: 12px;
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
   Tag pills (Lifecycle inventory column)
   ──────────────────────────────────────────────────────────────────────────
   Base shape is uniform; semantic modifier classes (added by
   LifecyclePanel._tagColorClass) provide a per-tag-name palette so the
   row scans by lifecycle stage instead of looking like one orange
   smear. Falls back to the `--default` neutral when no semantic match.
*/
.gov-tag-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 3px;
  border: 1px solid transparent;
  background: var(--surface-alt);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Live / production-ready */
.gov-tag-badge--prod         { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
/* Sensitive / handle-with-care */
.gov-tag-badge--confidential { background: #fef3c7; color: #92400e; border-color: #fde68a; }
/* Locked down — small viewer set, audit trail */
.gov-tag-badge--restricted   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
/* Tier ladders */
.gov-tag-badge--gold         { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.gov-tag-badge--silver       { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.gov-tag-badge--bronze       { background: #fef3e0; color: #9a3412; border-color: #fed7aa; }
/* QA / UAT / pre-prod */
.gov-tag-badge--qa           { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.gov-tag-badge--uat          { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
/* Training / docs */
.gov-tag-badge--training     { background: #ccfbf1; color: #115e59; border-color: #99f6e4; }
/* End-of-life */
.gov-tag-badge--deprecated   { background: #fce7f3; color: #831843; border-color: #fbcfe8; text-decoration: line-through; }

/* Dark-mode contrast tweaks for the tag badges. Per Curtis 2026-05-06:
   keep each badge's hue identity (PROD green, GOLD gold, etc.) so the
   tag-language stays recognizable; only deepen the bg + lighten the
   text so they read against a dark surface. */
[data-theme="dark"] .gov-tag-badge--prod         { background: #0f2e1d; color: #4ade80; border-color: #166534; }
[data-theme="dark"] .gov-tag-badge--confidential { background: #2a1f0a; color: #facc15; border-color: #92400e; }
[data-theme="dark"] .gov-tag-badge--restricted   { background: #2d1416; color: #f87171; border-color: #991b1b; }
[data-theme="dark"] .gov-tag-badge--gold         { background: #2a2410; color: #fde047; border-color: #854d0e; }
[data-theme="dark"] .gov-tag-badge--silver       { background: #1c2128; color: #cbd5e1; border-color: #475569; }
[data-theme="dark"] .gov-tag-badge--bronze       { background: #261810; color: #fb923c; border-color: #9a3412; }
[data-theme="dark"] .gov-tag-badge--qa           { background: #112030; color: #60a5fa; border-color: #1e40af; }
[data-theme="dark"] .gov-tag-badge--uat          { background: #1f1736; color: #a78bfa; border-color: #5b21b6; }
[data-theme="dark"] .gov-tag-badge--training     { background: #0f2929; color: #5eead4; border-color: #115e59; }
[data-theme="dark"] .gov-tag-badge--deprecated   { background: #2a0f1f; color: #f472b6; border-color: #831843; }

/* "Untagged" reads as an absence: dashed border, soft grey, italic so it's
   visibly distinct from the GOLD/yellow tier (audit caught these reading
   as the same colour). */
.gov-untagged {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  font-style: italic;
}

.gov-audit-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.gov-audit-details summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  background: var(--surface-alt);
  user-select: none;
}

.gov-audit-details summary:hover {
  background: var(--bg);
}

.gov-audit-details[open] summary {
  background: var(--surface);
}

.gov-audit-details__body {
  padding: 0 4px 8px;
}

.gov-result-ok {
  color: var(--success);
  font-weight: 600;
}

.gov-result-err {
  color: var(--danger);
  font-weight: 600;
}

/* Section separators are handled by .cc-sidebar__section + .cc-sidebar__section */
.cc-sidebar__section--governance,
.cc-sidebar__section--migration { /* no extra overrides needed */ }


/* ----------------------------------------------------------
   Drift-specific classes
   ---------------------------------------------------------- */

/* Category group headers */
.drift-category-label {
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.drift-category-label--liveOnly    { color: var(--warning); }
.drift-category-label--missingLive { color: var(--danger); }
.drift-category-label--diverged    { color: var(--danger); }
.drift-category-label--inSync      { color: var(--success); }
.drift-category-label--pending     { color: var(--warning); }

/* Drift item rows */
.drift-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.drift-item-row__info {
  flex: 1;
  min-width: 0;
}

.drift-item-row__identity {
  font-weight: 500;
  word-break: break-all;
}

.drift-item-row__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Queue item rows */
.drift-queue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.drift-queue-identity {
  flex: 1;
  font-size: 0.9em;
  word-break: break-all;
  cursor: pointer;
  color: var(--accent);
}

.drift-queue-identity--deleted {
  text-decoration: line-through;
  color: var(--text-muted);
  cursor: default;
}

.drift-queue-identity:not(.drift-queue-identity--deleted):hover {
  text-decoration: underline;
}

/* Operation badges */
.op-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  align-self: center;
}

.op-badge--create { background: var(--accent-light);  color: var(--accent); }
.op-badge--update { background: var(--warning-light); color: var(--warning); }
.op-badge--delete { background: var(--danger-light);  color: var(--danger); }

/* Resource pending subsection header */
.drift-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.drift-section-header .gov-section__title {
  margin: 0;
  flex: 1;
}

.drift-pending-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 6px;
}

.drift-caret {
  font-size: 0.75em;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Danger Mode toggle (retired)
   The bottom-left toggle was retired in the Lifecycle Edition refactor.
   Destructive UI now surfaces implicitly in the Govern stage. See
   gui/static/components/DangerMode.js + .agent/plans/lifecycle-edition-prd.md §9.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   Danger bar inside Org Inventory table view
   ---------------------------------------------------------- */

.cc-danger-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--danger-light);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.cc-danger-bar__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  flex: 1;
}

.cc-danger-bar__confirm-text {
  font-size: 13px;
  color: var(--danger);
  flex: 1;
}

.cc-danger-bar__result {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.cc-danger-bar__result--ok  { color: var(--success); }
.cc-danger-bar__result--err { color: var(--danger); }

/* ----------------------------------------------------------
   Detail Panel — CRUD additions
   ---------------------------------------------------------- */

/* Footer: delete on left, cancel/save on right */
.detail-panel__footer {
  justify-content: space-between;
}

.detail-panel__delete-btn {
  margin-right: auto;
}

.detail-panel__footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Required field asterisk */
.detail-panel__required {
  color: var(--danger);
  font-weight: 700;
}

/* Color picker */
.detail-panel__color-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.detail-panel__color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
  padding: 0;
  flex-shrink: 0;
}

.detail-panel__color-swatch:hover {
  transform: scale(1.15);
}

.detail-panel__color-swatch--active {
  border-color: var(--text);
  transform: scale(1.15);
}

/* Sub-panels */
.detail-panel__subpanel {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.detail-panel__subpanel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.detail-panel__subpanel-subtitle {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

.detail-panel__subpanel-list {
  margin-bottom: 10px;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-panel__subpanel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--surface-alt, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

.detail-panel__subpanel-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-panel__subpanel-item-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-panel__subpanel-loading,
.detail-panel__subpanel-empty,
.detail-panel__subpanel-error {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

.detail-panel__subpanel-error {
  color: var(--danger);
}

.detail-panel__subpanel-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.detail-panel__subpanel-form--grants {
  gap: 6px;
}

.detail-panel__subpanel-select {
  flex: 1;
  min-width: 140px;
}

/* OrgInventory — Create button in resource view header */
.cc-resource-view__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-create-btn {
  margin-left: auto;
}

/* OrgInventory — action cell with multiple buttons */
.cc-table__actions {
  white-space: nowrap;
  width: 1%;
}

.cc-table__actions .btn + .btn {
  margin-left: 4px;
}

/* ----------------------------------------------------------
   Migration Panel
   ---------------------------------------------------------- */

.migration-panel {
  max-width: 820px;
  padding: 20px 24px;
}

.migration-panel__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}

.migration-panel__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ── Phase list ──────────────────────────────────────────── */

.migration-phase-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.migration-phase {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.migration-phase__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.migration-phase__num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}

.migration-phase__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-right: 8px;
}

.migration-phase__desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Phase status badge ──────────────────────────────────── */

.migration-phase__status {
  font-size: 14px;
  font-weight: 700;
  width: 18px;
  text-align: center;
}

.migration-phase__status--ok    { color: var(--success); }
.migration-phase__status--error { color: var(--danger);  }
.migration-phase__status--warn  { color: var(--warning, #f59e0b); }

/* ── Phase collapsible body ──────────────────────────────── */

.migration-phase__body {
  display: none;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.migration-phase__body--open {
  display: block;
}

.migration-phase__file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.migration-phase__file-label {
  white-space: nowrap;
}

.migration-phase__template-link {
  white-space: nowrap;
  text-decoration: none;
}

.migration-phase__preview {
  margin-top: 4px;
}

/* ── Action bar ──────────────────────────────────────────── */

.migration-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── Validation results ──────────────────────────────────── */

.migration-validation-result {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.migration-phase-result {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  border: 1px solid transparent;
}

.migration-phase-result--ok {
  background: var(--success-light, #f0fdf4);
  border-color: #bbf7d0;
  color: var(--success-hover, #15803d);
}

.migration-phase-result--error {
  background: var(--danger-light, #fef2f2);
  border-color: #fecaca;
  color: var(--danger-hover, #b91c1c);
}

.migration-phase-result--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

/* ── Migration SSE log panel ─────────────────────────────── */

.migration-log {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-top: 4px;
}

.migration-log__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.migration-log__body {
  max-height: 480px;
  overflow-y: auto;
  padding: 0;
}

.migration-log__phase {
  border-bottom: 1px solid var(--border);
}

.migration-log__phase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: var(--surface-alt, var(--bg));
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
}

.migration-log__phase-header:hover {
  background: var(--bg);
}

.migration-log__phase-body {
  padding: 4px 0 6px 32px;
}

.migration-log__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 2px 14px 2px 0;
  color: var(--text);
}

.migration-log__row--ok    { color: var(--success); }
.migration-log__row--warn  { color: var(--warning, #f59e0b); }
.migration-log__row--error { color: var(--danger); }
.migration-log__row--info  { color: var(--text-muted); font-style: italic; }

/* ============================================================
   Org Graph — node type color tokens + layout
   ============================================================ */
:root {
  --node-team:       #7B9EC9;
  --node-workspace:  #C4A96B;
  --node-workbook:   #E0876A;
  --node-dataModel:  #9B82C4;
  --node-member:     #8C9DB0;
}

/* ── Org Graph — two-column layout ─────────────────────────────────────────── */
/* Modifier on the OrgGraph wrapper .gov-panel: claims the full height of
   its parent (.cc-main) so the graph + filter panel can fill the viewport
   instead of being capped at hardcoded pixel heights. Opt-in only —
   sibling gov-panels still scroll within .cc-main. */
.gov-panel--fill {
  height: 100%;
  overflow: hidden;
}

/* The intermediate wrappers between .cc-main and .gov-panel--fill are plain
   block / partially-flex divs that break the `height: 100%` percentage chain.
   We propagate definite height + flex layout only when a .gov-panel--fill is
   actually somewhere underneath, so other resource panels (members/teams
   tables, drift, lifecycle, CSV migration) keep their normal scroll behavior.

   Two mount paths today:
     • Grant Audit: #cc-inventory-mount > .gov-panel--fill
     • Sigma → Sigma Migration:
         #cc-inventory-mount > .migration-hub__detail
           > .migration-hub__detail-panel > .sigma-migration-panel
             > .sigma-migration-panel__graph > .gov-panel--fill
*/
#cc-inventory-mount:has(.gov-panel--fill) {
  height: 100%;
}

.migration-hub__detail:has(.gov-panel--fill) {
  height: 100%;
}

/* MigrationHub mounts both the CSV panel and the Sigma→Sigma panel into
   .migration-hub__detail-panel. Only the latter ships an OrgGraph (and thus
   a .gov-panel--fill); make this wrapper a flex column only in that case so
   .sigma-migration-panel's `flex: 1` can claim the height. */
.migration-hub__detail-panel:has(.gov-panel--fill) {
  display: flex;
  flex-direction: column;
}

.org-graph-split {
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.org-graph-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.org-graph-canvas {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Smooth the border + halo transition when entering / exiting focus. */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus-mode modifier — Claude-controlling-browser look. The class is
   toggled by `_emitFocusChange` whenever a focal node is set, so the
   accent frame is a precise indicator of "you are in focus mode." */
.org-graph-canvas--focused {
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 12px 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ── Live node-count overlay (bottom-left of canvas) ────────────────────── */
.org-graph-stats {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Theme-aware: pulls from --surface so the pill blends with the canvas
     in both light + dark mode. Translucent on top of `backdrop-filter`. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.graph-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1;
}

.graph-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.graph-stat-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.graph-stat-label {
  color: var(--text-muted);
}

.graph-stat-sep {
  color: var(--border);
  font-size: 10px;
}

.graph-stat-mode {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-right: 4px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
}

/* ── Focus history nav (top-left of canvas) ──────────────────────────────── */
.org-graph-nav {
  position: absolute;
  top: 14px;
  left: 14px;
  display: none;
  gap: 4px;
  z-index: 2;
}

.org-graph-nav--visible {
  display: flex;
}

.org-graph-nav-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  /* Theme-aware translucent surface — same pattern as .org-graph-stats. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s, opacity 0.1s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.org-graph-nav-btn:hover:not(:disabled) {
  background: var(--bg);
  color: var(--accent);
}

.org-graph-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.org-graph-nav-btn--wide {
  width: auto;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.org-graph-nav-btn--active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
}

/* ── Multi-select pill (bottom-right of canvas) ──────────────────────────── */
.org-graph-selpill {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  /* Theme-aware translucent surface — same pattern as .org-graph-stats. */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text);
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.org-graph-selpill--visible {
  display: flex;
}

.org-graph-selpill-count {
  font-variant-numeric: tabular-nums;
}

.org-graph-selpill-clear {
  background: var(--surface-alt, var(--bg));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.org-graph-selpill-clear:hover {
  background: var(--bg);
  color: var(--accent);
}

/* ── Legend / filter column in right sidebar ──────────────────────────────── */
.org-graph-legend {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.org-graph-legend-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.org-graph-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.org-graph-control-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-right: 2px;
  white-space: nowrap;
}

.org-graph-filter-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  cursor: default;
  user-select: none;
  line-height: 1.3;
  white-space: nowrap;
}

.org-graph-filter-item input[type="checkbox"] {
  width: 12px;
  height: 12px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.org-graph-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.org-graph-hints {
  color: var(--text-muted);
  gap: 5px;
}

.org-graph-hints span::before {
  content: '·';
  margin-right: 4px;
  opacity: 0.4;
}

.org-graph-hints span {
  font-size: 10px;
  line-height: 1.5;
}

/* ── Filter tree (new dynamic legend) ─────────────────────────────────────── */
.filter-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.filter-info-icon {
  font-size: 12px;
  color: var(--text-muted);
  cursor: help;
  opacity: 0.65;
  flex-shrink: 0;
}

.filter-info-icon:hover {
  opacity: 1;
}

/* "× Exit focus" button rendered to the right of the focus filters
   header. Magic-Mouse / trackpad users had trouble landing a click on
   empty canvas to exit focus mode, so this is a guaranteed escape. */
.filter-exit-focus {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.filter-exit-focus:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.filter-exit-focus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  user-select: none;
  min-height: 20px;
}

.filter-row--disabled {
  opacity: 0.5;
  cursor: default;
}

.filter-cb {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.filter-expand-btn {
  background: none;
  border: none;
  padding: 0 1px;
  cursor: pointer;
  font-size: 8px;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.filter-expand-btn:hover {
  opacity: 1;
  color: var(--text);
}

.filter-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-label {
  font-size: 11px;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.filter-children {
  display: flex;
  flex-direction: column;
}

.filter-warn-icon {
  font-size: 11px;
  color: #e6a817;
  cursor: help;
  flex-shrink: 0;
  opacity: 0.85;
  padding: 0 2px;
}

.filter-warn-icon:hover {
  opacity: 1;
}

.filter-hints {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.filter-hints span {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
}

.filter-hints span::before {
  content: '·';
  margin-right: 4px;
  opacity: 0.4;
}

.filter-focus-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 0 2px;
  margin-top: 2px;
}

/* ── Graph custom tooltip ─────────────────────────────────────────────────── */
.codex-graph-tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: 240px;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  pointer-events: none;
}

/* ── Graph context menu ───────────────────────────────────────────────────── */
.graph-ctx-menu {
  position: fixed;
  z-index: 10000;
  min-width: 160px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  font-size: 13px;
}

.graph-ctx-item {
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text);
  user-select: none;
  transition: background 0.1s;
}

.graph-ctx-item:hover {
  background: var(--neutral-bg);
}

.graph-ctx-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}

.graph-ctx-parent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.graph-ctx-arrow {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.graph-ctx-submenu {
  position: absolute;
  top: -5px;
  left: 100%;
  min-width: 160px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  display: none;
}

.graph-ctx-submenu-flip .graph-ctx-submenu {
  left: auto;
  right: 100%;
}

.graph-ctx-parent:hover > .graph-ctx-submenu,
.graph-ctx-submenu:hover {
  display: block;
}

/* ── Right detail panel ───────────────────────────────────────────────────── */
.org-graph-detail-panel {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Collapsed sibling of .org-graph-detail-panel — a narrow rail that shows
   a filter funnel + plus icon and an exclusion-count badge. Clicking it
   expands the detail panel back. */
.org-graph-detail-rail {
  width: 44px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 0 0;
  cursor: pointer;
  position: relative;
  color: var(--text-muted, #7f8fa8);
  transition: color 0.15s, background 0.15s;
}

.org-graph-detail-rail:hover,
.org-graph-detail-rail:focus {
  color: var(--text, #e8eaf0);
  background: var(--surface-alt, var(--surface));
  outline: none;
}

.org-graph-detail-rail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.org-graph-rail__badge {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--danger, #cf222e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Small chevron button at the panel header's left edge that collapses the
   detail panel to the rail. */
.org-graph-detail-collapse-btn {
  background: none;
  border: none;
  padding: 0 6px 0 0;
  margin-right: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted, #7f8fa8);
  transition: color 0.15s;
}

.org-graph-detail-collapse-btn:hover,
.org-graph-detail-collapse-btn:focus {
  color: var(--text, #e8eaf0);
  outline: none;
}

/* ── Filter search row (above the filter tree) ─────────────────────────── */
.filter-search {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 6px;
  position: relative;
}

.filter-search__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  font-size: 12px;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt, var(--surface));
  color: var(--text);
  outline: none;
}

.filter-search__input:focus {
  border-color: var(--accent, #F16D44);
}

.filter-search__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted, #7f8fa8);
  cursor: pointer;
  padding: 2px 4px;
}

.filter-search__clear:hover,
.filter-search__clear:focus {
  color: var(--text, #e8eaf0);
  outline: none;
}

.org-graph-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  position: sticky;
  top: 0;
  z-index: 1;
}

.org-graph-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.org-graph-kpi-grid .gov-summary-card {
  background: var(--surface);
  border: none;
  border-radius: 0;
  padding: 12px 14px;
  min-width: 0;
}

.org-graph-kpi-grid .gov-summary-card__count {
  font-size: 20px;
}

.org-graph-audit-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Keep old .gov-summary-bar for other panels that use it */
.gov-summary-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gov-summary-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.gov-summary-card__count {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.gov-summary-card__label {
  font-size: 12px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------
   Settings Gear + Drawer
   ---------------------------------------------------------- */

.settings-gear {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1500;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.settings-gear:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.settings-gear[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(30deg);
}

.settings-gear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.drawer__header {
  background: var(--surface);
}

.drawer__body {
  background: var(--surface);
}

.drawer__close:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.settings-drawer__paste textarea:focus {
  border-color: var(--accent);
  outline: none;
}

/* Drawer accordions: override the shared `.accordion__body.open { display: block }`
   rule so our fields stack with gap. */
.settings-drawer__accordion > .accordion__body.open {
  display: flex;
}

/* ----------------------------------------------------------
   Sigma Admin Panel Slider — globally available drag-to-reveal
   embed of the Sigma admin UI. Lives as a position-fixed
   overlay anchored to the right edge of the viewport, between
   the app header and the action bar. Mounted once at app boot
   on every stage; CSS keeps it underneath the settings gear
   (z-index 1500) but above the stage content. Curtis 2026-05-06:
   promoted from Govern-only to globally accessible.
   ---------------------------------------------------------- */

.cc-admin-split {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: var(--bar-h);
  z-index: 30;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
}

/* The drag handle: 6px vertical strip. Always visible; cursor shows resize
   intent on hover. Chevron is only visible when the panel is open. */
.cc-admin-split__handle {
  position: relative;
  width: 6px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  cursor: ew-resize;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  outline: none;
}

.cc-admin-split__handle:hover,
.cc-admin-split__handle:focus-visible {
  background: var(--accent);
  border-left-color: var(--accent);
}

.cc-admin-split__handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Chevron floats over the handle — only visible when the panel is open. */
.cc-admin-split__chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 28px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
  user-select: none;
}

.cc-admin-split--open .cc-admin-split__chevron {
  display: flex;
}

.cc-admin-split__chevron:hover {
  background: var(--surface-alt);
  color: var(--text);
}

/* Body contains the iframe (or loading / error state). Width is set via JS. */
.cc-admin-split__body {
  flex-shrink: 0;
  width: 0;
  height: 100%;
  background: var(--surface);
  overflow: hidden;
  border-left: 0 solid var(--border);
  transition: none; /* width changes are live-updated during drag */
}

.cc-admin-split--open .cc-admin-split__body {
  border-left-width: 1px;
}

.cc-admin-split__iframe-mount {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cc-admin-split__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  flex: 1;
}

.cc-admin-split__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
}

.cc-admin-split__error {
  margin: 24px;
  max-width: 360px;
}

/* Global cursor while a drag is active to prevent flicker. */
body.cc-admin-split--dragging {
  cursor: ew-resize !important;
  user-select: none;
}

body.cc-admin-split--dragging iframe {
  pointer-events: none; /* prevents the iframe from swallowing mousemove events */
}

/* ----------------------------------------------------------
   Claude panel — drag-handle hover affordance + global
   drag-state guards. The handle itself is positioned + sized
   inline in ClaudePanel.js (kept with the JS that wires it).
   ---------------------------------------------------------- */
#claude-panel-resize-handle:hover,
#claude-panel-resize-handle:focus-visible {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
#claude-panel-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body.claude-panel-dragging {
  cursor: ew-resize !important;
  user-select: none;
}
body.claude-panel-dragging iframe {
  pointer-events: none;
}

/* ----------------------------------------------------------
   Command Center sidebar — inline icon button next to a
   section label (e.g. Refresh on Resources).
   ---------------------------------------------------------- */

.cc-sidebar__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  /* Right padding to match the .cc-sidebar__label's existing left padding,
     so the icon button hugs the right edge with the same inset as the label
     hugs the left. */
  padding-right: 8px;
}

/* Group the section label with the AI trigger so they sit together on the
   left edge of the row, with refresh pushed to the far right. */
.cc-sidebar__label-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;  /* allow truncation when sidebar narrows */
}
.cc-sidebar__label-group .cc-sidebar__label {
  margin: 0;
}

.cc-sidebar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.cc-sidebar__icon-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.cc-sidebar__icon-btn:active svg {
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}

.cc-sidebar__icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ----------------------------------------------------------
   AI trigger button (✦) — Resources sidebar header.

   Lit when the chat panel is open, dull when closed. The :active
   svg-rotate rule above only matches the refresh button (it has the
   svg child); the AI trigger uses a single ✦ glyph and gets its own
   subtle hover affordance instead.
   ---------------------------------------------------------- */
.cc-ai-trigger {
  font-size: 14px;
  line-height: 1;
  /* Override the generic icon-button colour so the lit state is the
     only place the accent shows through — keeps the chrome calm. */
  color: var(--text-muted);
}

.cc-ai-trigger.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Drift-row Promote button when queued for the next reconciliation PR.
   Same accent treatment as the AI trigger so the visual language reads as
   "this thing is on / queued / pending". */
.btn.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.cc-ai-trigger.is-active:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.cc-ai-trigger:active svg {
  /* Cancel the parent rule's rotate transform — the AI button has no
     svg child, but if a sibling rule ever adds one we don't want it
     spinning on click. */
  transform: none;
}

/* ----------------------------------------------------------
   Migration Hub (gallery landing view for Migration Pipeline)
   ---------------------------------------------------------- */

.migration-hub {
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.migration-hub__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Co-branded lockup: Intelegance diamond on the left, title/subtitle in
   the middle, "Visit intelegance.io →" CTA on the right. Wraps on
   narrow viewports (intentionally — the partner link drops below the
   heading rather than clipping). */
.migration-hub__lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.migration-hub__brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.migration-hub__heading-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.migration-hub__partner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--intelegance-light);
  border: 1px solid color-mix(in srgb, var(--intelegance) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--intelegance);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.migration-hub__partner-link:hover {
  background: color-mix(in srgb, var(--intelegance) 12%, transparent);
  border-color: var(--intelegance);
  color: var(--intelegance-hover);
}
.migration-hub__partner-link:focus-visible {
  outline: 2px solid var(--intelegance);
  outline-offset: 2px;
}

.migration-hub__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.migration-hub__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 640px;
}

.migration-hub__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.migration-hub__section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.migration-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* Card ─ square, button-semantic. Keep layout stable across states. */
.migration-hub__card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 10px);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
  color: var(--text);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
  outline: none;
}

.migration-hub__card:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.migration-hub__card:focus-visible:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light, rgba(241, 109, 68, 0.18));
}

.migration-hub__card-icon {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--accent-light, #fdf0eb);
  transition: background var(--transition), color var(--transition);
}

.migration-hub__card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.migration-hub__card-status {
  font-size: 11px;
  font-weight: 500;
  color: var(--success, #22c55e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Coming-soon variant: dim, muted icon tile, badge in the corner, no hover. */
.migration-hub__card--coming-soon {
  cursor: not-allowed;
  background: var(--surface);
}

.migration-hub__card--coming-soon .migration-hub__card-icon {
  background: var(--surface-alt);
  color: var(--text-muted);
}

.migration-hub__card--coming-soon .migration-hub__card-title {
  color: var(--text-muted);
}

.migration-hub__card--coming-soon .migration-hub__card-status {
  color: var(--text-muted);
}

.migration-hub__card--coming-soon:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}

.migration-hub__card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Detail view — back link above the panel that gets a child mount. */
.migration-hub__detail {
  display: flex;
  flex-direction: column;
}

.migration-hub__back {
  align-self: flex-start;
  margin: 16px 24px 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-sans);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.migration-hub__back:hover {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}

.migration-hub__back span {
  margin-right: 4px;
  font-size: 14px;
}

.migration-hub__detail-panel {
  flex: 1;
  min-height: 0;
}

/* ----------------------------------------------------------
   Sigma → Sigma Migration Panel
   ---------------------------------------------------------- */

.sigma-migration-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Child container OrgGraph mounts into. OrgGraph wipes its container's
   innerHTML during async render, so it must NOT be the panel itself —
   otherwise the floating Export button would be clobbered on first paint. */
.sigma-migration-panel__graph {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Floating Export button — positioned over the bottom-right of the wrapper.
   Hidden until Focus Mode activates; OrgGraph dispatches `orggraph:focuschange`
   on this container, the panel toggles `--visible`. The button sits OUTSIDE
   OrgGraph's own DOM tree, so the graph itself is unchanged. */
.sigma-migration-panel__export {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.sigma-migration-panel__export--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sigma-migration-panel__export:hover:not(:disabled) {
  filter: brightness(1.05);
}

.sigma-migration-panel__export:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.sigma-migration-panel__export--busy {
  opacity: 0.85;
  cursor: progress;
}

.sigma-migration-panel__export--error {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

.sigma-migration-panel__export-label {
  white-space: nowrap;
}

/* ----------------------------------------------------------
   34. Facelift M2 — new component primitives.

   These are the components the PRD's §5 commits to. Each one
   is CSS-only — no JS, no DOM restructuring is required to
   adopt them. Component authors import the class names; the
   tokens used here are all defined in section 1.

   See docs/PRD-gui-facelift.md for the rationale per component
   and the migration plan (§6 — Milestone 3 will swap inline
   styles in the 5 hotspot components for these classes).

   Companion reference page: gui/static/showcase.html.
   ---------------------------------------------------------- */

/* 34a. Card family.

   Replaces the ~80 hand-rolled card layouts inlined across
   ClaudePanel.js, AddContentPhase.js, WorkspacesPhase.js,
   DepartmentPresetsPhase.js, and others. .phase-section is
   the legacy adjacent — keep it for now; cards are the
   forward path for new component authors.
*/
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow   var(--motion-fast) var(--ease-out),
              transform    var(--motion-fast) var(--ease-out);
}

.card--accent-left {
  border-left: 3px solid var(--accent);
  /* Compensate for the wider left border so inner content stays
     aligned with the right edge. */
  padding-left: calc(var(--space-4) - 2px);
}

.card--ai {
  border-color: var(--ai-accent-border);
}
.card--ai.card--accent-left {
  border-left-color: var(--ai-accent);
}

.card--elevated {
  box-shadow: var(--shadow);
}

.card--floating {
  box-shadow: var(--shadow-lg);
}

.card--interactive {
  cursor: pointer;
}
.card--interactive:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.card--selected {
  border-color: var(--accent);
  background: var(--surface-alt);
  box-shadow: 0 0 0 1px var(--accent);
}

.card--success {
  border-color: var(--success);
}
.card--danger {
  border-color: var(--danger);
}
.card--warning {
  border-color: var(--warning);
}

/* Card sub-elements. Each is BEM-style so authors can nest
   them inside a .card without bringing their own structure. */
.card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.card__subtitle {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.card__body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text);
}
.card__footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.card__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* 34b. Modal family.

   Replaces the 4 hand-rolled modals (CommandPalette,
   CredentialsManager, TypeToConfirmModal, EmbedModal).
   Caller is responsible for the backdrop click → close
   handler and Escape-key handler; this is style-only.
*/
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  animation: modal-backdrop-fade var(--motion-base) var(--ease-out);
}

.modal {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  animation: modal-content-rise var(--motion-base) var(--ease-out);
}

.modal--sm { width: 480px; }
.modal--md { width: 640px; }
.modal--lg { width: 800px; }
.modal--xl { width: 960px; }

.modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.modal__title {
  flex: 1;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}
.modal__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-xl);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-out),
              color      var(--motion-fast) var(--ease-out);
}
.modal__close:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

@keyframes modal-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-content-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* 34c. Segmented control.

   Replaces the inline-styled tab pattern in BuildStage's
   "Data Models / Workbooks" chooser and the clickable stepper
   in AddContentPhase. Caller sets aria-pressed="true" on the
   active item.
*/
.segmented {
  display: inline-flex;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  gap: 2px;
}
.segmented__item {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius) - 2px);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color      var(--motion-fast) var(--ease-out);
}
.segmented__item:hover:not([aria-pressed="true"]):not(:disabled) {
  color: var(--text);
}
.segmented__item[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.segmented__item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 34d. Chip — selectable tag with optional dismiss.

   Replaces the hardcoded purple AI-pill (#f0e6ff / #7c3aed)
   in ReviewPhase.js and the attachment chips in ClaudePanel.
*/
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
.chip--accent  { background: var(--accent-light);    color: var(--accent);    border-color: transparent; }
.chip--ai      { background: var(--ai-accent-light); color: var(--ai-accent); border-color: var(--ai-accent-border); }
.chip--success { background: var(--success-light);   color: var(--success);   border-color: transparent; }
.chip--warning { background: var(--warning-light);   color: var(--warning);   border-color: transparent; }
.chip--danger  { background: var(--danger-light);    color: var(--danger);    border-color: transparent; }
.chip--neutral { background: var(--neutral-light);   color: var(--neutral);   border-color: transparent; }

.chip__dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: var(--space-1);
  color: currentColor;
  cursor: pointer;
  opacity: 0.6;
  font-size: inherit;
  line-height: 1;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.chip__dismiss:hover { opacity: 1; }

/* 34e. Icon system.

   Light-weight class for Unicode glyphs. Each consumer sets
   the glyph character via textContent; this class just owns
   sizing, alignment, and a hook for color overrides.

   PRD §5.5: stay on Unicode for a low-cost facelift; revisit
   SVG icon library in a follow-up if visual weight variance
   remains a problem.
*/
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.125em;
  text-align: center;
}
.icon--sm { font-size: var(--text-xs);   }
.icon--md { font-size: var(--text-base); }
.icon--lg { font-size: var(--text-lg);   }

/* 34f. Skeleton loaders.

   Replaces the "checking…" italicized text seen in the
   Govern stage's resource overview cards. Authors pick the
   variant matching the content shape they want to suggest.
*/
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-alt) 0%,
    var(--border)      50%,
    var(--surface-alt) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
}
.skeleton--text  { height: 12px; width: 100%; }
.skeleton--title { height: 20px; width: 60%;  }
.skeleton--card  { height: 80px; width: 100%; }
.skeleton--avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 34g. Focus-ring utility.

   Universal focus-visible treatment for custom interactive
   surfaces (cards with click handlers, segmented items with
   non-default behaviors, dismissible chips, etc.). The .btn
   class already declares its own :focus-visible — this is
   for everything else.
*/
.focus-ring:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

/* 34h. Stage frame.

   Shared outer container for the five stages. Bootstrap and
   Govern adopt this directly; Build / Migrate opt in as
   future cleanups. Graph stays full-bleed (it's a legitimate
   exception — the force-directed graph wants the whole
   viewport).

   Note: pages today use the legacy .phase-content wrapper.
   This is the forward path; existing layouts keep working.
*/
.stage-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--space-7);
  gap: var(--space-5);
}
.stage-frame__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.stage-frame__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
}
.stage-frame__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 60ch;
  line-height: 1.55;
}
.stage-frame__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.stage-frame__body   { flex: 1; }
.stage-frame__footer { /* sticky action bar opt-in */ }