/* A series page — the model selection table and the curves under it.
   The page's core block: the toolbar that narrows the list, the table of the
   models the record lists and, after the table, one block per model holding that
   model's own curve and its own figures. The table keeps the shared .spec-table
   look (assets/css/product-series.css) and this sheet adds only what the
   toolbar, the narrowing and the blocks need. Every value comes from
   assets/css/tokens.css and no colour is defined here. */

.series-models{margin-top:6px}
.series-models > * + *{margin-top:20px}

/* The one rule that takes something off the page: a row the script has narrowed
   away, and a block that is not open. With scripting off no element carries the
   attribute, so the whole list and every model's curve stay on the page. */
.series-models [hidden]{display:none}

/* ------------------------------------------------------------ The toolbar -- */
/* One row on a wide screen, in the order the controls are read in: the model
   search, the hydraulic family, the motor power and Reset. The frequency the
   figures are stated at and the result line take the row under them. */
.series-models__toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1.2fr) minmax(190px,1fr) minmax(170px,.9fr) auto;
  align-items:end;
  gap:14px 18px;
}
.series-models__field{display:block;min-width:0;margin:0;font-size:13px;font-weight:600;color:var(--color-navy)}
.series-models__field > span{display:block;margin-bottom:7px}
/* What the search box searches, said under it: the table lists selected examples,
   so the box has to say so before a visitor reads an empty table as an answer. It
   is a line of the field, not a note under the table, and it is not the muted grey
   of a caption: what it says is the reason the box may return nothing. */
.series-models__hint{display:block;margin:7px 0 0;font-size:12px;font-weight:400;line-height:1.5;color:var(--color-muted)}
.series-models__field input,
.series-models__field select{min-width:0;width:100%}
.series-models__field--search{grid-column:1;grid-row:1}
.series-models__field--family{grid-column:2;grid-row:1}
.series-models__field--power{grid-column:3;grid-row:1}
.series-models__reset{grid-column:4;grid-row:1;margin:0;justify-self:start}

/* The frequency the figures are stated at, on the left of the second row, and
   the result line on the right of it. The chips narrow the table only where a
   model states a frequency of its own. */
.series-models__frequency{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;grid-column:1 / 3;grid-row:2;margin:0;font-size:13px;color:var(--color-muted)}
.series-models__frequency-label{font-weight:600;color:var(--color-navy)}
.series-models__frequency-hint{font-size:12px;color:var(--color-muted)}
.series-models__chip{padding:4px 11px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-pale);font:inherit;font-size:13px;font-weight:600;color:var(--color-navy)}
button.series-models__chip{cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
button.series-models__chip[aria-pressed="true"],button.series-models__chip[aria-pressed="true"]:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-surface)}

/* The result line. It is written by the script, so with scripting off it is
   empty and takes no room, and the table below is the whole list. */
.series-models__count{grid-column:3 / 5;grid-row:2;margin:0;text-align:right;font-size:14px;color:var(--color-muted)}
.series-models__count:empty{display:none}

/* --------------------------------------------------------------- The table -- */
/* One row per model, and the figures of a model are read in its own block under
   the table, so the table keeps to the width its columns need rather than the
   width of the page; rows are tight and twenty models read down one screen. */
.series-models__table{min-width:640px}
.series-models .series-models__table th{width:auto}
.series-models .series-models__table thead th{padding-block:10px;background:var(--color-pale);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--color-muted)}
.series-models .series-models__table th,
.series-models .series-models__table td{padding-block:9px}
.series-models__table tbody th{white-space:nowrap;color:var(--color-heading)}
.series-models__table tbody th a{font-weight:600;text-decoration:none}
.series-models__table tbody th a:hover{text-decoration:underline}
.series-models__table tbody tr:hover{background:var(--color-accent-pale)}

/* ----------------------------------------------------------------- Groups --
   A series that states more than one hydraulic family prints one group of rows
   per family, under a band that names the family and counts it: the same band
   the specification tables already use for a section row, so a reader meets one
   shape across the site. A band is not a model, so it takes no row hover state
   and none of the one-line treatment a model's own name gets. */
.series-models__table tbody tr.series-models__group-head th{background:var(--color-accent-pale);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:normal;color:var(--color-navy);text-align:left}
.series-models__table tbody tr.series-models__group-head:hover{background:var(--color-accent-pale)}
.series-models__group-name{margin-inline-end:10px}
.series-models__group-count{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--color-muted)}
.series-models__table td[data-col="curve"],
.series-models__table td[data-col="inquiry"]{white-space:nowrap}
.series-models__view{font-weight:600}
.series-models__absent{color:var(--color-muted)}

