/* ============================================================================
   ContextLock Studio — workbench design system
   ----------------------------------------------------------------------------
   Everything here is scoped under .cl-studio so the landing page's Webflow /
   Three.js styling is untouched. Colour + type tokens are inherited verbatim
   from the site's :root (webflow.css): --soft, --color, --color-medium,
   --dark-blue, --color-soft, --sans, --medium, --light, --serif.

   The site sets html { font-size: calc(100vw / 1920 * 10) } so 1rem is fluid.
   Dense IDE chrome needs stable sizing, so the workbench pins its own px scale
   and never uses rem internally.
   ========================================================================== */

/* The landing page sets html { font-size: calc(100vw / 1920 * 10) }, so 1rem is
   ~7.5px at 1440px wide. The workbench itself is all px, but third-party CSS
   rendered into portals (RainbowKit's wallet modal) sizes itself in rem and
   would come out at roughly half scale. Pin a sane root size on pages that host
   the workbench; the landing page has no .cl-studio and keeps its fluid scale. */
html:has(.cl-studio) { font-size: 16px; }

.cl-studio {
  /* --- surfaces (cream family) ------------------------------------------- */
  --cl-canvas: #fef1d0;          /* var(--soft) — main workspace ground      */
  --cl-panel: #fdf6e3;           /* explorer / sidebar / cards               */
  --cl-panel-2: #fbf0d6;         /* nested panel, table header               */
  --cl-raised: #fffaf0;          /* inputs, hovered rows                     */
  --cl-chrome: #010d6e;          /* var(--dark-blue) — title + status bar    */
  --cl-chrome-2: #041a8a;        /* chrome hover                             */

  /* --- ink --------------------------------------------------------------- */
  /* Headings sit in near-black with a blue cast: it separates them from body
     copy by weight of colour rather than by size alone, and reads as ink on
     paper against the cream. */
  --cl-ink-heading: #0c1424;     /* headings — 16.4:1 on cream               */
  --cl-ink: #0042af;             /* var(--color) — primary text · 7.8:1      */
  --cl-ink-2: #2451b5;           /* var(--color-medium) — secondary · 6.4:1  */
  /* Was #7189c9, which measured 3.05:1 and failed WCAG AA for body text
     (spec §45). Meta text is small and used constantly, so it has to clear
     4.5:1 rather than merely look lighter. */
  --cl-ink-3: #5a6b93;           /* tertiary / meta · 4.7:1                  */
  --cl-ink-inv: #fef1d0;         /* text on chrome                           */
  --cl-accent: #4589f7;          /* var(--color-soft)                        */

  /* --- lines ------------------------------------------------------------- */
  --cl-line: rgba(0, 66, 175, 0.18);
  --cl-line-strong: rgba(0, 66, 175, 0.34);
  --cl-line-chrome: rgba(254, 241, 208, 0.22);
  /* canvas dot grid — near-black over the cream, so the graph reads as a
     drafting surface rather than a blank page */
  --cl-canvas-dot: rgba(8, 11, 26, 0.34);

  /* --- semantic verdict palette (doc §8.2), tuned to the cream ground ----- */
  --cl-pass: #14714a;
  --cl-pass-bg: rgba(20, 113, 74, 0.1);
  --cl-warn: #9a6300;
  --cl-warn-bg: rgba(154, 99, 0, 0.12);
  --cl-deny: #a8211a;
  --cl-deny-bg: rgba(168, 33, 26, 0.1);
  --cl-sim: #5b3fb5;
  --cl-sim-bg: rgba(91, 63, 181, 0.1);
  --cl-data: #0b6c86;
  --cl-data-bg: rgba(11, 108, 134, 0.1);
  --cl-blocked: #6f6553;
  --cl-blocked-bg: rgba(111, 101, 83, 0.12);

  /* --- metrics (doc §3.1) ------------------------------------------------ */
  --cl-titlebar-h: 44px;
  --cl-rail-w: 56px;
  --cl-statusbar-h: 26px;
  --cl-tabbar-h: 38px;

  font-size: 14px;
  font-family: var(--sans);
  color: var(--cl-ink);
  background: var(--cl-canvas);
  -webkit-font-smoothing: antialiased;
}

/* The site's global reset sets font-weight:100 / line-height:100% on every
   element. Dense UI needs readable defaults, so re-establish them in scope. */
.cl-studio *,
.cl-studio *::before,
.cl-studio *::after {
  box-sizing: border-box;
  font-weight: 400;
  line-height: 1.45;
  font-family: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Escape the landing page's global element styling.

   inline.css styles bare `section` for the marketing page:
       section { padding: var(--gap-section) 0; width: 100vw; background: …; }
   With --gap-section: 30rem that is ~225px of padding and a full-viewport width,
   which inside a centred workbench column shows up as huge vertical gaps and
   content overflowing to the right. Neutralise it for sectioning elements here.

   `:where()` keeps this at .cl-studio specificity (0,1,0) so it beats the bare
   element selector but still loses to every component class defined below.
   --------------------------------------------------------------------------- */
.cl-studio :where(section, article, aside, header, footer, nav, main, figure, figcaption) {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* All element resets use :where() so they sit at .cl-studio specificity (0,1,0)
   and lose to every component class declared below. Without this a plain
   `.cl-studio button { color: inherit }` (0,1,1) outranks .cl-btn-primary,
   .cl-rail-btn and .cl-palette-item, and every button silently inherits its
   parent's colour instead of its own — cream text on cream menus, blue icons on
   the blue rail. */
.cl-studio :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  margin: 0;
}

.cl-studio :where(img) { width: auto; height: auto; object-fit: initial; }
.cl-studio :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.cl-studio :where(a) { color: inherit; text-decoration: none; }

/* webflow.css applies browser-reset typography to bare elements (h1 at 38px,
   headings bold with 20px top margin, label bold + block, ul/ol padded, dd
   indented). Workbench components carry their own type scale, so bare elements
   start neutral and every size comes from a class. */
.cl-studio :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dd, dt) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
  border: none;
}
.cl-studio :where(label) { margin: 0; font-weight: inherit; display: inline-block; }
.cl-studio :where(code, kbd, samp, pre) {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.cl-studio :where(table) { border-collapse: collapse; border-spacing: 0; }

/* ============================================================================
   Typography
   ========================================================================== */
.cl-display  { font-family: var(--serif); font-size: 34px; line-height: 1.18; letter-spacing: -0.7px; color: var(--cl-ink-heading); }
.cl-display-s{ font-family: var(--serif); font-size: 24px; line-height: 1.25; letter-spacing: -0.4px; color: var(--cl-ink-heading); }
.cl-h1       { font-family: var(--medium); font-size: 18px; letter-spacing: -0.2px; color: var(--cl-ink-heading); }
.cl-h2       { font-family: var(--medium); font-size: 15px; color: var(--cl-ink-heading); }
.cl-label    { font-family: var(--medium); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cl-ink-2); }
.cl-meta     { font-size: 12.5px; color: var(--cl-ink-3); }
.cl-body     { font-size: 14px; }
.cl-mono     { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: -0.1px; }
.cl-dim      { color: var(--cl-ink-3); }
.cl-strong   { font-family: var(--medium); }

/* ============================================================================
   Workbench frame
   ========================================================================== */
