/* PXLTAB F6.2 Debug UI alignment
   --------------------------------
   Presentation-only adapter from the approved PXLTAB design system to the
   existing Workflow Debug and Image Editor Debug DOM. It intentionally owns
   no execution, Recipe, provider, prompt, or data behavior. */

.node-system-page #debug-view {
  color: var(--pxds-text);
}

/* Debug retains its approved information architecture. Only the visual
   surfaces, density, typography, and interaction states are normalized. */
.node-system-page #debug-view :is(
  .system-selector-panel,
  .canvas-toolbar,
  .d3-case-header,
  .d3-input-section,
  .d3-nodes-section,
  .d3-prompt-preview-section,
  .d3-output-section,
  .d3-phase-boundary,
  .d4-rail-panel,
  .f4-debug-editor-stage,
  .f4-debug-panel,
  .f4-debug-prompt-structure
) {
  border-color: var(--pxds-border);
  color: var(--pxds-text);
  background: var(--pxds-surface-1);
  box-shadow: var(--pxds-shadow-layer-1);
}

.node-system-page #debug-view :is(
  .d3-input-group,
  .d3-status-card,
  .d3-semantic-container,
  .d3-node,
  .d4-model-card,
  .d4-build-card,
  .d4-pointer-card,
  .d4-draft-change,
  .d4-empty-state,
  .f4-debug-runtime,
  .f4-debug-path-group,
  .f4-debug-model-card,
  .f4-debug-recipe-card,
  .f4-debug-structure-grid > section,
  .f4-debug-system-node,
  .f4-debug-locator-figure,
  .f4-debug-content-empty,
  .f4-debug-result-empty
) {
  border-color: var(--pxds-border);
  color: var(--pxds-text);
  background: var(--pxds-surface-2);
  box-shadow: var(--pxds-shadow-layer-2);
}

.node-system-page #debug-view :is(
  .d3-user-category,
  .d3-user-field,
  .d3-output-setting,
  .d3-selection-groups,
  .d3-selection-meta,
  .d3-semantic-tag,
  .d3-direct-intent article,
  .f2c-r1-debug-tag,
  .f2c-expanded-provider-summary,
  .d3-node-settings,
  .d3-profile-line,
  .d3-version-option,
  .d3-version-preview,
  .d4-node-labels span,
  .f4-debug-evidence-grid > div,
  .f4-debug-tag,
  .f4-debug-locator-meta > div,
  .f4-debug-transport-summary > div
) {
  border-color: var(--pxds-border);
  color: var(--pxds-text);
  background: var(--pxds-surface-3);
  box-shadow: var(--pxds-shadow-layer-3);
}

/* The settings rail scrolls with the document, matching the approved Debug
   interaction. Neither Workflow nor Image Editor has a frozen side column. */
.node-system-page #debug-view :is(.d4-operations-rail, .f4-debug-settings-rail) {
  position: static;
  top: auto;
}

.node-system-page #debug-view :is(.d4-main-layout, .f4-debug-evidence-workspace) {
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: var(--space-4);
}

/* The Debug workspace title is a complete card, not a connected tab. Keep all
   four corners visible in both themes. */
.node-system-page #debug-view .canvas-toolbar {
  border-radius: var(--radius-3);
}

/* Initial API hydration uses one compact, clearly transient status treatment.
   The class is removed as soon as the real assignment and Recipe rows render. */
.node-system-page #debug-view :is(#f2c-provider-summary, #f2c-build-summary).is-loading {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--pxds-border));
  border-radius: var(--radius-2);
  color: var(--color-warning);
  background: var(--color-warning-surface);
  box-shadow: none;
  font-size: var(--pxds-type-status);
  font-weight: 700;
  line-height: 1.4;
}

/* Shared text hierarchy. Debug microcopy stays compact but never renders
   below the approved 10px readability floor. */
