/* 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__title{font-size:20px;font-weight:700;color:var(--color-heading)}
.selector-route__meta{padding-top:12px;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 trade-facing entry description. The shared .selector-route__meta is the
   uppercase list of fields a path asks for; the sentence an entry carries on the
   review door is set in sentence case at reading size instead, so a channel buyer
   reads what the entry is for rather than a second shouted label. */
.selector-route__meta--sentence{padding-top:12px;font-size:14px;font-weight:400;letter-spacing:0;line-height:1.5;text-transform:none}

/* The two shortcuts under the entries: the whole model library for a buyer who
   already knows the code, and range planning for a distributor with a market
   rather than a site. They are the shared .text-link, wrapped so they read as one
   line of links and stack on a phone rather than running off the page. */
.selector-shortcuts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.selector-shortcuts .text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px}
.selector-shortcuts .text-link:hover,.selector-shortcuts .text-link:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* The one FAQ row under the site-data list. It is the shared .faq pattern, so
   only the space above it is this page's: the row follows a note rather than a
   heading, and has to stand clear of it. */
.selector-faq{margin-top:28px}

/* 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 motor power control — the searchable ladder of standard figures, the
   kW/hp toggle beside it, and the field a figure that is not on the ladder is
   written in. Both paths print the same component, so it is styled once here.
   The list is the built-in combobox behaviour's own panel: the behaviour shows
   and hides it, and nothing here animates that height or transform. */
.power{position:relative;display:flex;flex-direction:column;gap:8px}
.power__row{display:flex;align-items:stretch;gap:10px}
.power__combo{position:relative;flex:1 1 auto;min-width:0}
.power__input{width:100%}
.power__list{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;max-height:288px;overflow-y:auto;padding:6px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-float)}
.power__option{padding:9px 10px;border-radius:var(--radius-sm);font-size:14px;color:var(--color-heading);cursor:pointer}
.power__option:hover,.power__option[data-active="true"]{background:var(--color-accent-pale)}
.power__option[aria-selected="true"]{background:var(--color-pale);font-weight:600}
.power__option[data-disabled]{display:none}
.power__option--other{margin-top:6px;border-top:1px solid var(--color-line);padding-top:12px;font-weight:600;color:var(--color-accent)}
.power__empty{margin:8px 10px;font-size:13px;line-height:1.5;color:var(--color-muted)}
.power__unit{display:inline-flex;flex:none;align-self:flex-start;border:1px solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden}
.power__unit-btn{padding:0 14px;font:inherit;font-size:14px;font-weight:600;color:var(--color-muted);background:var(--color-surface);border:0;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}
.power__unit-btn+.power__unit-btn{border-left:1px solid var(--color-line)}
.power__unit-btn[aria-pressed="true"]{color:var(--color-surface);background:var(--color-navy)}
.power__other{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--color-pale);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm)}
.power__other[hidden]{display:none}
.power__other label{font-size:13px;font-weight:600;color:var(--color-navy)}
.power__other input{width:100%}
@media (max-width:600px){
  .power__row{flex-wrap:wrap}
  .power__unit{width:100%}
  .power__unit-btn{flex:1 1 0;min-height:44px}
  .power__option{padding:12px 10px}
}

/* The way into the total head calculator, at the field that needs its figure.
   The pump route asks for a total head — the lift plus the losses through the
   pipe run and the fittings — and the selection counts no pipe loss of its own,
   so this is the moment the visitor needs that number. The way in stands beside
   the field for exactly that reason: a tool belongs where the figure is asked
   for, not in front of the route, and the route that never asks for a head
   never shows it. */
.selector-head-tool{margin:10px 0 0;padding:10px 12px;background:var(--color-accent-pale);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm)}
.selector-head-tool__text{display:block;font-size:13px;line-height:1.5;color:var(--color-navy)}
.selector-head-tool__link{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;font-weight:600;color:var(--color-accent)}
.selector-head-tool__link:hover{color:var(--color-accent-dark)}
/* The figure the calculator handed back, said to have come from there: a value
   that appears in a field by itself has to say who put it in. */
.selector-head-carried{margin:8px 0 0;font-size:12.5px;line-height:1.5;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}

