/* Distributor Product Selection — the three questions and the range they narrow.
 *
 * The answers are native radios: every answer is a label wrapping its own input,
 * so the whole answer is pressable and the words the visitor reads are the words
 * the radio is named by. The label reads its own answer through :has(:checked)
 * and shows the site's focus ring through :has(:focus-visible), so no rule here
 * depends on a class a script added. The input is clipped rather than hidden:
 * display or visibility would take the answer out of the tab order. The list
 * under the questions is the same card the site's other lists print — the
 * series' own photograph, a head, the figures the record states, the reasons it
 * was kept, and the two ways on. The photograph is a small square tile rather
 * than a full-width panel, because the card is one of thirty-seven in a list
 * that is answered as much by four of them read together as by one.
 *
 * What this sheet deliberately does not do: it defines no colour, space or
 * radius of its own, and it restyles no shared component. The section head, the
 * buttons and the text links are style.css's; where one of them has to sit
 * differently inside a card, the rule is scoped under a .ds- root. It fixes no
 * height and no width on a card, so a card whose record states more or less than
 * its neighbour stays its own size. And because the theme has no global [hidden]
 * rule, every box this sheet lays out carries its own rule for the attribute, at
 * the foot of the file.
 *
 * Every value comes from assets/css/tokens.css. */

/* ------------------------------------------------------- 01 · The questions -- */
/* A step is a fieldset, so its question is the group's own legend and the
   answers are read as the answers to it. The reset is here because a fieldset
   carries a padding, a groove border and a min-content minimum of its own, and
   the whole page is one form that must survive a 320px screen. */
.ds-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
  margin:0;
  padding:0;
}

.ds-step{
  display:flex;
  flex-direction:column;
  min-inline-size:0;
  margin:0;
  padding:var(--space-3);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

/* The question and the marker that numbers it. The marker is a chip rather than
   a figure in the margin, because "Step 1" is what the page prints and a
   translation is not left with a bare number. */
.ds-step__legend{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:var(--space-1);
  width:100%;
  margin:0 0 var(--space-1);
  padding:0;
}

.ds-step__num{
  display:inline-block;
  padding:2px var(--space-1);
  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;
}

.ds-step__question{
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  color:var(--color-heading);
}

.ds-step__note{
  margin:0 0 var(--space-2);
  font-size:13px;
  line-height:1.55;
  color:var(--color-muted);
}

/* The answers fold on their own: one to a row in a card as wide as a phone, and
   as many as the card can carry once the three steps stand side by side. */
.ds-choices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-1);
  margin:0;
  padding:0;
}

/* ------------------------------------------------------------ One answer -- */
/* Inverter-selector.css is the precedent for this block: the answer is the
   label, so the whole of it is pressable; the input is clipped so it keeps its
   place in the tab order; and the box reset is here because the site's field
   styles set every input to a full width and a 48px height, which would make a
   radio as wide as the card. */
.ds-choice{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-1);
  min-height:44px;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
  cursor:pointer;
  transition:border-color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast);
}

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

/* The mark an answer carries: a drawn circle, filled and ticked once that answer
   is the one held. It is the second thing that says "chosen" beside the ground
   and the edge, so a checked answer is never read by colour alone. */
.ds-choice::before{
  content:"";
  flex:none;
  width:18px;
  height:18px;
  border:1px solid var(--color-field-line);
  border-radius:50%;
  background:var(--color-surface);
  font-size:12px;
  line-height:16px;
  text-align:center;
}

/* The states of an answer, in this order, so a checked answer 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. */
.ds-choice:hover{
  border-color:var(--color-accent);
}

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

.ds-choice:has(.ds-choice__input:checked)::before{
  content:"✓";
  border-color:var(--color-accent);
  background:var(--color-accent);
  color:var(--color-surface);
}

.ds-choice:has(.ds-choice__input:checked) .ds-choice__title{
  color:var(--color-accent-dark);
}

/* The same 3px ring the site's own :focus-visible rule draws, moved onto the
   answer the input belongs to: the clipped input's own outline is visible
   nowhere, and this is what a keyboard reader follows. */
.ds-choice:has(.ds-choice__input:focus-visible){
  outline:3px solid var(--color-focus);
  outline-offset:3px;
}

.ds-choice__title{
  display:block;
  min-width:0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--color-heading);
  overflow-wrap:anywhere;
}

/* The two ways out of the questions, across the whole form rather than in the
   third step's column. */
.ds-steps__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  grid-column:1 / -1;
  margin:0;
}

/* The text link is the site's own; inside this row it sits beside the button
   rather than filling the row, which its own space-between would have it do. */
.ds-steps__actions .text-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--space-1);
}