.node-system-page #debug-view :is(small, em, kbd),
.node-system-page #debug-view :is(
  .d3-case-header small,
  .d3-section-heading small,
  .d3-status-card > span,
  .d3-input-group-heading small,
  .d3-input-group-heading > span,
  .d3-user-field em,
  .d3-user-field small,
  .d3-selection-category > strong,
  .d3-selection-option,
  .d3-semantic-container > summary small,
  .d3-semantic-container > summary em,
  .d3-semantic-subcategory > header,
  .d3-semantic-rules li,
  .d3-node-header small,
  .d3-version-badge,
  .d3-node-purpose,
  .d4-rail-heading small,
  .d4-provider-heading > small,
  .d4-model-card small,
  .d4-build-card small,
  .d4-pointer-card small,
  .d4-empty-state small,
  .d4-profile-version,
  .f4-debug-section-heading small,
  .f4-debug-help,
  .f4-debug-badge,
  .f4-debug-readonly,
  .f4-debug-evidence-grid dt,
  .f4-debug-evidence-grid dd,
  .f4-debug-path-heading small,
  .f4-debug-provider-group > h3,
  .f4-debug-model-card > header small,
  .f4-debug-recipe-card > header small,
  .f4-debug-version-select span,
  .f4-debug-system-node p,
  .f4-debug-system-version,
  .f4-debug-tag p,
  .f4-debug-locator-meta small,
  .f4-debug-locator-meta strong,
  .f4-debug-transport-summary small,
  .f4-debug-transport-summary strong,
  .f4-debug-asset-table,
  .f4-debug-code
) {
  font-size: var(--pxds-type-min-readable);
}

.node-system-page #debug-view :is(
  .d3-case-header h2,
  .d3-section-heading h2,
  .f4-debug-section-heading h2
) {
  color: var(--pxds-text);
  font-size: var(--type-card-title);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-heading);
}

.node-system-page #debug-view :is(
  .d3-case-header p,
  .d3-input-group > p,
  .d3-phase-boundary p,
  .d3-node-purpose,
  .d4-rail-panel > p,
  .f4-debug-help,
  .f4-debug-tag p,
  .f4-debug-system-node p
) {
  color: var(--pxds-text-muted);
}

.node-system-page #debug-view :is(
  .d3-section-heading > span,
  .d3-input-group-heading > span,
  .d3-output-settings-evidence,
  .d4-provider-heading > small,
  .f4-debug-readonly
) {
  color: var(--pxds-text-subtle);
}

/* Controls and menu-like surfaces. */
.node-system-page #debug-view :is(
  select,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  textarea,
  .d3-user-multi-menu > summary
) {
  min-height: var(--action-height-compact);
  border: 1px solid var(--pxds-border);
  border-radius: var(--radius-2);
  color: var(--pxds-text);
  background: var(--pxds-surface-1);
  font-size: var(--pxds-type-choice);
  line-height: 1.35;
  transition:
    border-color var(--pxds-motion-fast) ease,
    background-color var(--pxds-motion-fast) ease,
    box-shadow var(--pxds-motion-fast) ease;
}

.node-system-page #debug-view :is(
  select,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  textarea,
  .d3-user-multi-menu > summary
):is(:hover, :focus-visible, :focus-within) {
  border-color: var(--pxds-border-strong);
  background: var(--pxds-hover-surface);
}

.node-system-page #debug-view :is(
  select,
  input,
  textarea,
  button,
  summary,
  [tabindex]
):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.node-system-page #debug-view :is(
  .d3-node-action,
  .d3-open-library,
  .d3-use-version,
  .d4-card-actions button,
  .d4-primary-action,
  .f4-debug-card-actions button,
  .d4-confirm-actions button,
  .f2c-debug-dialog button
) {
  min-height: var(--action-height-compact);
  border: 1px solid var(--pxds-border);
  border-radius: var(--radius-2);
  color: var(--pxds-text);
  background: var(--pxds-surface-2);
  font-size: var(--pxds-type-status);
  font-weight: 700;
  transition:
    border-color var(--pxds-motion-fast) ease,
    background-color var(--pxds-motion-fast) ease,
    color var(--pxds-motion-fast) ease,
    transform var(--pxds-motion-fast) ease;
}

.node-system-page #debug-view :is(
  .d3-node-action,
  .d3-open-library,
  .d3-use-version,
  .d4-card-actions button,
  .d4-primary-action,
  .f4-debug-card-actions button,
  .d4-confirm-actions button,
  .f2c-debug-dialog button
):hover:not(:disabled) {
  border-color: var(--pxds-border-strong);
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
  transform: translateY(-1px);
}

.node-system-page #debug-view :is(button, select, input):disabled {
  cursor: not-allowed;
}