.cl-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: var(--cl-titlebar-h) 1fr var(--cl-statusbar-h);
  /* Explicit column. Without it the implicit column is `auto`, which sizes to
     the widest row's max-content — and every title-bar item is nowrap and
     non-shrinking, so the bar would widen the whole shell past the viewport and
     push the agent sidebar off screen. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--cl-canvas);
}

.cl-shell-body { display: flex; min-height: 0; min-width: 0; }

/* --- title bar ------------------------------------------------------------ */
.cl-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--cl-titlebar-h);
  padding: 0 10px;
  background: var(--cl-chrome);
  color: var(--cl-ink-inv);
  border-bottom: 1px solid var(--cl-line-chrome);
  user-select: none;
  /* Last line of defence: the bar clips its own contents rather than forcing
     the shell wider. */
  min-width: 0;
  overflow: hidden;
}
/* Chrome bars carry inverted ink. Colour is inherited rather than forced onto
   every descendant with `*`, so surfaces rendered inside the bar — popovers,
   menus, dialogs — can set their own ink and have their children follow. */
.cl-chrome-bar {
  background: var(--cl-chrome);
  color: var(--cl-ink-inv);
}
.cl-titlebar-mark {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.3px;
  padding-right: 6px;
  white-space: nowrap;
  /* It navigates home, so it has to read as something you can press. */
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px 2px 2px;
  transition: opacity 0.15s ease;
}
.cl-titlebar-mark:hover { opacity: 0.72; }
.cl-titlebar-mark:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Wordmark on the projects home — same job, back out to the landing page. */
.cl-studio-mark {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}
.cl-studio-mark:hover { opacity: 0.72; }
.cl-studio-mark:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cl-titlebar-spacer { flex: 1 1 auto; min-width: 4px; }
.cl-titlebar > * { flex-shrink: 0; }

.cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 10px;
  font-size: 12.5px;
  border: 1px solid var(--cl-line-chrome);
  background: rgba(254, 241, 208, 0.06);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cl-chip:hover { background: rgba(254, 241, 208, 0.14); border-color: rgba(254, 241, 208, 0.4); }
.cl-chip[data-static="true"] { cursor: default; }
.cl-chip[data-static="true"]:hover { background: rgba(254, 241, 208, 0.06); border-color: var(--cl-line-chrome); }

/* Revision indicator: the single most-consulted fact in the title bar, so it
   is set in the medium face at full UI size with its parts visibly separated. */
.cl-rev-chip {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1px solid var(--cl-line-chrome);
  background: rgba(254, 241, 208, 0.07);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cl-rev-chip:hover { background: rgba(254, 241, 208, 0.16); border-color: rgba(254, 241, 208, 0.45); }
.cl-rev-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 11px;
  align-self: center;
  white-space: nowrap;
}
.cl-rev-seg + .cl-rev-seg { border-left: 1px solid var(--cl-line-chrome); }
.cl-rev-seg-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.68;
}
.cl-rev-seg-value { font-family: var(--medium); font-size: 14px; }
.cl-rev-seg[data-stale="true"] .cl-rev-seg-value { color: #e8b055; }

/* the always-on environment badge (doc §4.4) */
.cl-env-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 11px;
  font-family: var(--medium);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--cl-chrome);
  background: var(--cl-ink-inv);
  border: 1px solid var(--cl-ink-inv);
  white-space: nowrap;
}
.cl-env-badge span { color: var(--cl-chrome); }
.cl-theme-dark .cl-env-badge,
.cl-theme-dark .cl-env-badge span { color: #080b16; }

.cl-cmd-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  width: clamp(150px, 20vw, 380px);
  min-width: 110px;
  height: 29px;
  padding: 0 11px;
  font-size: 13px;
  background: rgba(254, 241, 208, 0.08);
  border: 1px solid var(--cl-line-chrome);
  cursor: text;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cl-cmd-field:hover { background: rgba(254, 241, 208, 0.14); }
.cl-cmd-field input::placeholder { color: currentColor; opacity: 0.62; }
.cl-cmd-kbd {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--cl-line-chrome);
  opacity: 0.75;
}

.cl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 29px;
  min-width: 29px;
  padding: 0 7px;
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cl-icon-btn:hover { background: rgba(254, 241, 208, 0.14); border-color: var(--cl-line-chrome); }

/* --- activity rail -------------------------------------------------------- */
.cl-rail {
  flex: 0 0 var(--cl-rail-w);
  width: var(--cl-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  background: var(--cl-chrome);
  border-right: 1px solid var(--cl-line-chrome);
}
.cl-rail-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: rgba(254, 241, 208, 0.78);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.cl-rail-btn:hover { color: var(--cl-ink-inv); background: rgba(254, 241, 208, 0.08); }
.cl-rail-btn[data-active="true"] { color: var(--cl-ink-inv); }
.cl-rail-btn[data-active="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--cl-canvas);
}
.cl-rail-btn .cl-rail-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cl-accent);
}
.cl-rail-spacer { flex: 1 1 auto; }

/* --- left explorer -------------------------------------------------------- */
.cl-explorer {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  flex-direction: column;
  min-width: 0;
  background: var(--cl-panel);
  border-right: 1px solid var(--cl-line);
  overflow: hidden;
}
.cl-explorer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--cl-tabbar-h);
  padding: 0 10px;
  border-bottom: 1px solid var(--cl-line);
  flex: 0 0 auto;
}
.cl-explorer-scroll { overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; padding: 6px 0 14px; flex: 1 1 auto; }
.cl-explorer-group { padding: 8px 10px 2px; }
.cl-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 11px 8px 18px;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s ease;
}
.cl-nav-item:hover { background: var(--cl-raised); }
.cl-nav-item[data-active="true"] {
  background: rgba(0, 66, 175, 0.08);
  border-left-color: var(--cl-ink);
  font-family: var(--medium);
}
.cl-nav-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- center workspace ----------------------------------------------------- */
.cl-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-x: hidden; flex: 1 1 auto; background: var(--cl-canvas); }
.cl-tabbar {
  display: flex;
  align-items: stretch;
  height: var(--cl-tabbar-h);
  flex: 0 0 auto;
  background: var(--cl-panel-2);
  border-bottom: 1px solid var(--cl-line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cl-tabbar::-webkit-scrollbar { height: 0; }
.cl-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  border-right: 1px solid var(--cl-line);
  color: var(--cl-ink-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.cl-tab:hover { background: var(--cl-raised); }
.cl-tab[data-active="true"] { background: var(--cl-canvas); color: var(--cl-ink); font-family: var(--medium); box-shadow: inset 0 2px 0 var(--cl-ink); }
.cl-tab[data-preview="true"] { font-style: italic; }
.cl-tab-close { display: grid; place-items: center; width: 15px; height: 15px; opacity: 0.55; }
.cl-tab-close:hover { opacity: 1; background: var(--cl-line); }
.cl-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-ink-2); }
.cl-tab-live { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-pass); box-shadow: 0 0 0 2px var(--cl-pass-bg); }

