/* The selection module on the Solar Pumping Inverter page.
 *
 * Four answers and the panel that follows them. The answers are native controls —
 * radios and a select — so no rule here depends on a class a script added: a label
 * reads its own answer through :has(:checked) and shows the site's focus ring
 * through :has(:focus-visible). That is why the inputs are clipped rather than
 * removed from the page: the answer has to stay in the tab order.
 *
 * The module's script only writes text into the panel and sets data-state on it,
 * so the panel is styled to read correctly whatever a state says, and the one
 * state rule here (the eyebrow) falls back to the quiet colour for any value.
 *
 * Every colour, radius and spacing value is a token from assets/css/tokens.css.
 * The only sizes written here are clamps, in the spirit of the rest of the theme,
 * and the two columns become one under the Responsive heading at the foot. */

/* -------------------------------------------------- The lead and the frame -- */
/* The sentence above the grid, and the two columns it introduces: the steps are
   the wider side because an answer card holds a picture and a list, and the panel
   is the narrower one because it is read rather than used. The panel is not
   sticky — it is taller than most viewports, and a sticky column taller than the
   window hides its own foot. */
.select-lead{
  margin:0 0 clamp(24px,3vw,36px);
  max-width:76ch;
  font-size:clamp(16px,1.5vw,18px);
  line-height:1.6;
  color:var(--color-muted);
}

.select-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  align-items:start;
  gap:clamp(28px,4vw,56px);
}

.select-steps{
  display:grid;
  gap:clamp(20px,2.6vw,32px);
  margin:0;
  padding:0;
  list-style:none;
}

/* ------------------------------------------------------------- One step -- */
/* One question and the answers to it, in a card of its own. The card is white on
   the section's white ground and carries the same border every card on the site
   carries; the answers inside it are filled with the pale ground, so an answer
   reads as something to press rather than as another panel. */
.sel-step{
  display:flex;
  flex-direction:column;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

/* The marker is a chip rather than a number in the margin: the word "Step 1" is
   what the markup prints, so a translation is not left with a bare figure. */
.sel-step__label{
  align-self:flex-start;
  margin:0 0 12px;
  padding:4px 10px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.4;
  text-transform:uppercase;
}

.sel-step__title{margin:0 0 6px;font-size:clamp(18px,1.9vw,21px)}
.sel-step__note{margin:0 0 clamp(16px,2vw,20px);font-size:14px;line-height:1.55;color:var(--color-muted)}

/* The current answer of the step, above the answers: one line of small print and
   the figure itself, so a visitor who has already answered sees what is held. */
.sel-step__value{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin:0 0 clamp(16px,2vw,20px);
  font-size:13px;
  color:var(--color-muted);
}

.sel-step__value strong{font-size:14px;font-weight:700;color:var(--color-heading);font-variant-numeric:tabular-nums}

/* The help line is a footnote under the answers rather than part of the question:
   it answers the hesitation a buyer has at that step. */
.sel-step__help{
  margin:clamp(16px,2vw,20px) 0 0;
  max-width:78ch;
  font-size:13px;
  line-height:1.6;
  color:var(--color-muted);
}

/* ------------------------------------------------------------ The answers -- */
/* A row of answer cards that folds on its own: three across in the wide column,
   then two, then one. The voltage answers are chips rather than cards, so they
   take a narrower minimum and can stay in a row on a phone. */
.sel-choices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

.sel-choices--voltages{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.sel-choices--modes{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* The radio is clipped, not hidden: display or visibility would take the answer
   out of the tab order, and the label's own ring is what says where the focus is.
   The box reset is here because the site's field styles set a 48px input height. */
.sel-choice{
  position:relative;
  display:block;
  cursor:pointer;
}

.sel-choice__input,
.sel-power__input{
  position:absolute;
  width:1px;
  height:1px;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* The card an answer is pressed on. It is a flex column, so the picture, the words
   and the small print line up across two answers of different length. */
.sel-choice__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
  padding:clamp(14px,1.6vw,18px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-pale);
  transition:border-color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast);
}

/* The states of an answer, in this order so a checked card that is also hovered
   keeps the checked look. The accent edge is drawn inside the border as a second
   ring rather than as a thicker border, so nothing moves when the answer changes. */
.sel-choice:hover .sel-choice__body{border-color:var(--color-accent)}

.sel-choice:has(.sel-choice__input:checked) .sel-choice__body{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
  box-shadow:inset 0 0 0 1px var(--color-accent),var(--shadow-card);
}

.sel-choice:has(.sel-choice__input:checked) .sel-choice__title,
.sel-choice:has(.sel-choice__input:checked) .sel-choice__value{color:var(--color-accent)}

/* The same 3px ring the site's own :focus-visible rule draws, moved onto the card
   the answer is: the clipped input's own outline is not visible anywhere. */
.sel-choice:has(.sel-choice__input:focus-visible) .sel-choice__body{outline:3px solid var(--color-focus);outline-offset:3px}

/* A card no longer carries a picture of its own: the pump a conversion keeps is
   printed once for step 1, in .sel-phase__media, because the answers differ by
   the motor's winding rather than by the pump in the photograph. */

.sel-choice__title{display:block;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-heading)}
.sel-choice__note{display:block;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* The small print of an answer — what the value below it is, or what the list
   under it is for. It is pushed to the foot of the card, so the answers of a row
   line up on it whatever their titles say. */
.sel-choice__meta{
  display:block;
  margin-top:auto;
  padding-top:10px;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--color-muted);
}

.sel-choice__value{
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
}

/* The ribbon over an answer that is recommended for something. The sun ground is
   the site's accent and this is the only place in the module that spends it. */
.sel-choice__flag{
  align-self:flex-start;
  margin:0 0 4px;
  padding:4px 9px;
  border-radius:var(--radius-sm);
  background:var(--color-sun-pale);
  color:var(--color-heading);
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}

/* The glyph is printed in the markup, so this is a box around a character rather
   than an icon: it hugs what it holds and stays at the left of the card. */
.sel-choice__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-width:40px;
  min-height:36px;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-accent);
  font-size:15px;
  line-height:1;
}

