.code-explorer-root {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--txt);
}

.ce-toolbar {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-surface);
}

.ce-version-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--txt-s);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ce-version-select {
  max-width: 250px;
  min-width: 160px;
  color: var(--txt);
  background: var(--bg-el);
  border: 1px solid var(--bdr);
}

.ce-compare-toggle.active { color: var(--brand); border-color: var(--brand); background: var(--brand-d); }
.ce-compare-kind { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--bdr); background: var(--bg-el); }
.ce-compare-kind .active { color: var(--brand); border-color: var(--brand); background: var(--brand-d); }
.ce-cross-patchbay {
  max-height: 46vh;
  overflow: auto;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--bdr);
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--brand) 14%, transparent) 50%, transparent 50.2%),
    var(--bg-el);
}
.ce-cross-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.ce-cross-heading h2 { margin: 0; color: var(--txt); font: 700 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.ce-cross-heading p { margin: 3px 0 0; color: var(--txt-s); font-size: 10px; }
.ce-cross-truth { padding: 3px 7px; color: var(--warn); border: 1px solid var(--warn); font: 700 8px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.ce-cross-setup,
.ce-cross-mapping-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px minmax(260px, 1fr);
  gap: 10px;
  align-items: stretch;
}
.ce-cross-plc-card,
.ce-cross-routine-field {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--bdr);
  background: var(--bg-surface);
}
.ce-cross-plc-card { display: grid; gap: 4px; }
.ce-cross-plc-card strong { overflow: hidden; color: var(--txt); font: 700 12px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.ce-cross-plc-card small { color: var(--txt-s); font: 9px/1.3 var(--mono); }
.ce-cross-card-label,
.ce-cross-lane-label { color: var(--brand); font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.ce-cross-target-card { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; }
.ce-cross-rail,
.ce-cross-map-decision {
  position: relative;
  display: grid;
  min-width: 0;
  place-content: center;
  gap: 4px;
  padding: 8px;
  color: var(--brand);
  border-block: 1px dashed var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--bg-el));
  font: 700 9px/1.35 var(--mono);
  text-align: center;
}
.ce-cross-map-decision small { color: var(--txt-s); font-size: 8px; font-weight: 400; }
.ce-cross-map-ambiguous { color: var(--warn); border-block: 3px double var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--bg-el)); }
.ce-cross-map-unmapped { color: var(--txt-s); border-color: var(--bdr-a); background: var(--bg-el); }
.ce-cross-empty { padding: 12px; color: var(--txt-s); font: 9px/1.4 var(--mono); text-align: center; }
.ce-cross-mapping-grid { margin-top: 10px; }
.ce-cross-choice { display: contents; }
.ce-cross-routine-field { align-content: start; }
.ce-cross-routine-field .ce-edit-kind { width: 100%; }
.ce-cross-confirm { justify-self: start; margin-top: 7px; }
.ce-cross-confirmed-lane {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 10px;
  color: var(--txt);
  border: 1px solid var(--brand);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--brand) 7%, var(--bg-surface));
  font: 9px/1.3 var(--mono);
}
.ce-cross-confirmed-lane strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-cross-lane-arrow { color: var(--brand); font-size: 16px; }
.ce-compare-loading { font-family: var(--mono); }
.ce-compare-group .ce-tree-item { flex-direction: column; align-items: flex-start; gap: 3px; }
.ce-compare-group .ce-tree-item small { color: var(--txt-s); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.ce-change-added { border-left: 3px solid var(--acc) !important; }
.ce-change-removed { border-left: 3px solid var(--crit) !important; }
.ce-change-changed, .ce-change-modified_operand, .ce-change-modified_topology { border-left: 3px solid var(--warn) !important; }
.ce-change-ambiguous { border-left: 3px double var(--info) !important; }
.ce-compare-nav { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bg-surface); border-bottom: 1px solid var(--bdr); }
.ce-change-label { padding-left: 8px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.ce-compare-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 860px; }
.ce-compare-side { min-width: 0; border-right: 1px solid var(--bdr); overflow-x: auto; }
.ce-compare-side:last-child { border-right: 0; }
.ce-compare-side-title { position: sticky; z-index: 2; top: 45px; margin: 0; padding: 7px 10px; color: var(--brand); background: var(--bg-el); border-bottom: 1px solid var(--bdr); font-family: var(--mono); font-size: 10px; }
.ce-compare-rung-mount .ce-routine-title, .ce-compare-rung-mount .ce-load-sentinel { display: none; }
.ce-partial-warning, .ce-ambiguous { padding: 8px 10px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--bg-surface)); border-bottom: 1px solid var(--warn); font-family: var(--mono); font-size: 9px; text-align: center; }
.ce-compare-alignment-note { padding: 5px 10px; color: var(--txt-s); background: var(--bg-el); border-bottom: 1px solid var(--bdr); font-family: var(--mono); font-size: 8px; text-align: center; text-transform: uppercase; }
.ce-compare-summary-band { padding: 8px 12px; background: var(--bg-el); border-bottom: 1px solid var(--bdr); }
.ce-compare-summary-title { margin: 0 0 6px; color: var(--txt); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.ce-compare-summary-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-summary-dim { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 3px; }
.ce-summary-dim-label { color: var(--txt-s); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.ce-summary-chip { color: var(--warn); font-family: var(--mono); font-size: 9px; }
.ce-summary-chip.ce-summary-nochange { color: var(--txt-s); font-style: italic; }

.ce-breadcrumb {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(230px, 285px) minmax(420px, 1fr) minmax(250px, 320px);
}

.ce-navigation,
.ce-context {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--bg-surface);
}

.ce-navigation { border-right: 1px solid var(--bdr); }
.ce-context { border-left: 1px solid var(--bdr); padding: 10px; }

.ce-search-input {
  position: sticky;
  z-index: 3;
  top: 0;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 8px 9px;
  color: var(--txt);
  background: var(--bg-el);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  font-size: 11px;
}

.ce-search-input:focus { border-color: var(--brand); outline: 1px solid var(--brand); }
.ce-tree, .ce-tags, .ce-search-results { padding: 0 8px 10px; }

.ce-tree-group {
  margin: 3px 0;
  border-left: 1px solid transparent;
}

.ce-tree-group[open] { border-left-color: var(--bdr); }

.ce-tree-summary {
  padding: 5px 5px;
  cursor: pointer;
  color: var(--txt);
  font-size: 11px;
  font-weight: 600;
  list-style-position: inside;
}

.ce-tree-meta {
  padding: 0 8px 4px 21px;
  color: var(--txt-s);
  font-family: var(--mono);
  font-size: 9px;
}

.ce-tree-item,
.ce-tag-row,
.ce-search-result,
.ce-xref-row {
  display: flex;
  width: calc(100% - 8px);
  margin: 2px 4px 2px 12px;
  padding: 5px 7px;
  text-align: left;
  color: var(--txt);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
}

.ce-tree-item:hover,
.ce-tree-item:focus,
.ce-tag-row:hover,
.ce-tag-row:focus,
.ce-search-result:hover,
.ce-search-result:focus,
.ce-xref-row:hover,
.ce-xref-row:focus {
  color: var(--brand);
  background: var(--brand-d);
  outline: none;
}

.ce-search-result { gap: 7px; margin: 3px 0; }
.ce-search-kind {
  min-width: 62px;
  color: var(--brand);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}
.ce-search-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ce-search-body small, .ce-tag-row small, .ce-xref-row small { color: var(--txt-s); font-weight: 400; }
.ce-tag-row, .ce-xref-row { flex-direction: column; gap: 3px; margin-left: 0; }
.ce-tag-page-heading { display: flex; justify-content: space-between; padding: 8px 3px; color: var(--txt-s); font-size: 10px; }
.ce-tags-back, .ce-more { margin: 7px 0; }

.ce-routine {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scroll-behavior: smooth;
  background:
    linear-gradient(rgba(127, 127, 127, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 127, 127, .025) 1px, transparent 1px),
    var(--bg-base);
  background-size: 20px 20px;
}

.ce-routine-title {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  color: var(--txt);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  border-bottom: 1px solid var(--bdr);
  backdrop-filter: blur(8px);
  font-size: 11px;
}

.ce-routine-title span { color: var(--txt-s); font-family: var(--mono); font-size: 9px; }
.ce-rung-card { position: relative; margin: 10px; border: 1px solid var(--bdr); border-radius: 5px; background: var(--bg-surface); overflow: hidden; }
.ce-rung-card:target, .ce-rung-card:hover { border-color: color-mix(in srgb, var(--brand) 58%, var(--bdr)); }
.ce-rung-card.ce-selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ce-rung-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; border-bottom: 1px solid var(--bdr); }
.ce-rung-fidelity { min-width: 0; padding: 3px 8px; color: var(--txt-s); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.ce-rung-view-toggle { display: flex; align-items: stretch; align-self: stretch; }
.ce-rung-view-button { padding: 3px 9px; color: var(--txt-s); background: transparent; border: 0; border-left: 1px solid var(--bdr); font: 700 8px var(--mono); text-transform: uppercase; cursor: pointer; }
.ce-rung-view-button:hover, .ce-rung-view-button.active { color: var(--brand); background: var(--brand-d); }
.ce-rung-view-button:disabled { color: var(--txt-m); cursor: not-allowed; }
.ce-ladder-mount { min-height: 72px; overflow-x: auto; }
.ce-rung-text-view[hidden], .ce-ladder-mount[hidden] { display: none; }
.ce-raw-comment { padding: 8px 12px 0; color: var(--txt-s); font-size: 10px; font-style: italic; }
.ce-raw-rung { margin: 0; padding: 12px; white-space: pre-wrap; color: var(--txt); font-family: var(--mono); font-size: 10px; }
.ce-load-sentinel { display: block; width: calc(100% - 20px); margin: 10px; padding: 10px; color: var(--brand); background: var(--brand-d); border: 1px dashed var(--brand); cursor: pointer; }

.ce-context-title { margin-bottom: 10px; color: var(--brand); font-family: var(--mono); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.ce-context-subtitle { margin: 13px 0 5px; padding-top: 8px; color: var(--txt-s); border-top: 1px solid var(--bdr); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ce-context-field { display: grid; grid-template-columns: minmax(70px, .75fr) 1.25fr; gap: 8px; padding: 4px 0; font-size: 10px; }
.ce-context-field span { color: var(--txt-s); }
.ce-context-field strong { overflow-wrap: anywhere; text-align: right; }
.ce-context-description { color: var(--txt); line-height: 1.45; font-size: 10px; }
.ce-provenance, .ce-truth-note { margin: 5px 0; padding: 5px 7px; color: var(--txt-s); background: var(--bg-el); border-left: 2px solid var(--brand); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.ce-xref-row { position: relative; padding-left: 48px; }
.ce-direction { position: absolute; left: 5px; top: 6px; padding: 2px 4px; border-radius: 3px; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.ce-instruction-mnemonic { color: var(--brand); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.ce-read { color: var(--info); background: color-mix(in srgb, var(--info) 16%, transparent); }
.ce-write { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

.ce-empty { display: grid; min-height: 120px; place-items: center; padding: 20px; color: var(--txt-s); text-align: center; font-size: 11px; }
.ce-error { color: var(--crit); }
.ce-error::before { content: '\26A0'; margin-right: 6px; }

.ce-edit-toggle.active { color: var(--brand); border-color: var(--brand); background: var(--brand-d); }
.ce-mode-indicator {
  padding: 3px 9px;
  border: 1px solid var(--bdr);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
.ce-mode-bypass { color: var(--crit); border-color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.ce-mode-auto { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.ce-mode-manual { color: var(--acc); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.ce-edit-panel {
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-el);
  padding: 10px 12px;
}
.ce-edit-session-shell { display: grid; gap: 10px; }
.ce-mode-gate {
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto;
  align-items: end;
  gap: 10px;
  max-width: 960px;
}
.ce-mode-title { grid-column: 1 / -1; color: var(--txt); font-size: 12px; }
.ce-mode-gate .ce-edit-note { grid-column: 1 / -1; }
.ce-edit-form {
  display: grid;
  gap: 10px;
  max-width: 960px;
}
.ce-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.ce-edit-field {
  display: grid;
  gap: 4px;
  color: var(--txt-s);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ce-edit-input, .ce-edit-kind {
  color: var(--txt);
  background: var(--bg-surface);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.ce-rung-composer {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  color: var(--txt);
  background: var(--bg-base);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  text-transform: none;
  letter-spacing: 0;
}
.ce-rung-composer-heading,
.ce-rung-preview-heading,
.ce-rung-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.ce-rung-composer-heading > div { display: grid; gap: 2px; min-width: 0; }
.ce-rung-composer-heading strong,
.ce-rung-preview-heading strong { font-size: 11px; }
.ce-rung-composer-heading span,
.ce-rung-preview-heading span,
.ce-rung-source > span { color: var(--txt-s); font-size: 9px; }
.ce-rung-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.ce-rung-tool,
.ce-rung-add-operand,
.ce-rung-remove,
.ce-rung-syntax-token {
  color: var(--txt-s);
  background: var(--bg-el);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  font: 700 9px var(--mono);
  cursor: pointer;
}
.ce-rung-tool { padding: 5px 8px; }
.ce-rung-tool:hover,
.ce-rung-add-operand:hover,
.ce-rung-remove:hover,
.ce-rung-syntax-token:hover { color: var(--brand); border-color: var(--brand); }
.ce-rung-token-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  background:
    linear-gradient(90deg, var(--brand) 0 2px, transparent 2px calc(100% - 2px), var(--brand) calc(100% - 2px)),
    linear-gradient(var(--bdr), var(--bdr)) center / 100% 1px no-repeat,
    var(--bg-surface);
  border: 1px solid var(--bdr);
  border-radius: 4px;
}
.ce-rung-instruction {
  display: grid;
  flex: 1 1 210px;
  gap: 6px;
  min-width: 180px;
  max-width: 360px;
  padding: 7px;
  background: color-mix(in srgb, var(--bg-surface) 94%, var(--brand));
  border: 1px solid var(--bdr);
  border-radius: 4px;
}
.ce-rung-instruction-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ce-rung-instruction-head > span { color: var(--txt-s); font: 700 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.ce-rung-remove { padding: 2px 5px; font-size: 8px; }
.ce-rung-cell { display: grid; gap: 3px; min-width: 0; padding: 3px; border: 1px solid transparent; border-radius: 4px; }
.ce-rung-cell > span { overflow: hidden; color: var(--txt-s); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ce-rung-cell-current { border-color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
.ce-rung-mnemonic,
.ce-rung-operand {
  min-width: 0;
  width: 100%;
  padding: 5px 6px;
  color: var(--txt);
  background: var(--bg-base);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  outline: 0;
  font: 11px var(--mono);
}
.ce-rung-mnemonic { color: var(--brand); font-weight: 800; text-transform: uppercase; }
.ce-rung-mnemonic:focus,
.ce-rung-operand:focus { border-color: var(--brand); }
.ce-rung-operands { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 5px; min-width: 0; }
.ce-rung-add-operand { align-self: end; min-height: 29px; padding: 4px 7px; }
.ce-rung-syntax-wrap {
  display: grid;
  flex: 0 0 72px;
  gap: 3px;
}
.ce-rung-syntax-token {
  display: grid;
  place-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 5px;
  text-align: center;
}
.ce-rung-syntax-token strong { color: var(--brand); font-size: 18px; }
.ce-rung-syntax-token span { font-size: 7px; text-transform: uppercase; }
.ce-rung-syntax-wrap .ce-rung-remove { width: 100%; }
.ce-rung-terminator { align-self: center; padding: 6px; color: var(--brand); font: 800 18px var(--mono); }
.ce-rung-literal-token { align-self: center; max-width: 240px; padding: 6px; color: var(--crit); border: 1px dashed var(--crit); font: 10px var(--mono); overflow-wrap: anywhere; }
.ce-rung-source { padding: 5px 7px; background: var(--bg-el); border-left: 2px solid var(--brand); }
.ce-rung-source-code { min-width: 0; overflow-wrap: anywhere; color: var(--txt); font: 10px var(--mono); text-align: right; }
.ce-rung-preview { min-width: 0; overflow: hidden; border: 1px solid var(--bdr); border-radius: 4px; background: var(--bg-surface); }
.ce-rung-preview-heading { padding: 5px 8px; border-bottom: 1px solid var(--bdr); }
.ce-rung-preview-heading span { color: var(--warn); font-family: var(--mono); text-transform: uppercase; }
.ce-rung-preview-mount { min-height: 72px; overflow-x: auto; }
.ce-rung-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px;
  max-height: 240px;
  padding: 6px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--brand);
  border-radius: 4px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg-base) 70%, transparent);
}
.ce-rung-suggestions[hidden] { display: none; }
.ce-rung-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: baseline;
  min-width: 0;
  padding: 6px 7px;
  color: var(--txt);
  background: var(--bg-el);
  border: 1px solid transparent;
  border-radius: 3px;
  text-align: left;
  cursor: pointer;
}
.ce-rung-suggestion:hover,
.ce-rung-suggestion:focus { border-color: var(--brand); outline: 0; }
.ce-rung-suggestion strong { color: var(--brand); font: 800 10px var(--mono); }
.ce-rung-suggestion span { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ce-rung-suggestion small { color: var(--txt-s); font-size: 8px; }
.ce-rung-suggestion-label,
.ce-rung-suggestion-hint,
.ce-rung-suggestion-empty { grid-column: 1 / -1; color: var(--txt-s); font-size: 9px; }
.ce-rung-suggestion-label { color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ce-rung-suggestion-hint { text-align: right; }
.ce-rung-suggestion-empty { padding: 5px; }
.ce-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ce-edit-note {
  margin: 0;
  color: var(--txt-s);
  font-size: 11px;
  max-width: 52ch;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.ce-edit-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bdr);
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-surface);
}
/* The verified badge carries its own qualifier, so it must never wrap in a way
   that leaves "VERIFIED" alone on a line reading as a bare success tick. */
.ce-status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--bdr);
  white-space: nowrap;
}
.ce-status-verified .ce-status-badge,
.ce-status-badge.ce-status-verified {
  color: var(--acc);
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
}
.ce-status-blocked .ce-status-badge,
.ce-status-badge.ce-status-blocked {
  color: var(--crit);
  border-color: var(--crit);
  background: color-mix(in srgb, var(--crit) 14%, transparent);
}
.ce-status-unproven .ce-status-badge,
.ce-status-badge.ce-status-unproven {
  color: var(--warn);
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.ce-status-message { color: var(--txt); }
.ce-status-code { color: var(--txt-s); }
.ce-status-basis, .ce-status-snapshot { color: var(--txt-s); font-size: 10px; }
/* The limit line is the one caveat an engineer must not skim past. */
.ce-edit-limit { color: var(--warn); }
.ce-status-basis { flex-basis: 100%; }
.ce-aoi-impact {
  flex: 1 0 100%;
  padding: 8px 10px;
  border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  color: var(--fg);
}
.ce-aoi-impact-title { color: var(--warn); }
.ce-aoi-impact-list {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.45;
  max-height: 320px;
  overflow-y: auto;
}
/* The one authoritative count. It lives outside the use list so paging can
   never leave a stale copy behind. */
.ce-aoi-impact-progress {
  margin: 6px 0 0;
  color: var(--warn);
}
.ce-aoi-impact-source {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.ce-aoi-impact-more {
  margin-top: 6px;
  padding: 3px 8px;
  color: var(--fg);
  background: var(--bg-surface);
  border: 1px solid var(--bdr);
  cursor: pointer;
}
/* Acknowledgement happens here, in the page, not in a truncating dialog. */
.ce-edit-approval {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--warn);
  background: var(--bg-surface);
}
.ce-edit-approval-line { margin: 0; color: var(--fg); }
.ce-edit-approval-question { margin: 0; color: var(--warn); font-weight: 600; }
.ce-edit-approval-actions { display: flex; gap: 8px; }
.ce-edit-approve, .ce-edit-decline {
  padding: 4px 10px;
  border: 1px solid var(--bdr);
  cursor: pointer;
}
.ce-edit-approve { color: var(--bg); background: var(--warn); }
.ce-edit-decline { color: var(--fg); background: var(--bg-surface); }

.ce-live-observer {
  border-bottom: 2px solid var(--brand);
  background: var(--bg-el);
  padding: 10px 12px;
}
.ce-live-observer-heading,
.ce-live-observer-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
}
.ce-live-observer-heading { justify-content: space-between; }
.ce-live-observer-identity { margin-top: 6px; color: var(--muted); }
.ce-live-observer-status { color: var(--muted); }
.ce-live-observer-status.ok { color: var(--ok); }
.ce-live-observer-status.warn { color: var(--warn); }
.ce-live-observer-status.error { color: var(--crit); }
.ce-change-list {
  margin-top: 12px;
  border: 1px solid var(--bdr);
  border-radius: 5px;
  background: var(--bg-surface);
}
.ce-change-list-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bdr);
}
.ce-change-list-heading h2 { margin: 2px 0 0; font-size: 13px; }
.ce-change-kicker,
.ce-change-count {
  color: var(--muted);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: .08em;
}
.ce-change-items {
  display: grid;
  max-height: 38vh;
  overflow: auto;
}
.ce-change-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(180px, .8fr) auto;
  gap: 6px 14px;
  align-items: center;
  padding: 11px 12px 11px 30px;
  border-bottom: 1px solid var(--bdr);
  font-size: 10px;
}
.ce-change-item:last-child { border-bottom: 0; }
.ce-change-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 1px;
  background: var(--bdr);
  content: '';
}
.ce-change-item::after {
  position: absolute;
  top: 17px;
  left: 11px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ok);
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 12%, transparent);
  content: '';
}
.ce-change-lineage,
.ce-change-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-family: var(--mono);
}
.ce-change-parent,
.ce-change-time { color: var(--muted); }
.ce-change-trace { color: var(--brand); }
.ce-change-output { color: var(--fg); }
.ce-change-hash {
  padding: 2px 5px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, transparent);
}
.ce-change-mode { color: var(--brand); }
.ce-change-proof,
.ce-change-limit {
  grid-column: 1 / 3;
  margin: 0;
  color: var(--muted);
}
.ce-change-conversation {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  padding: 5px 8px;
  border: 1px solid var(--brand);
  border-radius: 3px;
  color: var(--brand);
  font: 700 10px/1 var(--mono);
  text-decoration: none;
  white-space: nowrap;
}
.ce-change-conversation:hover { background: var(--brand-d); }
.ce-change-conversation:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ce-change-empty {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 18px 12px;
  color: var(--muted);
  font-size: 11px;
}
.ce-change-empty strong { color: var(--fg); }
.ce-change-error { margin: 0; padding: 18px 12px; color: var(--crit); }
.ce-live-artifact-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.ce-live-proposal-column,
.ce-live-verified-column {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--bdr);
  border-radius: 5px;
  background: var(--bg-surface);
}
.ce-live-proposal-column { border-left: 4px solid var(--warn); }
.ce-live-verified-column { border-left: 4px solid var(--ok); }
.ce-live-proposal-column h3,
.ce-live-verified-column h3 { margin: 0; font-size: 11px; }
.ce-live-warning { margin: 3px 0 8px; color: var(--muted); font-size: 10px; }
.ce-live-proposals,
.ce-live-verified-outputs { display: grid; gap: 8px; max-height: 34vh; overflow: auto; }
.ce-live-proposal,
.ce-live-verified-output {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--bdr);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
}
.ce-live-proposal { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.ce-live-verified-output { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.ce-live-proposal .ce-live-artifact-label { color: var(--warn); }
.ce-live-verified-output .ce-live-artifact-label { color: var(--ok); }
.ce-live-sequence { color: var(--muted); }
.ce-live-proposal-code {
  max-height: 24vh;
  margin: 3px 0 0;
  overflow: auto;
  color: var(--fg);
  white-space: pre-wrap;
}

.ce-legend {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 15px;
  padding: 4px 10px;
  overflow-x: auto;
  color: var(--txt-s);
  background: var(--bg-surface);
  border-top: 1px solid var(--bdr);
  font-family: var(--mono);
  font-size: 8px;
  white-space: nowrap;
}

.ce-legend span::before { content: '●'; margin-right: 5px; color: var(--brand); }

@media (max-width: 1050px) {
  .ce-grid { grid-template-columns: 235px minmax(400px, 1fr); }
  .ce-context { position: absolute; z-index: 5; right: 0; width: min(330px, 42vw); height: calc(100% - 77px); box-shadow: -8px 0 24px rgba(0, 0, 0, .2); }
}

@media (max-width: 680px) {
  .ce-mode-gate { grid-template-columns: 1fr; align-items: stretch; }
  .ce-mode-title, .ce-mode-gate .ce-edit-note { grid-column: 1; }
}

@media (max-width: 720px) {
  .ce-toolbar { flex-wrap: wrap; }
  .ce-rung-composer-heading { align-items: stretch; flex-direction: column; }
  .ce-rung-instruction { max-width: none; }
  .ce-rung-suggestions { grid-template-columns: minmax(0, 1fr); }
  .ce-compare-kind { order: 2; }
  .ce-breadcrumb { order: 3; flex-basis: 100%; }
  .ce-cross-patchbay { max-height: none; background: var(--bg-el); }
  .ce-cross-heading { align-items: stretch; flex-direction: column; }
  .ce-cross-truth { width: max-content; }
  .ce-cross-setup,
  .ce-cross-mapping-grid { grid-template-columns: 1fr; }
  .ce-cross-target-card { grid-template-columns: 1fr; }
  .ce-cross-rail,
  .ce-cross-map-decision { min-height: 54px; border: 1px dashed var(--brand); }
  .ce-cross-confirmed-lane { grid-template-columns: 1fr; }
  .ce-cross-lane-arrow { transform: rotate(90deg); justify-self: center; }
  .ce-grid { display: flex; flex-direction: column; }
  .ce-navigation { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--bdr); }
  .ce-routine { min-height: 45vh; }
  .ce-context { position: static; width: auto; height: auto; max-height: 40vh; border-left: 0; border-top: 1px solid var(--bdr); box-shadow: none; }
  .ce-version-select { min-width: 120px; max-width: 180px; }
  .ce-compare-sides { grid-template-columns: 1fr; min-width: 0; }
  .ce-compare-side { border-right: 0; border-bottom: 1px solid var(--bdr); }
  .ce-edit-fields { grid-template-columns: 1fr; }
  .ce-change-item { grid-template-columns: 1fr; }
  .ce-change-proof, .ce-change-limit, .ce-change-conversation {
    grid-column: 1;
    grid-row: auto;
  }
  .ce-change-conversation { width: max-content; }
  .ce-live-artifact-columns { grid-template-columns: 1fr; }
}
.ce-observer-page {
  min-height: 100vh;
  margin: 0;
  background: var(--bg-deep);
  color: var(--txt);
  font-family: var(--font-ui, system-ui, sans-serif);
}

.ce-observer-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.ce-observer-masthead {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 24px;
  align-items: start;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--bdr);
}

