/* PXLTAB Design System v1
   -----------------------
   Shared visual tokens live at the page boundary so future surfaces can opt
   in without copying values. The first approved application is deliberately
   scoped to #user-view; Debug, Library, Reviews, and all generation behavior
   remain unchanged. The User Image Editor consumes the same readability and
   light-state contract through its isolated theme bridge. */

.node-system-page {
  --pxds-page: #090d12;
  --pxds-surface-1: #111720;
  --pxds-surface-2: #151d27;
  --pxds-surface-3: #1b2531;
  --pxds-border: #354252;
  --pxds-border-strong: #607086;
  --pxds-text: #f4f7fb;
  --pxds-text-muted: #b2bdca;
  --pxds-text-subtle: #8d99aa;
  --pxds-brand: #58d2c5;
  --pxds-brand-2: #8580ff;
  --pxds-brand-fill: linear-gradient(110deg, #0a615d, #393382);
  --pxds-shadow-layer-1: 0 22px 56px rgba(0, 0, 0, 0.42);
  --pxds-shadow-layer-2: 0 12px 30px rgba(0, 0, 0, 0.32);
  --pxds-shadow-layer-3: 0 6px 16px rgba(0, 0, 0, 0.24);
  --pxds-motion-fast: 160ms;
  --pxds-motion-standard: 220ms;
  --pxds-type-min-readable: var(--type-min-readable, 10px);
  --pxds-type-choice: 12px;
  --pxds-type-status: 10px;
  --pxds-hover-surface: var(--color-interactive-hover, #1d2431);
}

html[data-theme="light"] .node-system-page {
  --pxds-page: #f4f6fa;
  --pxds-surface-1: #ffffff;
  --pxds-surface-2: #f7f9fc;
  --pxds-surface-3: #eef2f6;
  --pxds-border: #cbd4e0;
  --pxds-border-strong: #748195;
  --pxds-text: #10141c;
  --pxds-text-muted: #5f6979;
  --pxds-text-subtle: #687386;
  --pxds-choice-text: #344054;
  --pxds-brand: #075f59;
  --pxds-brand-2: #2f2a78;
  --pxds-brand-fill: linear-gradient(110deg, #075f59, #2f2a78);
  --pxds-shadow-layer-1: 0 20px 48px rgba(17, 29, 45, 0.12);
  --pxds-shadow-layer-2: 0 10px 26px rgba(17, 29, 45, 0.09);
  --pxds-shadow-layer-3: 0 5px 14px rgba(17, 29, 45, 0.07);
  --pxds-hover-surface: var(--color-interactive-hover, #f0f0f2);
}

/* Category labels keep the 12px choice rhythm. */
.node-system-page #user-view .user-category-button {
  font-size: var(--pxds-type-choice);
}

/* Workflow names are one restrained step smaller than category labels. */
.node-system-page #user-view .user-workflow-button > strong {
  font-size: calc(var(--pxds-type-choice) - 0.5px);
}

/* Status is a compact 10px role for required/optional, completion, defaults,
   and upload-state messages. */
.node-system-page #user-view :is(
  .d3-user-field > span > em,
  .user-case-control-heading > em,
  .d3-output-setting > span > em,
  .d3-upload-empty > em
) {
  font-size: var(--pxds-type-status);
}

.node-system-page #user-view .user-workflow-badge {
  font-size: calc(var(--pxds-type-status) - 1.5px);
  letter-spacing: .02em;
  text-transform: none;
}

/* Workflow choices use the approved compact line-icon tile. Selected titles
   carry the strongest weight; neutral choices remain calm and readable. */
.node-system-page #user-view .user-workflow-button > .user-choice-icon {
  border-radius: 8px;
}

.node-system-page #user-view .user-workflow-button > strong {
  font-weight: 650;
}

.node-system-page #user-view .user-workflow-button.is-active > .user-choice-icon {
  border-color: rgba(103, 221, 179, 0.48);
  color: #ecfff8;
  background: rgba(6, 94, 86, 0.92);
}

.node-system-page #user-view .user-workflow-button.is-active > strong {
  color: #ffffff;
  font-weight: 800;
}