/* The list of short lines inside an answer: a hairline marker rather than a glyph,
   so a line that wraps still starts at the text and not under the marker. */
.sel-choice__list{display:grid;gap:6px;margin:0;padding:0}

.sel-choice__list [role="listitem"]{
  display:flex;
  gap:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--color-muted);
}

.sel-choice__list [role="listitem"]::before{
  content:"";
  flex:none;
  width:8px;
  height:1px;
  margin-top:9px;
  background:var(--color-field-line);
}

/* The chip form: one voltage per chip, centred, at a comfortable tap height. */
.sel-choice--compact .sel-choice__body{
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 12px;
  text-align:center;
}

/* The card that says "not sure" is the quiet way out rather than a third answer:
   no photograph, and the surface ground instead of the pale one. */
.sel-choice--plain .sel-choice__body{background:var(--color-surface)}

/* Step 1's own arrangement: one picture of the pump the conversion keeps, and the
   answers beside it. The picture stands for the step rather than for one answer —
   the phase is in the motor's winding and not in the pump's shape — so it is
   printed once and the answers run down their own column. The frame takes the
   shot's own proportions (a pump photographed upright) and contains it, so the
   whole pump is shown on the surface ground. */
.sel-phase{
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  align-items:start;
  gap:clamp(14px,1.8vw,22px);
}

.sel-phase__media{
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.sel-phase__photo{width:100%;height:100%;padding:10px;object-fit:contain}

/* One answer under another: three short cards beside the picture would be a
   column of cards, not a row of them. */
.sel-choices--phases{grid-template-columns:minmax(0,1fr)}

/* ------------------------------------------------------------ The ratings -- */
/* The ratings as a wall of small buttons, because the answer is one figure and a
   select of twenty-two options is a hunt. The wall wraps on its own at every
   width, and the last item — the answer that is not a rating — is allowed to take
   the rest of its line, so it does not read as one more figure. */
.sel-power{display:flex;flex-wrap:wrap;gap:8px}

.sel-power__item{position:relative;display:inline-flex;cursor:pointer}

.sel-power__text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-heading);
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast);
}

.sel-power__item--custom{flex:1 1 220px}
.sel-power__item--custom .sel-power__text{width:100%}

.sel-power__item:hover .sel-power__text{border-color:var(--color-accent)}

.sel-power__item:has(.sel-power__input:checked) .sel-power__text{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.sel-power__item:has(.sel-power__input:focus-visible) .sel-power__text{outline:3px solid var(--color-focus);outline-offset:2px}

/* The same ratings as a list, for the visitor who would rather read them than
   press them. It is the same answer: the module keeps the two showing one value. */
.sel-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:360px;
  margin:clamp(16px,2vw,20px) 0 0;
}

.sel-field__label{font-size:13px;color:var(--color-muted)}

.sel-field__select{
  min-height:44px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:15px;
  color:var(--color-heading);
}

/* ------------------------------------------------------------- The panel -- */
/* The payoff: the four answers gathered into one object, on the pale ground so it
   stands out of the white section, and the one-line answer as a plaque near its
   top. It is read rather than used, so it is quieter than the cards beside it —
   one border, one radius, one shadow, and no more. */
.sel-result{
  display:flex;
  flex-direction:column;
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
  box-shadow:var(--shadow-float);
}