/* The wider series, listed apart from the closest recorded option: the container
   is the server's, the cards are moved into it, and the heading is the server's
   own wording (inc/selector.php), so the group is named in one place. */
.selector-group{margin-top:36px;padding-top:26px;border-top:1px dashed var(--color-line)}
.selector-group[hidden]{display:none}
.selector-group__title{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.selector-group .selector-grid{margin-top:18px}

/* 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__tag{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.selector-model__tag[hidden]{display:none}

/* The state a candidate was read in. The label is the server's own wording
   (inc/selector.php) and only the token travels here, so a state can be added or
   renamed in one place. The colour separates what the record supports from what
   still has to be confirmed: the confirmed one is blue, the one that still has to
   be verified is the pale band, and a pairing outside the
   recorded limits is muted because it is not proposed. */
.selector-item__flag[data-state="preliminary"]{border-left-color:var(--color-accent);background:var(--color-accent-pale)}
.selector-item__flag[data-state="verification"]{border-left-color:var(--color-field-line);background:var(--color-pale)}
.selector-item__flag[data-state="outside"]{border-left-color:var(--color-field-line);background:var(--color-pale);color:var(--color-muted)}
.selector-model__tag[data-state="preliminary"]{color:var(--color-accent)}
.selector-model__tag[data-state="verification"]{color:var(--color-heading)}
.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 pump result: the model the duty point reads to, its recorded Q-H curve,
   and the alternatives beside it. The lead card carries the answer, so it takes
   the accent the reference tiles use; an alternative is the same card in a
   quieter voice. Both blocks are grids, so a wide screen reads them side by
   side and a narrow one stacks them. */
.pump-result,.pump-alts{display:grid;gap:16px;margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.pump-result:empty,.pump-alts:empty{display:none}
.pump-result[hidden],.pump-alts[hidden],.pump-figure[hidden]{display:none}
.pump-card{display:flex;flex-direction:column;padding:22px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.pump-card--lead{border-left:4px solid var(--color-accent);box-shadow:var(--shadow-float)}
.pump-card__tag{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
.pump-card--lead .pump-card__tag{color:var(--color-accent)}
.pump-card__code{margin:8px 0 0;font-size:18px;line-height:1.2;color:var(--color-heading)}
.pump-card--lead .pump-card__code{font-size:22px}
.pump-card .series-card__facts{margin-top:16px}
.pump-card__note{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--color-sun);background:var(--color-pale);font-size:13px;line-height:1.55;color:var(--color-navy)}
.pump-card__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px}
.pump-card__actions .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* The curve. The panel is the width the plot draws at, so the svg is never
   scaled above its own units, and it shrinks with the column it sits in. */
.pump-figure{margin:24px 0 0;max-width:704px;padding:20px 22px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.pump-figure__plot{width:100%;max-width:660px;margin:0 auto}
.pump-figure__caption{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted)}
.pump-chart{display:block;width:100%;height:auto;font-family:var(--font-body)}

/* Gridlines and axes are structure, not content: muted lines under the curves. */
.pump-chart__grid line{stroke:var(--color-line);stroke-width:1}
.pump-chart__axes line{stroke:var(--color-field-line);stroke-width:1.5}
/* The wording on the plot carries a surface halo, so a label stays readable
   where a curve or the required-head line passes under it. */
.pump-chart__label{font-size:13px;fill:var(--color-muted);stroke:var(--color-surface);stroke-width:3;stroke-linejoin:round;paint-order:stroke}
.pump-chart__axes .pump-chart__label{font-weight:600;fill:var(--color-navy)}
.pump-chart > .pump-chart__label{font-weight:600;fill:var(--color-accent)}
/* The recorded curves, the recommended model drawn over the alternatives. */
.pump-chart__curve{fill:none;stroke:var(--color-field-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pump-chart__curve--lead{stroke:var(--color-accent);stroke-width:3.5}
/* The head the duty point asks for, and the flow the visitor entered. */
.pump-chart__need{stroke:var(--color-navy);stroke-width:1.5;stroke-dasharray:7 5}
.pump-chart__drop{stroke:var(--color-field-line);stroke-width:1.5;stroke-dasharray:4 4}
/* Two duty points, told apart by fill: what was asked, and what the recommended
   model gives at the same flow. */
.pump-chart__point--asked{fill:var(--color-navy);stroke:var(--color-surface);stroke-width:2}
.pump-chart__point--given{fill:var(--color-sun);stroke:var(--color-navy);stroke-width:2}
.pump-chart__duty .pump-chart__label{font-weight:600;fill:var(--color-navy)}

@media (max-width:640px){
  .pump-card{padding:18px}
  .pump-card__actions .btn{flex:1 1 100%}
  .pump-figure{padding:16px}
  .pump-chart__label{font-size:14px}
}

/* 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}
}

/* The rest of the set, and the ways the whole selection travels. */
.pump-extras{display:grid;gap:20px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.pump-extras:empty{display:none}
.pump-extras[hidden]{display:none}
.pump-extras__block{padding:22px 24px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.pump-extras__heading{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--color-heading)}
.pump-extras__note{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--color-muted)}
.pump-extras__set{margin:0 0 16px}
.pump-extras__set:last-child{margin-bottom:0}
.pump-extras__label{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.pump-extras__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.pump-extras__list li{font-size:14px;line-height:1.5}
.pump-extras__list a{font-weight:600}
.pump-extras__summary{display:block;font-size:12px;color:var(--color-muted)}
.pump-extras__block .actions{margin-top:0}
@media (max-width:640px){
  .pump-extras{grid-template-columns:1fr}
  .pump-extras__block{padding:18px}
}

/* The exact model the result leads with, and everything its own record states
   about it: its recorded parameters, the documents the record holds, and the
   one line of notes it carries. The lead card carries the answer, so it takes
   the accent the pump lead card uses; the parameters are a <dl> read with the
   same two-column rhythm as the shared .series-card__facts list, so a model
   reads the way a series card does. */
.selector-model__card--lead{border-left:4px solid var(--color-accent);box-shadow:var(--shadow-float)}
.selector-model__params-title{margin:18px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.selector-model__params{display:grid;gap:8px;margin-top:18px;font-size:14px}
.selector-model__params div{display:grid;grid-template-columns:minmax(86px,auto) 1fr;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--color-line)}
.selector-model__params div:last-child{padding-bottom:0;border-bottom:0}
.selector-model__params dt{margin:0;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}
.selector-model__params dd{margin:0;font-weight:600;color:var(--color-heading)}
.selector-model__notes{margin:14px 0 0;padding:9px 12px;border-left:3px solid var(--color-field-line);border-radius:var(--radius-sm);background:var(--color-pale);font-size:13px;line-height:1.55;color:var(--color-muted)}
.selector-model__notes[hidden]{display:none}

/* The documents the model's own record holds: the list of links, or the one
   sentence that says the record holds none. The link is the site's text link,
   so a document reads as a link reads anywhere else on the site. */
.selector-docs{margin-top:16px}
.selector-docs__list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.selector-docs__link{display:inline-flex;align-items:baseline;gap:6px;font-weight:600;color:var(--color-accent);text-decoration:none}
.selector-docs__link:hover{color:var(--color-accent-dark);text-decoration:underline}
.selector-docs__none{margin:0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* The solar-panel configuration the model's own record implies, printed on its
   own after the model(s) on both result paths. It is the white surface card the
   echo uses; its facts are the shared .series-card__facts list, its two checks
   are the nominal figures read against the inverter model's own stated DC
   window, and what the records do not state is said in the pending line. */
.selector-panel{margin-top:26px;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-panel[hidden]{display:none}
.selector-panel__title{margin:0;font-size:16px;font-weight:700;color:var(--color-heading)}
.selector-panel__tag{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.selector-panel__tag[data-state="verification"]{color:var(--color-heading)}
.selector-panel .series-card__facts{margin-top:16px}
/* The two checks are rows rather than a facts list: each holds its own label
   and figure. The room a marker takes is reserved here; the marker itself is
   the built markup's, so nothing is drawn twice. */
.selector-panel__checks{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none;font-size:14px}
.selector-panel__check{padding-left:20px}
.selector-panel__check[data-ok="true"]{color:var(--color-accent)}
.selector-panel__check[data-ok="false"]{color:var(--color-muted)}
.selector-panel__pending{margin:16px 0 0;padding:10px 12px;border-left:3px solid var(--color-sun);background:var(--color-pale);font-size:13px;line-height:1.55;color:var(--color-navy)}
.selector-panel__note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--color-muted)}

/* The pump-and-inverter path: the exact inverter model the result reads to and
   the panel configuration it is checked with, held as one sub-block of the
   result the way the reference sub-block above is. */
.selector-system{margin-top:44px;padding-top:32px;border-top:1px solid var(--color-line)}
.selector-system[hidden]{display:none}
.selector-system__title{margin:0;font-size:20px;color:var(--color-heading)}

/* The series pool, now below the model-first result on both paths. Its rule is
   dashed, so it reads as the wider set the exact model was drawn from rather
   than as a second answer. */
.selector-series-sub{margin-top:44px;padding-top:32px;border-top:1px dashed var(--color-line)}
.selector-series-sub[hidden]{display:none}

/* The one line under an alternative card saying how it differs from the model
   the result leads with. */
.selector-alt-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--color-navy)}

/* A narrow screen: a document link takes a row of its own so it is a full touch
   target, and the panel keeps the reduced padding the cards of this sheet take
   at the same width. The lead card's actions already stack here. */
@media (max-width:640px){
  .selector-docs__link{display:block;padding:8px 0}
  .selector-panel{padding:18px}
}

/* The two nominal comparisons the array is read with, each as a row of its own:
   the label, the figure read at the series count, and the mark. A comparison
   that stays inside the window the model states takes the accent; one that does
   not is muted. The row's own words carry the meaning either way, so nothing
   here depends on the mark being seen. */
.selector-panel__inner,.selector-model__panel-body{display:grid;gap:2px}
.selector-panel__check{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--color-line)}
.selector-panel__check:last-child{border-bottom:0}
.selector-panel__check-name{grid-column:1;font-size:13px;line-height:1.5;color:var(--color-muted)}
.selector-panel__check-value{grid-column:1;font-size:14px;font-weight:600;color:var(--color-heading)}
.selector-panel__check-mark{grid-column:2;grid-row:1;align-self:start;font-size:16px;font-weight:700;line-height:1.2;color:var(--color-accent)}
.selector-panel__check[data-state="outside"] .selector-panel__check-mark{color:var(--color-muted)}

/* What no record states, under the two comparisons: the lead line is the label
   and the list is the figures themselves, one per line. */
.selector-panel__pending-lead{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-navy)}
.selector-panel__pending-list{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.6}
.selector-panel__pending-list li{margin-bottom:4px}
.selector-panel__pending-list li:last-child{margin-bottom:0}

/* The way from a model to the one the result leads with, and the line that says
   how an alternative differs from it: both are the sun ground and the 3px rule
   this site spends on what is not settled yet. */
.pump-card__difference,.selector-model__difference{margin:14px 0 0;padding:9px 12px;border-left:3px solid var(--color-sun);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-sun-pale);font-size:13px;line-height:1.55;color:var(--color-navy)}
.selector-system__note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--color-muted)}

