/* Product Selector — the online selection.
   The two routes in, the fields each one asks for, and the candidates it
   returns. The candidate card itself is the shared .series-card from
   product-series.css; this sheet only adds the frame the selection puts around
   it and the state a card takes when it is the step above the rating.
   Every value comes from assets/css/tokens.css. */

/* The two routes */
.selector-routes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.selector-route{display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--color-surface);border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-md);text-decoration:none;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast)}
.selector-route:hover{transform:translateY(-2px);box-shadow:var(--shadow-float);border-color:var(--color-accent)}
.selector-route__step{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent)}
.selector-route__title{font-size:20px;font-weight:700;color:var(--color-heading)}
.selector-route__text{font-size:15px;color:var(--color-muted)}
.selector-route__meta{margin-top:auto;padding-top:14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.selector-route[aria-current="true"]{border-left-color:var(--color-sun);box-shadow:var(--shadow-float)}

/* The fields of one route. The route marker is on the section, so closing a
   route closes its band of space with it: a hidden inner wrapper would leave
   the section's own padding standing as an empty band on the page. */
.selector-path{padding-top:0}
.section[data-selector-path][hidden]{display:none}
.selector-form{margin-top:28px}
.section--pale .selector-form{background:var(--color-surface)}
.selector-form p.field__hint{margin:6px 0 0;font-size:12px;line-height:1.5}
.selector-optional{margin:24px 0 0;padding:22px;border:1px dashed var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
.selector-optional legend{padding:0 8px;font-size:13px;font-weight:700;color:var(--color-navy)}
.selector-optional__hint{margin:0 0 18px;font-size:13px;color:var(--color-muted)}

/* The result */
.selector-results[hidden],.selector-result[hidden],.selector-result__sub[hidden]{display:none}
.selector-result+.selector-result{margin-top:48px}
.selector-result__title{margin:0;font-size:20px;color:var(--color-heading)}
.selector-result__status{margin:14px 0 0;font-size:15px;font-weight:600;color:var(--color-navy)}
.selector-result__status:empty{display:none}
.selector-result__sub{margin-top:44px;padding-top:32px;border-top:1px solid var(--color-line)}
.selector-result__handoff{margin:18px 0 0;font-size:14px}
.selector-result__handoff .text-link{display:inline-flex}
.selector-result__sub .selector-result__status{font-weight:600}
.selector-grid{margin-top:24px}

/* One candidate */
.selector-item[data-selector-item][hidden]{display:none}
.selector-item__flag{margin:16px 0 0;padding:9px 12px;border-left:3px solid var(--color-sun);background:#fff8e6;font-size:13px;font-weight:600;color:var(--color-navy)}
.selector-item__flag[hidden]{display:none}
.selector-item__status{margin:16px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.selector-item__with{margin:14px 0 0;font-size:13px;color:var(--color-muted)}
.selector-item__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px}
.selector-item__actions .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* What the visitor entered, read back above the candidates it was read against.
   The band behind it is pale, so the panel is the white surface the cards use. */
.selector-echo{margin-top:22px;padding:20px 22px;background:var(--color-surface);border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-md)}
.selector-echo[hidden]{display:none}
.selector-echo__label{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
.selector-echo__list{display:grid;gap:8px;margin:14px 0 0;font-size:14px}
.selector-echo__list div{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--color-line)}
.selector-echo__list div:last-child{padding-bottom:0;border-bottom:0}
.selector-echo__list dt{margin:0;font-size:12px;color:var(--color-muted)}
.selector-echo__list dd{margin:0;font-weight:600;color:var(--color-heading)}
.selector-echo__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--color-line)}
.selector-echo__reset{padding:0;border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--color-accent);text-decoration:underline;cursor:pointer}
.selector-echo__reset:hover{color:var(--color-accent-dark)}

/* Why this candidate is listed, read from what its own record states. */
.selector-item__reason{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--color-text)}
.selector-item__reason[hidden]{display:none}