.cl-page { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   Bleed pages own their scrolling.

   A split view scrolls its panes independently — the scenario list on one side,
   the detail on the other. That only works if the page column itself does NOT
   scroll: otherwise the whole split moves together, and scrolling the list far
   enough drags the (shorter) detail pane off screen, leaving empty space beside
   a long list.

   So where a bleed page is present the column is pinned to the pane height and
   its own overflow is turned off, handing scrolling to the panes inside.
   --------------------------------------------------------------------------- */
.cl-page:has(> .cl-page-content > .cl-bleed) { overflow: hidden; }
.cl-page:has(> .cl-page-content > .cl-bleed) > .cl-page-content { height: 100%; min-height: 0; }

/* Each side scrolls on its own and never outruns the other. */
.cl-split-side { overscroll-behavior: contain; }
.cl-split-main { overscroll-behavior: contain; }

/* Lenis needs a content element inside its scroll wrapper. It must still let a
   full-bleed page (canvas, split view) fill the pane, so it is a flex column
   whose child grows rather than an auto-height div. */
.cl-page-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  container: cl-pane / inline-size;
}
.cl-page-content > * { flex: 1 1 auto; min-width: 0; }
.cl-page-pad { padding: 24px 28px 48px; max-width: 1280px; min-width: 0; }
.cl-page-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--cl-line); }
.cl-page-head-main { flex: 1 1 auto; min-width: 0; }
.cl-page-title { font-family: var(--serif); font-size: 30px; letter-spacing: -0.5px; line-height: 1.15; color: var(--cl-ink-heading); }
.cl-page-sub { margin-top: 8px; font-size: 14px; color: var(--cl-ink-2); max-width: 74ch; }
.cl-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* --- bottom panel --------------------------------------------------------- */
.cl-bottom { display: flex; flex: 1 1 auto; width: 100%; flex-direction: column; min-height: 0; background: var(--cl-panel); border-top: 1px solid var(--cl-line); }
.cl-bottom-head { display: flex; align-items: center; gap: 2px; height: 33px; flex: 0 0 auto; padding: 0 8px 0 0; border-bottom: 1px solid var(--cl-line); }
.cl-bottom-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 33px; padding: 0 13px;
  font-size: 12.5px; letter-spacing: 0.02em; cursor: pointer;
  color: var(--cl-ink-2);
  border-bottom: 2px solid transparent;
}
.cl-bottom-tab:hover { background: var(--cl-raised); }
.cl-bottom-tab[data-active="true"] { color: var(--cl-ink); font-family: var(--medium); border-bottom-color: var(--cl-ink); }
.cl-bottom-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px 14px; }

/* --- right agent sidebar -------------------------------------------------- */
.cl-agent { display: flex; flex: 1 1 auto; width: 100%; flex-direction: column; min-width: 0; min-height: 0; background: var(--cl-panel); border-left: 1px solid var(--cl-line); }
.cl-agent-head { flex: 0 0 auto; padding: 8px 10px; border-bottom: 1px solid var(--cl-line); }
.cl-agent-head-row { display: flex; align-items: center; gap: 6px; }
.cl-agent-title { flex: 1 1 auto; font-family: var(--medium); font-size: 13.5px; }
.cl-agent-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cl-agent-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.cl-agent-composer { flex: 0 0 auto; border-top: 1px solid var(--cl-line); padding: 8px; background: var(--cl-panel-2); }
.cl-agent-input {
  width: 100%; min-height: 62px; max-height: 180px; resize: none;
  padding: 9px 10px; font-size: 13.5px; line-height: 1.5;
  background: var(--cl-raised); border: 1px solid var(--cl-line);
  outline: none; transition: border-color 0.15s ease;
}
.cl-agent-input:focus { border-color: var(--cl-ink); }
.cl-agent-composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }

/* --- @mention picker (spec §6.2) ------------------------------------------
   Sits above the input because the composer is already at the bottom of the
   panel; opening downwards would push it off-screen. */
.cl-mention-picker {
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 6px;
  background: var(--cl-panel);
  border: 1px solid var(--cl-line-strong);
  border-radius: 12px;
}
.cl-mention-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--cl-line);
}
.cl-mention-item:last-child { border-bottom: none; }
.cl-mention-item[data-active='true'] { background: var(--cl-raised); }
.cl-mention-item-main { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.cl-mention-token { font-size: 11px; color: var(--cl-ink-3); flex: 0 0 auto; }
.cl-mention-label {
  font-family: var(--medium);
  font-size: 12.5px;
  color: var(--cl-ink-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-mention-detail {
  font-size: 11.5px;
  color: var(--cl-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- citation chips (spec §6.7) -------------------------------------------
   An answer cites the artifacts it drew on. The chip carries the human label;
   the opaque id is a tooltip, never the text. */
.cl-citations { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cl-citation {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--cl-ink);
  background: var(--cl-raised);
  border: 1px solid var(--cl-line-strong);
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-citation:hover:not(:disabled) { border-color: var(--cl-ink); }
.cl-citation:disabled { cursor: default; opacity: 0.75; }
.cl-citation-kind {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cl-ink-3); flex: 0 0 auto;
}

/* --- refusal card (spec §30) -----------------------------------------------
   Amber, not red: the agent declining a prohibited shortcut is correct
   behaviour, not a failure. Red here would read as "something went wrong". */
.cl-refusal { border-color: var(--cl-warn); }
.cl-refusal .cl-card-head { background: var(--cl-warn-bg); }
.cl-refusal .cl-card-title { color: var(--cl-warn); }
.cl-refusal-ask {
  font-size: 12.5px; line-height: 1.55;
  color: var(--cl-ink-2);
  margin-bottom: 7px;
}
.cl-refusal-why { font-size: 12.5px; line-height: 1.6; }

/* ============================================================================
   Monitoring / review mode (spec §46, below 900px)
   ----------------------------------------------------------------------------
   The shell keeps its title bar and status bar and drops the authoring
   furniture. The nav is a horizontal strip rather than a rail, because at this
   width a vertical icon column costs more than it returns.
   ========================================================================== */
.cl-monitor-nav {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--cl-panel-2);
  border-bottom: 1px solid var(--cl-line);
}
.cl-monitor-nav::-webkit-scrollbar { display: none; }
.cl-monitor-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--cl-ink-2);
  border-radius: 8px;
  cursor: pointer;
}
.cl-monitor-nav-btn[data-active='true'] {
  color: var(--cl-ink);
  background: var(--cl-raised);
  font-family: var(--medium);
}
.cl-monitor-nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px;
  font-size: 11px;
  color: #fff;
  background: var(--cl-deny);
}

.cl-monitor-status {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 11px;
  background: var(--cl-panel-2);
  border: 1px solid var(--cl-line);
  border-radius: 12px;
}
.cl-monitor-status-row { display: flex; align-items: center; gap: 7px; }

.cl-monitor-block { max-width: 560px; }

/* ============================================================================
   Compact density (spec §29)
   ----------------------------------------------------------------------------
   Tightens padding and row height only. Type size, colour and every semantic
   signal stay exactly as they are — density is about fitting more on screen,
   not about making the product harder to read.
   ========================================================================== */
.cl-shell[data-density='compact'] .cl-card-body { padding: 10px; }
.cl-shell[data-density='compact'] .cl-card-head { padding: 8px 10px; }
.cl-shell[data-density='compact'] .cl-page-pad { padding: 14px 16px 28px; }
.cl-shell[data-density='compact'] .cl-section { margin-bottom: 20px; }
.cl-shell[data-density='compact'] .cl-table th,
.cl-shell[data-density='compact'] .cl-table td { padding: 7px 10px; }
.cl-shell[data-density='compact'] .cl-list-row { padding: 6px 10px; }
.cl-shell[data-density='compact'] .cl-path-step { padding: 7px 10px; }
.cl-shell[data-density='compact'] .cl-kv dt,
.cl-shell[data-density='compact'] .cl-kv dd { padding: 5px 0; }

/* --- clarifying interview (spec §10, §30) ---------------------------------
   The agent stating it will not supply a financial figure. Amber and bordered
   so it reads as a deliberate position rather than a missing suggestion. */
.cl-interview-refusal {
  margin-top: 11px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cl-warn);
  background: var(--cl-warn-bg);
  border-left: 2px solid var(--cl-warn);
  border-radius: 0 8px 8px 0;
}

/* --- pending agent patch on its target page (spec §6.4) --------------------
   Marked as arriving from the agent so it is never mistaken for state the page
   itself is reporting. */
.cl-agent-patch { border-color: var(--cl-accent); }
.cl-agent-patch .cl-card-head { background: var(--cl-sim-bg, var(--cl-panel-2)); }

/* --- status bar ----------------------------------------------------------- */
.cl-statusbar {
  display: flex; align-items: center; gap: 0;
  height: var(--cl-statusbar-h);
  padding: 0 4px;
  background: var(--cl-chrome);
  color: var(--cl-ink-inv);
  font-size: 12px;
  overflow-x: auto; scrollbar-width: none;
  user-select: none;
}
.cl-statusbar::-webkit-scrollbar { height: 0; }