/* --------------------------------------------------------- 02 · The count -- */
/* The count above the range: written by the server when the questions come back
   as a query, and rewritten from the answers by the script in front of the
   visitor. Until one of the two fills it it holds nothing, and an empty plaque
   is worse than no line at all, so it is hidden while it is empty. */
.ds-result{
  margin:0 0 var(--space-2);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  font-size:15px;
  font-weight:600;
  color:var(--color-navy);
}

.ds-result:empty{
  display:none;
}

/* The caveat under the count: what a record that states no power range means for
   this list. It is small print, and it is the page's own sentence rather than a
   figure read off a record. */
.ds-note{
  margin:0 0 var(--space-4);
  max-width:80ch;
  font-size:13px;
  line-height:1.6;
  color:var(--color-muted);
}

/* -------------------------------------------------------- 03 · The range -- */
/* A card per series: three across a desk, two on a tablet, one on a phone. The
   card is a column, so the head, the facts, the reasons and the actions of cards
   of three different lengths line up with the cards beside them. */
.ds-range{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:var(--space-3);
  margin:var(--space-3) 0 0;
}

.ds-card{
  display:flex;
  flex-direction:column;
  padding:var(--space-3);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-float);
}

/* The head of a card: the series' own photograph and the words that name it. A
   record that carries no picture prints the same words across the head on their
   own, so the two-up arrangement is the variant rather than the rule. */
.ds-card__head--media{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--space-2);
}

/* The picture, kept to the scale of a card that is one of thirty-seven: a square
   tile, small enough that four of them and their words still read as a list. It
   is the pale ground the site gives a product cut-out, so a photograph shot on
   white sits in the tile rather than on a white rectangle, and the picture is
   contained rather than cropped, so a wide or a tall shot is shown whole. The
   tile keeps its shape when the shape it sits beside is taller. */
.ds-card__media{
  display:block;
  width:clamp(76px,26vw,104px);
  max-width:100%;
  aspect-ratio:1 / 1;
  padding:6px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
}

.ds-card__photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* The words beside the picture. min-width is the whole rule: without it the grid
   column would refuse to go below the longest word of a series name. */
.ds-card__headline{
  min-width:0;
}

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

.ds-card__title{
  margin:0;
  font-size:clamp(17px,1.7vw,20px);
}

.ds-card__title a{
  color:var(--color-heading);
  text-decoration:none;
}

.ds-card__title a:hover,
.ds-card__title a:focus-visible{
  color:var(--color-accent);
  text-decoration:underline;
}

.ds-card__text{
  margin:var(--space-1) 0 0;
  font-size:14px;
  line-height:1.55;
  color:var(--color-muted);
}

/* The figures the record itself states. A card of this width has no room for a
   label column beside its value, so the two read label over value with a
   hairline between the pairs. */
.ds-card__facts{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:var(--space-2) 0 0;
  padding:0;
}

.ds-card__fact-label{
  margin:0;
  padding:var(--space-1) 0 0;
  border-top:1px solid var(--color-line);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.ds-card__fact-value{
  margin:0;
  padding:2px 0 var(--space-1);
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* Why this series is listed: the lines its own record was kept by, on the pale
   ground the site gives the small print that belongs to a card rather than to
   the section behind it. */
.ds-card__why{
  margin:var(--space-2) 0 0;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
}

.ds-card__why-title{
  margin:0 0 var(--space-1);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.ds-card__reasons{
  display:grid;
  gap:var(--space-1);
  margin:0;
  padding:0;
  list-style:none;
}

/* A hairline marker rather than a glyph, so a line that wraps still starts at
   the text and not under the marker. */
.ds-card__reason{
  display:flex;
  gap:var(--space-1);
  font-size:13px;
  line-height:1.5;
  color:var(--color-text);
}

.ds-card__reason::before{
  content:"";
  flex:none;
  width:8px;
  height:1px;
  margin-top:9px;
  background:var(--color-field-line);
}

/* The foot of the card: the series page, and the button that puts the series in
   the inquiry list. The server prints that button [hidden], because it is only
   there once a script can hold the list; its own hidden rule is at the foot of
   this file. */
.ds-card__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  margin:auto 0 0;
  padding-top:var(--space-3);
}

.ds-card__actions .text-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--space-1);
}

.ds-card__add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-accent);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}

.ds-card__add:hover{
  border-color:var(--color-accent-dark);
  background:var(--color-accent-pale);
  color:var(--color-accent-dark);
}

/* The pressed state is the one the page reads back from aria-pressed, printed in
   the action colour as the site's other switches are. */
.ds-card__add[aria-pressed="true"],
.ds-card__add[aria-pressed="true"]:hover{
  border-color:var(--color-accent);
  background:var(--color-accent);
  color:var(--color-surface);
}

