:root {
  color-scheme: light;
  --bg: #f5f6f3;
  --surface: #ffffff;
  --surface-muted: #eef1ed;
  --field-bg: #ffffff;
  --border: #d5d9d3;
  --text: #172026;
  --muted: #65717b;
  --accent: #1f6f78;
  --accent-strong: #174f56;
  --danger: #a63d40;
  --warning: #8a6a1f;
  --success: #16834a;
  --success-strong: #0f6537;
  --success-border: color-mix(in srgb, #16834a, white 55%);
  --demo: #5b21b6;
  --demo-strong: #4c1d95;
  --brand-bg: #1f6f78;
  --tree-edge: #a5b1ae;
  --tree-edge-selected: #1f6f78;
  --chip-bg: #edf0f2;
  --chip-text: #42505a;
  --quantity-chip-bg: #f3ead7;
  --quantity-chip-text: #6f551b;
  --position-tag-bg: color-mix(in srgb, #f6c244, transparent 78%);
  --position-tag-border: color-mix(in srgb, #b8860b, transparent 55%);
  --position-tag-text: #5a3700;
  --document-type-color: #2f6f8f;
  --thumbnail-placeholder-bg: #eef1f4;
  --thumbnail-placeholder-text: #8f98a3;
  --selected-bg: color-mix(in srgb, var(--accent), white 88%);
  --selected-border: color-mix(in srgb, var(--accent), white 58%);
  --danger-border: color-mix(in srgb, var(--danger), white 55%);
  --focus-ring: color-mix(in srgb, var(--accent), transparent 82%);
  --backdrop: rgb(15 22 30 / 48%);
  --shadow: 0 20px 50px rgb(25 35 45 / 12%);
  --switch-off-bg: #d7dce2;
  --switch-on-bg: #34c759;
  --switch-knob-bg: #ffffff;
  --switch-knob-shadow: 0 3px 8px rgb(0 0 0 / 18%), 0 1px 2px rgb(0 0 0 / 12%);
  --primary-button-bg: linear-gradient(180deg, #1b6871 0%, #12464d 100%);
  --primary-button-bg-hover: linear-gradient(180deg, #185b63 0%, #0e383e 100%);
  --primary-button-border: #0e3d43;
  --success-button-bg: linear-gradient(180deg, #126d3e 0%, #0a4c2b 100%);
  --success-button-bg-hover: linear-gradient(180deg, #105f36 0%, #073f23 100%);
  --success-button-border: #083f24;
  --load-button-bg: linear-gradient(180deg, #355f87 0%, #234160 100%);
  --load-button-bg-hover: linear-gradient(180deg, #2e5275 0%, #1c344f 100%);
  --load-button-border: #203a57;
  --danger-button-bg: linear-gradient(180deg, #943236 0%, #6f2226 100%);
  --danger-button-bg-hover: linear-gradient(180deg, #812b2f 0%, #5e1b20 100%);
  --danger-button-border: #5d1d21;
  --demo-button-bg: linear-gradient(180deg, #5320a3 0%, #35156f 100%);
  --demo-button-bg-hover: linear-gradient(180deg, #46198e 0%, #2b105d 100%);
  --demo-button-border: #2f1466;
  --semantic-button-shadow: 0 1px 2px rgb(15 23 42 / 18%), inset 0 1px 0 rgb(255 255 255 / 16%);
  --semantic-button-shadow-hover: 0 3px 8px rgb(15 23 42 / 22%), inset 0 1px 0 rgb(255 255 255 / 12%);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101417;
  --surface: #171d21;
  --surface-muted: #20272c;
  --field-bg: #11171b;
  --border: #333d44;
  --text: #eef3f4;
  --muted: #a6b1b8;
  --accent: #57a8b0;
  --accent-strong: #8ccbd0;
  --danger: #e37a7d;
  --warning: #d4aa45;
  --success: #59c889;
  --success-strong: #8ce4ad;
  --success-border: color-mix(in srgb, #59c889, transparent 42%);
  --demo: #8b5cf6;
  --demo-strong: #a78bfa;
  --brand-bg: #2d8791;
  --tree-edge: #4b5b61;
  --tree-edge-selected: #8ccbd0;
  --chip-bg: #283138;
  --chip-text: #d7e0e4;
  --quantity-chip-bg: #463a22;
  --quantity-chip-text: #f1d38c;
  --position-tag-bg: color-mix(in srgb, #f6c244, transparent 70%);
  --position-tag-border: color-mix(in srgb, #b8860b, transparent 35%);
  --position-tag-text: #f4d27d;
  --document-type-color: #8ccbd0;
  --thumbnail-placeholder-bg: #252c31;
  --thumbnail-placeholder-text: #8d99a2;
  --selected-bg: color-mix(in srgb, var(--accent), transparent 82%);
  --selected-border: color-mix(in srgb, var(--accent), transparent 42%);
  --danger-border: color-mix(in srgb, var(--danger), transparent 42%);
  --focus-ring: color-mix(in srgb, var(--accent), transparent 72%);
  --backdrop: rgb(0 0 0 / 62%);
  --shadow: 0 20px 50px rgb(0 0 0 / 32%);
  --switch-off-bg: #4a535b;
  --switch-on-bg: #34c759;
  --switch-knob-bg: #ffffff;
  --switch-knob-shadow: 0 3px 9px rgb(0 0 0 / 34%), 0 1px 2px rgb(0 0 0 / 24%);
  --primary-button-bg: linear-gradient(180deg, #277982 0%, #1a535b 100%);
  --primary-button-bg-hover: linear-gradient(180deg, #226b73 0%, #15464d 100%);
  --primary-button-border: #2c8791;
  --success-button-bg: linear-gradient(180deg, #1d814d 0%, #125b35 100%);
  --success-button-bg-hover: linear-gradient(180deg, #196f43 0%, #0f4d2d 100%);
  --success-button-border: #238b53;
  --load-button-bg: linear-gradient(180deg, #3b6d9d 0%, #264b70 100%);
  --load-button-bg-hover: linear-gradient(180deg, #345f89 0%, #203f61 100%);
  --load-button-border: #4376a8;
  --danger-button-bg: linear-gradient(180deg, #a9484d 0%, #7b2b31 100%);
  --danger-button-bg-hover: linear-gradient(180deg, #943d42 0%, #6b242a 100%);
  --danger-button-border: #ad4f54;
  --demo-button-bg: linear-gradient(180deg, #6330b8 0%, #43207d 100%);
  --demo-button-bg-hover: linear-gradient(180deg, #5629a0 0%, #37196b 100%);
  --demo-button-border: #7040c4;
  --semantic-button-shadow: 0 1px 2px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 12%);
  --semantic-button-shadow-hover: 0 3px 9px rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 10%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}

.mobile-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--accent), white 84%);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .mobile-banner {
  background: color-mix(in srgb, var(--accent), transparent 78%);
}

.quarantine-banner {
  background: color-mix(in srgb, var(--danger), white 86%);
  border-bottom-color: color-mix(in srgb, var(--danger), transparent 70%);
}

:root[data-theme="dark"] .quarantine-banner {
  background: color-mix(in srgb, var(--danger), transparent 76%);
}

.mobile-banner[hidden] {
  display: none;
}

.mobile-banner-copy {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text);
}

.mobile-banner-copy strong {
  display: block;
  font-weight: 700;
}

.mobile-banner-dismiss {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.mobile-banner-dismiss svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border-radius: 8px;
  flex: 0 0 auto;
}

.global-search {
  position: relative;
  flex: 1 1 520px;
  max-width: 720px;
  min-width: 280px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 8px;
  z-index: 15;
}

.global-search-field {
  position: relative;
  min-width: 0;
  display: block;
}

.global-search-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  box-shadow: 0 1px 0 rgb(0 0 0 / 3%);
}

.global-search-field input:focus,
.global-search-filters select:focus {
  outline: 3px solid var(--focus-ring);
  border-color: var(--accent);
}

.global-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}

.global-search-filter-toggle {
  display: none;
  width: 38px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.global-search-filter-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-search-filter-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--selected-bg);
}

.global-search-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.global-search-filters select {
  max-width: 132px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 680;
}

.global-search-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  max-height: min(540px, calc(100vh - 112px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.global-search-popover[hidden] {
  display: none;
}

.global-search-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 4px;
}

.global-search-results {
  display: grid;
  gap: 4px;
  max-height: 460px;
  overflow: auto;
}

.global-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.global-search-result.active,
.global-search-result:hover {
  border-color: var(--selected-border);
  background: var(--selected-bg);
}

.global-search-result-title,
.global-search-result-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.global-search-result-title {
  font-weight: 780;
}

.global-search-result-meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.global-search-result-scope,
.global-search-result-type {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.version-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f4c542;
  color: #2f3437;
  padding: 0 8px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 1.1rem;
  line-height: 1.2;
}

h2 {
  font-size: 0.98rem;
  line-height: 1.3;
}

h3 {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.3;
}

p {
  color: var(--muted);
  font-size: 0.82rem;
}

.toolbar,
.action-row,
.dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.locale-select {
  min-height: 36px;
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
}

.locale-select select {
  min-height: 36px;
  width: auto;
  min-width: 108px;
}

.icon-button,
.command-button,
.primary-button,
.success-button,
.load-button,
.danger-button,
.demo-button,
.ghost-button {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-weight: 650;
}

.toolbar .icon-button,
.toolbar .command-button,
.toolbar .primary-button,
.toolbar .success-button,
.toolbar .load-button,
.toolbar .danger-button,
.toolbar .demo-button,
.toolbar .ghost-button,
.toolbar .file-command {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}

.icon-button {
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

/* Toolbar locale toggle: same footprint as .icon-button, but the
 * "DE"/"EN" label needs a touch of horizontal padding so the
 * 2-character text doesn't crowd the rounded border. */
.locale-toggle-button {
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 36px;
}

.locale-toggle-button:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 50%);
  background: color-mix(in srgb, var(--accent), transparent 92%);
}

.locale-toggle-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.icon-button-svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.toolbar .icon-button {
  font-size: 1.05rem;
}

.primary-button {
  border-color: var(--primary-button-border);
  background: var(--primary-button-bg);
  color: white;
  box-shadow: var(--semantic-button-shadow);
}

.primary-button:hover {
  border-color: var(--primary-button-border);
  background: var(--primary-button-bg-hover);
  box-shadow: var(--semantic-button-shadow-hover);
}

.danger-button {
  border-color: var(--danger-button-border);
  background: var(--danger-button-bg);
  color: white;
  box-shadow: var(--semantic-button-shadow);
}

.danger-button:hover {
  background: var(--danger-button-bg-hover);
  border-color: var(--danger-button-border);
  box-shadow: var(--semantic-button-shadow-hover);
}

.success-button {
  border-color: var(--success-button-border);
  background: var(--success-button-bg);
  color: white;
  box-shadow: var(--semantic-button-shadow);
}

.success-button:hover {
  background: var(--success-button-bg-hover);
  border-color: var(--success-button-border);
  box-shadow: var(--semantic-button-shadow-hover);
}

.load-button {
  border-color: var(--load-button-border);
  background: var(--load-button-bg);
  color: white;
  box-shadow: var(--semantic-button-shadow);
}

.load-button:hover {
  background: var(--load-button-bg-hover);
  border-color: var(--load-button-border);
  box-shadow: var(--semantic-button-shadow-hover);
}

.demo-button {
  border-color: var(--demo-button-border);
  background: var(--demo-button-bg);
  color: white;
  box-shadow: var(--semantic-button-shadow);
}

.demo-button:hover {
  background: var(--demo-button-bg-hover);
  border-color: var(--demo-button-border);
  box-shadow: var(--semantic-button-shadow-hover);
}

.toolbar .primary-button,
.toolbar .success-button,
.toolbar .load-button,
.toolbar .danger-button,
.toolbar .demo-button {
  width: 96px;
  flex: 0 0 96px;
}

.ghost-button {
  background: transparent;
}

.file-command {
  display: inline-flex;
  align-items: center;
}

.file-command input {
  display: none;
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(300px, 0.9fr) minmax(300px, 0.9fr) minmax(360px, 0.95fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.workbench-toolbar {
  grid-column: 1 / -1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.workbench-toolbar > .segmented-control {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.workbench-toolbar > .segmented-control::-webkit-scrollbar {
  display: none;
}

.workbench-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.toolbar-switch {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.toolbar-switch:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 50%);
  background: color-mix(in srgb, var(--accent), transparent 92%);
}

.toolbar-switch-control {
  width: 42px;
  height: 24px;
  position: relative;
  flex: 0 0 auto;
  display: block;
}

.toolbar-switch input {
  width: 42px;
  height: 24px;
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toolbar-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--switch-off-bg);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 7%);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.toolbar-switch-track::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: var(--switch-knob-bg);
  box-shadow: var(--switch-knob-shadow);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.toolbar-switch input:checked + .toolbar-switch-track {
  background: var(--switch-on-bg);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 3%);
}

.toolbar-switch input:checked + .toolbar-switch-track::before {
  transform: translateX(18px);
}

.toolbar-switch input:focus-visible + .toolbar-switch-track {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Each panel can be toggled independently. The workspace grid has up
 * to four columns (model, EBOM, MBOM, inspector); hidden panels drop
 * out via display:none and the grid-template-columns is rewritten for
 * every visible-set so the remaining panels distribute the space
 * sensibly. The JS layer ensures at least one panel stays visible so
 * the user never lands on an empty workspace.
 *
 * NOTE: the `.workspace.rflp-focus` block further down keeps
 * `!important` on its grid-template-columns because these visible-set
 * selectors carry higher specificity (4-5 classes). Without
 * !important, the focused detail layout would silently lose to whatever
 * panel-set was active before. New branches below MUST stay in this
 * specificity range; if you exceed it, also bump the rflp-focus rule.
 */
.workspace:not(.show-model) #model-structure-panel,
.workspace:not(.show-ebom) #ebom-structure-panel,
.workspace:not(.show-mbom) #mbom-structure-panel,
.workspace:not(.show-inspector) #detail-panel {
  display: none;
}

/* 3 visible — model still on */
.workspace.show-model.show-ebom.show-mbom:not(.show-inspector) {
  grid-template-columns: minmax(340px, 1.05fr) minmax(300px, 0.9fr) minmax(300px, 0.9fr);
}

.workspace.show-model.show-ebom:not(.show-mbom).show-inspector,
.workspace.show-model:not(.show-ebom).show-mbom.show-inspector {
  grid-template-columns: minmax(340px, 1.08fr) minmax(320px, 0.94fr) minmax(360px, 0.92fr);
}

/* 3 visible — model off */
.workspace:not(.show-model).show-ebom.show-mbom.show-inspector {
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) minmax(360px, 0.92fr);
}

/* 2 visible — model + one other */
.workspace.show-model.show-ebom:not(.show-mbom):not(.show-inspector),
.workspace.show-model:not(.show-ebom).show-mbom:not(.show-inspector) {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
}

.workspace.show-model:not(.show-ebom):not(.show-mbom).show-inspector {
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.72fr);
}

/* 2 visible — model off */
.workspace:not(.show-model).show-ebom.show-mbom:not(.show-inspector) {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
}

.workspace:not(.show-model).show-ebom:not(.show-mbom).show-inspector,
.workspace:not(.show-model):not(.show-ebom).show-mbom.show-inspector {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 0.72fr);
}

/* 1 visible — single panel takes the row, with a reasonable max for
 * readability on wide viewports.
 */
.workspace.show-model:not(.show-ebom):not(.show-mbom):not(.show-inspector),
.workspace:not(.show-model).show-ebom:not(.show-mbom):not(.show-inspector),
.workspace:not(.show-model):not(.show-ebom).show-mbom:not(.show-inspector),
.workspace:not(.show-model):not(.show-ebom):not(.show-mbom).show-inspector {
  grid-template-columns: minmax(420px, 1fr);
}

/* Detail-focus tabs collapse the workspace to a single column regardless
 * of which panels were toggled visible.
 * `!important` is intentional: the visible-set selectors above carry
 * higher specificity (4-5 classes) and would otherwise win — and we
 * really do want the focus mode to override every panel-visibility
 * layout decision.
 */
.workspace.rflp-focus {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace.rflp-focus #model-structure-panel,
.workspace.rflp-focus #ebom-structure-panel,
.workspace.rflp-focus #mbom-structure-panel {
  display: none;
}

.workspace.rflp-focus #detail-panel {
  display: grid;
  grid-column: 1 / -1;
}

.workspace.deployment-focus {
  grid-template-columns: minmax(420px, 0.62fr) minmax(0, 1.38fr) !important;
}

.workspace.deployment-focus #model-structure-panel,
.workspace.deployment-focus #detail-panel {
  display: grid;
}

.workspace.deployment-focus #model-structure-panel {
  grid-column: 1;
}

.workspace.deployment-focus #detail-panel {
  grid-column: 2;
}

.workspace.deployment-focus #ebom-structure-panel,
.workspace.deployment-focus #mbom-structure-panel {
  display: none;
}

.tree-panel,
.detail-panel {
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.tree-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  container-type: inline-size;
  container-name: tree-panel;
}

.detail-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  container-type: inline-size;
  container-name: detail-panel;
}

.panel-header {
  min-height: 64px;
  padding: 14px 20px 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.panel-header > div:first-child {
  min-width: 0;
}

#model-structure-panel .panel-header {
  gap: 10px;
}

#model-structure-panel .panel-header p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-actions {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;
  margin: -2px;
  scrollbar-width: none;
}

.model-actions::-webkit-scrollbar {
  display: none;
}

.tree-panel .model-actions {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 5px;
}

.model-action-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: white;
  padding: 0;
  box-shadow: 0 1px 2px rgb(15 23 42 / 12%);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.tree-panel .model-action-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 7px;
}

.model-action-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.tree-panel .model-action-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.5;
}

.model-action-icon:hover {
  box-shadow: 0 3px 8px rgb(15 23 42 / 16%);
  transform: translateY(-1px);
}

.model-action-icon:active {
  box-shadow: 0 1px 2px rgb(15 23 42 / 12%);
  transform: translateY(0);
}

.model-action-icon:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 3px 8px rgb(15 23 42 / 16%);
}

.add-node-icon {
  background: linear-gradient(180deg, #15783f 0%, #0b552d 100%);
  border-color: #0a4826;
}

.add-node-icon:hover {
  background: linear-gradient(180deg, #12683a 0%, #084725 100%);
}

.delete-node-icon {
  background: linear-gradient(180deg, #ad373c 0%, #84262a 100%);
  border-color: #742125;
}

.delete-node-icon:hover {
  background: linear-gradient(180deg, #973035 0%, #6f1f23 100%);
}

.duplicate-node-icon {
  background: linear-gradient(180deg, #1f56d0 0%, #173b9c 100%);
  border-color: #163486;
}

.duplicate-node-icon:hover {
  background: linear-gradient(180deg, #1b49b5 0%, #133381 100%);
}

.move-node-icon {
  background: linear-gradient(180deg, #506526 0%, #374819 100%);
  border-color: #2f3c15;
}

.move-node-icon:hover {
  background: linear-gradient(180deg, #43551f 0%, #2f3d15 100%);
}

/* Dialog close (X) icon buttons share the lightbox close-button treatment: a
   strong red fill with a white X for unmistakable visibility, in both themes.
   Scoped to [data-dialog-cancel] so only the corner close buttons turn red —
   the add/delete/duplicate/move action icons keep their own colours, and the
   text cancel/close buttons (ghost-/primary-button) are untouched. */
.model-action-icon[data-dialog-cancel] {
  background: var(--danger-button-bg);
  border-color: var(--danger-button-border);
  color: white;
}

.model-action-icon[data-dialog-cancel]:hover {
  background: var(--danger-button-bg-hover);
  border-color: var(--danger-button-border);
}

.variant-rule-icon {
  background: linear-gradient(180deg, #9c7611 0%, #6d5109 100%);
  border-color: #604707;
}

.variant-rule-icon:hover {
  background: linear-gradient(180deg, #86650e 0%, #5c4306 100%);
}

.tree-collapse-icon,
.tree-expand-icon {
  background: linear-gradient(180deg, #3f4d60 0%, #2d3848 100%);
  border-color: #263242;
}

.tree-collapse-icon:hover,
.tree-expand-icon:hover {
  background: linear-gradient(180deg, #354254 0%, #263142 100%);
}

.tree-structure-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.model-action-icon:disabled {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.panel-header.compact {
  min-height: 58px;
}

.tree-root {
  overflow: auto;
  /* Asymmetric: trim the left gutter (root node sits almost flush with
     the panel border) while keeping vertical breathing room and the
     right reserve that protects chips from the panel border. */
  padding: 8px 8px 8px 4px;
}

.tree-canvas {
  position: relative;
  min-width: 100%;
}

.tree-edge-layer {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.tree-edge {
  fill: none;
  stroke: var(--tree-edge);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.tree-edge.selected {
  stroke: var(--tree-edge-selected);
  stroke-width: 2.2;
}

.tree-row-layer {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 100%;
}

/* The 16 px right reserve on virtualized rows is the load-bearing
 * guarantee that chips never touch the panel border:
 *   panel border
 *   -- tree-panel border (1 px)
 *   -- tree-root padding (8 px)
 *   -- tree-row right reserve (16 px)  <-- this rule
 *   -- tree-row padding-right (12 px on the .tree-row rule)
 *   -- chip right edge
 * That is 37 px of unconditional gap, independent of grid behavior,
 * container queries, browser engine quirks or panel width. The
 * grid/container-query shrinking below is the soft path that keeps
 * the row legible at narrow widths; this rule is the hard floor.
 */
.tree-row-layer.virtualized .tree-row {
  position: absolute;
  top: 0;
  /* Tight left inset so the root node sits close to the panel border;
     the 16 px right reserve is the chip safety net documented above. */
  left: 4px;
  right: 16px;
  bottom: auto;
  width: auto;
  min-height: 40px;
}

/* Tree-row grid notes:
 * - Chip columns are minmax(0, max-content) so they can shrink to zero
 *   when the row is space-constrained; the per-chip max-width rules
 *   further down (.tree-row .type-chip / .quantity-chip) cap the
 *   natural size. This combination is safer across browser engines
 *   than fit-content() in a grid track (Safari <16.4 ignored
 *   min-width: 0 on the chip when sizing a fit-content track).
 * - The model-tree label keeps a small 40 px floor so a node name has
 *   at least a stub before truncating; the view-panel override below
 *   drops the floor because the class chip and coverage status are the
 *   primary signals in EBOM/MBOM rows.
 * - overflow: hidden on the row is the hard guarantee: even if the
 *   grid algorithm fails to shrink a chip column in a particular
 *   browser engine, the chip cannot visually escape the row's
 *   right edge into the panel-border area. The chip's own
 *   overflow:hidden + ellipsis is the soft path; this is the safety net.
 *   Side effect: any non-inset box-shadow added to .tree-row in the
 *   future would be clipped. The selected/synced states use inset
 *   shadows for exactly this reason; drop-target uses outline with
 *   outline-offset: -3px so the highlight stays inside the row box.
 * - The container query below tightens the layout further when the
 *   panel is squeezed to its minimum (visible when all three tree
 *   panels and the inspector are open at once on a 1366/1440 laptop).
 */
.tree-row {
  --indent: calc(var(--depth) * 30px);
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: calc(20px + var(--indent)) 20px 24px minmax(40px, 1fr) minmax(0, max-content) minmax(0, max-content);
  align-items: center;
  column-gap: 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 3px 12px 3px 0;
  text-align: left;
  overflow: hidden;
}

/* Density-adaptive branch. Triggers at <= 520 px so the 3-tree+inspector
 * configuration on a 1366/1440 laptop (~440-500 px per panel) is
 * covered, not only the 4-tree+inspector case (~340 px per panel).
 * Below 520 px only --indent and the chip max-widths shift; gap and
 * padding stay default so the snap at the threshold is a small step,
 * not a layout jolt.
 */
@container tree-panel (max-width: 520px) {
  .tree-row {
    --indent: calc(var(--depth) * 20px);
  }
  .tree-row .type-chip {
    max-width: 4.5rem;
  }
  .tree-row .quantity-chip {
    max-width: 3rem;
  }
  /* In the narrow four-panel layout the routing-number prefix would compete with
     the operation name for a near-zero label track at deep indentation. The name
     wins: hide the prefix (operations still sort by seqNo and the number stays in
     the inspector). */
  .tree-row .operation-seq-prefix {
    display: none;
  }
}

/* At narrow tree-panel widths the panel-header has to fit a title plus
 * up to seven action icons (add / duplicate / up / down / delete /
 * collapse-tree / expand-tree in the model panel). Default sizes
 * (42 px icons, 14 px padding, full meta text) overflow at ~340 px
 * panel width, hiding the right-most icon under the actions
 * scroll-container. This branch keeps every action reachable without
 * scrolling.
 */
/* Tree-panel narrow-mode breakpoint at 520 px. Same threshold as the
 * tree-row density branch above (`@container tree-panel (max-width: 520px)`),
 * one shared breakpoint is easier to remember. Covers the four-panel
 * workspace on a 1920 laptop (model panel ~514 px) as well as the
 * 1366 / 1440 setups: at default 42 px action icons, the seven-button
 * model header plus title plus meta plus padding leaves only 12-15 px
 * of right margin at 514 px — visually reads as "no margin against the
 * panel border". Below 520 px we drop the meta line and shrink the
 * action icons to 32 px so there is genuine breathing room again.
 */
@container tree-panel (max-width: 520px) {
  .tree-panel .panel-header {
    padding: 10px 16px 10px 10px;
    gap: 8px;
  }
  .tree-panel .panel-header p {
    display: none;
  }
  .tree-panel .model-actions {
    gap: 3px;
  }
  .tree-panel .model-action-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 6px;
  }
  .tree-panel .model-action-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
  }
}

.tree-row:hover {
  background: var(--surface-muted);
}

.tree-row.selected {
  background: var(--selected-bg);
  border-color: var(--selected-border);
}

.tree-row.synced-selection {
  background: color-mix(in srgb, var(--selected-bg), var(--surface) 34%);
  border-color: var(--selected-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tree-edge-selected), transparent 45%);
}

.tree-row.deployment-navigation-row {
  background: transparent;
  border-color: transparent;
}

.tree-row.deployment-navigation-row:hover {
  background: color-mix(in srgb, var(--accent), var(--surface) 92%);
  border-color: color-mix(in srgb, var(--accent), var(--border) 70%);
}

.tree-row.deployment-navigation-row .type-chip {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--accent-strong);
}

.tree-row .deployment-count-chip {
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--accent-strong);
}

.tree-row.drop-target {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* view-panel inherits --indent from .tree-row above and participates in the
 * container-query reduction at <=520 px. Keep the indent column as
 * calc(20px + var(--indent)); a hardcoded `var(--depth) * 30px` here would
 * desync the view-panel from the model-tree at narrow widths. The
 * regression that surfaced this rule lived exactly in that desync.
 */
.view-panel .tree-row {
  grid-template-columns: calc(20px + var(--indent)) 20px 24px minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content);
}

.view-panel .tree-row.coverage-missing,
.view-panel .tree-row.coverage-under,
.view-panel .tree-row.coverage-over {
  border-left-width: 4px;
}

.view-panel .tree-row.coverage-missing {
  border-left-color: var(--danger);
}

.view-panel .tree-row.coverage-under,
.view-panel .tree-row.coverage-over {
  border-left-color: var(--warning);
}

.view-tree-root.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -5px;
}

.coverage-chip {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
}

.coverage-chip.ok {
  border-color: color-mix(in srgb, #16834a, transparent 58%);
  color: #16834a;
}

.coverage-chip.issue {
  border-color: color-mix(in srgb, var(--warning), transparent 48%);
  color: var(--warning);
}

.coverage-chip.neutral {
  border-color: color-mix(in srgb, var(--muted), transparent 62%);
  color: var(--muted);
}

.position-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--position-tag-bg);
  border: 1px solid var(--position-tag-border);
  color: var(--position-tag-text);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.position-tags-disabled .position-tag {
  display: none;
}

.tree-rail {
  width: 100%;
  height: 1px;
}

.tree-toggle {
  width: 20px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  color: var(--muted);
  transition:
    background 120ms ease,
    color 120ms ease;
}

.tree-toggle:not(.placeholder):hover {
  background: var(--surface-muted);
  color: var(--text);
}

.tree-toggle.placeholder {
  pointer-events: none;
}

.tree-toggle-icon {
  width: 13px;
  height: 13px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
  transform-origin: 50% 50%;
  transition: transform 140ms ease;
}

.tree-toggle.expanded .tree-toggle-icon {
  transform: rotate(90deg);
}

.node-type-icon {
  --type-color: var(--accent);
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--type-color);
}

/* Per-view node-type filter bar above each structure tree.
   Population and click handling live in src/app/main.js. */
.type-filter-bar {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.type-filter-bar:empty {
  display: none;
}

.type-filter-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.type-filter-chip {
  --type-color: var(--accent);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.55;
}

.type-filter-chip .type-filter-icon {
  width: 20px;
  height: 20px;
}

.type-filter-chip[data-node-type="product"] { --type-color: #255f85; }
.type-filter-chip[data-node-type="assembly"] { --type-color: #586b2f; }
.type-filter-chip[data-node-type="part"] { --type-color: #8a4f2a; }
.type-filter-chip[data-node-type="position"] { --type-color: #2f766d; }
.type-filter-chip[data-node-type="material"] { --type-color: #7a3f64; }
.type-filter-chip[data-node-type="variantRule"] { --type-color: #b99216; }
.type-filter-chip[data-node-type="document"] { --type-color: var(--document-type-color); }
.type-filter-chip[data-node-type="process"] { --type-color: #8a6a1f; }
.type-filter-chip[data-node-type="simulationObject"] { --type-color: #4767a6; }
.type-filter-chip[data-node-type="deployment"] { --type-color: #2f6f86; }

.type-filter-chip:hover,
.type-filter-all:hover {
  opacity: 1;
  color: var(--text);
  border-color: color-mix(in srgb, var(--type-color), transparent 50%);
}

.type-filter-chip[aria-pressed="true"] {
  opacity: 1;
  border-style: solid;
  border-color: var(--type-color);
  background: color-mix(in srgb, var(--type-color), transparent 86%);
}

.type-filter-all[aria-pressed="true"] {
  border-style: solid;
  border-color: transparent;
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.type-filter-chip:focus-visible,
.type-filter-all:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  opacity: 1;
}

.type-filter-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--border);
}

@container (max-width: 360px) {
  .type-filter-bar {
    gap: 4px;
    padding: 5px 8px;
  }
  .type-filter-chip {
    width: 26px;
    height: 26px;
  }
  .type-filter-chip .type-filter-icon {
    width: 18px;
    height: 18px;
  }
}

/* Per-type accent colors. Driven by the data-node-type attribute set by
   getNodeTypeIconHtml() in src/app/nodeTypePresentation.js. Keeping the
   palette here lets us enforce a strict `style-src 'self'` CSP without
   inline style attributes. */
.node-type-icon[data-node-type="product"] { --type-color: #255f85; }
.node-type-icon[data-node-type="assembly"] { --type-color: #586b2f; }
.node-type-icon[data-node-type="part"] { --type-color: #8a4f2a; }
.node-type-icon[data-node-type="position"] { --type-color: #2f766d; }
.node-type-icon[data-node-type="material"] { --type-color: #7a3f64; }
.node-type-icon[data-node-type="variantRule"] { --type-color: #b99216; }
.node-type-icon[data-node-type="document"] { --type-color: var(--document-type-color); }
.node-type-icon[data-node-type="process"] { --type-color: #8a6a1f; }
.node-type-icon[data-node-type="simulationObject"] { --type-color: #4767a6; }
.node-type-icon[data-node-type="deployment"] { --type-color: #2f6f86; }
.node-type-icon[data-node-type="rflp-function"] { --type-color: #16834a; }

.node-type-svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.tree-type-icon {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--type-color), transparent 68%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--type-color), transparent 90%);
}

.tree-type-icon .node-type-svg {
  width: 17px;
  height: 17px;
}

.tree-label-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  overflow: hidden;
}

/* Routing sequence number (0010/0020) on an MBOM operation row — dim, monospaced
   and non-shrinking so the operation backbone reads as a routing. Only rendered
   for operations carrying an operationSeqNo, so it adds no noise elsewhere. */
.operation-seq-prefix {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* On a selected row the dim --muted dips against --selected-bg; lift the routing
   number to the full text colour so it stays readable. */
.tree-row.selected .operation-seq-prefix {
  color: var(--text);
}

/* MBOM operation with a dangling predecessor/successor reference. Only rendered
   on a finding, so it adds no density to a clean tree. */
.sequence-warning {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--warning);
}

.sequence-warning svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tree-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.tree-label-cell > .tree-label {
  flex: 1 1 auto;
}

.type-chip,
.quantity-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.tree-row .type-chip,
.tree-row .quantity-chip {
  min-width: 0;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-row .quantity-chip {
  max-width: 5rem;
}

.quantity-chip {
  background: var(--quantity-chip-bg);
  color: var(--quantity-chip-text);
}

.tree-row[data-node-type-tooltip] .node-type-icon,
.tree-row[data-node-type-tooltip] .type-chip,
.tree-row .type-chip[title],
.tree-row .quantity-chip[title],
.coverage-chip[data-node-type-tooltip],
#rflp-navigator-list [data-node-type-tooltip] .rflp-kind-chip,
.rflp-trace-item[data-node-type-tooltip],
.rflp-trace-item[data-node-type-tooltip] .rflp-kind-chip,
.deployment-help-icon[data-node-type-tooltip],
#ebom-table-body tr[data-node-type-tooltip] .type-chip {
  cursor: help;
}

html.tooltips-disabled .tree-row[data-node-type-tooltip] .node-type-icon,
html.tooltips-disabled .tree-row[data-node-type-tooltip] .type-chip,
html.tooltips-disabled .tree-row .type-chip[title],
html.tooltips-disabled .tree-row .quantity-chip[title],
html.tooltips-disabled .coverage-chip[data-node-type-tooltip],
html.tooltips-disabled #rflp-navigator-list [data-node-type-tooltip] .rflp-kind-chip,
html.tooltips-disabled .rflp-trace-item[data-node-type-tooltip],
html.tooltips-disabled .rflp-trace-item[data-node-type-tooltip] .rflp-kind-chip,
html.tooltips-disabled .deployment-help-icon[data-node-type-tooltip],
html.tooltips-disabled #ebom-table-body tr[data-node-type-tooltip] .type-chip {
  cursor: default;
}

.node-type-tooltip {
  position: fixed;
  z-index: 1000;
  width: min(380px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 68%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--bg) 8%);
  box-shadow: 0 18px 42px rgb(0 0 0 / 18%);
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 100ms ease,
    transform 100ms ease;
}

.node-type-tooltip[hidden] {
  display: none;
}

.node-type-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.node-type-tooltip-kicker {
  margin-bottom: 3px;
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.node-type-tooltip-title {
  margin-bottom: 7px;
  font-size: 0.95rem;
  font-weight: 850;
}

.node-type-tooltip-description {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.node-type-tooltip-node-title {
  margin-top: 7px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 820;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.node-type-tooltip-node-description {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.node-type-tooltip-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  font-size: 0.76rem;
}

.node-type-tooltip-facts {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.node-type-tooltip-facts .node-type-tooltip-fact {
  margin-top: 0;
}

.node-type-tooltip-fact span {
  color: var(--muted);
  font-weight: 780;
}

.node-type-tooltip-fact strong {
  min-width: 0;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 760;
  overflow-wrap: anywhere;
  text-align: right;
}

.node-type-tooltip-fact--guid {
  grid-template-columns: auto minmax(max-content, 1fr);
  gap: 8px;
  font-size: 0.68rem;
}

.node-type-tooltip-fact--guid span,
.node-type-tooltip-fact--guid strong {
  overflow-wrap: normal;
  white-space: nowrap;
}

.node-type-tooltip-guidance {
  margin-top: 9px;
  display: grid;
  gap: 3px;
}

.node-type-tooltip-guidance span {
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.node-type-tooltip-guidance p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
}

.node-type-tooltip-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.74rem;
}

.node-type-tooltip-meta strong {
  color: var(--text);
  font-weight: 750;
  text-align: right;
}

/* Inspector tabs sit inside the panel-header next to the title, with
 * the same visual idiom as the action-icon buttons in the tree-panel
 * headers (square, rounded, icon-only). The panel-header carries the
 * 64 px min-height, so the detail panel and the structure panels share
 * the same title-bar height.
 */
.detail-panel-header .tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 110px;
  overflow-x: auto;
  scrollbar-width: none;
}

.detail-panel-header .tabs::-webkit-scrollbar {
  display: none;
}

.tab-button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  color: var(--muted);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.tab-button[hidden] {
  display: none;
}

.tab-button:hover {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--text);
}

.tab-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Active-Tab gets a different fill from the .panel-header background
 * (--surface). --surface-muted plus border + accent-tinted text makes
 * it readable at both 42 px and 32 px button sizes.
 */
.tab-button.active {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--accent-strong);
}

/* Tab icons render at 23 px, slightly larger than the 19 px of the
 * tree-panel action icons (`#model-structure-panel .panel-header` etc.):
 * those buttons have a saturated fill colour and white stroke, so the
 * 19 px glyph already carries enough optical weight. Tab buttons have
 * a transparent background and a muted stroke colour, so they need a
 * larger glyph to read with the same presence in the panel header.
 */
.tab-icon {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inspector h2 title gracefully truncates on long locale strings.
 * Without this the title pushes the tab strip out of the header at
 * very narrow widths.
 */
.detail-panel-header > div:first-child h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-panel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.detail-panel-title-row h2 {
  flex: 0 1 auto;
}

/* When the detail panel is squeezed below 400 px (four-panel
 * workspace at 1366/1440 viewport widths) the tab buttons shrink to
 * 32 px to fit alongside the panel title without overflowing the
 * header. Mirrors the tree-panel action-icon CQ branch. 400 px is
 * chosen so the three-panel workspace (Inspector ~408 px) keeps the
 * full 42 px tabs.
 */
@container detail-panel (max-width: 400px) {
  .detail-panel-header {
    padding: 10px;
    gap: 8px;
  }
  .tab-button {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }
  .tab-icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
  }
}

body[data-app-mode="simple"] .tab-button[data-detail-tab] {
  display: none;
}

.tab-view {
  display: none;
  min-height: 0;
  overflow: auto;
}

.tab-view.active {
  display: block;
}

.tab-view[hidden],
.tab-view[hidden].active {
  display: none;
}

.inspector-form {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  align-content: start;
}

.inspector-view-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  flex: 0 0 auto;
  min-width: 0;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.segmented-button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
}

.segmented-button.active {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

.segmented-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* The home shortcut sits before the view-toggle buttons in the tab bar
   and is the one always-on exit from RFLP / Classes focus modes. */
.segmented-button.home-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-height: 30px;
  padding: 0;
  color: var(--accent);
}

.segmented-button.home-button:hover {
  background: color-mix(in srgb, var(--accent), transparent 88%);
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
}

.home-button-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.brand-logo-button {
  display: inline-flex;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.brand-logo-button:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 60%);
  background: color-mix(in srgb, var(--accent), transparent 92%);
}

.brand-logo-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* A locked toggle is the active one that the user cannot turn off
 * (last visible panel). It must stay readable as "on", not look like a
 * render bug: keep full opacity, take away the click affordance, hand
 * over the cursor and a title-tooltip that explains the lock.
 */
.segmented-button.active:disabled,
.icon-button.active:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.segmented-button:disabled:not(.active),
.icon-button:disabled:not(.active) {
  cursor: not-allowed;
}

.inspector-form.simple-view [data-detail-field] {
  display: none;
}

.inspector-form.simple-view #occurrence-card.disabled {
  display: none;
}

.settings-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.settings-section-header {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-section-header p {
  max-width: 62ch;
  line-height: 1.4;
}

.settings-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-control-list {
  display: grid;
  gap: 12px;
}

.settings-control {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.settings-control.locale-select {
  min-height: auto;
  display: grid;
  grid-auto-flow: initial;
  align-items: stretch;
  gap: 6px;
}

.settings-control.locale-select select {
  width: 100%;
}

.settings-switch {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 2px 0;
  cursor: pointer;
}

.settings-switch strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.82rem;
}

.settings-switch small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.settings-switch-control {
  width: 51px;
  height: 31px;
  position: relative;
  flex: 0 0 auto;
  display: block;
}

.settings-switch input {
  width: 51px;
  height: 31px;
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--switch-off-bg);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 7%);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.settings-switch-track::before {
  content: "";
  width: 27px;
  height: 27px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: var(--switch-knob-bg);
  box-shadow: var(--switch-knob-shadow);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.settings-switch input:checked + .settings-switch-track {
  background: var(--switch-on-bg);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 3%);
}

.settings-switch input:checked + .settings-switch-track::before {
  transform: translateX(20px);
}

.settings-switch input:active + .settings-switch-track::before {
  box-shadow: var(--switch-knob-shadow);
}

.settings-switch input:focus-visible + .settings-switch-track {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.settings-segmented-control {
  justify-self: start;
}

.opentwin-settings-section {
  grid-column: 1 / -1;
}

.opentwin-settings-fields {
  display: grid;
  gap: 10px;
}

.opentwin-settings-fields[hidden] {
  display: none;
}

.opentwin-status-text {
  align-self: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.opentwin-status-text[data-status="connected"],
.opentwin-status-text[data-status="reachable"],
.opentwin-status-text[data-status="pushed"] {
  color: var(--success);
}

.opentwin-status-text[data-status="denied"],
.opentwin-status-text[data-status="unreachable"] {
  color: var(--danger);
}

.opentwin-status-text[data-status="keyMissing"] {
  color: var(--warning);
}

.inspector-form.disabled .inspector-card {
  opacity: 0.35;
}

.inspector-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.inspector-card[hidden] {
  display: none;
}

.inspector-card.disabled {
  opacity: 0.58;
}

.identity-card-row {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.identity-card-row.has-thumbnail-control {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 164px);
}

.identity-card,
.thumbnail-card {
  align-self: start;
}

.identity-card .field-grid {
  grid-template-columns: 1fr;
}

.opentwin-panel-header {
  align-items: flex-start;
}

.opentwin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.opentwin-content {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.opentwin-card {
  min-width: 0;
}

.opentwin-card-copy {
  color: var(--muted);
  line-height: 1.45;
}

.opentwin-card-copy.issue {
  color: var(--danger);
}

.opentwin-status-pill {
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.opentwin-status-pill[data-status="connected"],
.opentwin-status-pill[data-status="reachable"],
.opentwin-status-pill[data-status="pushed"] {
  border-color: var(--success-border);
  color: var(--success);
  background: color-mix(in srgb, var(--success), transparent 90%);
}

.opentwin-status-pill[data-status="denied"],
.opentwin-status-pill[data-status="unreachable"] {
  border-color: var(--danger-border);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger), transparent 91%);
}

.opentwin-status-pill[data-status="keyMissing"] {
  border-color: color-mix(in srgb, var(--warning), transparent 50%);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 90%);
}

.opentwin-status-pill[data-status="busy"] {
  border-color: color-mix(in srgb, var(--accent), transparent 52%);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 90%);
}

.opentwin-detail-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
}

.opentwin-detail-grid span {
  color: var(--muted);
  font-size: 0.76rem;
}

.opentwin-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.opentwin-status-message {
  padding-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.opentwin-form {
  display: grid;
  gap: 12px;
}

.opentwin-key-form {
  margin-top: 12px;
}

.opentwin-key-form label {
  display: grid;
  gap: 6px;
}

.opentwin-form-actions {
  display: flex;
  justify-content: flex-end;
}

.opentwin-empty {
  min-height: 180px;
}

.thumbnail-card {
  align-items: center;
  justify-items: center;
}

.inspector-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Inspector-card section headings (Identitaet, Klassenattribute,
 * Verknuepfte Dokumente, Verwendet in, ...). Default h3 (0.84rem) is
 * smaller than the field labels and inputs (~1rem inherited), which
 * read visually as a hierarchy inversion. Bump the heading clearly
 * above the field content so the cards have a readable headline. */
.inspector-card-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}

/* `display: grid` above wins over the UA [hidden] rule, so a conditionally
   toggled field group (e.g. the operation vs. consumption groups in the
   manufacturing inspector card) needs an explicit guard. The same applies to a
   single conditionally toggled `label` inside the grid (e.g. the MBOM-only plant
   header), because the global `label { display: grid }` rule likewise beats UA. */
.field-grid[hidden],
.field-grid > label[hidden] {
  display: none;
}

.field-grid > label {
  align-self: start;
}

.span-2 {
  grid-column: 1 / -1;
}

.document-section-list,
.document-where-used-groups {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Cap the section height so 50+ documents under one assembly cannot push the
     occurrence card below the fold. The cap lives on the container — internal
     scrolling stays inside the card, not the inspector. */
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.document-section-list li,
.document-where-used-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-muted);
  cursor: pointer;
  /* min-width: 0 lets text-overflow: ellipsis on the label actually trigger,
     because a grid/flex child defaults to min-width: auto and would otherwise
     pump the row past the card width on long document names. */
  min-width: 0;
}

.document-section-list li > *,
.document-where-used-item > * {
  min-width: 0;
}

.document-section-list li:hover,
.document-where-used-item:hover,
.document-section-list li:focus-visible,
.document-where-used-item:focus-visible {
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--accent) 30%);
  outline: none;
}

.document-section-label {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-section-subline {
  font-size: 0.85em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-attachment-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 22px;
  row-gap: 2px;
}

.document-attachment-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 12px;
  min-height: 22px;
  min-width: 38px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--type-color, var(--accent)), transparent 60%);
  background: color-mix(in srgb, var(--type-color, var(--accent)), transparent 88%);
  color: var(--type-color, var(--accent));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document-attachment-row-icon[data-node-type="document"] {
  --type-color: var(--document-type-color);
}

.document-attachment-row .document-section-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-section-chevron {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}

.document-where-used-group-heading {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 2px;
}

.document-where-used-group-heading:first-child {
  margin-top: 0;
}

@container detail-panel (max-width: 400px) {
  .document-section-list li,
  .document-where-used-item {
    padding: 6px 8px;
  }
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
}

input,
select {
  min-height: 38px;
  padding: 0 10px;
}

#detail-panel {
  --detail-label-size: 0.78rem;
  --detail-field-size: 0.86rem;
  --detail-hint-size: 0.79rem;
  --detail-label-gap: 6px;
  --detail-section-gap: 14px;
  --detail-copy-line-height: 1.48;
}

#detail-panel label {
  gap: var(--detail-label-gap);
  font-size: var(--detail-label-size);
  line-height: 1.35;
}

#detail-panel input,
#detail-panel select,
#detail-panel textarea,
#detail-panel .node-type-trigger {
  font-size: var(--detail-field-size);
  line-height: 1.38;
}

#detail-panel input,
#detail-panel select,
#detail-panel .node-type-trigger {
  min-height: 38px;
}

#detail-panel textarea {
  padding: 8px 10px;
}

#detail-panel .inspector-form {
  gap: var(--detail-section-gap);
}

#detail-panel .inspector-card {
  gap: var(--detail-section-gap);
  padding: 14px;
}

#detail-panel .field-grid {
  gap: 14px 12px;
}

#detail-panel :is(
  .deployment-hint,
  .deployment-gaps-hint,
  .deployment-binding-empty,
  .rflp-form-hint,
  .table-limit-hint,
  .variant-subhint,
  .class-section-copy,
  .opentwin-card-copy,
  .opentwin-status-message,
  .rflp-system-hint,
  .product-config-empty-features,
  .product-config-rule-description,
  .product-config-unbuilt-note
) {
  font-size: var(--detail-hint-size);
  line-height: var(--detail-copy-line-height);
}

#detail-panel .readonly-field {
  font-size: 0.8rem;
}

.native-node-type-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.node-type-combobox {
  position: relative;
  width: 100%;
}

.node-type-trigger {
  min-height: 38px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--field-bg);
  color: var(--text);
  padding: 0 9px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
}

.node-type-combobox.disabled .node-type-trigger {
  cursor: not-allowed;
  opacity: 0.52;
}

.node-type-trigger:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.node-type-trigger-value,
.node-type-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-type-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-type-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
}

.node-type-options {
  position: fixed;
  z-index: 20;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.node-type-option {
  min-height: 34px;
  border-radius: 5px;
  padding: 5px 7px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 650;
}

.node-type-option:hover,
.node-type-option:focus {
  background: var(--surface-muted);
  outline: none;
}

.node-type-option.selected {
  background: var(--selected-bg);
  color: var(--text);
}

.node-type-option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
}

.readonly-field {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
}

.thumbnail-field {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

.thumbnail-control {
  position: relative;
  display: block;
  width: min(100%, 128px);
}

.thumbnail-dropzone {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  padding: 0;
}

.thumbnail-dropzone.has-image {
  border-style: solid;
  background: var(--field-bg);
}

.thumbnail-dropzone.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.thumbnail-dropzone:focus-visible,
.thumbnail-remove-button:focus-visible,
.lightbox-close-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--thumbnail-placeholder-bg);
  color: var(--thumbnail-placeholder-text);
  font-size: 0.78rem;
  font-weight: 800;
}

.thumbnail-placeholder[hidden],
.thumbnail-image[hidden],
.thumbnail-remove-button[hidden] {
  display: none;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--thumbnail-placeholder-bg);
}

.thumbnail-remove-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 0;
  box-shadow: 0 1px 4px rgb(15 23 42 / 18%);
}

.thumbnail-remove-button svg,
.lightbox-close-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.lightbox-dialog {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.lightbox-dialog::backdrop {
  background: var(--backdrop);
}

.lightbox-body {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lightbox-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--danger-button-border);
  border-radius: 999px;
  background: var(--danger-button-bg);
  color: white;
  padding: 0;
  box-shadow: var(--semantic-button-shadow);
}

.lightbox-close-button:hover {
  background: var(--danger-button-bg-hover);
  border-color: var(--danger-button-border);
  box-shadow: var(--semantic-button-shadow-hover);
}

.lightbox-image {
  width: 100%;
  max-height: calc(100vh - 130px);
  display: block;
  object-fit: contain;
}

.lightbox-caption {
  overflow-wrap: anywhere;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.section-label {
  grid-column: 1 / -1;
  color: var(--text);
  font-weight: 800;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.empty-state {
  position: absolute;
  inset: 16px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  z-index: 1;
}

.empty-state[hidden] {
  display: none;
}

.action-row {
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.table-wrap {
  overflow: auto;
}

/* Product configuration tab: profile editor + resolved 100% BOM */
.product-config-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px 16px;
}

.product-config-intro {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Guided zero-state: shown only when no profile exists yet. A real onboarding block
 * (heading + plain-language explanation + concrete example + one primary CTA), not the
 * generic .empty-state overlay — so the user is led to "create one" instead of stranded. */
.product-config-onboarding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.product-config-onboarding h4 {
  margin: 0;
  font-size: 0.95rem;
}

.product-config-onboarding p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.product-config-onboarding-example {
  font-style: italic;
}

.product-config-onboarding .success-button {
  margin-top: 8px;
}

.product-config-guide-card {
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  background: color-mix(in srgb, var(--accent), var(--surface) 94%);
}

.product-config-guide-card > details {
  display: grid;
  gap: 10px;
}

.product-config-guide-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.product-config-guide-summary::-webkit-details-marker {
  display: none;
}

.product-config-guide-eyebrow {
  grid-column: 1 / -1;
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-config-guide-title {
  min-width: 0;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.product-config-guide-step {
  align-self: start;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 45%);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}

.product-config-guide-content {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent), var(--border) 55%);
}

.product-config-guide-body {
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
}

.product-config-guide-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-config-guide-list li {
  padding-left: 2px;
}

.product-config-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Inline name editor (create/rename) — replaces the native prompt(). */
.product-config-name-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.product-config-name-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* min(...100%) so the field never forces horizontal overflow in a very narrow
   * inspector (V1-P4/P6 with an active navigator split below ~300px). */
  min-width: min(200px, 100%);
  flex: 1 1 200px;
}

.product-config-name-field span {
  font-weight: 650;
  font-size: 0.85rem;
}

.product-config-name-field input {
  width: 100%;
}

.product-config-name-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-config-profile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.product-config-profile-select-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1 1 160px;
}

.product-config-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-config-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.product-config-feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.product-config-feature-title {
  font-weight: 650;
  font-size: 0.92rem;
  line-height: 1.4;
}

.product-config-feature-meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-config-empty-features {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Guided configuration: chapter accordion. Replaces the flat dropdown grid so
 * many variant nodes stay navigable and the inspector panel (container
 * detail-panel) never overflows. Stacks vertically — no auto-fill density wall. */
.product-config-chapter {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  padding: 4px 12px 10px;
}

.product-config-chapter-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 9px 0;
  list-style: none;
}

.product-config-chapter-summary::-webkit-details-marker {
  display: none;
}

.product-config-chapter-title {
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-config-chapter-meta {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
}

.product-config-chapter-meta-error {
  color: var(--danger);
  font-weight: 650;
}

.product-config-step {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.product-config-status {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--chip-text);
}

.product-config-status-answered {
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--accent-strong);
}

.product-config-status-default {
  background: color-mix(in srgb, var(--muted), transparent 80%);
  color: var(--text);
}

.product-config-status-unanswered {
  background: color-mix(in srgb, var(--warning), transparent 85%);
  color: var(--text);
}

.product-config-status-error {
  background: color-mix(in srgb, var(--danger), transparent 85%);
  color: var(--danger);
}

.product-config-step-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-config-unbuilt-note {
  margin: 2px 0 0;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.product-config-rule-context {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.product-config-rule-name {
  margin: 0;
  font-weight: 650;
  color: var(--text);
}

.product-config-rule-path {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.product-config-rule-description {
  margin: 0;
  color: var(--text);
}

.product-config-rule-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.product-config-rule-ref {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--chip-text);
}

.product-config-rule-logic {
  border-left: 2px solid var(--border);
  padding-left: 8px;
  margin-top: 4px;
}

.product-config-rule-logic > summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.product-config-rule-logic-note {
  margin: 4px 0 2px;
  color: var(--muted);
  font-style: italic;
}

.product-config-rule-logic-code {
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* View toggle: feature accordion <-> function navigator (mutually exclusive). */
.product-config-view-toggle {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.product-config-view-toggle[hidden] {
  display: none;
}

.product-config-view-toggle .command-button.is-active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent), transparent 85%);
  font-weight: 650;
}

.product-config-navigator-summary {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
}

.product-config-requirements {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.product-config-requirement {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.74rem;
  min-width: 0;
}

.product-config-requirement-name {
  overflow-wrap: anywhere;
}

.product-config-req-status {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--chip-text);
}

.product-config-req-status-covered {
  background: color-mix(in srgb, var(--accent), transparent 82%);
  color: var(--accent-strong);
}

.product-config-req-status-open {
  background: color-mix(in srgb, var(--warning), transparent 85%);
  color: var(--text);
}

.product-config-req-status-verified {
  background: color-mix(in srgb, var(--accent-strong), transparent 82%);
  color: var(--accent-strong);
}

/* KPI strip: compact read-only figures above the configuration views. */
.product-config-kpis-grid {
  display: grid;
  /* Roomy multi-row: tiles wrap at a ~150px floor so the longest label
   * ("Konfigurationsraum", ~113px) stays on one line — no hyphenation, no
   * cramping. At a ~470px card (1920×1080) this yields 3 columns; the ≤400px
   * container query below pins it to 2 columns for the narrow inspector. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.product-config-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content:center vertically centres the value↔label↔hint stack so a tile
   * with no hint no longer floats its content to the top of a grid-stretched cell
   * (the "vertikal nicht mittig" regression). A min-height keeps short and tall tiles
   * visually uniform; the corner help icon lives outside this flex flow. */
  justify-content: center;
  gap: 5px;
  min-height: 96px;
  padding: 12px 12px 14px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 45%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent), var(--surface) 88%);
  min-width: 0;
}

.product-config-kpi-value {
  /* clamp() lets the headline figure breathe in a wide card yet step down in the
   * narrow inspector so long values ("> 1.000.000", "120 / 240") stay on one line;
   * tabular-nums keeps digits column-aligned across the grid for a tidier read. */
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.55rem);
  font-weight: 750;
  line-height: 1.1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.product-config-kpi-label {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--muted);
  /* Long single-word labels ("Konfigurationsraum") must wrap, never overflow the
   * narrow one-row tile. hyphens:auto fires off <html lang> (de-DE/en). */
  overflow-wrap: break-word;
  hyphens: auto;
}

.product-config-kpi-hint {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

.product-config-kpi-error {
  border-color: color-mix(in srgb, var(--danger), var(--border) 35%);
  background: color-mix(in srgb, var(--danger), var(--surface) 88%);
}

.product-config-kpi-error .product-config-kpi-value {
  color: var(--danger);
}

/* Corner help affordance — small "?" disc pinned to the tile's top-right, out of the
 * centred value/label flex flow. Hovering/focusing it surfaces the shared rich tooltip
 * (only while tooltips are enabled — see the gated cursor rule below). */
.product-config-kpi-help {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--accent-strong);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

.product-config-kpi-help:hover {
  background: color-mix(in srgb, var(--accent), transparent 78%);
}

.product-config-kpi-help:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

html.tooltips-disabled .product-config-kpi-help {
  cursor: default;
}

/* Constraint feedback strip — reuses .variant-diagnostics layout + [hidden] rule. */
.product-config-constraints {
  margin-top: 10px;
}

/* Constraint authoring editor (collapsed details). */
.product-config-constraint-editor-host {
  margin-top: 10px;
}

.product-config-constraint-editor-host[hidden] {
  display: none;
}

.product-config-constraint-editor > summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.82rem;
  color: var(--muted);
}

.product-config-constraint-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.product-config-constraint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  min-width: 0;
}

.product-config-constraint-row-text {
  overflow-wrap: anywhere;
}

/* Wave 5: resolved-BOM colouring. Variant-dependent rows (present only for certain
   Merkmal choices) get an accent tint + left border; base parts present in every
   configuration stay neutral. The marker is structural — it stays put across profile
   switches (see resolvedBom.js collectNeutralNodeIds). */
.product-config-resolved-row--variant > td {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.product-config-resolved-row--variant > td:first-child {
  border-left: 3px solid var(--accent);
}

.product-config-resolved-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 0.72rem;
  color: var(--muted);
}

.product-config-resolved-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Pflicht/Kann toggle in the variant-rule inspector (selectChildByFeatureValue only). */
.variant-required-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  font-size: 0.78rem;
}