.cl-status-item {
  display: inline-flex; align-items: center; gap: 5px;
  height: 100%; padding: 0 10px; white-space: nowrap; cursor: pointer;
  transition: background 0.12s ease;
}
.cl-status-item:hover { background: rgba(254, 241, 208, 0.16); }
.cl-status-sep { width: 1px; height: 12px; background: var(--cl-line-chrome); flex: 0 0 auto; }
.cl-status-spacer { flex: 1 1 auto; }

/* --- resize handles ------------------------------------------------------- */
.cl-resizer {
  flex: 0 0 4px; width: 4px; cursor: col-resize; background: transparent;
  position: relative; z-index: 5; transition: background 0.15s ease;
}
.cl-resizer:hover, .cl-resizer[data-dragging="true"] { background: var(--cl-accent); }
.cl-resizer:focus-visible { outline: none; background: var(--cl-accent); }
.cl-resizer-h {
  flex: 0 0 4px; height: 4px; width: 100%; cursor: row-resize; background: transparent;
  transition: background 0.15s ease;
}
.cl-resizer-h:hover, .cl-resizer-h[data-dragging="true"] { background: var(--cl-accent); }
body.cl-resizing, body.cl-resizing * { cursor: col-resize !important; user-select: none !important; }
body.cl-resizing-v, body.cl-resizing-v * { cursor: row-resize !important; user-select: none !important; }

/* ============================================================================
   Buttons
   ========================================================================== */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  font-family: var(--medium); font-size: 13px; white-space: nowrap;
  color: var(--cl-ink); background: var(--cl-raised);
  border: 1px solid var(--cl-line-strong);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.cl-btn:hover:not(:disabled) { background: rgba(0, 66, 175, 0.08); border-color: var(--cl-ink); }
.cl-btn:active:not(:disabled) { background: rgba(0, 66, 175, 0.14); }
.cl-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.cl-btn:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 1px; }

.cl-btn-primary { color: var(--cl-ink-inv); background: var(--cl-ink); border-color: var(--cl-ink); }
.cl-btn-primary:hover:not(:disabled) { background: var(--cl-chrome); border-color: var(--cl-chrome); color: var(--cl-ink-inv); }