/* The optional accessories: the site's own disclosure, closed to begin with and
   with nothing ticked, standing in a dashed frame because the part is offered
   rather than settled. The trigger is the mini-heading row this site's folded
   areas use — the + / − marker and a 44px target — and a tick is the visitor's
   own request, never a statement that the installation does not need the part. */
.selector-acc{margin-top:26px;border:1px dashed var(--color-field-line);border-left:4px solid var(--color-sun);border-radius:var(--radius-md);background:var(--color-surface)}
.selector-acc__trigger{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;width:100%;min-height:44px;padding:14px 22px;border:0;border-radius:var(--radius-md);background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--color-heading);text-align:left;cursor:pointer;transition:color var(--transition-fast)}
.selector-acc__trigger:hover{color:var(--color-accent)}
.selector-acc__trigger::after{content:"+";flex:none;font-size:20px;font-weight:600;line-height:1;color:var(--color-accent)}
.selector-acc[data-state="open"] .selector-acc__trigger::after{content:"−"}
.selector-acc__trigger:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.selector-acc [data-panel]{padding:0 22px 20px;border-top:1px dashed var(--color-field-line)}
.selector-acc__lead{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--color-muted)}
.selector-acc__item{margin-top:16px;padding-top:16px;border-top:1px solid var(--color-line)}
.selector-acc__item:first-of-type{margin-top:0;padding-top:8px;border-top:0}
.selector-acc__label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.selector-acc__label input{flex:none;width:18px;height:18px;accent-color:var(--color-accent)}
.selector-acc__title{font-size:15px;font-weight:700;color:var(--color-heading)}
.selector-acc__summary{margin:0 0 0 28px;font-size:13px;line-height:1.6;color:var(--color-muted)}
.selector-acc__state{margin:10px 0 0 28px;font-size:13px;line-height:1.6;color:var(--color-navy)}
.selector-acc__state p{margin:0 0 4px}
.selector-acc__state p:last-child{margin-bottom:0}
.selector-acc__state[data-state="pending"]{padding:10px 12px;border-left:3px solid var(--color-sun);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-sun-pale)}
.selector-acc__field{margin:12px 0 0 28px;font-size:13px;color:var(--color-navy)}
.selector-acc__field[hidden]{display:none}
.selector-acc__field input{width:110px;margin-left:8px;padding:8px 10px;border:1px solid var(--color-field-line);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;color:var(--color-heading)}
.selector-acc__item .selector-docs{margin:10px 0 0 28px}