/* Status badges use semantic design-system colors instead of legacy neon. */
.node-system-page #debug-view :is(
  .d4-model-status,
  .d4-build-status,
  .d3-version-badge,
  .d6-node-status,
  .f4-debug-badge,
  .f4-debug-readonly,
  .f4-debug-system-version
) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--pxds-border);
  border-radius: var(--radius-pill);
  color: var(--pxds-text-muted);
  background: var(--pxds-surface-3);
  font-size: var(--pxds-type-status);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.node-system-page #debug-view :is(
  .d4-model-status.is-active,
  .d4-build-status.is-active,
  .d6-node-status.is-pass,
  .f4-debug-badge.is-ready,
  .f4-debug-badge.is-pass
) {
  border-color: color-mix(in srgb, var(--color-success) 48%, var(--pxds-border));
  color: var(--color-success);
  background: var(--color-success-surface);
}

.node-system-page #debug-view :is(.d6-node-status.is-running, .f4-debug-badge.is-running) {
  border-color: color-mix(in srgb, var(--color-info) 48%, var(--pxds-border));
  color: var(--color-info);
  background: var(--color-info-surface);
}

.node-system-page #debug-view :is(.d6-node-status.is-fail, .f4-debug-badge.is-fail) {
  border-color: color-mix(in srgb, var(--color-error) 48%, var(--pxds-border));
  color: var(--color-error);
  background: var(--color-error-surface);
}

.node-system-page #debug-view :is(.d6-node-status.is-skipped, .f4-debug-badge.is-skipped) {
  color: var(--pxds-text-subtle);
  background: var(--color-canvas-subtle);
}

/* Workflow inputs and prompt structures. */
.node-system-page #debug-view .d3-input-group {
  border-radius: var(--radius-3);
}

.node-system-page #debug-view :is(.d3-user-input-stack, .d3-input-groups) {
  gap: var(--space-3);
}

.node-system-page #debug-view .d3-user-category {
  border-radius: var(--radius-3);
}

.node-system-page #debug-view .d3-user-field {
  box-shadow: none;
}

.node-system-page #debug-view :is(.d3-selection-groups, .d3-selection-meta) {
  background: var(--pxds-surface-1);
  box-shadow: none;
}

html[data-theme="light"] .node-system-page #debug-view .d3-selection-groups {
  background: var(--pxds-surface-3);
}

.node-system-page #debug-view .d3-selection-category + .d3-selection-category {
  border-top-color: var(--pxds-border);
}

.node-system-page #debug-view .d3-selection-category > strong {
  color: var(--pxds-text-muted);
  font-weight: 600;
}

.node-system-page #debug-view .d3-selection-option {
  border-color: var(--pxds-border);
  color: var(--pxds-text-muted);
  background: var(--pxds-surface-2);
  font-weight: 500;
  transition:
    border-color var(--pxds-motion-fast) ease,
    background-color var(--pxds-motion-fast) ease,
    color var(--pxds-motion-fast) ease;
}

html[data-theme="light"] .node-system-page #debug-view .d3-selection-option:not(.is-selected) {
  background: #fbfcfe;
}

.node-system-page #debug-view .d3-selection-option:not(.is-selected):not(.is-limit-blocked):is(:hover, :focus-within) {
  border-color: var(--pxds-border-strong);
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
}

.node-system-page #debug-view .d3-selection-option.is-selected {
  border-color: color-mix(in srgb, var(--pxds-brand) 60%, var(--pxds-border));
  color: #fff;
  background: var(--pxds-brand-fill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxds-brand) 24%, transparent);
  font-weight: 700;
}

.node-system-page #debug-view .d3-semantic-container {
  overflow: clip;
}

.node-system-page #debug-view .d3-semantic-container[open] > summary {
  border-bottom-color: color-mix(in srgb, var(--pxds-brand) 30%, var(--pxds-border));
  color: var(--pxds-text);
  background: color-mix(in srgb, var(--pxds-brand) 8%, var(--pxds-surface-2));
}

.node-system-page #debug-view .d3-semantic-tag.is-selected {
  border-color: color-mix(in srgb, var(--pxds-brand) 58%, var(--pxds-border));
}

.node-system-page #debug-view :is(.d3-semantic-tag, .d3-direct-intent article, .f2c-r1-debug-tag, .f2c-expanded-provider-summary) {
  box-shadow: none;
}

.node-system-page #debug-view .f2c-r1-debug-tag {
  border-color: color-mix(in srgb, var(--pxds-brand) 38%, var(--pxds-border));
}