.cl-btn-danger { color: var(--cl-deny); border-color: rgba(168, 33, 26, 0.45); background: var(--cl-deny-bg); }
.cl-btn-danger:hover:not(:disabled) { background: var(--cl-deny); color: #fff; border-color: var(--cl-deny); }

.cl-btn-emergency {
  color: #fff; background: var(--cl-deny); border-color: var(--cl-deny);
  font-family: var(--medium); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px;
  height: 36px; padding: 0 18px;
}
.cl-btn-emergency:hover:not(:disabled) { background: #8c1a14; border-color: #8c1a14; }

/* Primary action sitting on a chrome bar: inverted so it reads against navy. */
.cl-btn-invert {
  background: var(--cl-canvas);
  border-color: var(--cl-canvas);
  color: var(--cl-chrome);
}
.cl-btn-invert:hover:not(:disabled) {
  background: #fff;
  border-color: #fff;
  color: var(--cl-chrome);
}

.cl-btn-ghost { background: transparent; border-color: transparent; }
.cl-btn-ghost:hover:not(:disabled) { background: rgba(0, 66, 175, 0.08); border-color: var(--cl-line); }

.cl-btn-sm { height: 28px; padding: 0 11px; font-size: 12px; }
.cl-btn-lg { height: 38px; padding: 0 20px; font-size: 14px; }
.cl-btn-block {
  width: 100%;
  height: auto;
  min-height: 32px;
  padding-block: 7px;
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
}

.cl-btn-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ============================================================================
   Badges — status / verdict / freshness / trust  (doc §8.1, §8.2, §33)
   Colour is never the only signal: every badge renders its text label.
   ========================================================================== */
.cl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px;
  font-family: var(--medium); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  background: var(--cl-blocked-bg);
  color: var(--cl-blocked);
}
.cl-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.cl-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.cl-badge[data-tone="pass"]    { color: var(--cl-pass);    background: var(--cl-pass-bg); }
.cl-badge[data-tone="warn"]    { color: var(--cl-warn);    background: var(--cl-warn-bg); }
.cl-badge[data-tone="deny"]    { color: var(--cl-deny);    background: var(--cl-deny-bg); }
.cl-badge[data-tone="sim"]     { color: var(--cl-sim);     background: var(--cl-sim-bg); }
.cl-badge[data-tone="data"]    { color: var(--cl-data);    background: var(--cl-data-bg); }
.cl-badge[data-tone="blocked"] { color: var(--cl-blocked); background: var(--cl-blocked-bg); }
.cl-badge[data-tone="neutral"] { color: var(--cl-ink-2);   background: rgba(0, 66, 175, 0.07); }

.cl-badge-lg { height: 26px; padding: 0 11px; font-size: 12px; }

/* live pulse — suppressed under reduced motion (doc §45) */
.cl-pulse { animation: cl-pulse 2.4s ease-in-out infinite; }
@keyframes cl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .cl-pulse { animation: none; }
  .cl-studio *, .cl-studio *::before, .cl-studio *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Badges on chrome.

   The verdict palette is tuned for the cream ground, so #9a6300 amber or
   #14714a green sitting on the navy title/status bar is close to unreadable.
   On chrome, badges switch to outline form with the light end of each hue.
   Meaning is unchanged — every badge still carries its text label.
   --------------------------------------------------------------------------- */
.cl-titlebar .cl-badge,
.cl-statusbar .cl-badge,
.cl-chrome-bar .cl-badge {
  background: transparent;
  border-color: currentColor;
}
.cl-titlebar .cl-badge[data-tone="pass"],
.cl-statusbar .cl-badge[data-tone="pass"],
.cl-chrome-bar .cl-badge[data-tone="pass"] { color: #4ac68a; }
.cl-titlebar .cl-badge[data-tone="warn"],
.cl-statusbar .cl-badge[data-tone="warn"],
.cl-chrome-bar .cl-badge[data-tone="warn"] { color: #e8b055; }
.cl-titlebar .cl-badge[data-tone="deny"],
.cl-statusbar .cl-badge[data-tone="deny"],
.cl-chrome-bar .cl-badge[data-tone="deny"] { color: #f5776d; }
.cl-titlebar .cl-badge[data-tone="sim"],
.cl-statusbar .cl-badge[data-tone="sim"],
.cl-chrome-bar .cl-badge[data-tone="sim"] { color: #b79cf7; }
.cl-titlebar .cl-badge[data-tone="data"],
.cl-statusbar .cl-badge[data-tone="data"],
.cl-chrome-bar .cl-badge[data-tone="data"] { color: #63c3de; }
.cl-titlebar .cl-badge[data-tone="blocked"],
.cl-statusbar .cl-badge[data-tone="blocked"],
.cl-chrome-bar .cl-badge[data-tone="blocked"] { color: #bcc2d4; }
.cl-titlebar .cl-badge[data-tone="neutral"],
.cl-statusbar .cl-badge[data-tone="neutral"],
.cl-chrome-bar .cl-badge[data-tone="neutral"] { color: var(--cl-ink-inv); }

/* A popover rendered inside a chrome bar is a cream panel, so badges within it
   must keep the normal light-ground palette rather than the chrome variant. */
[role="menu"] .cl-badge[data-tone="pass"]    { color: var(--cl-pass);    background: var(--cl-pass-bg);    border-color: currentColor; }
[role="menu"] .cl-badge[data-tone="warn"]    { color: var(--cl-warn);    background: var(--cl-warn-bg);    border-color: currentColor; }
[role="menu"] .cl-badge[data-tone="deny"]    { color: var(--cl-deny);    background: var(--cl-deny-bg);    border-color: currentColor; }
[role="menu"] .cl-badge[data-tone="sim"]     { color: var(--cl-sim);     background: var(--cl-sim-bg);     border-color: currentColor; }
[role="menu"] .cl-badge[data-tone="data"]    { color: var(--cl-data);    background: var(--cl-data-bg);    border-color: currentColor; }
[role="menu"] .cl-badge[data-tone="blocked"] { color: var(--cl-blocked); background: var(--cl-blocked-bg); border-color: currentColor; }
[role="menu"] .cl-badge[data-tone="neutral"] { color: var(--cl-ink-2);   background: rgba(0, 66, 175, 0.07); border-color: currentColor; }

/* Status-bar state dots use the same light hues. */
.cl-statusbar .cl-badge-dot { box-shadow: 0 0 0 1px rgba(254, 241, 208, 0.3); }

/* ============================================================================
   Surfaces: cards, sections, tables, key-value grids
   ========================================================================== */
.cl-card {
  background: var(--cl-panel);
  border: 1px solid var(--cl-line);
  /* Its own container, so key/value pairs inside can respond to the CARD's
     width rather than the page pane's. */
  container: cl-card / inline-size;
}

@container cl-card (max-width: 430px) {
  .cl-kv { grid-template-columns: minmax(0, 1fr); gap: 1px 0; }
  .cl-kv dt { margin-top: 9px; }
  .cl-kv dt:first-child { margin-top: 0; }
}
/* Wraps rather than clips: a header row of three "Open …" buttons is wider
   than a narrow centre pane, and a non-wrapping head hid the last button
   behind the card edge instead of dropping it to a second line. */
.cl-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--cl-line);
  background: var(--cl-panel-2);
}
.cl-card-head > .cl-row { flex-wrap: wrap; justify-content: flex-end; }
.cl-card-title { flex: 1 1 auto; min-width: 0; font-family: var(--medium); font-size: 13.5px; color: var(--cl-ink-heading); }
.cl-card-body { padding: 14px; }
.cl-card-body-flush { padding: 0; }

.cl-section { margin-bottom: 28px; }
.cl-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.cl-section-head .cl-label { flex: 0 0 auto; }
.cl-section-rule { flex: 1 1 auto; height: 1px; background: var(--cl-line); }

.cl-grid { display: grid; gap: 12px; }
.cl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-grid-auto { grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); }
/* Status tiles hold a label, a badge and a freshness stamp — narrower than a
   card, so they get their own track size and sit five across at full width. */
.cl-grid-tiles { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

/* Inline navigation inside prose: reads as a link, not a control. */
.cl-link {
  color: var(--cl-ink);
  font-family: var(--medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cl-link:hover { color: var(--cl-ink-2); }
.cl-grid-wide-narrow { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
@container cl-pane (max-width: 780px) {
  .cl-grid-wide-narrow { grid-template-columns: minmax(0, 1fr); }
}

.cl-kv { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); gap: 5px 14px; align-items: baseline; }

/* Below this the label column costs more than it explains, so pairs stack. */
@container cl-pane (max-width: 520px) {
  .cl-kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .cl-kv dt { margin-top: 8px; }
}
.cl-drawer .cl-kv { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 6px 12px; }
.cl-kv dt { font-size: 12.5px; color: var(--cl-ink-3); }
.cl-kv dd { margin: 0; font-size: 13.5px; min-width: 0; overflow-wrap: break-word; }

.cl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cl-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-family: var(--medium); font-size: 10.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cl-ink-2);
  /* kept in ink-2, not heading ink: a column label should not outweigh the
     data beneath it */
  padding: 9px 12px; background: var(--cl-panel-2);
  border-bottom: 1px solid var(--cl-line-strong);
  white-space: nowrap;
}
.cl-table td { padding: 10px 12px; border-bottom: 1px solid var(--cl-line); vertical-align: middle; }
.cl-table tbody tr { transition: background 0.1s ease; }
.cl-table tbody tr:hover { background: var(--cl-raised); }
.cl-table tbody tr[data-selected="true"] { background: rgba(0, 66, 175, 0.09); }
.cl-table tbody tr[data-clickable="true"] { cursor: pointer; }
.cl-table-scroll { overflow: auto; max-height: 100%; }

.cl-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-bottom: 1px solid var(--cl-line);
  cursor: pointer; transition: background 0.1s ease;
}
.cl-list-row:hover { background: var(--cl-raised); }
.cl-list-row[data-selected="true"] { background: rgba(0, 66, 175, 0.09); box-shadow: inset 2px 0 0 var(--cl-ink); }
/* Selectable path steps (runtime dependencies) carry the same selected
   treatment, so a selection reads identically wherever it is made (§6.6). */
.cl-path-step[data-selected="true"] { background: rgba(0, 66, 175, 0.09); box-shadow: inset 2px 0 0 var(--cl-ink); }

/* split view used by Simulation / Attack Lab / Code / Organization */
.cl-split { display: flex; flex: 1 1 auto; min-height: 0; }
.cl-split-side { flex: 0 0 290px; min-width: 0; overflow-y: auto; border-right: 1px solid var(--cl-line); background: var(--cl-panel); }
.cl-split-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }

/* ============================================================================
   Inputs
   ========================================================================== */
.cl-input, .cl-select, .cl-textarea {
  width: 100%; height: 32px; padding: 0 11px;
  font-size: 13.5px;
  background: var(--cl-raised); border: 1px solid var(--cl-line-strong);
  outline: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.cl-textarea { height: auto; min-height: 76px; padding: 8px 9px; line-height: 1.5; resize: vertical; }
.cl-input:focus, .cl-select:focus, .cl-textarea:focus { border-color: var(--cl-ink); background: #fff; }
.cl-input:disabled, .cl-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.cl-input::placeholder, .cl-textarea::placeholder { color: var(--cl-ink-3); }
.cl-select { appearance: none; cursor: pointer; padding-right: 24px; }
.cl-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cl-field-label { font-family: var(--medium); font-size: 12.5px; }
.cl-field-hint { font-size: 12px; color: var(--cl-ink-3); }

.cl-checkbox { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; }
.cl-checkbox input { width: 14px; height: 14px; margin-top: 2px; accent-color: var(--cl-ink); cursor: pointer; }

.cl-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--cl-line); }

/* ============================================================================
   Modals (doc §31)
   ========================================================================== */
.cl-modal-backdrop {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(1, 13, 110, 0.42);
  backdrop-filter: blur(2px);
  animation: cl-fade 0.14s ease-out;
}
@keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }
.cl-modal {
  width: min(620px, 100%); max-height: min(84vh, 760px);
  display: flex; flex-direction: column;
  background: var(--cl-panel); border: 1px solid var(--cl-ink);
  box-shadow: 0 18px 50px rgba(1, 13, 110, 0.28);
  animation: cl-rise 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cl-modal-wide { width: min(860px, 100%); }
.cl-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--cl-line); }
.cl-modal-title { flex: 1 1 auto; font-family: var(--serif); font-size: 21px; letter-spacing: -0.3px; color: var(--cl-ink-heading); }
.cl-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.cl-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cl-line); background: var(--cl-panel-2); }
.cl-modal-foot-spread { justify-content: space-between; }

/* security confirmation: current → requested state table */
.cl-statechange { border: 1px solid var(--cl-line-strong); background: var(--cl-raised); }
.cl-statechange-row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 14px; padding: 10px 13px; border-bottom: 1px solid var(--cl-line); font-size: 13.5px; }
.cl-statechange-row:last-child { border-bottom: none; }
.cl-statechange-row dt { font-size: 12px; color: var(--cl-ink-3); }
.cl-statechange-row dd { margin: 0; min-width: 0; overflow-wrap: break-word; }