.variant-required-field input {
  margin: 0;
}

.product-config-constraint-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.product-config-constraint-select {
  font-size: 0.76rem;
  max-width: 100%;
}

/* 340px-Inspector (review A6): density steps down so the configurator never
 * overflows in the narrow detail panel (P3/P4/P6 cells). */
@container detail-panel (max-width: 400px) {
  .product-config-kpis-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-config-constraint-form {
    flex-direction: column;
    align-items: stretch;
  }

  .product-config-constraint-select {
    width: 100%;
  }

  .product-config-chapter-meta {
    font-size: 0.76rem;
  }

  .product-config-chapter-title {
    font-size: 0.86rem;
  }
}

/* Result-card header right side: keep the "N positions" meta and the export
 * button on one baseline. The card header is already a space-between flex row,
 * so this wrapper holds the right-hand cluster together. At narrow inspector
 * widths (container detail-panel) let the cluster drop below the heading rather
 * than squeezing — scoped to this card so the shared .inspector-card-header rule
 * is untouched. The button stays on one line ("BOM exportieren" is the long DE
 * case); .command-button has no nowrap of its own outside the toolbar. */
.product-config-result-card .inspector-card-header {
  flex-wrap: wrap;
}

.product-config-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.product-config-result-actions .command-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.product-config-onboarding[hidden],
.product-config-guide-card[hidden],
.product-config-intro[hidden],
.product-config-profile-row[hidden],
.product-config-name-form[hidden] {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.88rem;
}