.ce-observer-masthead h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(24px, 4vw, 44px);
  letter-spacing: -0.04em;
}

.ce-observer-masthead p {
  margin: 8px 0 0;
  color: var(--muted);
}

.ce-observer-lock {
  padding: 8px 10px;
  border: 1px solid var(--warn);
  color: var(--warn);
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
}

.ce-observer-page .ce-live-observer {
  margin-top: 24px;
}

@media (max-width: 640px) {
  .ce-observer-masthead { grid-template-columns: 1fr; }
  .ce-observer-lock { width: max-content; }
}

/* Junior-engineer legibility scale. The PLC content stays dense enough to
   compare, but no action or truth label falls below the shared caption size. */
.ce-toolbar { min-height: 58px; gap: 14px; padding: 8px 12px; }
.ce-version-label,
.ce-tree-meta,
.ce-search-kind,
.ce-tag-page-heading,
.ce-rung-fidelity,
.ce-routine-title span,
.ce-context-subtitle,
.ce-provenance,
.ce-truth-note,
.ce-direction,
.ce-instruction-mnemonic,
.ce-mode-indicator,
.ce-status-badge,
.ce-status-basis,
.ce-status-snapshot,
.ce-change-kicker,
.ce-change-count,
.ce-live-warning,
.ce-legend { font-size: var(--text-caption); }
.ce-version-select,
.ce-edit-input,
.ce-edit-kind,
.ce-rung-mnemonic,
.ce-rung-operand {
  min-height: var(--control-h);
  padding: 8px 10px;
  font-size: var(--text-code);
}
.ce-breadcrumb,
.ce-routine-title,
.ce-context-title,
.ce-mode-title,
.ce-change-list-heading h2 { font-size: var(--text-heading); }
.ce-search-input {
  min-height: var(--control-h);
  margin: 10px;
  padding: 9px 11px;
  font-size: var(--text-body);
}
.ce-tree-summary,
.ce-tree-item,
.ce-tag-row,
.ce-search-result,
.ce-xref-row,
.ce-context-field,
.ce-context-description,
.ce-empty,
.ce-edit-note,
.ce-edit-status,
.ce-change-item,
.ce-change-empty,
.ce-live-observer-heading,
.ce-live-observer-identity,
.ce-live-proposal,
.ce-live-verified-output { font-size: var(--text-support); }
.ce-tree-summary { min-height: 40px; padding: 9px 7px; }
.ce-tree-item,
.ce-tag-row,
.ce-search-result,
.ce-xref-row {
  min-height: 40px;
  padding: 9px;
  line-height: 1.4;
}
.ce-search-kind { min-width: 76px; }
.ce-routine-title { min-height: 48px; padding: 10px 14px; font-weight: 650; }
.ce-rung-card { margin: 14px; }
.ce-rung-toolbar { min-height: 40px; }
.ce-rung-fidelity { padding: 7px 10px; }
.ce-rung-view-button {
  min-height: 40px;
  padding: 7px 12px;
  font: 700 var(--text-caption) var(--mono);
}
.ce-raw-comment { padding: 12px 14px 0; font-size: var(--text-support); line-height: 1.5; }
.ce-raw-rung { padding: 14px; font-size: var(--text-code); line-height: 1.65; }
.ce-context { padding: 14px; }
.ce-context-field { padding: 7px 0; }
.ce-context-description { line-height: var(--leading-body); }
.ce-edit-panel { padding: 14px; }
.ce-edit-field { gap: 6px; font-size: var(--text-caption); }
.ce-rung-composer { gap: 10px; padding: 12px; }
.ce-rung-composer-heading strong,
.ce-rung-preview-heading strong { font-size: var(--text-body); }
.ce-rung-composer-heading span,
.ce-rung-preview-heading span,
.ce-rung-source > span,
.ce-rung-cell > span,
.ce-rung-suggestion span,
.ce-rung-suggestion small,
.ce-rung-suggestion-label,
.ce-rung-suggestion-hint,
.ce-rung-suggestion-empty { font-size: var(--text-caption); }
.ce-rung-tool,
.ce-rung-add-operand,
.ce-rung-remove,
.ce-rung-syntax-token { min-height: var(--control-h-sm); font-size: var(--text-caption); }
.ce-rung-tool { padding: 7px 10px; }
.ce-rung-instruction { gap: 8px; padding: 10px; }
.ce-rung-instruction-head > span { font-size: var(--text-caption); }
.ce-rung-cell { gap: 5px; }
.ce-rung-add-operand { min-height: var(--control-h); }
.ce-rung-source { padding: 8px 10px; }
.ce-rung-source-code { font-size: var(--text-code); line-height: 1.5; }
.ce-rung-preview-heading { min-height: 40px; padding: 8px 10px; }
.ce-rung-suggestion { min-height: 40px; padding: 8px 9px; }
.ce-rung-suggestion strong { font-size: var(--text-code); }
.ce-edit-status { gap: 12px; padding: 10px 14px; line-height: 1.5; }
.ce-status-badge { padding: 5px 9px; }
.ce-edit-approve,
.ce-edit-decline,
.ce-aoi-impact-more,
.ce-change-conversation { min-height: var(--control-h-sm); padding: 8px 10px; font-size: var(--text-support); }
.ce-change-item { padding-block: 14px; }
.ce-live-observer { padding: 14px; }
.ce-live-artifact-columns { gap: 14px; }
.ce-live-proposal,
.ce-live-verified-output { padding: 10px; line-height: 1.5; }
.ce-live-proposal-code { font-size: var(--text-code); line-height: 1.6; }
.ce-legend { min-height: 40px; padding: 7px 12px; }