/* The way to the quotation: the button this page already uses, with the state of
   the selection beside it, so nobody is asked to enter a second time what the
   page has already worked out. */
.selector-quote{margin-top:26px}
.selector-quote[hidden]{display:none}
.selector-quote__inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:18px 22px;border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-pale)}
.selector-quote__note{margin:0;font-size:13px;line-height:1.6;color:var(--color-muted)}
.selector-quote__state{font-weight:700;color:var(--color-navy)}
.selector-quote__model{font-weight:700;color:var(--color-heading)}

/* A narrow screen: the panel keeps the reduced padding the cards of this sheet
   take, the accessory lines lose their indent so nothing is squeezed, the length
   fields stay full touch targets, and the quotation stands on its own row. */
@media (max-width:640px){
  .selector-acc__trigger{padding:14px 18px}
  .selector-acc [data-panel]{padding:0 18px 18px}
  .selector-acc__summary,.selector-acc__state,.selector-acc__field,.selector-acc__item .selector-docs{margin-left:0}
  .selector-acc__checkbox{width:20px;height:20px}
  .selector-quote__inner{padding:16px 18px}
  .selector-quote__inner .btn{width:100%;justify-content:center}
}

/* The sentence under a document list: where the link opens and what happens
   there, in the muted register the sheet's other notes take. */