th {
  position: sticky;
  top: 0;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.version-history-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.version-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.version-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.version-main h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.94rem;
}

.version-number {
  min-width: 42px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
}

.version-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.empty-list-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}

.rflp-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 2fr) minmax(240px, 0.62fr);
  gap: 12px;
  padding: 14px;
  overflow-x: hidden;
}

.rflp-workspace.hide-navigator {
  grid-template-columns: minmax(0, 2fr) minmax(240px, 0.62fr);
}

.rflp-workspace.hide-side {
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 2fr);
}

.rflp-workspace.hide-navigator.hide-side {
  grid-template-columns: minmax(0, 1fr);
}

.rflp-workspace.matrix-maximized,
.rflp-workspace.matrix-maximized.hide-navigator,
.rflp-workspace.matrix-maximized.hide-side,
.rflp-workspace.matrix-maximized.hide-navigator.hide-side {
  grid-template-columns: minmax(0, 1fr);
}

.rflp-workspace.hide-navigator .rflp-navigator,
.rflp-workspace.hide-side .rflp-side-panel {
  display: none;
}

.rflp-workspace.matrix-maximized .rflp-navigator,
.rflp-workspace.matrix-maximized .rflp-focus-panel,
.rflp-workspace.matrix-maximized .rflp-side-panel {
  display: none;
}