.node-system-page #debug-view .f2c-r1-debug-tag > header strong {
  color: var(--pxds-text);
}

.node-system-page #debug-view .f2c-r1-debug-tag > header span {
  color: var(--color-success);
  font-size: var(--pxds-type-status);
}

.node-system-page #debug-view .f2c-r1-debug-tag > p {
  border-top-color: var(--pxds-border);
  color: var(--pxds-text-muted);
  font-size: var(--pxds-type-min-readable);
}

.node-system-page #debug-view .f2c-compact-summary-row > strong {
  color: var(--pxds-text);
  font-size: var(--pxds-type-status);
}

.node-system-page #debug-view .f2c-compact-summary-row > span {
  color: var(--pxds-text-muted);
}

.node-system-page #debug-view .f2c-compact-summary-row > b {
  border-color: var(--pxds-border);
  color: var(--pxds-text-muted);
  background: var(--pxds-surface-3);
  font-size: var(--pxds-type-status);
}

.node-system-page #debug-view .f2c-compact-summary-row > b.is-active {
  border-color: color-mix(in srgb, var(--color-success) 48%, var(--pxds-border));
  color: var(--color-success);
  background: var(--color-success-surface);
}

/* Keep the Recipe summary readable while aligning its state badges to the
   card's right edge. The View action remains in the approved top-right slot. */
.node-system-page #debug-view .f2c-compact-operation {
  position: relative;
  display: block;
}

.node-system-page #debug-view .f2c-compact-operation > div {
  width: 100%;
}

.node-system-page #debug-view .f2c-compact-operation > div > h2 {
  padding-right: 106px;
}

.node-system-page #debug-view .f2c-compact-operation > button {
  position: absolute;
  top: 18px;
  right: 18px;
}

.node-system-page #debug-view .f2c-compact-summary-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  width: 100%;
}

.node-system-page #debug-view .f2c-compact-summary-row > b {
  justify-self: end;
}

.node-system-page #debug-view :is(.d3-semantic-rules, .d3-node details, .d4-model-card details, .d4-build-card details) {
  border-color: var(--pxds-border);
}

/* Workflow nodes and evidence. */
.node-system-page #debug-view .d3-node {
  overflow: hidden;
}

.node-system-page #debug-view .d3-node.is-capability {
  border-top-color: var(--pxds-brand);
}

.node-system-page #debug-view .d3-node.is-system {
  border-top-color: var(--color-info);
}

.node-system-page #debug-view .d3-node.is-edited {
  border-color: var(--color-warning);
}

.node-system-page #debug-view :is(.d3-version-preview, .d4-system-details, .d4-build-details, .f4-debug-code) {
  border: 1px solid var(--pxds-border);
  color: var(--pxds-text-secondary);
  background: var(--color-canvas-subtle);
  box-shadow: none;
  font-family: var(--font-mono);
}

.node-system-page #debug-view .d3-notice {
  border-color: var(--pxds-border);
  color: var(--pxds-text-muted);
  background: var(--pxds-surface-2);
}

.node-system-page #debug-view .d3-notice.is-error {
  border-color: color-mix(in srgb, var(--color-error) 45%, var(--pxds-border));
  color: var(--color-error);
  background: var(--color-error-surface);
}

.node-system-page #debug-view .d3-notice.is-success {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--pxds-border));
  color: var(--color-success);
  background: var(--color-success-surface);
}

/* Provider, Recipe, and history rail. */
.node-system-page #debug-view .d4-provider-heading > strong,
.node-system-page #debug-view .d4-rail-heading small,
.node-system-page #debug-view .d4-build-name {
  color: var(--pxds-text-muted);
  font-size: var(--pxds-type-status);
  letter-spacing: .04em;
}

.node-system-page #debug-view :is(.d4-model-card.is-current, .d4-build-card.is-current, .d4-pointer-card.is-current) {
  border-color: color-mix(in srgb, var(--pxds-brand) 58%, var(--pxds-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pxds-brand) 15%, transparent),
    var(--pxds-shadow-layer-2);
}

.node-system-page #debug-view :is(.d4-card-actions button.is-current, .f4-debug-card-actions button.is-current) {
  border-color: color-mix(in srgb, var(--color-success) 48%, var(--pxds-border));
  color: var(--color-success);
  background: var(--color-success-surface);
}

/* Image Editor Debug uses the same visual hierarchy while the real Editor
   remains the shared iframe component used by User UI. */
