/* Custom Prompt shares the existing Workflow form, output and history. */
.node-system-page #user-view > .system-selector-panel .system-choice-buttons { grid-template-columns: repeat(5, minmax(108px, 128px)); }
@media (max-width: 1100px) {
  .node-system-page #user-view > .system-selector-panel .system-choice-buttons { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .node-system-page #user-view > .system-selector-panel .system-choice-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-system-page #user-view > .system-selector-panel .system-choice-buttons > [data-system="workflow"]:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
.custom-reference-card { padding: 12px; min-width: 0; }
.custom-reference-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.custom-reference-heading small { font-variant-numeric: tabular-nums; }
.custom-reference-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.custom-reference-thumbnails figure { margin: 0; min-width: 0; height: 152px; align-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.custom-reference-thumbnails img { display: block; width: 100%; height: 90px; object-fit: contain; border-radius: 8px; background: var(--surface, #f4f5f7); }
.custom-reference-thumbnails figcaption { font-weight: 600; margin: 6px 0; }
.custom-reference-thumbnails .d3-remove-image { position: static; font-size: 12px; }
.node-system-page #user-view .d3-upload-card.custom-reference-card > button.d3-upload-target,
.node-system-page #user-view .custom-reference-card .d3-upload-empty { min-height: 100px; height: auto; }
.node-system-page #user-view .custom-reference-card > button[hidden] { display: none; }
.node-system-page #user-view .custom-reference-card { display: flex; flex-direction: column; gap: 8px; }
.node-system-page #user-view .custom-reference-card .field-help { margin-top: auto; }
.node-system-page #debug-view .custom-reference-card > button.d3-upload-target,
.node-system-page #debug-view .custom-reference-card .d3-upload-empty { min-height: 100px; height: auto; }
.node-system-page #debug-view .custom-reference-card > button[hidden] { display: none; }
.custom-reference-card .field-help { margin-bottom: 0; }

/* Only the add button is an upload target; headings and help are ordinary text. */
html[data-theme] .node-system-page :is(#user-view, #debug-view) .d3-upload-card.custom-reference-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: default;
  transform: none;
  box-shadow: none;
  border: 1px solid var(--pxds-border);
  background: var(--pxds-surface-1);
}
html .node-system-page :is(#user-view, #debug-view) .d3-upload-card.custom-reference-card > button.d3-upload-target {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 148px;
  height: auto;
  padding: 16px;
  border: 1px dashed var(--pxds-border);
  border-radius: 10px;
  text-align: center;
}
html .node-system-page :is(#user-view, #debug-view) .d3-upload-card.custom-reference-card > button.d3-upload-target[hidden] { display: none; }
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .d3-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  gap: 4px;
}
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .d3-upload-empty :is(strong, small, .d3-upload-plus) { margin: 0; }
.custom-reference-thumbnails:empty { display: none; }
.custom-reference-heading small { white-space: nowrap; }
.custom-reference-card .d3-upload-target:focus-visible { outline: 2px solid var(--pxds-brand); outline-offset: 2px; }

/* Reserve one stable gallery row: the add-more control occupies the next slot. */
html[data-theme] .node-system-page :is(#user-view, #debug-view) .d3-upload-card.custom-reference-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(152px, 1fr) auto;
  row-gap: 4px;
  min-height: 0;
  align-content: start;
  align-self: stretch;
}
.custom-reference-card .custom-reference-heading,
.custom-reference-card .field-help { grid-column: 1 / -1; }
.custom-reference-card .custom-reference-thumbnails { display: contents; }
.custom-reference-card .custom-reference-thumbnails figcaption { font-size: 12px; line-height: 18px; font-weight: 600; margin: 0; }
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .field-help { margin: 0; align-self: end; }
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .custom-reference-thumbnails img {
  width: 100%; height: 90px; object-fit: contain; object-position: center; background: #05070a;
}
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card.is-optional-empty > .d3-upload-target { grid-column: 1 / -1; }
html .node-system-page :is(#user-view, #debug-view) .d3-upload-card.custom-reference-card.is-complete > button.d3-upload-target {
  min-width: 0; min-height: 90px; height: 90px; padding: 6px;
  align-self: center; margin-bottom: 62px; grid-template-columns: minmax(0, 1fr);
}
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .d3-upload-empty { min-width: 0; }
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card.is-complete .d3-upload-empty small { display: none; }
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card.is-complete .d3-upload-plus { width: 32px; height: 32px; }
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .d3-remove-image {
  min-height: 32px; max-width: 100%; padding: 6px; cursor: pointer;
}
@media (hover: hover) {
  html[data-theme] .node-system-page :is(#user-view, #debug-view) .custom-reference-card > button.d3-upload-target:not(:disabled):hover {
    color: var(--pxds-text);
    background: var(--pxds-hover-surface);
  }
  html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .d3-remove-image:not(:disabled):hover {
    color: #fff; background: #a52626; border-color: #a52626;
  }
}
html[data-theme] .node-system-page :is(#user-view, #debug-view) .custom-reference-card > button.d3-upload-target:not(:disabled):focus-visible {
  color: var(--pxds-text);
  background: var(--pxds-hover-surface);
}
html .node-system-page :is(#user-view, #debug-view) .custom-reference-card .d3-remove-image:focus-visible { outline: 2px solid var(--pxds-brand); outline-offset: 2px; }
/* Match both outer upload cards, including when mobile stacks them in rows. */
.node-system-page #user-assets:has(.custom-reference-card),
.node-system-page #d3-input-grid:has(.custom-reference-card) { align-items: stretch; grid-auto-rows: 1fr; }
/* Readiness checks still disable the picker without the global grey-button flash. */
html .node-system-page #user-view .custom-reference-card.is-limit-pending > button.d3-upload-target:disabled {
  background: transparent !important; opacity: 1; cursor: wait;
}