/* Nothing listed: the way on, in place of a pool that holds nothing. */
.selector-empty{margin-top:24px;padding:26px;background:var(--color-surface);border:1px dashed var(--color-line);border-radius:var(--radius-md)}
.selector-empty[hidden]{display:none}
.selector-empty__text{margin:0;font-size:14px;line-height:1.6;color:var(--color-muted)}
.selector-empty .actions{margin-top:20px}
.selector-grid[hidden]{display:none}

@media (max-width:900px){
  .selector-routes{grid-template-columns:1fr}
  .selector-echo__list div{grid-template-columns:1fr;gap:2px}
}

@media (max-width:640px){
  .selector-route{padding:22px}
  .selector-item__actions .btn{flex:1 1 100%}
}

/* The total head, from the parts a site has measured. A <details>, so it stays
   out of the way of the three fields the form asks for, and its own band, so the
   three parts read as one step rather than as three more questions. The summary
   carries the same +/− affordance the FAQ uses. */
.selector-tdh{margin-top:2px;padding:18px 20px;border:1px dashed var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
.selector-tdh__summary{display:flex;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--color-navy)}
.selector-tdh__summary::-webkit-details-marker{display:none}
.selector-tdh__summary::after{content:"+";font-size:20px;line-height:1;color:var(--color-accent)}
.selector-tdh[open] .selector-tdh__summary::after{content:"−"}
.selector-tdh__hint{margin:12px 0 0;max-width:70ch;font-size:13px;line-height:1.55;color:var(--color-muted)}
.selector-tdh .fields{margin-top:16px}
.selector-tdh__actions{margin:16px 0 0}
.selector-tdh__actions .btn{min-height:44px;padding:10px 18px;font-size:14px}
.selector-tdh__note{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--color-navy)}
.selector-tdh__note[hidden]{display:none}

/* The reference models: the duty point the ranking was read against, how many
   records state the electrical condition that was confirmed, and the ranked
   cards themselves. The tiles are the same white surface on the pale band that
   the echo uses, so the sub-block reads as part of the result above it. */
.selector-models__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:22px 0 0}
.selector-stat{padding:18px 20px;background:var(--color-surface);border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-md)}
.selector-stat__label{margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.selector-stat__value{margin:10px 0 0;font-size:22px;font-weight:700;line-height:1.2;color:var(--color-heading)}

/* At most five cards, each read from one record. The figures inside are the
   shared .series-card__facts list, so a model reads like a series card does. */
.selector-models{display:grid;gap:16px;margin:24px 0 0;padding:0;list-style:none}
.selector-models:empty{display:none}
.selector-model__card{display:flex;flex-direction:column;padding:22px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.selector-model__code{margin:0;font-size:17px;color:var(--color-heading)}
.selector-model__family{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.selector-model__card .series-card__facts{margin-top:16px}
.selector-model__delta{margin:16px 0 0;font-size:14px;font-weight:600;color:var(--color-navy)}
.selector-model__note{margin:10px 0 0;padding:9px 12px;border-left:3px solid var(--color-sun);background:#fff8e6;font-size:13px;color:var(--color-navy)}
.selector-model__tag{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.selector-model__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.selector-model__actions .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* The two actions of the sub-block, and the series pages the note in <noscript>
   points at where the ranking cannot run at all. */
.selector-models__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.selector-models__actions .btn[hidden]{display:none}
.selector-models__pages{margin:12px 0 0;padding-left:20px;font-size:14px;color:var(--color-text)}
.selector-models__pages li+li{margin-top:6px}
.selector-models__pages .text-link{display:inline-flex}

@media (max-width:900px){
  .selector-models__stats{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .selector-models__stats{grid-template-columns:1fr}
  .selector-stat{padding:16px 18px}
  .selector-stat__value{font-size:20px}
  .selector-model__card{padding:18px}
  .selector-model__actions .btn{flex:1 1 100%}
  .selector-models__actions .btn{flex:1 1 100%}
  .selector-tdh{padding:16px}
}

/* The selection record is what a printed page is for: the routes and the fields
   that produced it are left off, so the result and the reference models stand
   on their own. */
@media print{
  [data-selector-path],.selector-routes,.selector-models__actions,.selector-echo__reset{display:none}
}