/* Readability contract: visible User Workflow text never renders below 10px.
   This raises only existing microcopy; the established heading hierarchy and
   layout dimensions remain unchanged. */
.node-system-page #user-view :is(small, em, kbd),
.node-system-page #user-view :is(
  .d3-section-heading > span,
  .user-category-letter,
  .d3-output-settings-evidence > span,
  .d3-input-group-heading > span,
  .user-case-control-heading > span,
  .user-case-button,
  .d3-selection-category > strong,
  .d3-selection-option
) {
  font-size: var(--pxds-type-min-readable);
}

/* Light surfaces use dark semantic text. Inverse white remains valid only on
   the selected brand fill or other intentionally dark action surfaces. */
html[data-theme="light"] .node-system-page #user-view :is(
  .user-category-button:not(.is-active),
  .user-workflow-button:not(.is-active),
  .user-case-button:not(.is-active),
  .d3-selection-option:not(.is-selected),
  .d3-upload-target,
  .d3-result-actions a
) {
  color: var(--pxds-text-muted);
}

/* Material and color choices remain softer than body text, but are dark
   enough to scan comfortably on light cards. */
html[data-theme="light"] .node-system-page #user-view .d3-selection-option:not(.is-selected) {
  color: var(--pxds-choice-text);
  background: #fbfcfe;
}

html[data-theme="light"] .node-system-page #user-view .user-workflow-button:not(.is-active) > .user-choice-icon {
  border-color: #d9dee7;
  color: #737d8b;
  background: #f6f8fb;
}

html[data-theme="light"] .node-system-page #user-view .user-workflow-button:not(.is-active) > strong {
  color: #252a32;
}

/* Grid choices remain distinguishable from their containing panel. Dark User
   states intentionally mirror the approved Debug grid interaction. */
html[data-theme="dark"] .node-system-page #user-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);
}

html[data-theme="dark"] .node-system-page #user-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;
}

/* Neutral hover states must be visibly gray in light mode. A white hover can
   disappear against a white surface and therefore is not an allowed state. */
html[data-theme="light"] .node-system-page #user-view :is(
  .system-choice-button:not([aria-pressed="true"]),
  .user-category-button:not(.is-active),
  .user-workflow-button:not(.is-active),
  .user-case-button:not(.is-active),
  .d3-selection-option:not(.is-selected):not(.is-limit-blocked),
  .d3-upload-target,
  .d3-result-actions a
):is(:hover, :focus-visible) {
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
}

/* Density contract: retain the approved page width and gutters. Only the
   workflow choices use the four-column desktop rhythm. */
.node-system-page #user-view .user-workflow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Depth contract: exactly three card elevations inside the User workspace.
   Existing field wrappers stay flat through f6-user-ui-corrections.css. */
.node-system-page #user-view :is(
  .user-workflow-panel,
  .generation-panel,
  .result-panel
) {
  box-shadow: var(--pxds-shadow-layer-1);
}

.node-system-page #user-view :is(
  .d3-input-group,
  .d6-result-node
) {
  box-shadow: var(--pxds-shadow-layer-2);
}

.node-system-page #user-view .d3-user-category {
  box-shadow: var(--pxds-shadow-layer-3);
}

/* Micro labels organize choices; they should not compete with field names. */
.node-system-page #user-view .d3-selection-category > strong {
  font-weight: 600;
}

.node-system-page #user-view .d3-selection-option,
.node-system-page #user-view .d3-user-menu-option {
  font-weight: 500;
}

/* Materials and Colors keep their desktop grids. Mobile exposes the same
   state and limits through a compact menu without changing runtime data. */
.node-system-page #user-view .d3-grid-mobile-menu {
  display: none;
}

.node-system-page #user-view :is(
  .d3-selection-option.is-selected,
  .d3-user-menu-option.is-selected
) {
  font-weight: 700;
}

/* Upload interaction: preserve current hit area and contain-fit preview while
   adding clear hover/focus depth with no layout shift. */
.node-system-page #user-view .d3-upload-card {
  transition:
    border-color var(--pxds-motion-fast) ease,
    box-shadow var(--pxds-motion-standard) ease,
    transform var(--pxds-motion-fast) ease;
}