.cl-modal-danger .cl-modal { border-color: var(--cl-deny); }
.cl-modal-danger .cl-modal-head { background: var(--cl-deny-bg); }
.cl-modal-danger .cl-modal-title { color: var(--cl-deny); }

/* ============================================================================
   Banners: blockers, stale, degraded, info (doc §32, §36)
   ========================================================================== */
.cl-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid currentColor;
  background: var(--cl-blocked-bg);
  color: var(--cl-blocked);
  font-size: 12.5px;
}
.cl-banner-main { flex: 1 1 auto; min-width: 0; color: var(--cl-ink); }
.cl-banner-title { font-family: var(--medium); font-size: 13.5px; color: inherit; }
.cl-banner-body { margin-top: 4px; font-size: 13px; color: var(--cl-ink-2); }
.cl-banner-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cl-banner svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
.cl-banner[data-tone="warn"]    { color: var(--cl-warn);    background: var(--cl-warn-bg); }
.cl-banner[data-tone="deny"]    { color: var(--cl-deny);    background: var(--cl-deny-bg); }
.cl-banner[data-tone="sim"]     { color: var(--cl-sim);     background: var(--cl-sim-bg); }
.cl-banner[data-tone="data"]    { color: var(--cl-data);    background: var(--cl-data-bg); }
.cl-banner[data-tone="pass"]    { color: var(--cl-pass);    background: var(--cl-pass-bg); }
.cl-banner[data-tone="neutral"] { color: var(--cl-ink-2);   background: rgba(0, 66, 175, 0.07); }

/* ============================================================================
   Empty states (doc §47) — what is this / why empty / what next
   ========================================================================== */
.cl-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 60ch; padding: 44px 4px; }
.cl-empty-title { font-family: var(--serif); font-size: 26px; letter-spacing: -0.4px; color: var(--cl-ink-heading); }
.cl-empty-body { font-size: 15px; line-height: 1.6; color: var(--cl-ink-2); }

/* ============================================================================
   Domain pieces: security path, authority matrix, steps, correlation trace
   ========================================================================== */
.cl-path { border: 1px solid var(--cl-line); background: var(--cl-panel); }
.cl-path-step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cl-line); font-size: 13.5px; }
.cl-path-step:last-child { border-bottom: none; }
.cl-path-step-name { flex: 0 0 190px; font-family: var(--medium); }
.cl-path-step-detail { flex: 1 1 auto; min-width: 0; color: var(--cl-ink-2); font-size: 13px; }

.cl-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cl-matrix-col { border: 1px solid var(--cl-line); background: var(--cl-panel); display: flex; flex-direction: column; }
.cl-matrix-col-head { padding: 9px 12px; border-bottom: 1px solid currentColor; font-family: var(--medium); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.cl-matrix-col[data-tone="pass"] .cl-matrix-col-head { color: var(--cl-pass); background: var(--cl-pass-bg); }
.cl-matrix-col[data-tone="warn"] .cl-matrix-col-head { color: var(--cl-warn); background: var(--cl-warn-bg); }
.cl-matrix-col[data-tone="deny"] .cl-matrix-col-head { color: var(--cl-deny); background: var(--cl-deny-bg); }
.cl-matrix-item { padding: 10px 14px; border-bottom: 1px solid var(--cl-line); font-size: 13.5px; }
.cl-matrix-item:last-child { border-bottom: none; }

.cl-steps { border: 1px solid var(--cl-line); background: var(--cl-panel); }
.cl-step {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--cl-line);
  cursor: pointer; transition: background 0.12s ease;
}
.cl-step:last-child { border-bottom: none; }
.cl-step:hover { background: var(--cl-raised); }
.cl-step-index {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--mono, ui-monospace); font-size: 11px;
  border: 1px solid var(--cl-line-strong); color: var(--cl-ink-2);
}
.cl-step-name { flex: 0 0 190px; min-width: 0; font-size: 13.5px; font-family: var(--medium); }
.cl-step-status { flex: 0 0 104px; display: flex; }
.cl-step-detail { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--cl-ink-3); }

.cl-trace { display: flex; flex-direction: column; padding-left: 6px; }
.cl-trace-node { position: relative; padding: 0 0 16px 22px; }
.cl-trace-node::before {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cl-panel); border: 2px solid var(--cl-ink);
}
.cl-trace-node::after {
  content: ""; position: absolute; left: 7.5px; top: 15px; bottom: 0;
  width: 1px; background: var(--cl-line-strong);
}
.cl-trace-node:last-child { padding-bottom: 0; }
.cl-trace-node:last-child::after { display: none; }
.cl-trace-title { font-size: 13.5px; font-family: var(--medium); }
.cl-trace-meta { font-size: 12px; color: var(--cl-ink-3); margin-top: 3px; }

/* blockchain refs / hashes */
.cl-ref { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; min-width: 0; }
.cl-ref-label { font-size: 13px; }
.cl-ref-value {
  overflow-wrap: break-word;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--cl-ink-2);
  padding: 2px 6px; background: rgba(0, 66, 175, 0.07); border: 1px solid var(--cl-line);
}
.cl-ref-copy { display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer; opacity: 0.6; transition: opacity 0.12s ease; }
.cl-ref-copy:hover { opacity: 1; }

/* skeletons (doc §32 first-load) */
.cl-skeleton { background: linear-gradient(90deg, rgba(0,66,175,0.07) 25%, rgba(0,66,175,0.13) 37%, rgba(0,66,175,0.07) 63%); background-size: 400% 100%; animation: cl-shimmer 1.4s ease infinite; }
@keyframes cl-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* toasts (doc §48 — lightweight feedback only) */
.cl-toasts { position: fixed; right: 14px; bottom: 34px; z-index: 500; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.cl-toast {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 13px;
  background: var(--cl-chrome); color: var(--cl-ink-inv);
  border: 1px solid var(--cl-line-chrome);
  animation: cl-rise 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}


/* command palette (doc §4.5) */
.cl-palette-backdrop { position: fixed; inset: 0; z-index: 450; display: flex; justify-content: center; padding-top: 12vh; background: rgba(1, 13, 110, 0.34); backdrop-filter: blur(2px); animation: cl-fade 0.12s ease-out; }
.cl-palette { width: min(620px, 92vw); max-height: 60vh; display: flex; flex-direction: column; background: var(--cl-panel); border: 1px solid var(--cl-ink); box-shadow: 0 18px 50px rgba(1, 13, 110, 0.3); animation: cl-rise 0.14s cubic-bezier(0.16,1,0.3,1); }
.cl-palette-input { height: 50px; padding: 0 16px; font-size: 15px; background: transparent; border: none; border-bottom: 1px solid var(--cl-line); outline: none; }
.cl-palette-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; }
.cl-palette-item { display: flex; align-items: center; gap: 10px; padding: 9px 15px; font-size: 13.5px; cursor: pointer; }
.cl-palette-item[data-active="true"] { background: rgba(0, 66, 175, 0.1); box-shadow: inset 2px 0 0 var(--cl-ink); }
.cl-palette-item-hint { margin-left: auto; font-size: 11.5px; color: var(--cl-ink-3); }

/* drawers used by inspectors (kept inside the centre pane per doc §13) */
.cl-drawer { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cl-panel); border-left: 1px solid var(--cl-line-strong); }

/* Floating inspector: sits over the canvas instead of competing for row width,
   so a narrow centre column can never clip it. Caps itself on small screens. */