.rflp-panel-header {
  align-items: center;
}

.rflp-layout-toggle {
  flex: 0 0 auto;
}

.rflp-navigator,
.rflp-focus-panel,
.rflp-side-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.class-workbench-header {
  padding: 12px 14px;
}

.class-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.class-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.36fr) minmax(220px, 0.78fr);
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
}

.class-taxonomy-panel,
.class-editor-panel,
.class-impact-panel {
  min-width: 0;
}

.class-taxonomy-panel,
.class-impact-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.class-taxonomy-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.52fr);
  gap: 8px;
}

.class-search-control {
  display: grid;
  gap: 4px;
}

.class-search-control span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.class-taxonomy-list,
.class-usage-list,
.class-validation-list {
  display: grid;
  align-content: start;
  gap: 6px;
}

.class-taxonomy-list {
  max-height: calc(100vh - 230px);
  overflow: auto;
}

.class-group {
  display: grid;
  gap: 4px;
}

.class-group-title {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-muted), var(--surface) 42%);
  color: var(--text);
  text-align: left;
  font-size: 0.76rem;
  font-weight: 860;
  text-transform: uppercase;
}

.class-group-title:hover {
  border-color: var(--selected-border);
  background: var(--selected-bg);
}

.class-group-title.expanded .tree-toggle-icon {
  transform: rotate(90deg);
}