.node-system-page #debug-view .f4-debug-editor-stage {
  overflow: hidden;
}

.node-system-page #debug-view .f4-debug-runtime {
  border-top-color: var(--pxds-border);
  background: var(--pxds-surface-2);
  box-shadow: none;
}

.node-system-page #debug-view :is(.f4-debug-evidence-grid > div, .f4-debug-tag, .f4-debug-locator-meta > div, .f4-debug-transport-summary > div) {
  box-shadow: none;
}

.node-system-page #debug-view .f4-debug-operation-selector {
  border-color: color-mix(in srgb, var(--pxds-brand) 42%, var(--pxds-border));
  background: color-mix(in srgb, var(--pxds-brand) 7%, var(--pxds-surface-2));
}

.node-system-page #debug-view .f4-debug-assignment-error {
  border-color: color-mix(in srgb, var(--color-error) 48%, var(--pxds-border));
  color: var(--color-error);
  background: var(--color-error-surface);
}

.node-system-page #debug-view .f4-debug-path-heading {
  border-bottom-color: var(--pxds-border);
  background: var(--pxds-surface-3);
}

.node-system-page #debug-view .f4-debug-provider-group {
  border-bottom-color: var(--pxds-border);
}

.node-system-page #debug-view #f4-debug-provider-content .f4-debug-path-group {
  overflow: visible;
}

/* Light mode keeps compact administrative groups on the parent surface.
   Legacy gray fills created unexplained bands around provider cards and the
   Recipe Version history rows even though those rows are not separate layers. */
html[data-theme="light"] .node-system-page #debug-view .f4-debug-path-group {
  background: var(--pxds-surface-1);
}

html[data-theme="light"] .node-system-page #debug-view .d4-provider-group {
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .node-system-page .f2c-debug-dialog .d5-history-group {
  background: transparent;
}

/* Every collapsed Recipe history row exposes the same left-side disclosure
   affordance. The arrow changes direction when the menu is expanded. */
.node-system-page .f2c-debug-dialog .d5-history-group > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  list-style: none;
}

.node-system-page .f2c-debug-dialog .d5-history-group > summary::-webkit-details-marker {
  display: none;
}

.node-system-page .f2c-debug-dialog .d5-history-group > summary::before {
  content: "\25B8";
  color: var(--pxds-text-muted);
  font-size: 10px;
  line-height: 1;
}

.node-system-page .f2c-debug-dialog .d5-history-group[open] > summary::before {
  content: "\25BE";
  color: var(--pxds-text);
}

/* The provider profile menu must escape the rounded path container. Raising
   the complete panel keeps a bottom-row menu above the following Recipe card
   without changing the shared menu component or its downward-open behavior. */
.node-system-page #debug-view .f4-debug-panel:has(.pxds-select.is-open) {
  position: relative;
  z-index: 20;
  overflow: visible;
}

.node-system-page #debug-view :is(
  .d4-provider-group,
  .d4-model-card,
  .f4-debug-path-group,
  .f4-debug-provider-group,
  .f4-debug-model-card
):has(.pxds-select.is-open) {
  position: relative;
  z-index: 30;
  overflow: visible;
}

/* Workflow and Image Editor Debug expose the same two provider controls:
   one full-width Model selector and one full-width Connection selector. The
   current profile version remains resolved from the selected exact profile. */
.node-system-page #debug-view :is(.d4-provider-selectors, .f4-debug-provider-selectors) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.node-system-page #debug-view .d4-provider-selectors .d4-profile-version,
.node-system-page #debug-view .f4-debug-provider-selectors .f4-debug-version-select {
  margin: 0;
}

.node-system-page #debug-view .f4-debug-version-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  margin: 8px 0;
  color: var(--pxds-text);
  font-size: var(--pxds-type-status);
}

.node-system-page #debug-view .f4-debug-model-card > header strong {
  color: var(--pxds-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.node-system-page #debug-view :is(.d4-profile-version, .f4-debug-version-select) > span {
  color: var(--pxds-text);
  font-weight: 700;
}

.node-system-page #debug-view :is(.d4-profile-version, .f4-debug-version-select) .pxds-select-value {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.node-system-page #debug-view :is(.d4-profile-version, .f4-debug-version-select) select {
  width: 100%;
  min-width: 0;
  min-height: var(--action-height-compact);
}

