/*
 * Stage 45 (2026-05-16) · Wave R-D pixel-fidelity refactor.
 *
 * Token-bridge stylesheet. The design package (design-cockpit-styles.css)
 * defines `:root` tokens like `--bg`, `--surface`, `--teal`, `--amber`,
 * `--rose`, `--green`, `--violet`, `--sky`. The new cockpit primitives
 * (CockpitTopBar, FilterPresetBar, StreamDetail, AvatarMenu, etc.) ship
 * `--xc-*` aliases as fallback values inside their scoped <style> blocks.
 *
 * This file makes the aliases real on :root so EVERY consumer of `--xc-*`
 * automatically picks up the design's oklch palette without per-component
 * edits. Also aliases the legacy `--bg-N` / `--fg-N` / `--line-N` / `--acc`
 * scale to the design tokens so the older app shell skin matches too.
 *
 * Load order: design-cockpit-styles.css → design-cockpit-v2.css → THIS →
 * dist/v3-shell.css. The bridge must come AFTER the design CSS (so the
 * design `:root` is defined first) and BEFORE the demo shell CSS (so the
 * shell's own `:root` overrides don't shadow the bridge).
 */

:root {
  /* New cockpit primitive aliases (--xc-*) → design tokens. */
  --xc-bg:              var(--bg, oklch(0.155 0.005 240));
  --xc-bg-soft:         var(--bg-soft, oklch(0.185 0.006 240));
  --xc-surface:         var(--surface, oklch(0.205 0.007 240));
  --xc-surface-2:       var(--surface-2, oklch(0.235 0.008 240));
  --xc-surface-3:       var(--surface-3, oklch(0.275 0.010 240));
  --xc-border:          var(--border, oklch(0.300 0.010 240));
  --xc-border-soft:     var(--border-soft, oklch(0.245 0.010 240));
  --xc-text:            var(--text, oklch(0.965 0.005 240));
  --xc-text-mid:        var(--text-mid, oklch(0.780 0.008 240));
  --xc-text-dim:        var(--text-dim, oklch(0.620 0.010 240));
  --xc-text-faint:      var(--text-faint, oklch(0.480 0.010 240));
  --xc-accent:          var(--teal, oklch(0.78 0.11 195));
  --xc-accent-2:        var(--teal-2, oklch(0.62 0.12 200));
  --xc-warn:            var(--amber, oklch(0.82 0.13 80));
  --xc-bad:             var(--rose, oklch(0.72 0.16 25));
  --xc-good:            var(--green, oklch(0.78 0.12 150));
  --xc-learn:           var(--violet, oklch(0.78 0.11 295));
  --xc-projection:      var(--sky, oklch(0.80 0.10 230));

  /* Legacy demo shell aliases (--bg-N / --fg-N / --line-N / --acc) → design
   * tokens, so existing markup that uses `.app`, `.bar`, `.role-chip`, etc.
   * inherits the design palette automatically. The demo's existing v3-shell.css
   * still sets these hex values in its own `:root` block; this bridge override
   * has to come AFTER that for the alias to win — handled in CSS link order. */
  --bg-0: var(--bg);
  --bg-1: var(--bg-soft);
  --bg-2: var(--surface);
  --bg-3: var(--surface-2);
  --bg-4: var(--surface-3);
  --line-1: var(--border-soft);
  --line-2: var(--border);
  --line-3: var(--border);
  --fg-0: var(--text);
  --fg-1: var(--text-mid);
  --fg-2: var(--text-dim);
  --fg-3: var(--text-faint);
  --fg-4: var(--text-faint);
  --acc: var(--teal);
  --acc-2: var(--green);
  --warn: var(--amber);
  --bad: var(--rose);
  --good: var(--green);
  --info: var(--violet);

  /* Font aliases. The demo's --sans currently lists system-ui/Inter. The
   * design package uses Geist. Both font families now load via index.html
   * Google Fonts link; this bridge points the demo's font tokens at Geist
   * with the same fallback chain so any consumer reading var(--sans) gets
   * the design font automatically. */
  --sans: 'Geist', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ─────────────────────────────────────────────────────────────────────
 * Stage 84 (2026-05-16) · supplemental rules for DesignFrame markup the
 * design package's styles.css doesn't directly target. Operator: "still
 * far from new UX". Root cause was inline styles in DesignFrame overriding
 * the design CSS; this section provides the missing per-class rules so the
 * JSX can ship without ANY structural inline styles.
 * ──────────────────────────────────────────────────────────────────── */

/* Workspace-status dot strip · DEPRECATED 2026-05-19 (Stage 98)
   Operator removed this surface entirely. The same workspace-status
   signal is now rendered per-row by .rail-status-dot inside each
   workspace pill (one source of truth). Keep the CSS rule as
   `display: none` for any straggler markup in older Storybook fixtures
   or precompiled v3-substrate-widgets snapshots until they regenerate. */
.frame .leftrail .rail-status-strip { display: none !important; }
.frame .leftrail .rail-status-strip-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.frame .leftrail .rail-status-strip-dots {
  display: flex; gap: 4px; margin-left: auto;
}
.frame .leftrail .rail-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-faint);
  border: none; padding: 0; cursor: pointer;
  transition: transform 0.12s;
}
.frame .leftrail .rail-status-dot:hover { transform: scale(1.2); }
.frame .leftrail .rail-status-dot[data-status="good"]    { background: var(--green); }
.frame .leftrail .rail-status-dot[data-status="running"] { background: var(--sky); }
.frame .leftrail .rail-status-dot[data-status="attn"]    { background: var(--amber); }
.frame .leftrail .rail-status-dot[data-status="blocked"] { background: var(--rose); }
.frame .leftrail .rail-status-dot[data-active="true"]    { box-shadow: 0 0 0 2px var(--teal); }
.frame .leftrail .rail-status-dot[data-pulse="true"]     { box-shadow: 0 0 0 3px oklch(0.78 0.11 195 / 0.18); }