.sel-result__label{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* The eyebrow takes the accent only while the panel is matched to a family. Any
   other state the module sets leaves this line muted, which is what a caveat
   should read as, so no rule here depends on a state name. */
.sel-result[data-state="matched"] .sel-result__label{color:var(--color-accent)}

.sel-result__title{margin:0 0 8px;font-size:clamp(18px,1.9vw,21px)}
.sel-result__note{margin:0 0 clamp(16px,2vw,20px);font-size:14px;line-height:1.55;color:var(--color-muted)}

/* The one-line answer as a plaque: the accent rule at its left is the same mark
   the site's other stated results carry. */
.sel-result__headline{
  margin:0 0 clamp(16px,2vw,20px);
  padding:14px 16px;
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-heading);
  font-size:clamp(18px,1.8vw,22px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* The rows are a table read as a list: the label is muted and small, the value is
   what the reader came for, and the two sit in columns so ten rows scan in one
   movement. The separators close the block top and bottom. */
.sel-result__rows{margin:0 0 clamp(16px,2vw,20px);border-top:1px solid var(--color-line)}

.sel-result__row{
  display:grid;
  grid-template-columns:minmax(0,38%) minmax(0,1fr);
  gap:4px 12px;
  padding:10px 0;
  border-bottom:1px solid var(--color-line);
}

.sel-result__row dt{margin:0;font-size:12px;line-height:1.5;color:var(--color-muted)}
.sel-result__row dd{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:var(--color-heading)}

/* The caveat, for answers that fall outside every family the page states. The
   module shows and hides it with the hidden attribute, so no display rule is
   written for it here: the attribute has to keep winning. */
.sel-result__confirm{
  margin:0 0 clamp(16px,2vw,20px);
  padding:12px 14px;
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-sun);
  border-radius:var(--radius-sm);
  background:var(--color-sun-pale);
  color:var(--color-text);
  font-size:13px;
  line-height:1.6;
}

.sel-result__subtitle{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--color-heading)}

/* The checklist keeps its own tick from style.css; only its rhythm is tightened,
   so twelve lines read as one block rather than as twelve paragraphs. */
.sel-result__why{margin:0 0 clamp(16px,2vw,20px)}
.sel-result__why li{margin:9px 0;font-size:14px}

/* The two ways on sit at the foot of the panel, which is where the reader arrives
   after the rows and the list. */
.sel-result__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:clamp(16px,2vw,22px)}
.sel-result__actions .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* The closing photograph and its caption stood here. The module now ends with
   the answers themselves, so the figure is gone from the markup and its rules
   are gone with it: a photograph under a recommendation is one claim the page
   does not have to make, and the two blocks above it already say what the
   recommendation is read from. */

/* ------------------------------------------------------------ Responsive -- */
/* One column below 1000px, the steps first because they are first in the markup:
   the panel follows the answers it is built from. The panel is held to a reading
   width there, because a row of label and value stretched across a whole
   container is mostly empty column. */
@media (max-width:1000px){
  .select-grid{grid-template-columns:minmax(0,1fr)}
  .select-side{max-width:860px}
  /* The chips stay chip-sized in the wide single column: a four-character answer
     stretched across a whole container reads as a bar, not as a choice. */
  .sel-choices--voltages{max-width:640px}
}

/* On a phone every card is one to a row and the panel row becomes a label over
   its value. The ratings keep a 44px tap height, and the voltage chips keep two
   to a row for as long as they fit, because a chip of four characters is not a
   card — the chip row folds to one only when the screen is narrower than two. */
@media (max-width:640px){
  .sel-choices:not(.sel-choices--voltages){grid-template-columns:minmax(0,1fr)}
  /* The chip row measures its tracks against the card it stands in rather than
     against a fixed 130px, so a row of voltage chips can never be wider than the
     box that holds it. The first line is what a browser that does not read min()
     keeps, and at a card with room for two chips the two lines read the same. */
  .sel-choices--voltages{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .sel-choices--voltages{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}
  /* Step 1's picture over its answers, held to a pump-sized box: full width at
     this size would make the photograph taller than the question it belongs to. */
  .sel-phase{grid-template-columns:minmax(0,1fr)}
  .sel-phase__media{max-width:220px}
  .sel-power__item--custom{flex:1 1 100%}
  .sel-power__text{min-height:44px}
  .sel-result__row{grid-template-columns:minmax(0,1fr);gap:2px}
  .sel-result__actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion: reduce){
  /* The one thing this sheet animates is the change of an answer's ground and
     edge, so under reduced motion they change without a transition. */
  .sel-choice__body,
  .sel-power__text{transition:none}
}

/* ------------------------------------------------ The module, compactly -- */
/* The four answers in one panel rather than four cards. Each question is a label
   and a row of chips, the panel beside it reads as before, and the spacing comes
   down: this section is one step on the way to the inquiry rather than a page of
   its own. The step cards, the note under each question, the second power
   control and the answer read-outs are gone from the markup; the rules above are
   left where they are, because a page that prints a step card again would still
   need them, and nothing here depends on a class a script added. */
.select-grid--compact{gap:clamp(22px,3vw,40px)}

.sel-compact{
  display:grid;
  gap:clamp(18px,2.2vw,24px);
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

.sel-q{display:grid;gap:10px}

.sel-q__label{
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-accent);
}

.sel-q__answers{gap:10px}
.sel-choices--phases{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.sel-choices--supplies{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sel-q__help{margin:0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* The panel reads as the answer to the four questions rather than as a report:
   the headline is the nameplate read back, the rows are the family it narrows
   to, and the list under them is why. The rows sit closer together than they did
   when the panel carried a note above them and three rows that never moved. */
.sel-result__rows{margin-bottom:clamp(12px,1.6vw,18px)}
.sel-result__why li{margin:6px 0}