.class-group-toggle {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.class-group-icon {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--type-color), transparent 68%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--type-color), transparent 90%);
}

.class-group-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-group-count {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  white-space: nowrap;
}

.class-row-button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: calc(26px + var(--depth, 0) * 18px) minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  overflow: hidden;
}

.class-row-button::before {
  content: "";
  position: absolute;
  left: calc(13px + var(--depth, 0) * 18px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--border), transparent 15%);
  pointer-events: none;
}

.class-row-button.active,
.class-row-button:hover {
  border-color: var(--selected-border);
  background: var(--selected-bg);
}

.class-tree-toggle {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 44px;
  display: grid;
  place-items: center end;
  padding: 0 4px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.class-tree-toggle::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: color-mix(in srgb, var(--border), transparent 5%);
}

.class-tree-toggle.placeholder {
  opacity: 1;
  pointer-events: none;
}

.class-tree-toggle.placeholder .tree-toggle-icon {
  display: none;
}

.class-tree-toggle.placeholder::after {
  content: "";
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.58;
}

.class-tree-toggle.expanded .tree-toggle-icon {
  transform: rotate(90deg);
}

.class-row-select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 6px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.class-row-icon {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--type-color), transparent 68%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--type-color), transparent 90%);
}

.class-row-icon .node-type-svg {
  width: 17px;
  height: 17px;
}

.class-row-main {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  line-height: 1.25;
}

.class-row-title,
.class-row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-row-title {
  font-weight: 780;
}

.class-row-meta {
  color: var(--muted);
  font-size: 0.74rem;
}

.class-origin-chip,
.class-row-origin,
.class-usage-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.72rem;
  font-weight: 820;
  white-space: nowrap;
}

.class-origin-chip.custom,
.class-row-origin.custom {
  background: color-mix(in srgb, var(--success), transparent 84%);
  color: var(--success-strong);
}

.class-editor-panel {
  position: relative;
}

.class-editor-form {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
}

.class-editor-form.disabled .class-editor-section,
.class-editor-form.disabled .class-editor-actions {
  opacity: 0.32;
  pointer-events: none;
}

.class-attribute-editor-list {
  display: grid;
  gap: 8px;
}

.class-editor-guidance {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.class-editor-guidance.error {
  border-color: color-mix(in srgb, var(--danger), transparent 45%);
  background: color-mix(in srgb, var(--danger), transparent 90%);
  color: var(--danger);
}

.class-attribute-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  align-items: end;
}

.class-attribute-row label {
  display: grid;
  gap: 4px;
}

.class-attribute-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.rflp-selected-detail {
  container: rflp-detail / inline-size;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.rflp-selected-detail:empty {
  display: none;
}

.rflp-system-card {
  padding: 12px 14px;
  gap: 10px;
}

/* Generischer Attribut-Editor fuer non-logical.system RFLP-Klassen
   (requirement.generic, function.generic, verification.case, logical.generic).
   Folgt der Optik der system-card, aber mit kompaktem zwei-Spalten-Grid
   pro Attribut-Zeile. List-Attribute (function.generic inputs/outputs) bringen
   ihr eigenes rflp-field-list-Layout mit. */
.rflp-generic-card {
  padding: 12px 14px;
  gap: 10px;
}

.rflp-generic-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rflp-generic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

@container rflp-detail (min-width: 420px) {
  .rflp-generic-row {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
  }
}

.rflp-generic-row-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.rflp-generic-input {
  width: 100%;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.rflp-generic-checkbox {
  justify-self: start;
  width: auto;
}

.rflp-generic-input--retired-enum {
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.rflp-system-card .inspector-card-header {
  align-items: center;
}

.rflp-system-card .inspector-card-header h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rflp-system-card .inspector-card-header .rflp-maturity-pill {
  flex: 0 0 auto;
}

.rflp-maturity-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--muted), transparent 78%);
  color: var(--muted);
}

.rflp-maturity-pill.maturity-undefined {
  background: color-mix(in srgb, var(--accent), transparent 70%);
  color: var(--text);
}

.rflp-system-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rflp-system-text-field {
  display: grid;
  gap: 4px;
}

.rflp-system-text-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.rflp-system-text-field input,
.rflp-system-text-field textarea {
  width: 100%;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

.rflp-system-text-field textarea {
  min-height: 36px;
}

.rflp-system-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.rflp-system-interface-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@container rflp-detail (min-width: 460px) {
  .rflp-system-interface-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rflp-field-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rflp-field-list-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rflp-field-list-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.rflp-field-list-counter {
  font-size: 0.72rem;
  color: var(--muted);
}

.rflp-field-list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rflp-field-list-row {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 6px;
  align-items: end;
  padding: 4px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--border), transparent 40%);
}

.rflp-field-list-row:last-child {
  border-bottom: none;
}

@container rflp-detail (min-width: 360px) {
  .rflp-field-list-row {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) 28px;
  }
}

.rflp-field-list-cell {
  display: grid;
  gap: 2px;
}

.rflp-field-list-cell span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.rflp-field-list-cell input,
.rflp-field-list-cell select {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}

.rflp-field-list-add {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
}