/* Muted rail items (legacy/disabled workspaces) */
.frame .leftrail .rail-item.is-muted { opacity: 0.55; }

/* Avatar fallback when window.AvatarMenu sidecar isn't loaded */
.frame .avatar { width: 26px; height: 26px; border-radius: 50%; }

.frame .topbar-divider {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--border-soft);
  flex: 0 0 auto;
}

.frame .crumbs,
.frame .crumbs .company,
.frame .crumbs .crumb-segment {
  white-space: nowrap;
}

.frame .crumbs {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DesignFrame's popover anchor class — hoists inline-flex when our JSX
 * uses a span wrapper outside an existing flex container. */
.xc-df-popover-anchor { position: relative; display: inline-flex; }

/* Crumb separator icon — design's .crumbs > .sep is a span; we render an
 * SVG icon with className="sep". Inherit colour. */
.frame .crumbs .sep { color: var(--text-faint); opacity: 0.35; }

/* ─────────────────────────────────────────────────────────────────────
 * Stage 112 (2026-05-16) · operator: "not all the notifications bars
 * are aligned". Root cause: StatusDot widget renders <span class=
 * "xc-status-dot {state}"> but the only CSS for that class lives in
 * src/shared/storybook/golden-path/tokens/xlooop.cockpit.theme.css
 * which is NOT loaded by the demo runtime. Result: every status dot
 * computed width=0 / height=0 / background=transparent, AND the grid
 * template-columns auto-sized causing horizontal misalignment of
 * subsequent rows. Loading the rules here alongside the design
 * tokens snaps every dot to a consistent 8×8 coloured circle.
 * ──────────────────────────────────────────────────────────────────── */
.xc-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint, oklch(0.480 0.010 240));
}
.xc-status-dot.queued     { background: var(--text-dim, oklch(0.620 0.010 240)); }
.xc-status-dot.running    { background: var(--teal,     oklch(0.78 0.11 195));   box-shadow: 0 0 0 3px oklch(0.78 0.11 195 / 0.20); }
.xc-status-dot.needsrev   { background: var(--amber,    oklch(0.82 0.13 80));    }
.xc-status-dot.blocked    { background: var(--rose,     oklch(0.72 0.16 25));    }
.xc-status-dot.approved   { background: var(--green,    oklch(0.78 0.12 150));   }
.xc-status-dot.learning   { background: var(--violet,   oklch(0.78 0.11 295));   }
.xc-status-dot.projecting { background: var(--sky,      oklch(0.80 0.10 230));   }

