/*
 * sd-finder — Solution Finder interface components (Session 2.3; Blueprint 9.19–9.24)
 * Parts: module container, progress indicator, step (fieldset + legend = question), selection cards
 * (radio or checkbox inside a label), completed answers with "Change", back action, missing-selection
 * message, result card.
 * States of a selection card (9.20): default, hover, focus-visible, selected, disabled, completed.
 * Selected is never colour alone: 2px blue border + blue-050 surface + filled check marker + copper activation
 * line that traces the border once on selection (Blueprint 3.7, 8.23; reduced motion: no trace).
 * Feels like a guided consultation, not an administrative form (9.21): one question per step, large cards.
 * Interaction script: shared/components.js (data-sd-component="finder"); the logic tree comes in 4.5 / 7.6.
 */

.sd-finder {
  display: grid;
  gap: var(--sd-space-5);
  max-width: 60rem;
  padding: var(--sd-space-5) var(--sd-space-4);
  border: var(--sd-border-width) solid var(--sd-color-card-divider);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-color-surface);
}

@media (min-width: 640px) {
  .sd-finder { padding: var(--sd-space-6); }
}

.sd-finder__header {
  display: grid;
  gap: var(--sd-space-3);
}

/* ---------- Progress indicator ---------- */

.sd-finder-progress {
  display: grid;
  gap: var(--sd-space-2);
}

.sd-finder-progress__text {
  font-size: var(--sd-font-size-small);
  font-weight: var(--sd-font-weight-medium);
  color: var(--sd-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.sd-finder-progress__steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sd-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-finder-progress__step {
  height: 4px;
  border-radius: 2px;
  background: var(--sd-color-gray-300);
  transition: background-color var(--sd-transition-ui);
}

.sd-finder-progress__step[data-status="completed"] { background: var(--sd-color-brand-blue); }
.sd-finder-progress__step[aria-current="step"] { background: var(--sd-color-accent-copper); }

/* ---------- Step ---------- */

.sd-finder-step {
  display: grid;
  gap: var(--sd-space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sd-finder-step__question {
  padding: 0;
  margin-bottom: var(--sd-space-4);   /* a legend does not take part in the fieldset grid gap */
  color: var(--sd-color-text-heading);
  font-size: var(--sd-font-size-h3);
  line-height: var(--sd-line-height-h3);
  font-weight: var(--sd-font-weight-semibold);
  letter-spacing: var(--sd-letter-spacing-heading);
}

.sd-finder-step__hint {
  margin-top: calc(-1 * var(--sd-space-4));
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
}

.sd-finder-step__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sd-space-3);
}

/* ---------- Selection card ---------- */

.sd-finder-option {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sd-space-1) var(--sd-space-3);
  align-content: start;
  min-height: 5.5rem;
  padding: var(--sd-space-4);
  border: var(--sd-border-width) solid var(--sd-color-card-border);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-white);
  cursor: pointer;
  transition:
    background-color var(--sd-transition-feedback),
    box-shadow var(--sd-transition-feedback);
}

/* Action card (Solution Finder, F-02): the card itself is a button — choosing it moves to the next step,
   so there is no Continue button; Tab and the arrow keys never change the step (WCAG 3.2.2) */
.sd-finder-option--action {
  width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.sd-finder-option--action:focus-visible {
  outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color);
  outline-offset: var(--sd-focus-ring-offset);
}

.sd-finder-option--action > span { pointer-events: none; }

/* The native input stays in the accessibility tree and receives focus; the card shows its state */
.sd-finder-option__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sd-finder-option__title {
  color: var(--sd-color-text-heading);
  font-size: var(--sd-font-size-body);
  font-weight: var(--sd-font-weight-semibold);
  line-height: var(--sd-line-height-h4);
}

.sd-finder-option__text {
  grid-column: 1;
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}

/* Check marker: empty ring → filled blue with a white check */
.sd-finder-option__marker {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--sd-border-width-strong) solid var(--sd-color-border-control);
  border-radius: 50%;
  color: transparent;
  transition: background-color var(--sd-transition-feedback), border-color var(--sd-transition-feedback);
}

.sd-finder-option__marker svg { width: 1rem; height: 1rem; }
.sd-finder-option--multi .sd-finder-option__marker { border-radius: var(--sd-radius-sm); }

.sd-finder-option:hover,
.sd-finder-option[data-state="hover"] {
  background: var(--sd-color-blue-050);
  box-shadow: inset 0 0 0 1px var(--sd-color-card-border);
}

.sd-finder-option:hover .sd-finder-option__marker,
.sd-finder-option[data-state="hover"] .sd-finder-option__marker { border-color: var(--sd-color-brand-blue); }

.sd-finder-option:has(.sd-finder-option__input:focus-visible),
.sd-finder-option[data-state="focus"] {
  outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color);
  outline-offset: var(--sd-focus-ring-offset);
}