.rflp-field-list-add:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent), transparent 92%);
  border-style: solid;
}

.rflp-field-list-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rflp-field-list-remove {
  align-self: end;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.rflp-field-list-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.rflp-field-list-empty {
  margin: 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
}

.class-section-copy {
  margin-top: 0;
  line-height: 1.42;
}

.class-child-class-list,
.class-child-group-list {
  display: grid;
  gap: 8px;
}

.class-child-class-list {
  max-height: 260px;
  overflow: auto;
}

.class-child-group {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.class-child-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.class-child-group-header strong {
  font-size: 0.78rem;
}

.class-child-group-header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.class-child-group-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.class-child-option {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.class-child-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.class-impact-item,
.class-validation-item {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.class-impact-item strong,
.class-validation-item strong {
  font-size: 0.86rem;
}

.class-impact-item span,
.class-validation-item span {
  color: var(--muted);
  font-size: 0.76rem;
}

.rflp-toolbar {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rflp-search {
  min-width: 0;
}

/* Filter-Chip-Leiste fuer requirementCategory + status. Zwei kompakte
   fieldset-Gruppen, jede mit Header + horizontalen Chips, optional Clear-Button.
   Sichtbar nur wenn rflpScope Requirements zeigt. */
.rflp-attribute-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rflp-attribute-filters[hidden] {
  display: none;
}

.rflp-filter-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rflp-filter-group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0;
  text-transform: uppercase;
}

.rflp-filter-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent), transparent 60%);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.rflp-filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rflp-filter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
}

.rflp-filter-chip:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 30%);
}

.rflp-filter-chip.active {
  background: color-mix(in srgb, var(--accent), transparent 60%);
  border-color: var(--accent);
  color: var(--text);
}

/* Signal-coloured filter chips: each chip carries its own --chip-signal so the
   resting tint, hover and active fill all derive from one hue. Tags (category)
   read as one accent colour; status uses the conventional traffic-light signals
   (grey draft → amber reviewed → green approved → red obsolete). */
.rflp-filter-chip[data-rflp-filter-attribute="requirementCategory"] {
  --chip-signal: var(--accent);
}

.rflp-filter-chip[data-rflp-filter-attribute="status"][data-rflp-filter-value="draft"] {
  --chip-signal: var(--muted);
}

.rflp-filter-chip[data-rflp-filter-attribute="status"][data-rflp-filter-value="reviewed"] {
  --chip-signal: var(--warning);
}

.rflp-filter-chip[data-rflp-filter-attribute="status"][data-rflp-filter-value="approved"] {
  --chip-signal: var(--success);
}

.rflp-filter-chip[data-rflp-filter-attribute="status"][data-rflp-filter-value="obsolete"] {
  --chip-signal: var(--danger);
}

.rflp-filter-chip[data-rflp-filter-attribute] {
  border-color: color-mix(in srgb, var(--chip-signal), transparent 52%);
  background: color-mix(in srgb, var(--chip-signal), var(--surface) 86%);
  color: color-mix(in srgb, var(--chip-signal), var(--text) 30%);
}

.rflp-filter-chip[data-rflp-filter-attribute]:hover {
  border-color: var(--chip-signal);
}

.rflp-filter-chip[data-rflp-filter-attribute].active {
  border-color: var(--chip-signal);
  background: color-mix(in srgb, var(--chip-signal), var(--surface) 66%);
  color: color-mix(in srgb, var(--chip-signal), var(--text) 18%);
  font-weight: 700;
}

.rflp-filter-clear {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.rflp-filter-clear:hover {
  color: var(--text);
}

.rflp-scope-toggle {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, 36px);
  gap: 6px;
}

.rflp-scope-toggle button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.rflp-scope-all span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rflp-scope-icon-button {
  display: grid;
  place-items: center;
  padding: 0;
}

.rflp-scope-icon-button.kind-requirement {
  --scope-color: #1d4ed8;
  --scope-bg: color-mix(in srgb, #2563eb, transparent 86%);
}

.rflp-scope-icon-button.kind-function {
  --scope-color: #126f3f;
  --scope-bg: color-mix(in srgb, #16834a, transparent 86%);
}

.rflp-scope-icon-button.kind-logical {
  --scope-color: #8a4f10;
  --scope-bg: color-mix(in srgb, #9a5b13, transparent 86%);
}

.rflp-scope-icon-button.kind-verification {
  --scope-color: #7a3f64;
  --scope-bg: color-mix(in srgb, #7a3f64, transparent 86%);
}

.rflp-scope-icon-button.kind-physicalNode {
  --scope-color: #334155;
  --scope-bg: color-mix(in srgb, #475569, transparent 86%);
}

.rflp-scope-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--scope-bg);
  color: var(--scope-color);
  font-size: 0.74rem;
  font-weight: 900;
}

.rflp-scope-toggle button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--accent-strong);
}

.rflp-scope-toggle button.active .rflp-scope-icon {
  background: var(--scope-color);
  color: #fff;
}

.rflp-navigator-list {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.rflp-group {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.rflp-group-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.rflp-group-header h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.rflp-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.rflp-group-list {
  min-width: 0;
  display: grid;
  max-height: 360px;
  overflow: auto;
}

.rflp-nav-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px 8px calc(10px + var(--depth, 0) * 14px);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.rflp-nav-row:last-child {
  border-bottom: 0;
}

.rflp-nav-row:hover,
.rflp-nav-row.active {
  background: color-mix(in srgb, var(--accent), transparent 91%);
}

.rflp-nav-row.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.rflp-nav-row-content,
.rflp-trace-item-content {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.rflp-nav-row-title,
.rflp-trace-item h4 {
  margin: 0;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 850;
}

.rflp-nav-row-meta,
.rflp-trace-item-meta {
  margin: 0;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.7rem;
}

.rflp-issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
}

.rflp-issue-dot.issue {
  background: var(--warning);
}

.rflp-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rflp-section.compact {
  gap: 10px;
}

.rflp-node-form,
.rflp-relation-form {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.rflp-node-description {
  min-height: 48px;
  max-height: 110px;
  line-height: 1.35;
  resize: vertical;
}

.rflp-node-form label,
.rflp-relation-form label,
.rflp-source-summary {
  min-width: 0;
}

.rflp-source-summary {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
}

.rflp-source-summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.rflp-form-hint {
  margin-top: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.rflp-selected-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rflp-selected-header h3 {
  min-width: 0;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
}

.rflp-selected-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.rflp-trace-columns {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.rflp-trace-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rflp-trace-column h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.rflp-trace-list {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.rflp-trace-item {
  min-width: 0;
  height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 7px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text);
  overflow: hidden;
  text-align: left;
}

.rflp-trace-item.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 90%);
}

.rflp-trace-item .rflp-kind-chip {
  justify-self: start;
}

.rflp-trace-item h4,
.rflp-trace-item-meta,
.rflp-trace-item-description {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.rflp-trace-item h4 {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rflp-trace-item-meta {
  white-space: nowrap;
}

.rflp-trace-item-description {
  margin: 2px 0 0;
  min-height: calc(2 * 0.72rem * 1.3);
  max-height: calc(2 * 0.72rem * 1.3);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
}

.rflp-matrix-section {
  grid-column: 1 / -1;
  overflow: hidden;
}

.rflp-matrix-header {
  align-items: start;
  gap: 10px;
}

.rflp-matrix-header > div:first-child {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.rflp-matrix-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.rflp-matrix-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.rflp-matrix-header > .rflp-matrix-actions {
  display: flex;
  align-items: center;
}

.rflp-traceability-view-toggle .segmented-button {
  min-width: 64px;
}

.rflp-matrix-toggle {
  flex: 0 0 auto;
}

.rflp-matrix-toggle.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
}

.rflp-matrix-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.rflp-matrix-toggle .icon-minimize {
  display: none;
}

.rflp-matrix-toggle[aria-pressed="true"] .icon-maximize {
  display: none;
}

.rflp-matrix-toggle[aria-pressed="true"] .icon-minimize {
  display: block;
}

body.rflp-traceability-fullscreen-active {
  overflow: hidden;
}

.rflp-matrix-section.maximized,
.rflp-matrix-section:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  padding: 14px;
  overflow: hidden;
}

.rflp-matrix-section.maximized .rflp-matrix-header,
.rflp-matrix-section:fullscreen .rflp-matrix-header {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.rflp-matrix-table {
  min-width: 0;
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rflp-matrix-section.maximized .rflp-matrix-table {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.rflp-matrix-table.flow-active {
  overflow: hidden;
}

.rflp-matrix-graph {
  min-width: 1040px;
  display: grid;
}

.rflp-flow-view {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  height: 100%;
}

.rflp-flow-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 0;
}

.rflp-flow-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.rflp-flow-fit-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.rflp-flow-fit-icon {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.rflp-flow-viewport {
  position: relative;
  min-width: 0;
  height: 360px;
  margin: 0 12px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border), transparent 28%);
  border-radius: 8px;
  background: var(--surface);
  cursor: grab;
  touch-action: none;
}

.rflp-matrix-section.maximized .rflp-flow-viewport,
.rflp-matrix-section:fullscreen .rflp-flow-viewport {
  height: 100%;
  min-height: 0;
  margin: 0;
}

.rflp-flow-viewport.dragging {
  cursor: grabbing;
}

.rflp-flow-stage {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
  will-change: transform;
}

.rflp-flow-canvas {
  position: relative;
  min-width: var(--flow-width);
  height: var(--flow-height);
  border: 1px solid color-mix(in srgb, var(--border), transparent 28%);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface-muted) 64%, transparent), transparent 34%),
    var(--surface);
}

.rflp-flow-link-layer,
.rflp-flow-node-layer {
  position: absolute;
  inset: 0;
}

.rflp-flow-link-layer {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.rflp-flow-node-layer {
  z-index: 2;
}

.rflp-flow-layer-label {
  position: absolute;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  padding-bottom: var(--flow-layer-label-padding-bottom, 6px);
  font-size: var(--flow-layer-label-font-size, 0.72rem);
  font-weight: 860;
}

.rflp-flow-link {
  fill: none;
  stroke: #597482;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.28;
  transition:
    stroke-opacity 0.16s ease,
    stroke-width 0.16s ease;
}

.rflp-flow-link.relation-requirement-satisfied-by-function {
  stroke: #2f7f9f;
}

.rflp-flow-link.relation-function-decomposes {
  stroke: #766aa0;
}

.rflp-flow-link.relation-function-realized-by-logical {
  stroke: #2f8a5b;
}

.rflp-flow-link.relation-logical-realized-by-physical {
  stroke: #b06f2f;
}

.rflp-flow-link.relation-function-allocated-to-physical {
  stroke: #9a6336;
}

.rflp-flow-link.active {
  stroke-opacity: 0.92;
  filter: drop-shadow(0 0 3px rgb(25 35 45 / 18%));
}

.rflp-flow-link.dimmed {
  stroke-opacity: 0.08;
}

.rflp-flow-node {
  position: absolute;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--flow-node-chip-column, 34px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--flow-node-gap, 8px);
  border: 1px solid var(--border);
  border-radius: var(--flow-node-border-radius, 7px);
  background: color-mix(in srgb, var(--surface) 94%, white 6%);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--border), transparent 48%),
    0 8px 18px rgb(25 35 45 / 8%);
  color: var(--text);
  padding: var(--flow-node-padding-y, 7px) var(--flow-node-padding-x, 8px);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.rflp-flow-node > .rflp-kind-chip {
  justify-content: center;
  min-width: var(--flow-chip-min-width, 28px);
  padding: 0 var(--flow-chip-padding-x, 6px);
  font-size: var(--flow-chip-font-size, 0.7rem);
}

.rflp-flow-node-content {
  min-width: 0;
  display: grid;
  gap: var(--flow-node-content-gap, 2px);
}

.rflp-flow-node-label,
.rflp-flow-node-meta {
  min-width: 0;
  overflow: hidden;
}

.rflp-flow-node-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--flow-node-label-font-size, 0.75rem);
  font-weight: 820;
  line-height: 1.18;
}

.rflp-flow-node-meta {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--flow-node-meta-font-size, 0.66rem);
  font-weight: 700;
}

.rflp-flow-node-count {
  justify-self: end;
  min-width: var(--flow-node-count-min-width, 42px);
  display: inline-flex;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
  border-radius: 999px;
  color: var(--muted);
  padding: var(--flow-node-count-padding-y, 2px) var(--flow-node-count-padding-x, 6px);
  font-size: var(--flow-node-count-font-size, 0.65rem);
  font-weight: 840;
  white-space: nowrap;
}

.rflp-flow-node:hover,
.rflp-flow-node.active,
.rflp-flow-node.connected {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.rflp-flow-node.active {
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
    0 8px 18px rgb(25 35 45 / 8%);
}

.rflp-flow-node.connected {
  box-shadow:
    inset 3px 0 0 var(--success),
    0 0 0 2px color-mix(in srgb, var(--success) 14%, transparent),
    0 8px 18px rgb(25 35 45 / 8%);
}

.rflp-flow-node.dimmed {
  opacity: 0.46;
  filter: saturate(0.72);
}

.rflp-matrix-header-row,
.rflp-matrix-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 136px repeat(4, minmax(220px, 1fr));
}

.rflp-matrix-header-row {
  position: sticky;
  z-index: 4;
  top: 0;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}