/* Notif-row · pin design's 14px 1fr grid explicitly so any dot width
 * surprises can't push column 2 over (Stage 112 alignment fix). */
.notif-popover .notif-row {
  grid-template-columns: 14px 1fr !important;
}
.notif-popover .notif-row .xc-status-dot { margin-top: 6px; }
.notif-popover .notif-top { min-width: 0; }
.notif-popover .notif-top b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ─────────────────────────────────────────────────────────────────────
 * Stage 93 (2026-05-16) · slidable rail · operator: "right panel must be
 * interactive, sliding and have different view options".
 *
 * Design CSS sets --left-w / --right-w / --rail-transition on .frame but
 * never wires those vars to grid-template-columns. styles.css line 56
 * hardcodes `grid-template-columns: 220px 1fr 360px;` so the rail-expanded
 * / rail-full class toggles silently update the vars but nothing changes
 * visually.
 *
 * This rule promotes the vars to grid-template-columns so the design's
 * 280ms cubic-bezier transition actually animates the rail width.
 * ──────────────────────────────────────────────────────────────────── */
/* Round 12 R12.14 (2026-05-20) · exclude operator-collapsed classes from
   this default var-driven layout. The Round 12 R12.4 / R12.13 .leftrail-
   collapsed / .rightrail-collapsed rules in design-cockpit-styles.css are
   the same specificity (3 classes), so without these :not() exclusions
   the bridge rule wins via cascade order and main collapses to a single
   220px column (operator-reported "completely unusable" state). */
.frame:not(.no-rail):not(.solo):not(.leftrail-collapsed):not(.rightrail-collapsed) {
  grid-template-columns: var(--left-w, 220px) 1fr var(--right-w, 360px);
}
.frame.no-rail:not(.leftrail-collapsed) { grid-template-columns: var(--left-w, 220px) 1fr; }
/* rail-expanded → --right-w: 560px already set by v2.css */
/* rail-full was retired as a blocking overlay; keep it as a wide side rail for
 * stale sessions/classes so the canvas never becomes unusable. */
.frame.rail-full { grid-template-columns: var(--left-w, 220px) 1fr var(--right-w, min(640px, 46vw)); }

/* Stage 93 follow-up · no absolute overlay. */
.frame.rail-full .rightrail {
  position: relative;
  top: auto; left: auto; right: auto; bottom: auto;
  z-index: 1;
  border-left: 1px solid var(--border-soft);
  background: var(--bg);
}

.project-ops-source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 7px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-faint);
  font-size: 10.5px;
  min-width: 0;
}

.project-ops-source-chip {
  flex: 0 0 auto;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--teal);
  font-family: var(--mono);
}

.project-ops-source-warn {
  color: var(--amber);
  font-family: var(--mono);
}

.project-canvas-proof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--text-faint);
  font-size: 10.5px;
}

.project-canvas-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
}

.project-canvas-proof span:first-child {
  color: var(--teal);
  font-family: var(--mono);
}

.action-result-panel {
  display: grid;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
}

.action-result-panel b {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.action-result-panel p {
  margin: 0;
  color: var(--text-mid);
  font-size: 12px;
  line-height: 1.45;
}

.action-result-panel.is-preview {
  background: color-mix(in oklab, var(--amber) 8%, var(--surface));
}

.action-result-panel.is-recorded {
  background: color-mix(in oklab, var(--green) 7%, var(--surface));
}

.action-result-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 8px;
  font-size: 11px;
}

.action-result-grid span {
  color: var(--text-faint);
}