.node-system-page #debug-view :is(.f4-debug-model-card.is-current, .f4-debug-recipe-card.is-current) {
  border-color: color-mix(in srgb, var(--pxds-brand) 58%, var(--pxds-border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxds-brand) 15%, transparent);
}

.node-system-page #debug-view .f4-debug-structure-grid > section {
  border-color: color-mix(in srgb, var(--pxds-brand) 32%, var(--pxds-border));
  box-shadow: var(--pxds-shadow-layer-2);
}

.node-system-page #debug-view .f4-debug-structure-grid header {
  border-bottom-color: color-mix(in srgb, var(--pxds-brand) 25%, var(--pxds-border));
}

.node-system-page #debug-view .f4-debug-structure-grid h3 {
  color: var(--pxds-text);
}

.node-system-page #debug-view .f4-debug-system-node {
  border-top-color: var(--color-info);
  box-shadow: var(--pxds-shadow-layer-2);
}

/* Image Editor and Workflow Debug share one system-node presentation. */
.node-system-page #debug-view #f4-debug-system-nodes {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 12px;
}

.node-system-page #debug-view #f4-debug-system-nodes .d3-node {
  height: auto;
}

.node-system-page #debug-view .f4-debug-system-history-label {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 9px 10px;
}

.node-system-page #debug-view .f4-debug-system-history-label strong,
.node-system-page #debug-view .f4-debug-system-history-label small {
  display: block;
}

.node-system-page #debug-view .f4-debug-system-history-label strong {
  color: var(--pxds-text);
  font-size: var(--pxds-type-min-readable);
}

.node-system-page #debug-view .f4-debug-system-history-label small {
  color: var(--pxds-text-muted);
  font-size: var(--pxds-type-min-readable);
}

.node-system-page #debug-view .f4-debug-locator-empty {
  border-color: var(--pxds-border-strong);
  color: var(--pxds-text-muted);
  background: var(--pxds-surface-2);
}

.node-system-page #debug-view .f4-debug-locator-figure {
  border-color: color-mix(in srgb, var(--pxds-brand) 40%, var(--pxds-border));
}

.node-system-page #debug-view .f4-debug-asset-table-wrap {
  border-color: var(--pxds-border);
}

.node-system-page #debug-view .f4-debug-asset-table th {
  color: var(--pxds-text-muted);
  background: var(--pxds-surface-3);
}

.node-system-page #debug-view .f4-debug-asset-table :is(th, td) {
  border-bottom-color: var(--pxds-border);
}

/* Dialogs use the same raised surface and preserve native modal behavior. */
.node-system-page #debug-view :is(.d4-confirm-dialog, .f2c-debug-dialog) {
  border-color: var(--pxds-border);
  color: var(--pxds-text);
  background: var(--pxds-surface-1);
  box-shadow: var(--elevation-4);
}

.node-system-page #debug-view :is(.d4-confirm-dialog, .f2c-debug-dialog)::backdrop {
  background: rgba(4, 7, 12, .72);
}

.node-system-page .f2c-debug-dialog,
.node-system-page .f2c-debug-dialog-shell,
.node-system-page .f2c-debug-dialog-shell > header {
  border-color: var(--pxds-border);
  color: var(--pxds-text);
  background: var(--pxds-surface-1);
}

.node-system-page .f2c-debug-dialog-shell > header :is(h2, p, span) {
  color: inherit;
}

.node-system-page .f2c-debug-dialog-shell > header .eyebrow {
  color: var(--pxds-text-muted);
}

/* Light mode must not retain any legacy black islands. */
html[data-theme="light"] .node-system-page #debug-view :is(
  .d3-selection-groups,
  .d3-selection-meta,
  .d3-semantic-container,
  .d3-semantic-tag,
  .d3-direct-intent article,
  .f2c-r1-debug-tag,
  .f2c-expanded-provider-summary,
  .d3-node,
  .d4-model-card,
  .d4-build-card,
  .d4-pointer-card,
  .d4-empty-state,
  .f4-debug-runtime,
  .f4-debug-path-group,
  .f4-debug-model-card,
  .f4-debug-recipe-card,
  .f4-debug-tag,
  .f4-debug-system-node,
  .f4-debug-locator-empty,
  .f4-debug-locator-figure,
  .f4-debug-code
) {
  color: var(--pxds-text);
}