/* Selected */
.sd-finder-option:has(.sd-finder-option__input:checked),
.sd-finder-option[data-state="selected"] {
  background: var(--sd-color-surface-selected);
  box-shadow: inset 0 0 0 1px var(--sd-color-brand-blue);
}

.sd-finder-option:has(.sd-finder-option__input:checked) .sd-finder-option__marker,
.sd-finder-option[data-state="selected"] .sd-finder-option__marker {
  border-color: var(--sd-color-brand-blue);
  background: var(--sd-color-brand-blue);
  color: var(--sd-color-white);
}

/* Copper activation line: traces the border once, then fades (event-triggered, never looping) */
.sd-finder-option__trace {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
}

.sd-finder-option__trace rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: var(--sd-radius-md);
  fill: none;
  stroke: var(--sd-color-accent-copper);
  stroke-width: 2px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .sd-finder-option:has(.sd-finder-option__input:checked) .sd-finder-option__trace rect,
  .sd-finder-option[data-state="selected"] .sd-finder-option__trace rect {
    animation: sd-trace 1100ms var(--sd-ease-line) both;
  }
}

@keyframes sd-trace {
  0% { stroke-dashoffset: 1; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Disabled (option not available on this path) */
.sd-finder-option:has(.sd-finder-option__input:disabled),
.sd-finder-option[data-state="disabled"] {
  border-color: var(--sd-color-border-subtle);
  background: var(--sd-color-surface-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.sd-finder-option:has(.sd-finder-option__input:disabled) .sd-finder-option__input { cursor: not-allowed; }

.sd-finder-option:has(.sd-finder-option__input:disabled) :is(.sd-finder-option__title, .sd-finder-option__text),
.sd-finder-option[data-state="disabled"] :is(.sd-finder-option__title, .sd-finder-option__text) { color: var(--sd-color-text-disabled); }

.sd-finder-option:has(.sd-finder-option__input:disabled) .sd-finder-option__marker,
.sd-finder-option[data-state="disabled"] .sd-finder-option__marker { border-color: var(--sd-color-border-subtle); }

/* ---------- Completed answers (earlier steps; each can be changed) ---------- */

.sd-finder-answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-finder-answer {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-2);
  padding-left: var(--sd-space-3);
  border: var(--sd-border-width) solid var(--sd-color-card-divider);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-color-blue-050);
  font-size: var(--sd-font-size-small);
  color: var(--sd-color-text-default);
}

.sd-finder-answer svg { width: 1rem; height: 1rem; flex: none; color: var(--sd-color-brand-blue); }
.sd-finder-answer__label { color: var(--sd-color-text-muted); }

.sd-finder-answer__change {
  min-height: var(--sd-target-min);
  padding-inline: var(--sd-space-3);
  border: 0;
  border-left: var(--sd-border-width) solid var(--sd-color-card-divider);
  background: transparent;
  color: var(--sd-color-link);
  font-size: var(--sd-font-size-small);
  font-weight: var(--sd-font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.sd-finder-answer__change:hover { text-decoration-thickness: 2px; color: var(--sd-color-link-hover); }

/* ---------- Footer: back action and continue ---------- */

.sd-finder__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-3);
  padding-top: var(--sd-space-4);
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
}

.sd-finder__footer .sd-button--primary { margin-left: auto; }

.sd-finder__restart { font-size: var(--sd-font-size-small); }

/* ---------- Result card ---------- */

.sd-finder-result {
  position: relative;
  display: grid;
  gap: var(--sd-space-4);
  padding: var(--sd-space-5);
  border: var(--sd-border-width) solid var(--sd-color-card-border);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-white);
  box-shadow: inset 0 3px 0 var(--sd-color-card-border);
}

@media (min-width: 640px) {
  .sd-finder-result { padding: var(--sd-space-6); }
}

/* Primary recommendation: copper top line (the outcome of the process) */
.sd-finder-result--primary { box-shadow: inset 0 3px 0 var(--sd-color-accent-copper); }

.sd-finder-result__title { max-width: 30ch; }

.sd-finder-result__why {
  display: grid;
  gap: var(--sd-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-finder-result__why li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sd-space-2);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}

.sd-finder-result__why svg { width: 1.25rem; height: 1.25rem; color: var(--sd-color-brand-blue); }

.sd-finder-results {
  display: grid;
  gap: var(--sd-space-4);
}

@media (min-width: 1024px) {
  .sd-finder-results--two { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================================================
 * Session 4.5 — decision-tree module (data-sd-component="finder-tree"; script shared/finder.js)
 * Adds: step transition, preset selection without a repeated trace, recommendation layout with
 * "What you told us", related options (≤ 2, 9.13), contact step with the attached answers (9.14, 9.29),
 * and the no-JavaScript fallback.
 * ====================================================================================================== */

.sd-finder--tree { max-width: none; }

.sd-finder__stage,
.sd-finder-outcome,
.sd-finder-contact { display: grid; gap: var(--sd-space-4); min-width: 0; margin: 0; }

/* Step change: short fade and lift (feedback, not decoration); none with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .sd-finder__stage,
  .sd-finder-outcome,
  .sd-finder-contact { transition: opacity var(--sd-transition-ui), transform var(--sd-transition-ui); }
  .sd-finder [data-state="entering"] { opacity: 0; transform: translateY(8px); transition: none; }
}

/* A selection restored after Back / Change is shown selected without tracing the border again */
.sd-finder-option[data-preset] .sd-finder-option__trace rect { animation: none; }

.sd-finder-step__question:focus { outline: none; }
.sd-finder-step__question:focus-visible { outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color); outline-offset: var(--sd-focus-ring-offset); }

/* Fewer, longer options (challenge step): two columns are easier to read than three */
@media (min-width: 640px) {
  .sd-finder-step__options:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Recommendation ---------- */

.sd-finder-outcome__intro { color: var(--sd-color-text-muted); margin-top: calc(-1 * var(--sd-space-2)); }

.sd-finder-result__text { max-width: 60ch; }

.sd-finder-result__subtitle {
  margin: 0;
  color: var(--sd-color-text-heading);
  font-size: var(--sd-font-size-small);
  font-weight: var(--sd-font-weight-semibold);
  line-height: var(--sd-line-height-small);
}

.sd-finder-result__key { color: var(--sd-color-text-muted); }

@media (min-width: 1024px) {
  .sd-finder-results--two:has(.sd-finder-related) { grid-template-columns: 3fr 2fr; align-items: start; }
}

/* ---------- Related options ---------- */

.sd-finder-related { display: grid; gap: var(--sd-space-3); align-content: start; }
.sd-finder-related__title { margin: 0; }

.sd-finder-related__list { display: grid; gap: var(--sd-space-3); margin: 0; padding: 0; list-style: none; }

.sd-finder-related__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sd-space-1) var(--sd-space-3);
  padding: var(--sd-space-4);
  border: var(--sd-border-width) solid var(--sd-color-card-border);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-white);
  color: var(--sd-color-text-default);
  text-decoration: none;
  transition: background-color var(--sd-transition-feedback), box-shadow var(--sd-transition-feedback);
}