/* A model marked held, in the row or in its block: the same words the recorded
   Q-H table uses, and never a proposal. */
.series-models__held{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-sun-pale);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--color-heading)}

/* What names something for a screen reader without standing in the layout: the
   table's caption, and the model a View curve control opens. The theme writes
   .visually-hidden for the same purpose, but no stylesheet in this checkout
   defines it, so the two places this block needs it carry the rule themselves
   rather than depending on one. */
.series-models__caption,
.series-models__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------- One model's block -- */
/* After the table, one block per model: the curve plotted from that model's own
   recorded points on the left, the points and the figures that go with the model
   on the right, stacked on a narrow screen. No block carries the hidden
   attribute in the markup, so with scripting off every one of them is read in
   order under the table and nothing is lost. */
.series-models__panels{display:grid;gap:14px}
.series-model{
  padding:16px 20px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  scroll-margin-top:calc(var(--header-height) + 16px);
}
.series-model__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.series-model__name{margin:0;font-size:17px;color:var(--color-heading)}
.series-model__close{margin-left:auto;font-size:13px;font-weight:600;color:var(--color-accent);text-decoration:none}
.series-model__close:hover{text-decoration:underline}
.series-model__panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 26px;margin-top:14px;padding-top:14px;border-top:1px solid var(--color-line)}
.series-model__figure{display:grid;gap:10px;align-content:start}
/* Which curve the drawing below is: the frequency the record states its figures
   at, and the pole count it groups this model under. It reads as a label over the
   plot rather than as a heading of its own, because it qualifies the drawing and
   is not a section. */
.series-model__ref{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)}
.series-model__side{display:grid;gap:18px;align-content:start}
.series-model__block{display:grid;gap:8px}
.series-model__title{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}

/* The curve. It fills the column it is given but is capped in both directions,
   so a wide model does not turn one block into a whole screen and the figures
   beside it always start where the drawing does. The drawing itself is
   assets/css/qh-plot.css's business and is not restyled here. */
.series-model .qh-plot{margin:0}
.series-model .qh-plot svg{max-height:320px;max-width:560px;margin-inline:auto}

/* The points the curve is drawn from, flow beside the head it belongs to, in the
   order the record holds them: two to a row so a long test does not push the
   figures beside it out of the block. */
.series-model__points{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 18px;margin:0}
.series-model__points > div{display:grid;grid-template-columns:minmax(80px,1fr) minmax(80px,1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--color-line)}
.series-model__points dt,
.series-model__points dd,
.series-model__details dd{margin:0;font-weight:600;color:var(--color-heading);font-variant-numeric:tabular-nums}
.series-model__points dt{font-size:13px;font-weight:400;color:var(--color-muted)}

/* The figures this one model carries. */
.series-model__details{display:grid;gap:0;margin:0}
.series-model__details > div{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--color-line)}
.series-model__details > div:last-child{border-bottom:0}
.series-model__details dt{margin:0;font-size:13px;color:var(--color-muted)}
.series-model__absent{margin:0;max-width:70ch;font-size:14px;color:var(--color-muted)}
.series-model .actions{margin-top:0}
.series-model .btn{min-height:44px;padding:11px 20px;font-size:14px}
.series-model .arrow{font-size:16px}

/* --------------------------------------- The series range and the note -- */
/* What the record states for the series as a whole, printed under the table and
   named as what it is, so a series range is never read as a model's figure. */
.series-models__notes{padding:16px 18px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
.series-models__notes-title{margin:0;font-size:14px;font-weight:700;color:var(--color-navy)}
.series-models__notes-sub{margin:6px 0 0;font-size:13px;color:var(--color-muted)}
.series-models__notes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 40px;margin:12px 0 0}
.series-models__notes-list > div{display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:16px;padding:8px 0;border-bottom:1px solid var(--color-line)}
.series-models__notes-list dt{margin:0;font-size:13px;color:var(--color-muted)}
.series-models__notes-list dd{margin:0;font-weight:600;color:var(--color-heading)}
.series-models__source{margin:12px 0 0;max-width:78ch;font-size:13px;color:var(--color-muted)}
/* Where the series-level figures come from, and the file that states them: the
   line reads as one sentence and the catalogue it names follows as the link, so
   the claim and its source are read together. */
.series-models__source-text{margin-right:6px}
.series-models__source-link{font-weight:600;color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}
.series-models__source-link:hover,.series-models__source-link:focus{color:var(--color-heading)}
.series-models__note{margin-top:14px}