.selector-docs__note{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--color-muted)}

/* ---------------------------------------------------------- The four steps -- */
/* One flow on one page: every step is labelled where it stands, so the reader
   moves down rather than away, and Step 3 and Step 4 are opened by a run rather
   than by the reader looking for them. */

.selector-step{margin-top:40px;padding-top:30px;border-top:1px solid var(--color-line)}
.selector-step[hidden]{display:none}
.selector-step--four{margin-top:34px;padding-top:24px;border-top:1px dashed var(--color-line)}
.selector-step > .selector-result__title{margin:0}
.selector-step > .product-note + .selector-models{margin-top:18px}
.selector-step--four .selector-models{margin-top:16px}

/* Step 1 into Step 2: the two are one flow, so the band between them is the gap
   inside a flow rather than the band this theme puts between two sections. The
   route card is the two lines the choice is made on, and the meta line names the
   fields that path asks for. */
#selector{padding-bottom:20px}
#inverter,#set{padding-top:34px}
.selector-route{padding:22px 24px}
.selector-route__title{font-size:19px;line-height:1.3}

/* The recommended model's own photograph: the file its series record holds, at
   the size the attachment states, standing above the parameters it belongs to.
   A record that holds no picture has none printed and claims none. */
.selector-model__photo{display:block;width:100%;max-width:320px;height:auto;margin:14px 0 0;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}

/* A narrow screen: the steps keep their rhythm, the picture fills the column it
   stands in, and the parameters of the recommended model stay a table that reads
   down the page rather than a row that has to be squeezed. */
@media (max-width:640px){
  .selector-step{margin-top:30px;padding-top:22px}
  .selector-model__photo{max-width:100%}
  #selector{padding-bottom:14px}
  #inverter,#set{padding-top:26px}
}