.cl-drawer-float {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 336px;
  max-width: min(336px, 100%);
  z-index: 12;
  box-shadow: -14px 0 34px rgba(1, 13, 110, 0.16);
}
.cl-drawer-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cl-line); }
.cl-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }

/* scrollbars — thin, on-palette */
.cl-studio ::-webkit-scrollbar { width: 9px; height: 9px; -webkit-appearance: none; }
.cl-studio ::-webkit-scrollbar-track { background: transparent; }
.cl-studio ::-webkit-scrollbar-thumb { background: rgba(0, 66, 175, 0.22); border: 2px solid transparent; background-clip: padding-box; }
.cl-studio ::-webkit-scrollbar-thumb:hover { background: rgba(0, 66, 175, 0.4); background-clip: padding-box; }
.cl-studio * { scrollbar-width: thin; scrollbar-color: rgba(0, 66, 175, 0.28) transparent; }

/* utility */
.cl-row { display: flex; align-items: center; gap: 8px; }
.cl-row-wrap { flex-wrap: wrap; }
.cl-col { display: flex; flex-direction: column; gap: 8px; }
.cl-spacer { flex: 1 1 auto; }
.cl-hidden { display: none !important; }
.cl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Responsive (doc §46)
   ========================================================================== */
@media (max-width: 1179px) {
  .cl-agent-docked { display: none; }
  .cl-agent-drawer {
    position: fixed; top: var(--cl-titlebar-h); right: 0; bottom: var(--cl-statusbar-h);
    width: min(380px, 92vw); z-index: 300;
    box-shadow: -12px 0 34px rgba(1, 13, 110, 0.2);
  }
}
@media (max-width: 899px) {
  .cl-explorer { display: none; }
  .cl-monitor-only { display: block; }
  .cl-page-pad { padding: 14px 14px 32px; }
  .cl-matrix, .cl-grid-2, .cl-grid-3, .cl-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .cl-split { flex-direction: column; }
  .cl-split-side { flex: 0 0 auto; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--cl-line); }
}

/* ============================================================================
   Dark editor theme
   ----------------------------------------------------------------------------
   The Code surface is the one place the product genuinely is a code editor, so
   it flips to a dark ground the way an IDE does. This is a token swap only —
   every component keeps its exact structure, spacing and semantics, and the
   verdict palette keeps the same meanings, just re-tuned for a dark ground.
   ========================================================================== */
.cl-studio .cl-theme-dark,
.cl-studio.cl-theme-dark {
  /* Jet black ground with the panels lifted just enough to separate — the
     editor reads near-neutral, not navy. */
  --cl-canvas: #090909;
  --cl-panel: #121213;
  --cl-panel-2: #171718;
  --cl-raised: #1e1e20;
  --cl-chrome: #0c0c0d;
  --cl-chrome-2: #17171a;

  --cl-ink-heading: #f4f4f6;
  --cl-ink: #e4e4e7;
  --cl-ink-2: #a9a9b2;
  /* Was #74747f at 4.31:1 — also short of AA on the jet ground. */
  --cl-ink-3: #8b8b97;
  --cl-ink-inv: #e4e4e7;
  --cl-accent: #4589f7;

  --cl-line: rgba(225, 225, 235, 0.11);
  --cl-line-strong: rgba(225, 225, 235, 0.2);
  --cl-line-chrome: rgba(225, 225, 235, 0.1);
  --cl-canvas-dot: rgba(225, 225, 235, 0.14);

  --cl-pass: #4ac68a;
  --cl-pass-bg: rgba(74, 198, 138, 0.14);
  --cl-warn: #e0a33a;
  --cl-warn-bg: rgba(224, 163, 58, 0.15);
  --cl-deny: #f0645a;
  --cl-deny-bg: rgba(240, 100, 90, 0.15);
  --cl-sim: #a98bf5;
  --cl-sim-bg: rgba(169, 139, 245, 0.15);
  --cl-data: #49b6d6;
  --cl-data-bg: rgba(73, 182, 214, 0.15);
  --cl-blocked: #8b93a8;
  --cl-blocked-bg: rgba(139, 147, 168, 0.16);

  color: var(--cl-ink);
  background: var(--cl-canvas);
}

/* Serif display text is set in the light cream face; on the dark ground it
   needs a touch more weight to hold its colour. */
.cl-theme-dark .cl-page-title,
.cl-theme-dark .cl-empty-title,
.cl-theme-dark .cl-modal-title { color: var(--cl-ink); }

.cl-theme-dark .cl-btn-primary {
  background: var(--cl-accent);
  border-color: var(--cl-accent);
  color: #06101f;
}
.cl-theme-dark .cl-btn-primary:hover:not(:disabled) {
  background: #6ba3f9;
  border-color: #6ba3f9;
  color: #06101f;
}
.cl-theme-dark .cl-skeleton {
  background: linear-gradient(90deg, rgba(225,225,235,0.06) 25%, rgba(225,225,235,0.12) 37%, rgba(225,225,235,0.06) 63%);
  background-size: 400% 100%;
}
.cl-theme-dark ::-webkit-scrollbar-thumb { background: rgba(225, 225, 235, 0.2); background-clip: padding-box; }
.cl-theme-dark * { scrollbar-color: rgba(225, 225, 235, 0.24) transparent; }

/* ============================================================================
   Output log
   ----------------------------------------------------------------------------
   A build log rendered in one flat ink colour is a wall of text. Timestamp,
   scope and message each get their own weight, and the level tints the message
   so a failure is findable by scanning rather than by reading.
   ========================================================================== */
.cl-log {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.75;
  padding: 2px 0;
}
.cl-log-line {
  display: grid;
  grid-template-columns: 68px 76px minmax(0, 1fr);
  gap: 12px;
  padding: 1px 6px;
  border-left: 2px solid transparent;
}
.cl-log-line:hover { background: rgba(0, 66, 175, 0.06); }

/* Row-ruled variant: a hairline under each line so a long log scans as rows. */
.cl-log-rows { padding: 0; }
.cl-log-rows .cl-log-line {
  padding: 5px 10px;
  border-bottom: 1px solid var(--cl-line);
}
.cl-log-rows .cl-log-line:last-child { border-bottom: none; }
.cl-log-rows .cl-log-line:nth-child(even) { background: rgba(0, 66, 175, 0.028); }
.cl-log-rows .cl-log-line:nth-child(even):hover { background: rgba(0, 66, 175, 0.06); }
.cl-log-time { color: var(--cl-ink-3); }
.cl-log-scope { color: var(--cl-ink-3); opacity: 0.85; }
.cl-log-msg { color: var(--cl-ink-2); overflow-wrap: anywhere; }

.cl-log-line[data-level="step"] .cl-log-msg { color: var(--cl-ink); }
.cl-log-line[data-level="info"] .cl-log-msg { color: var(--cl-ink-2); }
.cl-log-line[data-level="pass"] .cl-log-msg { color: var(--cl-pass); }
.cl-log-line[data-level="warn"] {
  border-left-color: var(--cl-warn);
  background: var(--cl-warn-bg);
}
.cl-log-line[data-level="warn"] .cl-log-msg { color: var(--cl-warn); }
.cl-log-line[data-level="fail"] {
  border-left-color: var(--cl-deny);
  background: var(--cl-deny-bg);
}
.cl-log-line[data-level="fail"] .cl-log-msg { color: var(--cl-deny); }

@media (max-width: 899px) {
  .cl-log-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cl-log-scope { display: none; }
}


/* ============================================================================
   Terminal
   ----------------------------------------------------------------------------
   A terminal is dark regardless of the surrounding theme. This is a constrained
   sandbox shell, never a privileged host shell (spec §3.4).
   ========================================================================== */