.rflp-matrix-row {
  position: relative;
  min-height: 124px;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

.rflp-matrix-row:last-child {
  border-bottom: 0;
}

.rflp-matrix-heading,
.rflp-matrix-cell,
.rflp-matrix-status-cell {
  min-width: 0;
  padding: 12px;
  text-align: left;
}

.rflp-matrix-heading {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.rflp-matrix-heading:first-child,
.rflp-matrix-status-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
}

.rflp-matrix-heading:first-child {
  z-index: 5;
  background: var(--surface-muted);
}

.rflp-matrix-cell,
.rflp-matrix-status-cell {
  display: grid;
  align-content: center;
  z-index: 1;
}

.rflp-matrix-status-cell {
  justify-items: center;
  text-align: center;
}

.rflp-matrix-row:hover > .rflp-matrix-cell,
.rflp-matrix-row:hover > .rflp-matrix-status-cell {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.rflp-matrix-row.active > .rflp-matrix-cell,
.rflp-matrix-row.active > .rflp-matrix-status-cell {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.rflp-matrix-row.status-missing > .rflp-matrix-status-cell {
  box-shadow: inset 3px 0 0 var(--danger);
}

.rflp-matrix-row.status-partial > .rflp-matrix-status-cell {
  box-shadow: inset 3px 0 0 var(--warning);
}

.rflp-matrix-cell-list {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.rflp-matrix-chip {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: 44px;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border), transparent 45%);
  padding: 6px 10px 6px 6px;
  text-align: left;
}

.rflp-matrix-chip > .rflp-kind-chip {
  justify-content: center;
  min-width: 72px;
  padding: 0 8px;
}

.rflp-matrix-chip:hover,
.rflp-matrix-chip.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent),
    0 1px 0 color-mix(in srgb, var(--border), transparent 45%);
}

.rflp-matrix-chip.active {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 3px 0 0 var(--accent),
    0 1px 0 color-mix(in srgb, var(--border), transparent 45%);
}

.rflp-matrix-chip.connected-incoming {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent),
    0 1px 0 color-mix(in srgb, var(--border), transparent 45%);
}

.rflp-matrix-chip.connected-outgoing {
  border-color: color-mix(in srgb, var(--success) 68%, var(--border));
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  box-shadow:
    inset 3px 0 0 var(--success),
    0 0 0 2px color-mix(in srgb, var(--success) 13%, transparent),
    0 1px 0 color-mix(in srgb, var(--border), transparent 45%);
}

.rflp-matrix-row.active .rflp-matrix-chip.dimmed {
  opacity: 0.48;
  filter: saturate(0.72);
}

.rflp-matrix-row.active .rflp-matrix-chip.dimmed:hover {
  opacity: 0.82;
  filter: none;
}

.rflp-matrix-chip-content {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.rflp-matrix-chip-label,
.rflp-matrix-chip-meta,
.rflp-matrix-chip-description {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rflp-matrix-chip-label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.rflp-matrix-chip-meta {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
}

.rflp-matrix-chip-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.28;
}

.rflp-matrix-empty {
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--muted);
  padding: 0 8px;
  font-size: 0.74rem;
  font-weight: 760;
}

.rflp-matrix-status {
  justify-content: center;
  min-width: 96px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.rflp-matrix-status.status-complete {
  border-color: color-mix(in srgb, #16834a, transparent 58%);
  color: #16834a;
}

.rflp-matrix-status.status-partial {
  border-color: color-mix(in srgb, var(--warning), transparent 48%);
  color: var(--warning);
}

.rflp-matrix-status.status-missing {
  border-color: color-mix(in srgb, var(--danger), transparent 48%);
  color: var(--danger);
}

.rflp-matrix-gaps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

.rflp-matrix-gap {
  justify-content: center;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.table-limit-hint {
  padding: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
}

.rflp-relation-strip {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.rflp-relation-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.rflp-relation-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.rflp-relation-edge {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.rflp-relation-edge.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 93%);
}

.rflp-relation-endpoint {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  padding: 5px 7px;
  text-align: left;
}

.rflp-relation-endpoint:hover,
.rflp-relation-endpoint.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 93%);
}

.rflp-relation-endpoint-label {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.rflp-relation-endpoint-label strong,
.rflp-relation-endpoint-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rflp-relation-endpoint-label strong {
  font-size: 0.76rem;
}

.rflp-relation-endpoint-label span {
  color: var(--muted);
  font-size: 0.68rem;
}

.rflp-relation-flow {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.rflp-relation-arrow {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.rflp-relation-type {
  max-width: 190px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 58%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 90%);
  color: var(--accent-strong);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 850;
}

.rflp-relation-delete {
  min-width: 30px;
  min-height: 30px;
  padding: 0 8px;
  justify-self: end;
}

.rflp-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.rflp-function-canvas {
  width: 100%;
}

.rflp-function-row-layer {
  display: grid;
  gap: 4px;
}

.rflp-function-row {
  grid-template-columns: calc(20px + var(--indent)) 20px 24px minmax(90px, 1fr) auto;
}

.rflp-function-node-dot {
  font-size: 0.72rem;
  font-weight: 900;
}

.rflp-empty {
  min-height: 88px;
}

.rflp-list-item,
.rflp-validation-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.rflp-validation-item {
  grid-template-columns: auto minmax(0, 1fr);
  border-left: 4px solid var(--warning);
}

.rflp-item-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.rflp-list-item h3,
.rflp-validation-item h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.rflp-list-item p,
.rflp-validation-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
}

.rflp-kind-chip {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.rflp-kind-chip.kind-requirement {
  background: color-mix(in srgb, #2563eb, transparent 86%);
  color: #1d4ed8;
}

.rflp-kind-chip.kind-function {
  background: color-mix(in srgb, #16834a, transparent 86%);
  color: #126f3f;
}

.rflp-kind-chip.kind-logical {
  background: color-mix(in srgb, #9a5b13, transparent 86%);
  color: #8a4f10;
}

.rflp-kind-chip.kind-physicalNode,
.rflp-kind-chip.kind-physicalOccurrence {
  background: color-mix(in srgb, #475569, transparent 86%);
  color: #334155;
}

.rflp-kind-chip.relation {
  background: color-mix(in srgb, var(--accent), transparent 86%);
  color: var(--accent-strong);
}

.rflp-validation-ok {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #16834a, transparent 58%);
  border-radius: 8px;
  color: #16834a;
  font-weight: 800;
}

.export-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 16px 16px 0;
}

.export-beta-note {
  margin: 10px 16px 0;
  max-width: 78ch;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--warning), transparent 48%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning), var(--surface) 90%);
  color: color-mix(in srgb, var(--warning), var(--text) 28%);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.4;
}

.export-beta-note.compact {
  margin: 4px 0 0;
}

.export-format-control {
  min-width: min(280px, 100%);
}

.export-preview {
  padding: 16px;
}

.export-preview > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.export-preview textarea {
  width: 100%;
}

textarea {
  min-height: 62vh;
  resize: vertical;
  padding: 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}

.variant-logic-card {
  gap: 10px;
}

.variant-logic-source-field textarea {
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.84rem;
  line-height: 1.45;
  tab-size: 4;
}

.variant-subsection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-subhead {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.variant-subhint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.variant-values-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 8px;
}

.variant-value-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.variant-value-row.is-missing .variant-value-input {
  border-color: color-mix(in srgb, var(--warning), transparent 40%);
}

.variant-config-controls .variant-config-select {
  width: 100%;
}

.variant-config-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.variant-config-toggle input {
  width: auto;
}

.variant-result-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.variant-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--field-bg), var(--surface-muted) 35%);
}

.variant-result-row.is-active {
  border-color: color-mix(in srgb, var(--success), transparent 55%);
}

.variant-result-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.variant-result-row.is-inactive .variant-result-name {
  color: var(--muted);
}

.variant-result-empty {
  font-size: 0.84rem;
  color: var(--muted);
}

.variant-badge {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.variant-badge-active {
  color: var(--success);
  background: color-mix(in srgb, var(--success), transparent 86%);
}

.variant-badge-inactive {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted), transparent 88%);
}

.variant-badge-missingValue {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 84%);
}

.variant-diagnostics {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variant-diagnostics[hidden] {
  display: none;
}

.variant-diagnostic {
  margin: 0;
  padding: 6px 8px;
  border-radius: 7px;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning), transparent 90%);
  color: var(--text);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.variant-diagnostic-error {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger), transparent 90%);
}

.variant-advanced summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.variant-advanced .field-grid {
  margin-top: 8px;
}

/*
 * Variant card lives in the detail panel, which can be far narrower than the
 * viewport in multi-panel workspaces (e.g. ~340px at 1280px viewport). The
 * global .field-grid collapse keys on viewport width (>900px stays two
 * columns), so per ADR 0006 the panel-bound grids and the Merkmalwert rows
 * stack on container width instead.
 */
@container detail-panel (max-width: 400px) {
  .variant-logic-card .field-grid {
    grid-template-columns: 1fr;
  }

  .variant-value-row {
    grid-template-columns: 1fr;
  }
}

dialog {
  width: min(460px, calc(100vw - 28px));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.new-product-dialog {
  width: min(760px, calc(100vw - 28px));
}

.configuration-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.help-dialog {
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.about-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.welcome-dialog {
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.welcome-dialog-body {
  gap: 20px;
}

.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 6px 12px 0;
}

.welcome-logo {
  width: 96px;
  height: 96px;
  display: block;
  object-fit: contain;
  border-radius: 14px;
}

.welcome-hero h2 {
  font-size: 1.3rem;
}

.welcome-version {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.welcome-copy {
  display: grid;
  gap: 10px;
}

.welcome-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.welcome-note p {
  margin: 0;
  line-height: 1.55;
}

/* Amber callout for the lead "consulting & training" notice. */
.welcome-note-highlight {
  border-color: color-mix(in srgb, var(--warning), var(--border) 45%);
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning), var(--surface) 84%);
}

.welcome-note-highlight p {
  font-weight: 600;
}

/* Beta status footer — same amber language as the About dialog's beta card. */
.welcome-beta {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning), var(--border) 55%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning), var(--surface) 88%);
}

.welcome-beta-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: color-mix(in srgb, var(--warning), var(--text) 35%);
}

.welcome-beta-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.welcome-beta p {
  margin: 0;
  line-height: 1.5;
  font-weight: 600;
}

.welcome-dialog-actions {
  justify-content: center;
}

.welcome-dialog-actions .primary-button {
  min-width: 140px;
  min-height: 42px;
}

.reset-confirm-dialog {
  width: min(620px, calc(100vw - 28px));
}

.demo-variant-chooser {
  /* Deliberately NOT a flex/grid container: a <fieldset> as a flex parent is the
     most engine-quirky construct in CSS and was rendering the options un-stacked.
     Plain block flow stacks the option labels reliably; the gap below replaces it. */
  border: none;
  margin: 0;
  padding: 0;
  /* Defeat the UA fieldset default min-inline-size: min-content. */
  min-inline-size: 0;
}

/* Keep the explicit none so the chooser never leaks into the plain Reset dialog. */
.demo-variant-chooser[hidden] {
  display: none;
}

.demo-variant-chooser legend {
  padding: 0;
  margin-bottom: 8px;
  font-weight: 650;
  font-size: 0.95rem;
}

.demo-variant-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}

/* Spacing between the stacked option cards (replaces the former fieldset flex gap). */
.demo-variant-option + .demo-variant-option {
  margin-top: 8px;
}

.demo-variant-option:hover {
  background: var(--surface-muted);
}

.demo-variant-option:has(input:focus-visible) {
  outline: 2px solid var(--selected-border);
  outline-offset: 2px;
}

.demo-variant-option:has(input:checked) {
  background: var(--selected-bg);
  border-color: var(--selected-border);
  box-shadow: inset 0 0 0 1px var(--selected-border);
}

/* Undo the global text-field styling (input { width:100%; min-height:38px; border;
   background }) that otherwise renders the radio as a full-width box and shoves the
   text far to the right — same reset pattern as .checkbox-row input. */
.demo-variant-option input {
  flex: none;
  width: 16px;
  min-height: 16px;
  margin-top: 3px;
  padding: 0;
  border: none;
  background: none;
  accent-color: var(--accent);
}

.demo-variant-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.demo-variant-text strong {
  font-size: 0.95rem;
  font-weight: 650;
}

.demo-variant-text small {
  color: var(--muted);
  /* Explicit so the hint never collapses to the tiny UA <small> size. */
  font-size: 0.85rem;
  line-height: 1.35;
}

.add-node-dialog {
  width: min(560px, calc(100vw - 28px));
}

.add-node-dialog-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.add-node-dialog-header,
.add-node-name-field,
.add-node-dialog-body .dialog-actions {
  grid-column: 1 / -1;
}

.configuration-dialog-body {
  gap: 18px;
}

.configuration-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.configuration-dialog-header p {
  margin-top: 4px;
  line-height: 1.4;
}

.configuration-dialog .primary-button,
.configuration-dialog .command-button,
.configuration-dialog .load-button,
.configuration-dialog .file-command,
.configuration-dialog .segmented-button {
  font-size: 0.8rem;
  line-height: 1;
}

.configuration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.configuration-data-section,
.configuration-grid > .settings-section {
  grid-column: 1 / -1;
}

.configuration-data-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: stretch;
}

.configuration-data-actions > button,
.configuration-data-actions > .file-command {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
}

.about-dialog-body {
  gap: 18px;
}

.about-hero {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.about-logo {
  width: 88px;
  height: 88px;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
}

.about-hero h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}

.about-hero p {
  line-height: 1.45;
}

.about-hero .about-tagline {
  margin-top: 8px;
  font-style: italic;
  font-weight: 500;
  color: color-mix(in srgb, var(--accent-strong), var(--text) 35%);
}