.node-system-page #user-view .d3-upload-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--pxds-brand) 72%, var(--pxds-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pxds-brand) 30%, transparent),
    0 12px 28px color-mix(in srgb, var(--pxds-brand) 13%, rgba(17, 29, 45, 0.10));
  transform: translateY(-1px);
}

html[data-theme="light"] .node-system-page #user-view .d3-upload-card:is(:hover, :focus-within) {
  background: var(--pxds-hover-surface);
}

/* User Generate action: dark teal/blue/indigo aurora. Animation uses only
   transforms and opacity, avoiding animated filters and large blur regions. */
.node-system-page #user-view .generate-button:not(:disabled),
.node-system-page #user-view .generate-button.is-generating {
  border: 1px solid color-mix(in srgb, var(--pxds-brand) 54%, transparent);
  color: #ffffff;
  background: #060a10;
  box-shadow: 0 10px 26px rgba(5, 18, 35, 0.26);
}

.node-system-page #user-view .generate-button::before {
  inset: -135% -24%;
  background:
    radial-gradient(42% 54% at 20% 38%, rgba(4, 78, 74, 0.98), transparent 68%),
    radial-gradient(46% 58% at 57% 22%, rgba(18, 48, 92, 0.98), transparent 68%),
    radial-gradient(44% 56% at 82% 68%, rgba(39, 34, 88, 0.98), transparent 68%);
  filter: none;
  opacity: 0;
  transform: translate3d(-3%, 0, 0) scale(1.02);
  transition: opacity var(--pxds-motion-standard) ease;
  will-change: transform, opacity;
}

.node-system-page #user-view .generate-button:not(:disabled)::before {
  opacity: 0.58;
}

.node-system-page #user-view .generate-button:not(:disabled):is(:hover, :focus-visible)::before {
  opacity: 0.96;
  animation: pxds-user-generate-aurora 2.2s ease-in-out infinite alternate;
}

.node-system-page #user-view .generate-button.is-generating:disabled {
  border-color: color-mix(in srgb, var(--pxds-brand) 54%, transparent);
  color: #ffffff;
  background: #060a10;
  opacity: 1;
}

.node-system-page #user-view .generate-button.is-generating::before {
  opacity: 0.96;
  animation: pxds-user-generate-aurora 1.15s ease-in-out infinite alternate;
}

.node-system-page #user-view .generate-button.is-generating > :is(svg, span, small) {
  color: #ffffff;
  opacity: 1;
}

@keyframes pxds-user-generate-aurora {
  from { transform: translate3d(-5%, -2%, 0) scale(1.02) rotate(-3deg); }
  to { transform: translate3d(5%, 2%, 0) scale(1.10) rotate(3deg); }
}

@media (max-width: 1120px) {
  .node-system-page #user-view .user-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .node-system-page #user-view .user-workflow-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  /* Keep all four workspace views readable on one mobile row. */
  .node-system-page .workspace-head .view-switcher {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
  }

  .node-system-page .workspace-head .view-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    gap: 4px;
    padding: 7px 3px;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .node-system-page .workspace-head .view-button-label {
    min-width: 0;
    white-space: nowrap;
  }

  .node-system-page .workspace-head .button-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 5px;
    font-size: 8px;
  }

  .node-system-page #user-view .d3-user-field--grid > :is(
    .d3-selection-meta,
    .d3-selection-groups
  ) {
    display: none;
  }

  .node-system-page #user-view .d3-grid-mobile-menu {
    display: block;
  }

  .node-system-page #user-view .d3-grid-mobile-menu .d3-user-menu-options {
    grid-template-columns: minmax(0, 1fr);
    max-height: min(55vh, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-system-page #user-view .d3-upload-card {
    transition: none;
  }

  .node-system-page #user-view .d3-upload-card:is(:hover, :focus-within) {
    transform: none;
  }

  .node-system-page #user-view .generate-button::before,
  .node-system-page #user-view .generate-button.is-generating::before,
  .node-system-page #user-view .generate-button:not(:disabled):is(:hover, :focus-visible)::before {
    animation: none;
  }
}