/* ============================================================
   Esse Werks — Xona turbine housing cascade picker
   XONA-HOUSING-1

   Scoped to the .ew-xona-picker container; tokens come from
   global.css + ew-livery.css. Adds nothing to the shared
   component library — Xona PDP only.

   Layout model:
     .ew-picker-step        one "row" per guided step (label + buttons)
     .ew-picker-btn         individual option pill
     .ew-picker-btn--selected  active choice (border-color: --accent)
     .ew-picker-btn--hidden    not valid in current cascade state
     .ew-picker-default-star   the ★ recommended badge inside a button
     .ew-opt-desc               inline description, directly below each option row
     .ew-option-explanation__label  axis label (mono, uppercase)
     .ew-option-explanation__body   description text; :empty hidden; .is-updating fades
   ============================================================ */

/* ---- Breadcrumb list-reset ----
   The breadcrumb is a <nav><ol><li> for landmark + list semantics;
   strip default list bullets/indent so it stays inline on one row.
   Visual styling (mono/uppercase/aluminum) stays in ew-components.css. */
.ew-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ew-crumb li { display: inline-flex; align-items: center; }

/* ---- Cascade container ---- */
.ew-xona-picker {
  display: flex;
  flex-direction: column;
  gap: var(--ew-s-4);
}

/* ---- Step row ---- */
.ew-picker-step {
  display: flex;
  flex-direction: column;
  gap: var(--ew-s-2);
}

.ew-picker-step__label {
  font-family: var(--ew-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ew-aluminum);
}

/* ---- Button group ---- */
.ew-picker-btn-group {
  display: flex;
  gap: var(--ew-s-2);
  flex-wrap: wrap;
}

/* ---- Individual picker button ----
   Mirrors .ew-size-pill geometry/token usage (ew-components.css line 1791)
   but scoped to the cascade — does not inherit [aria-pressed] toggling
   because the cascade drives state via JS data attribute instead. */
.ew-picker-btn {
  min-width: 60px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ew-s-1);
  padding: var(--ew-s-3) var(--ew-s-4);
  font-family: var(--ew-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  background: var(--ew-graphite);
  border: 1px solid var(--ew-steel);
  color: var(--ew-paper);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--ew-dur-fast, 160ms) var(--ew-ease, ease);
}

.ew-picker-btn:hover {
  border-color: var(--ew-paper);
}

.ew-picker-btn--selected {
  border-color: var(--accent);
  color: var(--ew-white);
}

/* Hidden = option doesn't exist for the current cascade path */
.ew-picker-btn--hidden {
  display: none;
}

/* Step 2 + 3 hidden until the prior step is resolved */
.ew-picker-step[hidden] {
  display: none;
}

/* ---- Recommended star badge ----
   Decorative only — never green/red/orange signal color. Uses aluminum
   (neutral) tinted to the accent on the selected state. */
.ew-picker-default-star {
  font-family: var(--ew-font-mono);
  font-size: 11px;
  color: var(--ew-aluminum);
  /* Don't scale or animate — it's a passive indicator */
  line-height: 1;
}

.ew-picker-btn--selected .ew-picker-default-star {
  color: var(--accent-text);
}

/* ---- Option details disclosure ----
   Progressive disclosure: trigger hidden until JS populates content
   (details[hidden]). A/R step server-renders content, so its details
   has no hidden attr and shows the trigger at rest. */
.ew-opt-details {
  margin-top: var(--ew-s-2, 4px);
}

.ew-opt-details[hidden] {
  display: none;
}

.ew-opt-details summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: var(--ew-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ew-aluminum);
  padding: 6px 0;
  user-select: none;
  min-height: 44px;
}

.ew-opt-details summary::-webkit-details-marker {
  display: none;
}

.ew-opt-details summary::marker {
  display: none;
}

.ew-opt-details summary::before {
  content: '\25B8';
  font-size: 9px;
  display: inline-block;
  transition: transform var(--ew-dur-fast, 160ms) var(--ew-ease, ease);
}

.ew-opt-details[open] summary::before {
  transform: rotate(90deg);
}

/* ---- Inline option description ----
   Sits inside .ew-opt-details. Muted, small — readable without
   dominating the page. :empty hidden before JS populates. */
.ew-opt-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ew-aluminum);
  max-width: 58ch;
  margin-top: var(--ew-s-2, 4px);
  transition: opacity 120ms ease;
}

.ew-opt-desc:empty {
  display: none;
}

.ew-opt-desc.is-updating {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ew-opt-desc,
  .ew-picker-btn,
  .ew-opt-details summary::before {
    transition: none;
  }
}

/* ---- Mobile wrap ---- */
@media (max-width: 479px) {
  .ew-picker-btn {
    /* Let buttons fill row naturally; no forced full-width (labels are short) */
    min-width: 52px;
    font-size: 13px;
    padding: var(--ew-s-2) var(--ew-s-3);
  }

  .ew-picker-btn-group {
    gap: var(--ew-s-1);
  }
}