/* Pump model library — the full model line on the Product Selector page.
   The counts above the list and the rule they were counted by, the pump family
   toggles, the four controls, the rows the script prints, the review panel a
   visitor sends from, and the series list that carries the section when the
   script cannot run.

   The rows are not markup: they are built by assets/js/pump-library.js out of
   one JSON island, so there is no card per model in this sheet. The row is the
   only card here, and it is styled from the skeleton the template under the list
   holds, so a printed row reads the way the site's other rows do: name and
   status first, the figures in a small definition list, the documents last.

   Every value comes from assets/css/tokens.css and no colour is defined here.
   Every selector is scoped under #pump-library, because this section sits on a
   page that carries the selection and its own result blocks, and none of those
   belongs to this sheet. */

/* The rule the markup and the script share: a row the script has narrowed away,
   the Load more button at the end of the list, and the review panel until
   something is selected. With scripting off nothing carries the attribute, so
   the list, the button and the panel are the server's own state. */
#pump-library [hidden]{display:none}

/* ---------------------------------------------------------- The section head --
   The panel's own heading block: the eyebrow, the command and the line that says
   what a row's status means. It is one column, so the lead is readable at 360px
   without a narrower measure. */
#pump-library .section__head > div{max-width:78ch}
#pump-library .section__lead{margin:14px 0 0;max-width:78ch;font-size:16px;line-height:1.6;color:var(--color-muted)}

/* ------------------------------------------------- The counts and the rule --
   The counts are the server's, printed with the rule they were counted by: the
   band is the pale one, with the accent rule the site gives a block that states
   a figure, and the figures are tabular so a count is compared down the line. */
#pump-library .plib-counts{
  margin:20px 0 0;
  padding:14px 16px;
  border:1px solid var(--color-line);
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-pale);
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  color:var(--color-navy);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
#pump-library .plib-rule{margin:10px 0 0;max-width:84ch;font-size:13px;line-height:1.6;color:var(--color-muted)}

/* ------------------------------------------------------------ The families --
   Five toggles at most, wrapped: each is a button with its own count under its
   name, and aria-pressed is what says which family the list is read by. A
   pressed button takes the action colour, as the site's other toggles do. */
#pump-library .plib-groups{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
#pump-library .plib-group{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-height:44px;
  padding:9px 16px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  font:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--color-navy);
  text-align:left;
  cursor:pointer;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}
#pump-library .plib-group:hover{border-color:var(--color-accent);background:var(--color-accent-pale)}
#pump-library .plib-group[aria-pressed="true"]{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-surface)}
#pump-library .plib-group__count{font-size:12px;font-weight:600;color:var(--color-muted)}
#pump-library .plib-group[aria-pressed="true"] .plib-group__count{color:inherit;opacity:.85}

/* ------------------------------------------------------------- The controls --
   One control to a line on a phone, each with its label above it and never a
   placeholder standing in for that label. The field text is 16px from the start,
   because a smaller one makes a phone zoom the page when the search is used. */
#pump-library .plib-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 16px;margin:26px 0 0}
#pump-library .plib-field{display:block;min-width:0;margin:0}
#pump-library .plib-field label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--color-navy)}
#pump-library .plib-field input,
#pump-library .plib-field select{width:100%;min-width:0;min-height:44px;font-size:16px}
#pump-library .plib-reset{margin:0}
#pump-library .plib-reset .btn{width:100%;min-height:44px}

/* The polite line the script writes. It is empty until a filter is used, and an
   empty line takes no room: with scripting off the whole list is the answer. */
#pump-library .plib-status{margin:18px 0 0;font-size:14px;font-weight:600;color:var(--color-navy);font-variant-numeric:tabular-nums}
#pump-library .plib-status:empty{display:none}

/* ---------------------------------------------------------------- The rows --
   One row per model: the status badge and the model code first, then the series
   the model belongs to, the figures its own record states, the line about its
   curve and the one line it carries about itself, and the documents last. A
   code, a figure and a note may be long, so each wraps anywhere rather than
   pushing the page sideways. */
#pump-library .plib-results{display:grid;gap:12px;margin:16px 0 0}
#pump-library .plib-results:empty{display:none}
#pump-library .plib-row{
  display:grid;
  gap:14px;
  min-width:0;
  padding:16px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}
#pump-library .plib-row__main{display:grid;gap:8px;min-width:0}
#pump-library .plib-row__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-self:start;
  margin:0;
  padding:4px 10px;
  border-radius:999px;
  background:var(--color-pale);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-muted);
}
#pump-library .plib-row__badge[data-state="curve"]{background:var(--color-accent-pale);color:var(--color-accent)}
#pump-library .plib-row__badge[data-state="spec"]{background:var(--color-pale);color:var(--color-navy)}
#pump-library .plib-row__badge[data-state="review"]{background:var(--color-sun-pale);color:var(--color-heading)}
#pump-library .plib-row__code{margin:0;font-size:17px;line-height:1.35;color:var(--color-heading);overflow-wrap:anywhere}
#pump-library .plib-row__series{margin:0;font-size:13px;line-height:1.5;color:var(--color-muted);overflow-wrap:anywhere}
#pump-library .plib-row__series a{font-weight:600;color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}
#pump-library .plib-row__series a:hover,#pump-library .plib-row__series a:focus-visible{color:var(--color-heading)}

/* The figures this one model states, each on its own line of a small definition
   list. A figure the island does not hold has no line at all, so no row prints a
   zero or a dash where a record stays silent. */