/* The box above the table: how much of the range the table is showing, and the
   way to ask for what it does not. It is a box rather than a line of prose,
   because the sentence is the section's answer to "is this all?" — a buyer who
   reads only the heading and this box still learns that more models exist and how
   to be offered one. Navy on the pale ground, in the same type size as the page's
   own text, opened by the accent rule: a phone shows it exactly as a wide screen
   does, and it asks nothing of a mouse. */
.series-models__callout{
  padding:18px 20px;
  border:1px solid var(--color-line);
  border-inline-start:3px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-pale)
}
.series-models__callout-text{margin:0;max-width:74ch;font-size:15px;line-height:1.6;color:var(--color-navy)}
.series-models__callout-actions{margin-top:16px}

/* The section's own button, three times: above the table, under it, and in the
   place the table leaves when a search matches nothing. It is the site's .btn, so
   it is the same button the rest of the page offers; only its height and its type
   size are set here, to the 44px target the page's other card buttons use. */
.series-models__cta{min-height:44px;padding:11px 20px;font-size:14px}

/* The line under the table, where a visitor who has read the whole list stands:
   the same sentence as the box above, asked as a question, with the same button
   beside it. On a wide screen they share one row; the wrap and the sheet's own
   rule below are what stack them on a phone. */
.series-models__handoff{
  display:grid;
  gap:14px;
  padding-top:18px;
  border-top:1px solid var(--color-line)
}
.series-models__handoff-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.series-models__handoff-title{margin:0;font-size:16px;color:var(--color-heading)}
.series-models__handoff-text{margin:0;max-width:60ch;font-size:15px;font-weight:600;color:var(--color-navy)}

/* What the table answers when a search leaves nothing: the model may still exist,
   so the visitor is told so and handed the way to ask, rather than left in front
   of an empty table concluding that HOBER does not build it. */
.series-models__empty{
  padding:18px 20px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-sun-pale)
}
.series-models__empty-text{margin:0 0 16px;max-width:74ch;font-size:15px;line-height:1.6;color:var(--color-navy)}

/* -------------------------------------------------------------- Responsive -- */
/* Two columns between the desktop row and the phone, then one control to a line.
   The order of the controls is the order of the markup and never changes. */
@media(max-width:980px){
  .series-models__toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .series-models__field--search{grid-column:1 / -1;grid-row:auto}
  .series-models__field--family{grid-column:1;grid-row:auto}
  .series-models__field--power{grid-column:2;grid-row:auto}
  .series-models__reset{grid-column:1;grid-row:auto}
  .series-models__frequency{grid-column:1 / -1;grid-row:auto}
  .series-models__count{grid-column:1 / -1;grid-row:auto;text-align:left}
}
@media(max-width:720px){
  /* One control to a line, stacked in the order they are read in. */
  .series-models__toolbar{grid-template-columns:1fr}
  .series-models__field--search,
  .series-models__field--family,
  .series-models__field--power,
  .series-models__reset,
  .series-models__frequency,
  .series-models__count{grid-column:1;grid-row:auto}
  .series-models__reset{justify-self:start}
  .series-models__count{text-align:left}

  /* The section's three ways into the inquiry form read down the screen rather
     than side by side: the line over the button, then the button at the full
     width of the box it stands in, so the one thing this section asks the visitor
     to do is never a small target in the corner of a paragraph. */
  .series-models__handoff-row{display:block}
  .series-models__handoff .series-models__cta{margin-top:14px}
  .series-models__callout .series-models__cta,
  .series-models__empty .series-models__cta{width:100%;justify-content:center}

  /* Four columns are what a phone reads: the model, its power, its curve and its
     own way into the inquiry form. Everything else the table carries is read in
     that model's own block under the table, so nothing is lost and no column is
     squeezed into a smaller type size. */
  .series-models__table{min-width:520px}
  .series-models__table [data-col]:not([data-col="model"]):not([data-col="power"]):not([data-col="curve"]):not([data-col="inquiry"]){display:none}
  .series-models__table td[data-col="model"],
  .series-models__table th[data-col="model"]{white-space:normal}

  /* The block under the table reads down the screen: the curve, then the points
     and the figures that go with it. */
  .series-model{padding:14px 14px 16px}
  .series-model__close{margin-left:0}
  .series-model__panel{grid-template-columns:1fr;gap:18px}
  .series-model__points{grid-template-columns:1fr}
  .series-model__details > div{grid-template-columns:1fr;gap:4px}
  .series-models__notes-list > div{grid-template-columns:1fr;gap:4px}
}