.about-profile-intro {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.about-profile-link {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0 10px 0 8px;
  border: 1px solid color-mix(in srgb, #0a66c2, var(--border) 18%);
  border-radius: 7px;
  background: #0a66c2;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 780;
  text-decoration: none;
  line-height: 1;
}

.about-profile-link:hover {
  background: color-mix(in srgb, #0a66c2, #000000 12%);
}

.about-profile-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.about-profile-icon {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.about-profile-note {
  max-width: 46rem;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.45;
}

.about-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.about-meta-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.about-meta-grid dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  text-transform: uppercase;
}

.about-meta-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 760;
}

.about-meta-grid .about-storage-card,
.about-meta-grid .about-beta-card {
  grid-column: 1 / -1;
}

.about-storage-card dt,
.about-beta-card dt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-storage-card dd,
.about-beta-card dd {
  font-weight: 650;
  line-height: 1.45;
}

.about-meta-grid .about-beta-card {
  background: color-mix(in srgb, var(--warning), var(--surface) 88%);
  border-color: color-mix(in srgb, var(--warning), var(--border) 55%);
}

.about-beta-card dt {
  color: color-mix(in srgb, var(--warning), var(--text) 35%);
}

.about-storage-icon,
.about-beta-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.help-dialog-body {
  gap: 18px;
}

.help-search-control {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
}

.help-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.45fr);
  gap: 14px;
  min-height: 430px;
}

.help-topic-panel {
  min-height: 0;
}

.help-topic-list {
  min-height: 0;
  max-height: 56vh;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.help-topic-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.help-topic-button.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.help-topic-button-title {
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.25;
}

.help-topic-button-summary {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.help-article {
  min-height: 0;
  max-height: 56vh;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.help-article-header {
  display: grid;
  gap: 5px;
}

.help-article-header h3 {
  font-size: 1rem;
}

.help-section {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.help-section h4 {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.3;
}

.help-section p,
.help-bullet-list {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.48;
}

.help-bullet-list {
  margin: 0;
  padding-left: 18px;
}

.help-bullet-list li + li {
  margin-top: 5px;
}

.help-notice {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning), var(--surface) 90%);
  color: color-mix(in srgb, var(--warning), var(--text) 28%);
  font-size: 0.82rem;
  line-height: 1.45;
  border-radius: 0 6px 6px 0;
}

.help-code-block {
  margin: 0;
  padding: 10px 12px;
  max-height: 280px;
  overflow: auto;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.help-empty-state {
  align-self: center;
  justify-self: center;
  max-width: 360px;
  text-align: center;
}

.new-product-dialog-body {
  gap: 18px;
}

.new-product-wizard {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.82fr);
  gap: 14px;
}

.wizard-section {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.wizard-section h3 {
  font-size: 0.82rem;
  color: var(--text);
}

.wizard-summary-grid {
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(110px, 1fr);
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
}

.wizard-summary-grid strong {
  color: var(--text);
  font-weight: 760;
}

.checkbox-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}

.checkbox-row input {
  width: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--success);
}

dialog::backdrop {
  background: var(--backdrop);
}

.dialog-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.dialog-actions {
  justify-content: flex-end;
}

.reset-confirm-dialog .dialog-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
}

.reset-confirm-dialog .dialog-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    overflow: visible;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    min-height: 0;
  }

  .topbar > * {
    flex: 0 0 auto;
  }

  .brand {
    min-width: 0;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
  }

  .global-search {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-width: 0;
  }

  .global-search-field input,
  .global-search-filters select {
    min-height: 38px;
  }

  .global-search-filter-toggle {
    display: inline-flex;
  }

  .global-search-filters {
    grid-column: 1 / -1;
    width: 100%;
    gap: 6px;
    display: none;
  }

  .global-search.filters-open .global-search-filters {
    display: inline-flex;
  }

  .global-search-filters select {
    flex: 1 1 0;
    max-width: none;
  }

  .toolbar {
    width: 100%;
    gap: 6px;
  }

  .toolbar .primary-button,
  .toolbar .success-button,
  .toolbar .load-button,
  .toolbar .danger-button,
  .toolbar .demo-button,
  .toolbar .ghost-button {
    flex: 1 1 88px;
    width: auto;
    min-height: 34px;
    padding: 0 10px;
  }

  .toolbar .icon-button {
    width: 36px;
    min-height: 34px;
  }

  .workspace {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(420px, auto);
    overflow: visible;
  }

  .workbench-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .workbench-toolbar > .segmented-control,
  .workbench-actions {
    width: 100%;
  }

  .workbench-actions {
    justify-content: flex-start;
  }

  .workspace.show-ebom.show-mbom:not(.show-inspector),
  .workspace.show-ebom:not(.show-mbom).show-inspector,
  .workspace:not(.show-ebom).show-mbom.show-inspector,
  .workspace.show-ebom:not(.show-mbom):not(.show-inspector),
  .workspace:not(.show-ebom).show-mbom:not(.show-inspector),
  .workspace:not(.show-ebom):not(.show-mbom).show-inspector,
  .workspace:not(.show-ebom):not(.show-mbom):not(.show-inspector) {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .model-actions {
    justify-content: flex-start;
  }

  .field-grid,
  .opentwin-detail-grid,
  .identity-card-row,
  .configuration-grid,
  .about-hero,
  .about-meta-grid,
  .help-layout,
  .new-product-wizard,
  .rflp-workspace,
  .rflp-workspace.hide-navigator,
  .rflp-workspace.hide-side,
  .rflp-workspace.hide-navigator.hide-side,
  .class-workspace,
  .class-taxonomy-toolbar,
  .class-attribute-row,
  .add-node-dialog-body,
  .rflp-node-form,
  .rflp-relation-form {
    grid-template-columns: 1fr;
  }

  .rflp-relation-edge {
    grid-template-columns: minmax(0, 1fr);
  }

  .rflp-trace-columns {
    grid-template-columns: 1fr;
  }

  .rflp-relation-flow {
    justify-content: flex-start;
  }

  .rflp-relation-delete {
    justify-self: start;
  }

  .identity-card-row.has-thumbnail-control {
    grid-template-columns: 1fr;
  }

  .settings-switch {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .help-search-control {
    grid-template-columns: 1fr;
  }

  .settings-switch-control {
    justify-self: end;
  }

  .version-item {
    grid-template-columns: 1fr;
  }

  .version-actions {
    justify-content: flex-start;
  }

  textarea {
    min-height: 320px;
  }
}

/* Deployment swimlane (manifest | software-artefakt | logical-role) — mirrors
   the RFLP trace columns. Read-only projection of the deployment sub-model. */
.deployment-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#deployment-tab h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.deployment-hint {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.deployment-empty {
  margin: 12px 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
}

.deployment-columns {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin: 12px 14px 0;
  overflow-x: visible;
}

.deployment-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.deployment-column[data-kind="software-artefakt"] {
  border-color: color-mix(in srgb, var(--accent), var(--border) 55%);
}

.deployment-column[data-kind="sbom"] {
  border-color: color-mix(in srgb, #0f766e, var(--border) 35%);
  background: color-mix(in srgb, #0f766e, var(--surface) 94%);
}

.deployment-column[data-kind="sbom"] .deployment-count {
  color: color-mix(in srgb, #0f766e, var(--text) 28%);
  font-weight: 800;
}

.deployment-column h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  white-space: nowrap;
}

.deployment-heading-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deployment-heading-main > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deployment-count {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.deployment-list {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.deployment-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text);
  overflow: hidden;
}

.deployment-item h4 {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.deployment-item-id {
  margin: 0;
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.deployment-item-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.deployment-item.is-selectable {
  cursor: pointer;
}

.deployment-item.is-selectable:hover {
  border-color: color-mix(in srgb, var(--accent), var(--border) 40%);
}

.deployment-item.is-selectable:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.deployment-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* --- Deployment authoring (ADR 0022) --- */

.deployment-authoring-panel {
  margin: 12px 14px 16px;
}

.deployment-authoring-panel > summary,
.deployment-authoring-secondary-panel > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
}

.deployment-authoring-panel > summary > span,
.deployment-authoring-secondary-panel > summary > span {
  vertical-align: middle;
}

.deployment-authoring-panel > summary:focus-visible,
.deployment-authoring-secondary-panel > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.deployment-authoring {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
}

.deployment-authoring-primary,
.deployment-authoring-secondary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  align-items: stretch;
}

.deployment-authoring-secondary-panel {
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px solid var(--border);
}

.deployment-authoring-secondary {
  margin-top: 8px;
}

.deployment-form {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.deployment-form-primary {
  border-color: color-mix(in srgb, var(--accent), var(--border) 58%);
  background: color-mix(in srgb, var(--surface-muted), var(--surface) 26%);
}

.deployment-form-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deployment-form h3 {
  min-width: 0;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.deployment-form-fields {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.deployment-form label,
.deployment-selected-fields label {
  display: grid;
  gap: var(--detail-label-gap);
  font-size: var(--detail-label-size);
  line-height: 1.35;
  color: var(--muted);
}

.deployment-selected-fields label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deployment-form input,
.deployment-selected-fields input,
.deployment-binding-form select {
  width: 100%;
  box-sizing: border-box;
}

.deployment-selected-fields input {
  min-height: 36px;
  padding: 0 8px;
  font-size: var(--detail-field-size);
}

.deployment-form .primary-button,
.deployment-binding-form .primary-button {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  text-align: center;
}

.deployment-help-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent), var(--border) 50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 90%);
  color: var(--accent-strong);
  cursor: help;
  font-size: 0.7rem;
  font-weight: 780;
  line-height: 1;
}

.deployment-help-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.deployment-selected {
  margin: 4px 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  gap: 12px;
}

.deployment-selected-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.deployment-selected-header h3 {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

.deployment-kind-chip {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.deployment-selected-id {
  margin: 2px 0 0;
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}

.deployment-selected-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px 10px;
  align-items: start;
}

.deployment-selected-fields > label {
  grid-column: span 4;
  min-width: 0;
  align-self: start;
}

.deployment-selected-fields > label[data-deployment-attribute="title"],
.deployment-selected-fields > label[data-deployment-attribute="description"] {
  grid-column: span 6;
}

.deployment-selected-fields > label[data-deployment-attribute="status"],
.deployment-selected-fields > label[data-deployment-attribute="manifest_hash"],
.deployment-selected-fields > label[data-deployment-attribute="content_hash"] {
  grid-column: span 3;
}

.deployment-structured-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
}

.deployment-structured-field > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.deployment-structured-field > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.deployment-structured-field > summary span {
  margin-left: 3px;
}

.deployment-structured-field textarea {
  width: 100%;
  min-height: 72px;
  max-height: 180px;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  resize: vertical;
}

@container detail-panel (max-width: 700px) {
  .deployment-selected-fields > label,
  .deployment-selected-fields > label[data-deployment-attribute="title"],
  .deployment-selected-fields > label[data-deployment-attribute="description"],
  .deployment-selected-fields > label[data-deployment-attribute="status"],
  .deployment-selected-fields > label[data-deployment-attribute="manifest_hash"],
  .deployment-selected-fields > label[data-deployment-attribute="content_hash"] {
    grid-column: 1 / -1;
  }
}

.deployment-binding-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.deployment-binding-section h4 {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
}

.deployment-binding-list {
  display: grid;
  gap: 6px;
}

.deployment-binding-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.deployment-binding-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deployment-binding-row .danger-button {
  flex: none;
  min-height: 30px;
  padding: 0 8px;
  font-size: 0.72rem;
}

.deployment-binding-empty {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.deployment-binding-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: center;
}

.deployment-binding-form select {
  min-width: 0;
  max-width: 100%;
}

.deployment-binding-form .primary-button {
  width: auto;
  min-width: 118px;
}

.deployment-binding-active,
.deployment-binding-inactive {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 760;
  white-space: nowrap;
}

.deployment-binding-active {
  border: 1px solid var(--success-border);
  background: color-mix(in srgb, var(--success), transparent 88%);
  color: var(--success-strong);
}

.deployment-binding-inactive {
  border: 1px solid color-mix(in srgb, var(--warning), var(--border) 40%);
  background: color-mix(in srgb, var(--warning), transparent 90%);
  color: color-mix(in srgb, var(--warning), var(--text) 24%);
}

.deployment-effectivity-context,
.deployment-binding-variant {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(118px, 0.85fr) repeat(auto-fit, minmax(112px, 1fr));
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-muted), var(--surface) 28%);
}

.deployment-effectivity-context {
  border-style: dashed;
}

.deployment-binding-variant-caption {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.deployment-effectivity-context input,
.deployment-binding-variant input,
.deployment-binding-variant select {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.deployment-manifest-binding-list {
  display: grid;
  gap: 4px;
}

.deployment-manifest-binding-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
}

.deployment-manifest-binding-row.has-drift {
  border-color: color-mix(in srgb, var(--warning, #b8860b), var(--border) 40%);
  background: color-mix(in srgb, var(--warning, #b8860b), transparent 92%);
}

.deployment-manifest-binding-pair {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.deployment-binding-status {
  flex: none;
  font-size: 0.7rem;
  white-space: nowrap;
}

.deployment-binding-status.is-ok {
  color: var(--success-strong);
}

.deployment-binding-status.is-drift {
  color: color-mix(in srgb, var(--warning, #b8860b), var(--text) 30%);
}

.deployment-issues {
  margin: 14px 14px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning, #b8860b), var(--border) 50%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning, #b8860b), transparent 92%);
}

.deployment-issues.is-ready {
  border-color: var(--success-border);
  background: color-mix(in srgb, var(--success), transparent 92%);
}

.deployment-issues h3 {
  margin: 0 0 6px;
  font-size: 0.8rem;
}

.deployment-ready {
  margin: 0;
  font-size: 0.78rem;
  color: var(--success-strong);
}

.deployment-gaps-hint {
  margin: 0 0 6px;
  font-size: 0.74rem;
  color: var(--muted);
}

.deployment-issues ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  font-size: 0.74rem;
  color: var(--text);
}