#pump-library .plib-row__figures{display:grid;gap:0;margin:2px 0 0}
#pump-library .plib-row__figures > div{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:4px 12px;padding:7px 0;border-bottom:1px solid var(--color-line)}
#pump-library .plib-row__figures > div:last-child{padding-bottom:0;border-bottom:0}
#pump-library .plib-row__figures dt{margin:0;font-size:13px;color:var(--color-muted);overflow-wrap:anywhere}
#pump-library .plib-row__figures dd{margin:0;font-weight:600;color:var(--color-heading);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

#pump-library .plib-row__curve{margin:0;font-size:14px;font-weight:600;color:var(--color-navy);overflow-wrap:anywhere}
#pump-library .plib-row__note{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-muted);overflow-wrap:anywhere}
#pump-library .plib-row__links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:2px 0 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#pump-library .plib-row__links a{font-weight:600;color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
#pump-library .plib-row__links a:hover,#pump-library .plib-row__links a:focus-visible{color:var(--color-heading)}
#pump-library .plib-row__links p{margin:0;color:var(--color-muted)}

/* A line the script left out takes no room either. */
#pump-library .plib-row__series:empty,
#pump-library .plib-row__figures:empty,
#pump-library .plib-row__curve:empty,
#pump-library .plib-row__note:empty,
#pump-library .plib-row__links:empty{display:none}

/* The way to send the model on. Full width under the row on a phone, beside it
   on a screen wide enough to hold both, and pressed takes the navy the site uses
   for a control that is on. */
#pump-library .plib-row__actions{display:flex;align-items:center}
#pump-library .plib-row__add{width:100%;min-height:44px;padding:11px 18px;font-size:14px;text-align:center}
#pump-library .plib-row__add[aria-pressed="true"]{border-color:var(--color-navy);background:var(--color-navy);color:var(--color-surface)}

/* --------------------------------------------------------- Nothing matched --
   The way on rather than an empty box: the visitor is told what to change and
   what to send instead. */
#pump-library .plib-empty{margin:16px 0 0;padding:20px 22px;border:1px dashed var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
#pump-library .plib-empty__text{margin:0;max-width:84ch;font-size:14px;line-height:1.6;color:var(--color-muted)}
#pump-library .plib-more{margin:18px 0 0;text-align:center}
#pump-library .plib-more .btn{min-height:44px}

/* ------------------------------------------------------- What is selected --
   The panel the chosen models are read in before they are sent: one line each
   with its own way out, and the inquiry link under them. It is shown only once
   something is selected, so the list never stands as an empty box. */
#pump-library .plib-review{
  margin:26px 0 0;
  padding:20px 22px;
  border:1px solid var(--color-line);
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-float);
}
#pump-library .plib-review__title{margin:0;font-size:17px;line-height:1.35;color:var(--color-heading)}
#pump-library .plib-review__note{margin:8px 0 0;max-width:78ch;font-size:14px;line-height:1.6;color:var(--color-muted)}
#pump-library .plib-review__list{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
#pump-library .plib-review__list:empty{display:none}
#pump-library .plib-review__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  padding:10px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
  font-size:14px;
  line-height:1.5;
  color:var(--color-heading);
  overflow-wrap:anywhere;
}
#pump-library .plib-review__list button{
  min-height:44px;
  padding:9px 14px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  font:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--color-accent);
  cursor:pointer;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}
#pump-library .plib-review__list button:hover{border-color:var(--color-accent);background:var(--color-accent-pale)}
#pump-library .plib-review .btn{margin-top:18px;min-height:44px}

/* --------------------------------------------------- Without the script --
   The series, grouped by the family their records belong to: the way to every
   model in the library for a visitor whose browser runs no script. */
#pump-library .plib-noscript{margin:26px 0 0;padding:20px 22px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
#pump-library .plib-noscript__lead{margin:0;max-width:84ch;font-size:13px;line-height:1.6;color:var(--color-muted)}
#pump-library .plib-noscript__group{margin:18px 0 0}
#pump-library .plib-noscript__title{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-navy)}
#pump-library .plib-noscript__list{display:grid;gap:6px 24px;margin:10px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.5}
#pump-library .plib-noscript__list a{font-weight:600;color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
#pump-library .plib-noscript__list a:hover,#pump-library .plib-noscript__list a:focus-visible{color:var(--color-heading)}
#pump-library .plib-noscript__count{font-size:12px;color:var(--color-muted);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- A wide screen --
   The controls take one row above 980px, where the five of them still fit the
   container; the row puts the way to send the model beside it from 760px, and
   the series list of the noscript reads in columns. */
@media (min-width:480px){
  #pump-library .plib-row__add{width:auto}
  #pump-library .plib-reset .btn{width:auto}
}
@media (min-width:760px){
  #pump-library .plib-row{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:20px}
  #pump-library .plib-row__actions{align-self:start}
  #pump-library .plib-noscript__list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (min-width:980px){
  #pump-library .plib-toolbar{grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(150px,1fr)) auto;align-items:end}
  #pump-library .plib-reset{justify-self:start}
}

/* The way on where the search found nothing. A reference this site publishes no
   record for is not a model HOBER does not supply, so the empty state keeps the
   visitor's own words in front of them and puts the one action under it: the
   reference line is the visitor's text and wraps rather than widening the panel,
   and the button is the site's own .btn at the shared 44px target. */
#pump-library .plib-empty__ref{margin:8px 0 0;font-size:14px;font-weight:600;line-height:1.5;color:var(--color-heading);overflow-wrap:anywhere}
#pump-library .plib-empty__handoff{margin:12px 0 0}
#pump-library .plib-empty__handoff .btn{display:inline-flex;align-items:center;gap:6px;min-height:44px}