.sd-finder-related__link:hover { background: var(--sd-color-blue-050); box-shadow: inset 0 0 0 1px var(--sd-color-card-border); }
.sd-finder-related__link:focus-visible { outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color); outline-offset: var(--sd-focus-ring-offset); }

.sd-finder-related__type { grid-column: 1; color: var(--sd-color-text-muted); font-size: var(--sd-font-size-label); font-weight: var(--sd-font-weight-medium); }
.sd-finder-related__name { grid-column: 1; color: var(--sd-color-link); font-weight: var(--sd-font-weight-semibold); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.sd-finder-related__link:hover .sd-finder-related__name { text-decoration-thickness: 2px; }
.sd-finder-related__text { grid-column: 1; color: var(--sd-color-text-muted); font-size: var(--sd-font-size-small); line-height: var(--sd-line-height-small); }
.sd-finder-related__arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 1.25rem; height: 1.25rem; color: var(--sd-color-brand-blue); }

.sd-finder-related__note {
  padding-left: var(--sd-space-3);
  border-left: 2px solid var(--sd-color-accent-copper);
  color: var(--sd-color-text-muted);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}

/* ---------- Contact step: attached answers ---------- */

.sd-finder-context {
  display: grid;
  gap: var(--sd-space-1) var(--sd-space-4);
  margin: var(--sd-space-1) 0 0;
  color: var(--sd-color-text-default);
  font-size: var(--sd-font-size-small);
}

.sd-finder-context > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sd-space-2); }
.sd-finder-context dt { color: var(--sd-color-text-muted); }
.sd-finder-context dd { margin: 0; font-weight: var(--sd-font-weight-medium); }

@media (max-width: 479px) {
  .sd-finder-context > div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- No-JavaScript fallback ---------- */

.sd-finder__fallback { display: grid; gap: var(--sd-space-3); justify-items: start; }

/* Homepage: the module opens below the "How Can We Help You?" entry (9.4.1) */
.sd-finder-entry ~ .sd-finder--tree { margin-top: var(--sd-space-6); }

/* Action cards (F-02): the step changes after 0.32 s, so the copper trace is shortened to finish before it (review suggestion) */
@media (prefers-reduced-motion: no-preference) {
  .sd-finder-option--action[data-state="selected"] .sd-finder-option__trace rect { animation-duration: 300ms; }
}