/*
 * Screen: Workflow discovery (#view-discovery), a DS FormCanvas wizard: SOP, questions, review, done.
 * Tokens only. The DS components (ae-card, ae-form-card, ae-radio, ae-file-zone, ae-badge, ae-status-pill, ae-alert)
 * come from css/components/; this file only lays them out.
 */

/* ---- the sections stack as cards, --s-4 apart like the canvas body ---- */
#view-discovery .wd-section { display: grid; gap: var(--s-4); min-width: 0; align-content: start; }
#view-discovery .wd-actions-group { display: contents; }
#view-discovery .wd-actions-group[hidden] { display: none; }
/* while an action waits on the server: what it is waiting for, at the start of the pinned action bar */
#view-discovery .wd-busy-note {
  flex: 1 1 12rem; min-width: 0; margin: 0;   /* takes the free width and wraps its own text, so the buttons keep their row */
  font: var(--type-body-sm); color: var(--text-muted); text-wrap: pretty;
}

/* ---- head: workflow navigation under the stepper ---- */
#view-discovery .wd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
#view-discovery .wd-nav__spacer { flex: 1 1 auto; }

/* ---- workflow details ---- */
#view-discovery .wd-desc { margin: 0; font: var(--type-body); color: var(--text-body); text-wrap: pretty; }
#view-discovery .wd-chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
#view-discovery .wd-chips:empty { display: none; }
#view-discovery .wd-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--type-body); color: var(--text-body); }
#view-discovery .wd-muted { margin: 0; font: var(--type-body-sm); color: var(--text-muted); }

/* ---- workflow intelligence: a disclosure card, the summary row is the strip ---- */
#view-discovery .wd-intel > summary { list-style: none; flex-wrap: wrap; row-gap: var(--s-1); }
#view-discovery .wd-intel > summary::-webkit-details-marker { display: none; }
#view-discovery .wd-intel__lead { display: inline-flex; color: var(--text-muted); }
#view-discovery .wd-intel__title { font: var(--type-body); font-weight: var(--weight-semibold); color: var(--text-strong); }
#view-discovery .wd-intel__sub { font: var(--type-caption); font-weight: var(--weight-regular); color: var(--text-muted); }
#view-discovery .wd-intel__badges { margin-inline-start: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); }
#view-discovery .wd-intel__caret { display: inline-flex; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
#view-discovery .wd-intel[open] .wd-intel__caret { transform: rotate(180deg); }

/* ---- SOP step ---- */
#view-discovery .wd-sop-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
#view-discovery .wd-sop-choice .ae-radio-group__options { gap: var(--s-3); }
#view-discovery .sop-radio-label { align-items: flex-start; }
#view-discovery .sop-radio-label .ae-radio__box { margin-top: 2px; } /* level with the first text line */
#view-discovery .wd-opt-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
#view-discovery .ae-file-zone:has(.ae-file-zone__prompt) { cursor: pointer; }
#view-discovery .ae-file-zone:has(input:focus-visible) { box-shadow: var(--focus-ring); }
#view-discovery .ae-file-zone.is-over { background: var(--surface-brand-subtle); border-color: var(--border-brand); }

/* ---- question step ---- */
#view-discovery .wd-q { display: grid; gap: var(--s-3); min-width: 0; }
#view-discovery .wd-q__prompt { margin: 0; font: var(--type-h4); color: var(--text-strong); text-wrap: pretty; }
#view-discovery .wd-q__options { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s-2); }
#view-discovery .wd-q__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0; margin-bottom: var(--s-2);
  font: var(--type-body-sm); font-weight: var(--weight-medium); color: var(--text-muted);
}
#view-discovery .wd-q__options .ae-radio-group__options { gap: var(--s-2); padding-top: 0; }
#view-discovery .wd-opt {
  display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-2) var(--s-3);
  border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card);
  transition: var(--transition-control);
}
#view-discovery .wd-opt:hover { border-color: var(--border-strong); background: var(--surface-hover); }
#view-discovery .wd-opt:has(input:checked) { border-color: var(--border-strong); background: var(--surface-sunken); }
#view-discovery .wd-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
#view-discovery .wd-opt__label { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--text-strong); }
#view-discovery .wd-opt__count { flex-shrink: 0; margin-inline-start: auto; }

/* detected value: one bordered row with Confirm / Modify */
#view-discovery .wd-detected {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-md);
}
#view-discovery .wd-detected__info { display: grid; gap: 2px; min-width: 0; }
#view-discovery .wd-detected__tag { font: var(--type-caption); color: var(--text-muted); }
#view-discovery .wd-detected__val { font: var(--type-body); font-weight: var(--weight-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
#view-discovery .wd-detected__actions { display: flex; gap: var(--s-2); }
#view-discovery .btn-confirm.is-confirmed {
  background: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-fg);
}
#view-discovery .btn-modify.is-active { background: var(--surface-sunken); border-color: var(--border-strong); }

/* ---- review ---- */
#view-discovery .wd-review-list { display: grid; gap: var(--s-4); }
#view-discovery .review-qa-list { display: grid; gap: var(--s-3); min-width: 0; }
#view-discovery .review-qa-edit-row { display: grid; gap: var(--s-1); }
#view-discovery .review-wf-card .ae-card__body > p { margin: 0; }