html[data-theme="light"] .node-system-page #debug-view :is(
  .d3-selection-option:not(.is-selected),
  .d3-node-action,
  .d3-open-library,
  .d3-use-version,
  .d4-card-actions button,
  .f4-debug-card-actions button
):is(:hover, :focus-visible) {
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
}

/* F6.2 owner corrections: Debug uploads mirror the approved User upload
   contract. The complete image remains contain-fit while the preview consumes
   the full card height; metadata is a compact status beside Remove. */
.node-system-page #debug-view .d3-upload-card.is-complete .d3-upload-target {
  min-height: 230px;
  padding: 0;
}

.node-system-page #debug-view .d3-upload-card.is-complete .d3-upload-preview {
  display: block;
  width: 100%;
  min-height: 230px;
  height: 230px;
  background: #05070a;
}

.node-system-page #debug-view .d3-upload-card.is-complete .d3-upload-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-3);
  background: #05070a;
}

/* Debug selection limits use the same completed-state language as User UI. */
.node-system-page #debug-view :is(.d3-selection-meta, .d3-user-menu-limit).is-at-limit {
  border-color: rgba(74, 201, 148, .88);
  color: #fff;
  background: var(--action-generation-gradient);
  box-shadow: 0 8px 20px rgba(10, 25, 49, .16);
}

.node-system-page #debug-view :is(.d3-selection-meta, .d3-user-menu-limit).is-at-limit small {
  color: #fff;
}

/* Result glyphs are centered geometrically in both User and Debug output
   placeholders; SVG baselines must not shift the artwork. */
.node-system-page :is(#user-view, #debug-view) .d6-result-placeholder-icon {
  display: grid;
  place-items: center;
}

.node-system-page :is(#user-view, #debug-view) .d6-result-placeholder-icon > svg {
  display: block;
  place-self: center;
  margin: 0;
}

.node-system-page #debug-view .d3-upload-actions {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.node-system-page #debug-view .d3-upload-dimensions,
.node-system-page #debug-view .d3-upload-actions .d3-remove-image {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid var(--pxds-border);
  border-radius: var(--radius-2);
  color: var(--pxds-text-muted);
  background: color-mix(in srgb, var(--pxds-surface-1) 94%, transparent);
  box-shadow: 0 2px 8px rgba(16, 31, 51, .10);
  font-size: var(--pxds-type-status);
  line-height: 1;
}

.node-system-page #debug-view .d3-upload-actions .d3-remove-image {
  position: static;
  color: var(--color-error);
  cursor: pointer;
  transition: border-color var(--pxds-motion-fast) ease, background-color var(--pxds-motion-fast) ease, color var(--pxds-motion-fast) ease, transform var(--pxds-motion-fast) ease;
}

.node-system-page #debug-view .d3-upload-actions .d3-remove-image:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--color-error) 55%, var(--pxds-border));
  background: var(--color-error-surface);
  transform: translateY(-1px);
}

/* Give the Workflow selector the available toolbar width so long owner-facing
   names remain on one line. It still collapses to full width responsively. */
.node-system-page #debug-view .canvas-workflow-control {
  width: min(480px, 45vw);
  min-width: min(380px, 35vw);
  justify-content: flex-start;
}

.node-system-page #debug-view .canvas-workflow-control :is(select, .pxds-select) {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.node-system-page #debug-view .canvas-workflow-control .pxds-select-trigger-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Run uses the shared generation action plus an explicit, presentation-only
   credit badge. No pricing or spend behavior is changed here. */
.node-system-page #debug-view .d3-run-button {
  min-width: 176px;
  grid-template-columns: 18px minmax(42px, auto) auto;
  gap: 8px;
}

.node-system-page #debug-view .d3-run-button > svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.node-system-page #debug-view .d3-run-credit {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  color: inherit;
  background: rgba(255, 255, 255, .14);
  font-size: var(--pxds-type-status);
  font-weight: 800;
  white-space: nowrap;
}

/* Long JSON evidence wraps inside every node instead of creating horizontal
   overflow or escaping the card boundary. */
.node-system-page #debug-view :is(.d3-node, .d3-node details, .d3-node-settings, .d3-version-preview, .d4-system-details, .d4-build-details, .f4-debug-code) {
  min-width: 0;
  max-width: 100%;
}