/* Nothing matched: the way on, in place of a list that holds nothing. It is the
   one line the server leaves [hidden] until the answers empty the range. */
.ds-empty{
  display:block;
  margin:var(--space-3) 0 0;
  padding:var(--space-4);
  border:1px dashed var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  font-size:14px;
  line-height:1.6;
  color:var(--color-muted);
}

/* ------------------------------------------------------- 04 · The inquiry -- */
/* The series the visitor asked about, read back as one line each rather than as
   a second copy of the cards. The page leaves the whole block [hidden], so a
   visitor whose browser runs no script reads the range and nothing else. */
.ds-chosen{
  display:block;
  margin:var(--space-4) 0 0;
  padding:var(--space-3);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-float);
}

.ds-chosen__title{
  margin:0;
  font-size:18px;
}

.ds-chosen__note{
  display:block;
  margin:var(--space-1) 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--color-muted);
}

/* The lines are a list, and the page prints the list empty and fills it from its
   own template: an empty list takes no room and no gap. */
.ds-chosen__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-1);
  margin:var(--space-2) 0 0;
  padding:0;
  list-style:none;
}

.ds-chosen__list:empty{
  display:none;
}

.ds-chosen__item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
}

.ds-chosen__code{
  display:inline-block;
  flex:none;
  padding:2px var(--space-1);
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* The label takes what the code and the button leave, and wraps inside it rather
   than widening the row past the list it sits in. */
.ds-chosen__label{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  line-height:1.45;
  color:var(--color-heading);
  overflow-wrap:anywhere;
}

.ds-chosen__remove{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  margin-left:auto;
  padding:2px var(--space-1);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-accent);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--transition-fast),border-color var(--transition-fast);
}

.ds-chosen__remove:hover{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
}

.ds-chosen__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:var(--space-3) 0 0;
}

/* ----------------------------------------------------------- The [hidden] -- */
/* The theme has no global [hidden] rule, so every box this sheet gives a display
   value to — or lays out as an item of a flex or grid container, which a display
   on the container would otherwise win against — carries its own. These are the
   classes the page prints or the script hides: the cards, the empty line, the
   add buttons and the whole inquiry list all arrive [hidden], and the attribute
   has to keep winning over the box it belongs to. */
.ds-steps[hidden],
.ds-step[hidden],
.ds-step__legend[hidden],
.ds-step__num[hidden],
.ds-step__question[hidden],
.ds-step__note[hidden],
.ds-choices[hidden],
.ds-choice[hidden],
.ds-choice__title[hidden],
.ds-steps__actions[hidden],
.ds-result[hidden],
.ds-note[hidden],
.ds-range[hidden],
.ds-card[hidden],
.ds-card__head[hidden],
.ds-card__head--media[hidden],
.ds-card__media[hidden],
.ds-card__photo[hidden],
.ds-card__headline[hidden],
.ds-card__code[hidden],
.ds-card__title[hidden],
.ds-card__text[hidden],
.ds-card__facts[hidden],
.ds-card__fact-label[hidden],
.ds-card__fact-value[hidden],
.ds-card__why[hidden],
.ds-card__why-title[hidden],
.ds-card__reasons[hidden],
.ds-card__reason[hidden],
.ds-card__actions[hidden],
.ds-card__add[hidden],
.ds-empty[hidden],
.ds-chosen[hidden],
.ds-chosen__title[hidden],
.ds-chosen__note[hidden],
.ds-chosen__list[hidden],
.ds-chosen__item[hidden],
.ds-chosen__code[hidden],
.ds-chosen__label[hidden],
.ds-chosen__remove[hidden],
.ds-chosen__actions[hidden]{
  display:none;
}

/* The two text links this sheet lays out are the site's own class, so the rule
   that gives them a display is scoped to the row they sit in — and they keep an
   entry here for the same reason every other box does. */
.ds-steps__actions .text-link[hidden],
.ds-card__actions .text-link[hidden]{
  display:none;
}

/* ------------------------------------------------------------ Responsive -- */
/* The two numbers the rest of the theme folds on, from pages.css: three cards
   across a desk, two on a tablet, one on a phone, and the steps fold with them.
   No box in this sheet is given a width of its own, so nothing runs off a 320px
   screen. */
@media(max-width:980px){
  .ds-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-range{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .ds-steps{grid-template-columns:minmax(0,1fr)}
  .ds-range{grid-template-columns:minmax(0,1fr)}
  .ds-chosen__actions .btn{
    flex:1 1 100%;
    justify-content:center;
    text-align:center;
  }
}

@media(prefers-reduced-motion:reduce){
  /* The two things this sheet animates are the state of an answer and the state
     of an add button, so under reduced motion they change without a transition. */
  .ds-choice,
  .ds-card__add,
  .ds-chosen__remove{transition:none}
}