.cl-terminal {
  margin: -8px -12px -14px;
  padding: 12px 14px 16px;
  min-height: 100%;
  background: #0b0f18;
  color: #ccd6e8;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
}
.cl-terminal pre { color: #c9d3e4; }
.cl-terminal .cl-banner {
  background: rgba(120, 160, 240, 0.09);
  border-color: rgba(150, 180, 245, 0.34);
  color: #9fb6e6;
}
.cl-terminal .cl-banner-main { color: #dbe4f5; }
.cl-terminal .cl-banner-body { color: #94a5c4; }
.cl-terminal .cl-banner-title { color: #dbe4f5; }
.cl-terminal-prompt { color: #6fc28c; }
.cl-terminal-path { color: #6ea8f0; }
.cl-terminal-caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  vertical-align: text-bottom;
  background: #c9d3e4;
}

/* ============================================================================
   Console (bottom panel)
   ----------------------------------------------------------------------------
   Problems, Output, Tests, Events and Terminal all live on a dark ground.
   The dark token block does the work, so tables, badges and logs inside follow
   automatically; these overrides keep the surfaces near-black but carrying a
   blue cast rather than true neutral black — against a cream page a pure-black
   panel reads as a hole punched in the layout, where a blue-tinted near-black
   reads as the same palette turned all the way down. Depth first, tint second:
   a mid navy lost the contrast the console needs to read as a console.
   ========================================================================== */
.cl-bottom.cl-console {
  --cl-canvas: #080b12;
  --cl-panel: #0b0f18;
  --cl-panel-2: #101623;
  --cl-raised: #18202f;
  --cl-line: rgba(150, 175, 225, 0.14);
  --cl-line-strong: rgba(150, 175, 225, 0.26);

  /* The dark block's ink is neutral grey, tuned for the jet editor. On a navy
     ground it reads muddy, so the console takes the same greys pulled towards
     blue. All four clear AA on both console surfaces. */
  --cl-ink-heading: #eaf0fb;
  --cl-ink: #d8e2f2;
  --cl-ink-2: #a9b8d4;
  --cl-ink-3: #8b9ab8;
  --cl-ink-inv: #d8e2f2;

  background: var(--cl-panel);
  border-top: 1px solid rgba(150, 175, 225, 0.22);
}
.cl-bottom.cl-console .cl-bottom-head { background: var(--cl-panel-2); }
.cl-bottom.cl-console .cl-table th { background: var(--cl-panel-2); }
.cl-bottom.cl-console .cl-bottom-tab[data-active="true"] {
  color: #dfe6f5;
  border-bottom-color: var(--cl-accent);
}
.cl-bottom.cl-console .cl-log-rows .cl-log-line:nth-child(even) { background: rgba(150, 175, 225, 0.035); }
.cl-bottom.cl-console .cl-log-line:hover { background: rgba(150, 175, 225, 0.07); }

/* The terminal tab is already midnight; drop its own ground so it inherits. */
.cl-bottom.cl-console .cl-terminal { background: transparent; }

/* ============================================================================
   Theme change — left-to-right sweep
   ----------------------------------------------------------------------------
   The shell switches tokens instantly underneath; a sheet painted in the colour
   being left behind then slides off to the right, so the new theme appears to
   wash across the screen. The leading edge carries a soft gradient and a thin
   highlight so it reads as a wave rather than a rectangle.

   Purely decorative: skipped entirely under reduced motion.
   ========================================================================== */
.cl-theme-wave {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  will-change: clip-path;
  animation: cl-theme-wave 720ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* soft leading edge, so the boundary is a gradient rather than a hard cut */
.cl-theme-wave::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 18vw;
  min-width: 120px;
  background: linear-gradient(90deg, transparent 0%, currentColor 88%, currentColor 100%);
  opacity: 0.55;
}

/* thin highlight riding the crest */
.cl-theme-wave::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 2px;
  background: var(--cl-accent);
  opacity: 0.5;
  filter: blur(1px);
}

@keyframes cl-theme-wave {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

/* The chrome underneath still cross-fades, so the trailing edge does not reveal
   a hard colour switch. Only while the change is happening — leaving these on
   would make hover sluggish, since they animate the same properties. */
.cl-theme-shift .cl-titlebar,
.cl-theme-shift .cl-rail,
.cl-theme-shift .cl-explorer,
.cl-theme-shift .cl-center,
.cl-theme-shift .cl-agent,
.cl-theme-shift .cl-statusbar,
.cl-theme-shift .cl-tabbar,
.cl-theme-shift .cl-card,
.cl-theme-shift .cl-card-head {
  transition:
    background-color 620ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 620ms cubic-bezier(0.4, 0, 0.2, 1),
    color 560ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .cl-theme-wave { display: none; }
  .cl-theme-shift .cl-titlebar,
  .cl-theme-shift .cl-rail,
  .cl-theme-shift .cl-explorer,
  .cl-theme-shift .cl-center,
  .cl-theme-shift .cl-agent,
  .cl-theme-shift .cl-statusbar,
  .cl-theme-shift .cl-tabbar,
  .cl-theme-shift .cl-card,
  .cl-theme-shift .cl-card-head {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Title bar under pressure

   The bar carries a lot at full width. Rather than let it clip arbitrarily,
   the least load-bearing parts stand down first: the build status label before
   the revision labels, and the revision labels before the revision values.
   --------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .cl-titlebar-build-label { display: none; }
}

@media (max-width: 1380px) {
  .cl-rev-seg-label { display: none; }
  .cl-rev-seg { padding: 0 8px; }
}

@media (max-width: 1220px) {
  .cl-titlebar-mark { display: none; }
}

@media (max-width: 1100px) {
  .cl-rev-chip .cl-rev-seg + .cl-rev-seg { display: none; }
}

/* ============================================================================
   Corner treatment
   ----------------------------------------------------------------------------
   Containers and controls are softened; status badges stay square.

   That split is the point of the spec's "use rounded corners sparingly": a
   badge like DENY, STALE or LOCKED is a machine state, and a square chip reads
   as a readout on an instrument where a pill reads as a friendly label. The
   surfaces around them can soften without costing that.
   ========================================================================== */
.cl-btn { border-radius: 8px; }
.cl-btn-sm { border-radius: 7px; }
.cl-btn-lg { border-radius: 9px; }
.cl-chip,
.cl-env-badge,
.cl-cmd-field,
.cl-icon-btn { border-radius: 8px; }
.cl-rev-chip { border-radius: 8px; overflow: hidden; }

.cl-input,
.cl-select,
.cl-textarea,
.cl-agent-input { border-radius: 8px; }

.cl-card,
.cl-banner,
.cl-path,
.cl-steps,
.cl-statechange,
.cl-matrix-col,
.cl-modal,
.cl-palette { border-radius: 12px; }

.cl-card,
.cl-path,
.cl-steps,
.cl-statechange,
.cl-matrix-col,
.cl-modal,
.cl-palette { overflow: hidden; }

.cl-toast { border-radius: 10px; }
.cl-ref-value { border-radius: 6px; }

/* Navigation entries read as pills, inset so the rounding has room. */
.cl-nav-item {
  border-radius: 8px;
  border-left-color: transparent;
  margin: 1px 8px;
  width: calc(100% - 16px);
  padding-left: 11px;
}
.cl-nav-item[data-active="true"] { border-left-color: transparent; }

/* Status badges stay square, deliberately. */
.cl-badge { border-radius: 0; }

/* The editor sits in a rounded well rather than meeting the panes square. */
.cl-editor-well {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--cl-line);
  margin: 0 12px 12px;
}

/* Chrome bars and the console carry their own ground, so headings there keep
   the inverted ink rather than the near-black used on the cream canvas. */
.cl-titlebar .cl-card-title,
.cl-statusbar .cl-card-title,
.cl-chrome-bar .cl-card-title { color: inherit; }