.node-system-page #debug-view :is(.d3-version-preview, .d4-system-details, .d4-build-details, .f4-debug-code) {
  overflow-x: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Debug surface and case selectors stay flat: inactive choices receive a
   neutral surface cue, while the selected gradient remains visually stable. */
.node-system-page #debug-view :is(.system-choice-button, .d3-case-button) {
  transition: border-color var(--pxds-motion-fast) ease, background-color var(--pxds-motion-fast) ease, color var(--pxds-motion-fast) ease;
}

.node-system-page #debug-view :is(
  .system-choice-button:not(.is-active),
  .d3-case-button:not(.is-active)
):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--pxds-border-strong);
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
  box-shadow: none;
  transform: none;
}

/* Owner-facing actions and openable status badges share one restrained hover
   signal. Passive badges and the flat selectors above are excluded. */
.node-system-page #debug-view :is(
  .d6-node-status[data-d6-node-details],
  .f2c-compact-operation > button,
  .d6-result-actions a
) {
  transition: border-color var(--pxds-motion-fast) ease, background-color var(--pxds-motion-fast) ease, color var(--pxds-motion-fast) ease, box-shadow var(--pxds-motion-fast) ease, transform var(--pxds-motion-fast) ease;
}

.node-system-page #debug-view :is(
  .d6-node-status[data-d6-node-details],
  .f2c-compact-operation > button,
  .d6-result-actions a
):is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--pxds-border-strong);
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
  box-shadow: 0 5px 14px rgba(24, 46, 72, .12);
  transform: translateY(-1px);
}

/* The Recipe View action now follows the shared secondary-action component. */
.node-system-page #debug-view .f2c-compact-operation > button {
  min-width: 86px;
  min-height: var(--action-height-compact);
  padding: 9px 14px;
  border: 1px solid var(--pxds-border);
  border-radius: var(--radius-2);
  color: var(--pxds-text);
  background: var(--pxds-surface-3);
  box-shadow: none;
  font-size: var(--pxds-type-choice);
  font-weight: 700;
}

/* Result actions use neutral theme surfaces in light mode and retain an
   obvious hover in both themes. */
.node-system-page :is(#user-view, #debug-view) .d6-result-actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid var(--pxds-border);
  border-radius: var(--radius-2);
  color: var(--pxds-text);
  background: var(--pxds-surface-3);
  font-size: var(--pxds-type-status);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--pxds-motion-fast) ease, background-color var(--pxds-motion-fast) ease, color var(--pxds-motion-fast) ease, box-shadow var(--pxds-motion-fast) ease, transform var(--pxds-motion-fast) ease;
}

.node-system-page :is(#user-view, #debug-view) .d6-result-actions a:is(:hover, :focus-visible) {
  border-color: var(--pxds-border-strong);
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
  box-shadow: 0 5px 14px rgba(24, 46, 72, .12);
  transform: translateY(-1px);
}

html[data-theme="light"] .node-system-page :is(#user-view, #debug-view) .d6-result-actions a {
  color: var(--pxds-text);
  background: var(--pxds-surface-3);
}

@media (max-width: 900px) {
  .node-system-page #debug-view :is(.d4-main-layout, .f4-debug-evidence-workspace) {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-system-page #debug-view :is(.d4-operations-rail, .f4-debug-settings-rail) {
    width: 100%;
  }

  .node-system-page #debug-view .canvas-workflow-control {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .node-system-page #debug-view .f4-debug-structure-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-system-page #debug-view .f4-debug-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .node-system-page #debug-view :is(
    .d3-case-header,
    .d3-input-section,
    .d3-nodes-section,
    .d3-prompt-preview-section,
    .d3-output-section,
    .d3-phase-boundary,
    .d4-rail-panel,
    .f4-debug-panel,
    .f4-debug-prompt-structure
  ) {
    padding: var(--space-3);
  }

  .node-system-page #debug-view :is(.d3-node-grid, .f4-debug-system-grid, .f4-debug-evidence-grid, .f4-debug-locator-meta, .f4-debug-transport-summary) {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-system-page #debug-view .d3-semantic-tag > header {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-system-page #debug-view .d3-semantic-tag > header select {
    width: 100%;
  }

  .node-system-page #debug-view .f4-debug-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-system-page #debug-view :is(
    select,
    input,
    textarea,
    button,
    summary,
    .d3-selection-option
  ) {
    transition: none;
  }

  .node-system-page #debug-view :is(button, .d3-selection-option):hover {
    transform: none;
  }
}