.action-result-grid code {
  color: var(--text-mid);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.inline-empty-action {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-mid);
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

.inline-empty-action:hover {
  color: var(--text);
  border-color: var(--border);
}

/* UX operability bridge.
 * The legacy v3 shell stylesheet is still loaded in this demo and defines
 * broad `.row` / `.pill` / `.ws-card` affordances as pointer-looking
 * controls. The design cockpit uses those same class names for many passive
 * facts, status chips, score rows, and setup records. Keep passive elements
 * visually passive by default, then opt interactive controls back in through
 * semantic elements or explicit clickability ids. */
.frame .row,
.frame .pill,
.frame .chip,
.frame .q-card,
.frame .ws-card {
  cursor: default;
}

.frame button,
.frame a[href],
.frame summary,
.frame input,
.frame select,
.frame textarea,
.frame [role="button"],
.frame [role="tab"],
.frame .row[data-clickability-id],
.frame .q-card[data-clickability-id],
.frame .ws-card[data-clickability-id],
.frame .live-row[role="button"],
.frame .inline-row[role="button"],
.frame .mode-tab,
.frame .lane-chip,
.frame .preset-chip,
.frame .mp-page {
  cursor: pointer;
}

.frame button:disabled,
.frame [aria-disabled="true"] {
  cursor: not-allowed;
}

/* C188 operator-review viewport · keep the source/proof rail visible while
 * preventing the project workbench from collapsing in the Codex in-app
 * browser's medium-width review pane.
 *
 * Round 12 R12.18 (2026-05-20) · operator-driven rail width superseded
 * the viewport-locked 64px slim that this rule used to force. Operator
 * report: "the wide view with the details with labels as per workspaces
 * and projects and statuses has gone completely. It must be preserved
 * and should be visible depending on the allowable or usable width."
 *
 * Fix: NEUTRALIZE this medium-viewport override block. Operator's
 * XcpRailWidth setting (default 220px / draggable 180-600px) is now
 * the source of truth for rail width at all desktop viewports
 * (≥ 761px). Labels stay visible — at narrower drag widths they truncate
 * via .rail-item's flex layout; at MIN_WIDTH=180 the first ~15 chars
 * fit comfortably for the typical workspace/project name.
 *
 * The mobile media query (≤ 760px) below is preserved unchanged — at
 * true mobile widths icon-only is still the right default. */

/* C108 live-data readiness · mobile commercial path.
 * The desktop mockup is a three-column cockpit, but on phone-width
 * screenshots the 220px left rail plus 360px operations rail pushed the
 * actual workspace/project canvas out of the viewport. Collapse the left
 * rail to status/icon navigation and hide the operations rail on small
 * screens so the operator lands on the working surface first. */
@media (max-width: 760px) {
  .frame:not(.solo):not(.no-rail) {
    --left-w: 52px;
    --right-w: 0px;
    grid-template-columns: var(--left-w) minmax(0, 1fr);
    grid-template-areas:
      "topbar topbar"
      "leftrail main";
  }

  .frame .rightrail {
    display: none;
  }

  .frame .leftrail {
    min-width: 0;
    padding: 8px 5px;
    overflow-x: hidden;
  }

  .frame .leftrail .rail-label,
  .frame .leftrail .rail-item span:not(.dot):not(.count),
  .frame .leftrail .rail-children,
  .frame .leftrail .rail-status-strip-label {
    display: none;
  }

  .frame .leftrail .rail-section {
    gap: 3px;
  }

  .frame .leftrail .rail-item {
    justify-content: center;
    padding: 8px 0;
    min-height: 34px;
  }

  .frame .leftrail .rail-item .count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    padding: 0 3px;
    font-size: 9px;
  }

  .frame .leftrail .rail-status-strip {
    justify-content: center;
    padding: 4px 0 8px;
  }

  .frame .leftrail .rail-status-strip-dots {
    flex-direction: column;
    gap: 6px;
  }

  .frame .main {
    min-width: 0;
    overflow: hidden;
  }
}

/* Selected row in master-detail */
.live-row.is-selected { background: oklch(0.78 0.11 195 / 0.10); }
.live-row.is-selected::before { box-shadow: 0 0 0 3px oklch(0.78 0.11 195 / 0.18); }