/* The 220 V single-phase pump guide — the whole page layer.
 *
 * This sheet carries components/series-single-phase-guide.php and its wiring
 * component: the contents menu, the hero, the wiring steps, the figures and
 * their captions, the safety alerts, the tables, the gallery and its viewer, the
 * commissioning checklist, and the sizing and painting of the vector drawings
 * inc/single-phase-diagrams.php prints inline.
 *
 * Everything here is the page's own `.spg-…` namespace, plus the `.spg-diagram`
 * sizing rule and the `.spg-diagram__…` classes the drawings themselves are
 * painted by. The shared blocks the two components reuse — .section,
 * .section--pale, .container, .section__head, .eyebrow, .section__sub, .cards,
 * .card, .btn, .form, .fields, .field, .field__hint, .feedback, .faq, .note-line,
 * .product-note, .resource-link, .arrow, .img-todo — keep the rules style.css,
 * pages.css, sections.css and series-page.css already give them; nothing here
 * restates one of them. Colours, spacing, radii and transitions come from
 * assets/css/tokens.css. assets/wp-behaviors/base.css is enqueued on this page
 * with the behaviour runtime and declares only [hidden], so nothing here
 * re-declares it.
 *
 * The one colour the shared palette does not carry is the red that marks a
 * mandatory stop. It is stated once, as the page's own variable, and it is used
 * as an outline, a rule and a label: an alert or a drawing keeps a white or pale
 * ground with dark text, never a filled red block. */

.spg-alert,
.spg-diagram{--spg-stop:#b42318}

/* The sections the contents menu links to are read under a sticky header and
   under the menu itself, so an anchor lands clear of both instead of behind
   them. The selector is wrapped in :where() so a later rule, here or in another
   sheet, can take the value back without a specificity fight. */
:where(#overview,#how-it-works,#compatibility,#wiring,#safety,#models,#support,#faq,#request){scroll-margin-top:142px}

/* The same distance for a jump made by a link on another page, where the browser
   uses the document's own scroll padding instead. The guard keeps this page's
   value off every other page's anchors. */
html:has(.spg-toc){scroll-padding-top:142px}

/* ------------------------------------------------------------------- Hero -- */
/* The record's own title, the three audience lines, the two ways on and the two
   photographs — the unit on its plate and one shot of a system in the field. The
   band is white and the pictures sit on the pale plate the site's other product
   shots use, so the engineering look of the sections below starts here. */
.spg-hero{padding-block:clamp(24px,3.4vw,48px) clamp(32px,4.4vw,64px);border-bottom:1px solid var(--color-line);background:var(--color-surface)}
.spg-hero__inner{display:grid;align-items:center;gap:clamp(28px,4vw,56px)}
.spg-hero h1{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.02em;color:var(--color-heading)}
.spg-hero__lede{margin:16px 0 0;max-width:58ch;font-size:18px;color:var(--color-muted)}
.spg-hero__proof{display:grid;gap:8px;margin:20px 0 0;padding:0;list-style:none;font-size:15px;color:var(--color-heading)}
.spg-hero__proof li{position:relative;padding-left:27px}
.spg-hero__proof li::before{content:"";position:absolute;left:1px;top:.42em;width:9px;height:5px;border-left:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);transform:rotate(-45deg)}
.spg-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.spg-hero__note{margin:18px 0 0;max-width:64ch;font-size:13.5px;color:var(--color-muted)}
.spg-hero__media{margin:0}
.spg-hero__frame{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.6vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-pale)}
.spg-hero__photo{display:block;width:100%;height:auto;max-height:clamp(230px,30vw,400px);object-fit:contain;mix-blend-mode:multiply}

@media(min-width:901px){
  .spg-hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
}

/* ---------------------------------------------------------- Contents menu -- */
/* The eight sections as one sticky row under the site header, on a white ground
   so the row reads as a bar rather than as part of the section above it. It
   follows the header's own height: the full row above 1100px, and the compact
   row the navigation sheet switches to below that. */
.spg-toc{
  position:sticky;
  top:var(--header-height);
  z-index:30;
  background:var(--color-surface);
  border-block:1px solid var(--color-line);
  /* The bar runs the full width of the window rather than stopping at the
     container's edge, so content never shows past the end of it. A wide shadow
     clipped to the element paints the ground the hairlines need, and the clip is
     used rather than a 100vw pseudo-element because a clip can never introduce a
     horizontal scrollbar. */
  clip-path:inset(0 -100vmax);
  box-shadow:0 0 0 100vmax var(--color-surface);
}

/* The row is centred in the page's measure, the way the site's own navigation row
   reads: the eight entries as one line of links in the middle of the band. */
.spg-toc__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-1);margin:0;padding:9px 0;list-style:none}
.spg-toc__list > li{flex:none}
.spg-toc__link{display:inline-flex;align-items:center;min-height:36px;padding:7px 13px;border-radius:999px;color:var(--color-text);font-size:14px;font-weight:600;text-decoration:none;transition:background-color var(--transition-fast),color var(--transition-fast)}
.spg-toc__link:hover,.spg-toc__link:focus-visible{background:var(--color-accent-pale);color:var(--color-accent)}
.spg-toc__link:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* The section being read is carried in the markup, on the link the scrollspy
   marks, so the state is announced as well as painted. */
nav.spg-toc a[aria-current="location"]{background:var(--color-accent);color:var(--color-surface)}
nav.spg-toc a[aria-current="location"]:hover,
nav.spg-toc a[aria-current="location"]:focus-visible{background:var(--color-accent-dark);color:var(--color-surface)}

/* Below the width where the navigation row takes its compact height, the menu
   follows it. */
@media(max-width:1100px){
  .spg-toc{top:var(--header-height-compact)}
}

/* A narrow screen reads the same eight entries as one row that can be pushed
   sideways: wrapped into three lines the row would take a third of the screen.
   The row scrolls inside its own box, so the page still never scrolls
   sideways. */
@media(max-width:860px){
  /* One scrolling line: centred a long row would hide its first entries past the
     left edge, so a row that cannot fit starts at the beginning. */
  .spg-toc__list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:8px 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .spg-toc__link{white-space:nowrap}
}

/* ----------------------------------------------------------- Wiring steps -- */
/* A step is the copy and the figure it belongs to, side by side: the figure left
   and the copy right, and the other way round on the step after it, so a run of
   six reads as a sequence rather than as a list. Below 860px there is one column
   and the copy comes first: a visitor reads what to do, and then what it looks
   like. A step that carries a drawing beside a photograph keeps both in the same
   column, one under the other. */
.spg-step{display:grid;align-items:start;gap:clamp(20px,2.8vw,40px)}
.spg-step + .spg-step{margin-top:clamp(28px,4vw,56px);padding-top:clamp(28px,4vw,56px);border-top:1px solid var(--color-line)}
.spg-step > *{min-width:0}
.spg-step__body{order:1}
.spg-step > .spg-figure,
.spg-step > .spg-gallery,
.spg-step > .spg-diagram{order:2}

@media(min-width:861px){
  .spg-step{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spg-step__body{grid-column:2;grid-row:1}
  .spg-step > .spg-figure,
  .spg-step > .spg-gallery,
  .spg-step > .spg-diagram{grid-column:1}
  .spg-step--flip .spg-step__body{grid-column:1}
  .spg-step--flip > .spg-figure,
  .spg-step--flip > .spg-gallery,
  .spg-step--flip > .spg-diagram{grid-column:2}
}

/* The copy of a step: its number, the step's own title, and what to do. The
   element rules below are written on the block rather than on child class names,
   so the component may label its own parts as it likes. */
.spg-step__num{display:block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.spg-step__body > :first-child{margin-top:0}
.spg-step__body h3{margin:0;font-size:clamp(19px,2.1vw,23px);line-height:1.25;color:var(--color-heading)}
.spg-step__body h4{margin:14px 0 0;font-size:16px;color:var(--color-heading)}
.spg-step__body p{margin:12px 0 0;max-width:62ch}
.spg-step__body ul,.spg-step__body ol{margin:12px 0 0;padding-left:20px;color:var(--color-muted)}
.spg-step__body li + li{margin-top:6px}

/* --------------------------------------------------------------- Figures -- */
/* A photograph in the plate the site's pictures sit on, with its caption under
   it. A drawing sits in the same plate, so a step that shows the inverter and
   the next one that shows a schematic keep one rhythm. The plate is the element
   a callout is positioned against, so it is the positioning context. */
.spg-figure{margin:0}
.spg-figure__frame{position:relative;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-pale)}
.spg-figure__frame img{display:block;width:100%;height:auto;max-height:clamp(240px,34vw,460px);object-fit:contain}
.spg-figure__caption{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted)}
.spg-figure__caption strong{color:var(--color-heading)}

/* A label placed on a photograph from the component, at the position the two
   variables give. It is only ever used where the owner has confirmed what the
   photograph shows, and it never carries a part the picture does not show. */
.spg-figure__hot{position:absolute;left:var(--hot-x,50%);top:var(--hot-y,50%);display:inline-flex;align-items:center;gap:8px;max-width:min(240px,62%);padding:5px 11px;border:1px solid var(--color-surface);border-radius:999px;background:var(--color-navy);color:var(--color-surface);font-size:12px;font-weight:600;line-height:1.3;box-shadow:0 6px 18px rgba(18,48,74,.28);transform:translate(-50%,-50%);pointer-events:none}
.spg-figure__hot::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--color-sun)}

/* ---------------------------------------------------------------- Alerts -- */
/* A rule the reader has to take in, drawn as an outline: the pale ground, a
   hairline and an accent rule down the side, with the label in the accent. */
.spg-alert{margin:0;padding:18px clamp(16px,2.4vw,24px) 18px clamp(22px,3vw,30px);border:1px solid var(--color-line);border-left:5px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-pale);color:var(--color-text);font-size:15px;line-height:1.6}
.spg-alert > :first-child{margin-top:0}
.spg-alert > :last-child{margin-bottom:0}
.spg-alert__label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}

/* The mandatory warning: the same dark text on the same quiet ground, with the
   page's stop red as an outline instead of a fill, because a red block reads as
   decoration and stops being read at all. */
.spg-alert--danger{border-color:var(--spg-stop);border-left-color:var(--spg-stop);background:var(--color-surface)}
.spg-alert--danger .spg-alert__label{color:var(--spg-stop)}
.spg-alert--danger strong{color:var(--color-heading)}

/* The short repeat of the safety rule that sits in the flow of a section rather
   than as a panel of its own. */
.spg-alert--inline{margin:0 0 18px;padding:10px 0 10px 16px;border:0;border-left:3px solid var(--spg-stop);border-radius:0;background:transparent;font-size:13.5px;color:var(--color-muted)}
.spg-alert--inline .spg-alert__label{display:inline;margin:0 6px 0 0;color:var(--spg-stop)}

/* ---------------------------------------------------------------- Tables -- */
/* Label-and-value rows and the model tables both keep the site's table look, on
   the page's own white ground and at the page's own type size. */
.spg-table{width:100%;border-collapse:collapse;background:var(--color-surface);font-size:15px;color:var(--color-text)}
.spg-table caption{margin-bottom:10px;text-align:left;font-size:13px;color:var(--color-muted)}
.spg-table th,.spg-table td{padding:13px 16px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top}
.spg-table thead th{background:var(--color-pale);color:var(--color-heading);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.spg-table tbody th{font-weight:600;color:var(--color-heading)}
.spg-table tbody tr:last-child th,.spg-table tbody tr:last-child td{border-bottom:0}
/* A column of figures keeps the numerals in step without being held on one
   line: a long value such as a DC window must stay able to wrap on a phone. */
.spg-table__num{font-variant-numeric:tabular-nums}

/* A table of four columns does not fit a phone. It keeps the width it needs in
   the site's own scroll region rather than squeezing a column into a smaller
   type size, and the region moves sideways rather than the page. */
.spg-table-wrap{max-width:100%;overflow-x:auto}

@media(max-width:720px){
  .spg-table th,.spg-table td{padding:11px 13px}
}

/* Under 640px a table whose rows carry their own label reads as rows: the label
   above the value it belongs to, rather than two squeezed columns. The guard
   asks for a row header, or for a value that names its own column, so a table of
   columns that has neither keeps its shape and simply gets tighter.
   :is() parses forgivingly, so a browser without :has() still reads the stacked
   form the component asks for by class. */
@media(max-width:640px){
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked){display:block;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-md)}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) thead{display:none}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) tr{display:block;padding:14px 16px;border-bottom:1px solid var(--color-line)}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) tr:last-child{border-bottom:0}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) th,
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) td{display:block;padding:0;border:0}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) tbody th[scope="row"]{margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) td + td{margin-top:8px}
  :is(.spg-table:has(tbody th[scope="row"]),.spg-table:has(td[data-label]),.spg-table--stacked) td[data-label]::before{content:attr(data-label) " — ";font-weight:600;color:var(--color-muted)}
}

/* ------------------------------------------------------------ Checklists -- */
/* The commissioning case, one line each, with a drawn tick rather than a bullet:
   the list is a set of things to confirm, not prose. */
.spg-checks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.spg-checks li{position:relative;padding-left:30px;font-size:15px;line-height:1.6}
.spg-checks li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);transform:rotate(-45deg)}

/* ------------------------------------------------------------------ Form -- */
/* The lead form keeps the site's own controls; this adds only the submit button
   at the form's own width, and the two columns beside the section's copy when
   the component wraps the band that way. */
.spg-form__submit{width:100%;margin-top:18px;justify-content:center}
.spg-request__grid{display:grid;align-items:start;gap:clamp(28px,4vw,56px)}
.spg-request__grid > :first-child > :first-child{margin-top:0}

@media(min-width:861px){
  .spg-request__grid{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
}

/* --------------------------------------------------------------- Gallery -- */
/* The guide's photographs, three or four to a row, each one a link to the
   full-size picture: without the behaviour the link still opens the file, and
   with it the same link opens the picture in the viewer below. They are evidence
   — a meter reading, a terminal box — so a thumbnail shows the whole frame
   rather than a crop of it, and the cursor says it can be enlarged. */
.spg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0}
.spg-gallery__caption{margin:12px 0 0;font-size:13px;color:var(--color-muted)}
.spg-gallery a[data-gallery-item]{display:block;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale);cursor:zoom-in;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.spg-gallery a[data-gallery-item]:hover,
.spg-gallery a[data-gallery-item]:focus-visible{border-color:var(--color-accent);box-shadow:var(--shadow-card)}
.spg-gallery a[data-gallery-item]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.spg-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}

/* The viewer the photographs open in. The dialog is the browser's own; this is
   how it looks and how it is held inside the window at every size. The picture
   is limited by the viewport rather than by a pixel width, so a whole
   photograph is on screen on a phone as well as on a desktop. */
.spg-lightbox{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(94vw,1080px);max-width:94vw;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:clamp(14px,2.4vw,26px);overflow:auto;border:0;border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-panel)}
.spg-lightbox::backdrop{background:rgba(18,48,74,.74)}
/* A closed dialog is hidden by the browser's own rule, which a display of ours
   would otherwise outrank, so the closed state is stated here as well. */
.spg-lightbox:not([open]){display:none}
.spg-lightbox [data-gallery-image]{grid-column:1/-1;display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);margin-inline:auto;border-radius:var(--radius-md);background:var(--color-pale)}
.spg-lightbox [data-gallery-caption]{grid-column:1/-1;margin:0 auto;max-width:70ch;font-size:13.5px;line-height:1.55;color:var(--color-muted);text-align:center}
.spg-lightbox [data-gallery-close]{grid-column:1/-1;justify-self:end}
.spg-lightbox [data-gallery-prev]{grid-column:1;justify-self:start}
.spg-lightbox [data-gallery-next]{grid-column:3;justify-self:end}

.spg-lightbox [data-gallery-close],
.spg-lightbox [data-gallery-prev],
.spg-lightbox [data-gallery-next]{appearance:none;min-height:40px;padding:8px 16px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);color:var(--color-heading);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
.spg-lightbox [data-gallery-close]:hover,
.spg-lightbox [data-gallery-prev]:hover,
.spg-lightbox [data-gallery-next]:hover{border-color:var(--color-accent);background:var(--color-accent-pale);color:var(--color-accent)}
.spg-lightbox [data-gallery-close]:focus-visible,
.spg-lightbox [data-gallery-prev]:focus-visible,
.spg-lightbox [data-gallery-next]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* -------------------------------------------------------------- Drawings -- */
/* inc/single-phase-diagrams.php prints a drawing inline, and a drawing is the
   arrangement a section is talking about: it scales with the column it sits in,
   with no fixed width, and its height follows the viewBox it was drawn in. Every
   colour below is a token — the structure in navy, the drive in the engineering
   blue, the array's path in the deeper amber that stays readable as a line, the
   water in the cool blue — plus the page's own stop red, used only where a state
   is the one not to proceed from. */
.spg-diagram{display:block;width:100%;max-width:100%;height:auto;margin:0}

.spg-diagram__unit,
.spg-diagram__panel{fill:var(--ill-panel);stroke:var(--ill-structure);stroke-width:1.6;stroke-linejoin:round}
.spg-diagram__panel{fill:var(--color-pale)}
.spg-diagram__unit--drive{fill:var(--ill-drive-pale);stroke:var(--ill-drive)}
.spg-diagram__panel--stop{fill:var(--color-surface);stroke:var(--spg-stop);stroke-width:2}
.spg-diagram__slot{fill:none;stroke:var(--color-line);stroke-width:1.6;stroke-dasharray:5 5}

/* A run, toned by what travels along it. */
.spg-diagram__line{fill:none;stroke:var(--ill-structure);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spg-diagram__line--energy{stroke:var(--ill-energy-line)}
.spg-diagram__line--drive{stroke:var(--ill-drive)}
.spg-diagram__line--water{stroke:var(--ill-water)}
.spg-diagram__line--earth{stroke:var(--color-heading);stroke-dasharray:7 5}
.spg-diagram__line--optional{stroke:var(--color-line);stroke-dasharray:2.5 5}
.spg-diagram__line--stop{stroke:var(--spg-stop);stroke-width:2}
.spg-diagram__line--rule{stroke:var(--color-navy);stroke-width:1.5}
.spg-diagram__line--ghost{stroke:var(--ill-structure-soft)}
.spg-diagram__line--ghost-dash{stroke:var(--ill-structure-soft);stroke-dasharray:5 5}

/* The arrowhead at the end of a run, in the tone of the run itself. */
.spg-diagram__head{stroke:none;fill:var(--ill-structure)}
.spg-diagram__head--energy{fill:var(--ill-energy-line)}
.spg-diagram__head--drive{fill:var(--ill-drive)}
.spg-diagram__head--water{fill:var(--ill-water)}
.spg-diagram__head--earth{fill:var(--color-heading)}
.spg-diagram__head--optional{fill:var(--color-line)}

/* A terminal, and the two marks the correct-or-stop columns use. Both marks are
   drawn rather than typed, so neither waits on a font. */
.spg-diagram__pin{fill:var(--ill-panel);stroke:var(--ill-structure);stroke-width:1.5}
.spg-diagram__tick{fill:none;stroke:var(--ill-drive);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.spg-diagram__cross{fill:none;stroke:var(--spg-stop);stroke-width:2.4;stroke-linecap:round}

/* The five kinds of text a drawing carries. The smallest is 12px, which is where
   a label stays legible at the size the drawing is drawn. */
.spg-diagram__lead,
.spg-diagram__label,
.spg-diagram__sub,
.spg-diagram__note,
.spg-diagram__stop-text,
.spg-diagram__stop-head{font-family:var(--font-body)}
.spg-diagram__lead{fill:var(--color-heading);font-size:17px;font-weight:700}
.spg-diagram__label{fill:var(--color-heading);font-size:15px;font-weight:600}
.spg-diagram__sub{fill:var(--color-heading);font-size:12.5px;font-weight:600}
.spg-diagram__note{fill:var(--color-muted);font-size:12px}
.spg-diagram__stop-text{fill:var(--spg-stop);font-size:12.5px;font-weight:600}
.spg-diagram__stop-head{fill:var(--spg-stop);font-size:17px;font-weight:700}

/* ------------------------------------------------------------ Responsive -- */
/* The page works down to 360px without a sideways scroll: the grids above
   already collapse to one column, so what is left are the two places a long word
   or a long label could push the page wider than the screen. */
@media(max-width:520px){
  .spg-gallery{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .spg-toc__link{font-size:13.5px}
}

.spg-alert,
.spg-checks li,
.spg-figure__caption,
.spg-step__body h3,
.spg-table th,
.spg-table td{overflow-wrap:break-word}

/* The two things on this page that change under the pointer. */
@media (prefers-reduced-motion:reduce){
  .spg-toc__link,
  .spg-gallery a[data-gallery-item],
  .spg-lightbox [data-gallery-close],
  .spg-lightbox [data-gallery-prev],
  .spg-lightbox [data-gallery-next]{transition:none}
}

/* A printed page keeps the copy, the tables and the figures, and drops the two
   parts that only work on screen: the sticky row and the viewer. */
@media print{
  .spg-toc{position:static;box-shadow:none;clip-path:none;border:0}
  .spg-gallery a[data-gallery-item]{cursor:auto}
  .spg-lightbox{display:none}
}

/* ------------------------------------------------ Integration, parent pass --
   Three rules reconciled with the markup the two components actually print, and
   the page's stop red moved to the root so a figure heading that carries it is
   painted outside an alert or a drawing too. This sheet is enqueued on the guide
   page only, so :root here reaches nothing else on the site. */

:root{--spg-stop:#b42318}

/* The hero's picture column: the main plate, the two supporting shots under it,
   and the terminal detail inset over the corner. The component names the parts
   __main, __shots, __shot and __inset. */
.spg-hero__plate{position:relative}
.spg-hero__main{display:flex;align-items:center;justify-content:center;margin:0;padding:clamp(16px,2.6vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-pale)}
.spg-hero__shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0}
.spg-hero__shot{margin:0}
/* One shot is the whole row: the grid is built for the pair this hero can carry, and
   a single frame filling half of it would read as a picture that failed to arrive. */
.spg-hero__shots > :only-child{grid-column:1 / -1}
.spg-hero__shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--color-line);border-radius:var(--radius-md)}

@media(max-width:520px){
  .spg-hero__shots{grid-template-columns:minmax(0,1fr)}
}

/* A step holds its figures in one column of their own, whatever mixture of a
   drawing, a photograph and the enlarging gallery that column carries: a drawing
   beside a photograph would otherwise take a row of its own and push the copy
   out of the two-column rhythm the six steps are read in. */
.spg-step__figures{order:2;display:grid;gap:clamp(16px,2.2vw,28px);min-width:0}

@media(min-width:861px){
  .spg-step__figures{grid-column:1;grid-row:1}
  .spg-step--flip .spg-step__figures{grid-column:2}
}

/* The two headings a comparison drawing is read under: the state that is correct
   in the engineering blue, the state that stops the work in the stop red. */
.spg-figure__headings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 10px}
.spg-figure__heading{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-heading)}
.spg-figure__heading + .spg-figure__heading{color:var(--spg-stop)}

/* A photograph that is its own link, with or without the gallery around it. */
.spg-figure__link{display:block;text-decoration:none}

/* The line the hero leads with, printed under the record's own name: it is the
   promise the page opens on, set below the first-level heading rather than as a
   second one, so the page keeps a single <h1>. */

/* ------------------------------------------------ Layout pass, second round --
   Read against the whole page at 1440, 1024, 860 and 390 px. Nothing here adds
   a claim, a picture or a section: it is the same copy and the same figures,
   arranged so a technical reader can scan the page. This sheet is enqueued on
   the guide page only, so every rule below reaches nothing else on the site. */

/* One rhythm for a long page read in one sitting: the shared section space,
   tightened on a phone and opened a little on a wide screen, so the guide's
   eleven sections stand at the same distance from the hero to the form, and two
   pale bands never meet with a double gap. */
.section{padding-block:clamp(56px,7vw,104px)}
.section + .section{padding-block-start:clamp(48px,6vw,88px)}

/* The hero: copy on the left, the product plate on the right, both starting on the
   same line, and the picture column narrower than it was. Under 1024px the plate
   takes the full width below the copy, and the plate itself is capped so the hero
   never grows taller than the sentence that opens it. */
.spg-hero__inner{align-items:center}

@media(min-width:1024px){
  .spg-hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
}

@media(max-width:1023px){
  .spg-hero__inner{grid-template-columns:minmax(0,1fr)}
  .spg-hero__media{order:2}
}

.spg-hero__main img{width:auto;max-width:100%;max-height:min(44vw,400px);object-fit:contain}

/* The contents row is one line that can be pushed sideways, at every width: eight
   entries wrapped onto three lines would take a third of a phone screen and a
   quarter of a tablet one. The row scrolls inside its own box, so the page still
   never scrolls sideways, and the entry the reader is inside stays marked. */
.spg-toc__list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:16px}

.spg-toc__list::-webkit-scrollbar{display:none}
.spg-toc__link{white-space:nowrap}

/* A drawing is read as a plate, not as line art floating in the column: capped at
   a width its labels stay legible at, on the section's own light ground with a
   hairline around it — the same treatment the photographs get. */
.spg-figure--diagram .spg-diagram{width:100%;max-width:660px;margin-inline:auto;padding:clamp(10px,1.4vw,18px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-sizing:border-box}

/* The six steps: figures and copy aligned to the top so a tall drawing no longer
   centres itself against three lines of text, and a slightly wider copy column
   where the screen has room for the difference. */
.spg-step{align-items:start}

@media(min-width:1200px){
  .spg-step{grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr)}
}

/* The step's number, as the small plate it reads as, rather than a line of running
   text between the figures and the instruction. */
.spg-step__num{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 10px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-heading)}

/* The commissioning checklist reads as two columns where there is room, numbered
   in the order the work is done. */
.spg-checks{counter-reset:spg-check;grid-template-columns:minmax(0,1fr)}

@media(min-width:900px){
  .spg-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 30px}
}

.spg-checks li{counter-increment:spg-check;position:relative;list-style:none;padding-left:40px}
.spg-checks li::before{content:counter(spg-check,decimal-leading-zero);position:absolute;left:0;top:.15em;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--color-accent)}

/* The conditions that stop the work are the last thing the safety section says, held
   in the callout at its end rather than in a numbered band of their own, so the list
   is set as part of that callout and the section keeps its own spacing. */
#safety .spg-checks{margin-top:24px}
#safety .spg-checks + .spg-alert{margin-top:26px}
#safety .spg-alert ul{margin:8px 0 0;padding-left:20px}
#safety .spg-alert li + li{margin-top:6px}

/* Tables: a fixed, deliberate split of the two columns where the screen allows it,
   the first column reading as the label, and a sideways scroll of its own rather
   than a squeezed table when it does not fit. */
.spg-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}

@media(min-width:861px){
  .spg-table{table-layout:fixed}
  .spg-table th:first-child,.spg-table td:first-child{width:40%}
}

.spg-table th:first-child,.spg-table td:first-child{font-weight:600;color:var(--color-heading)}
.spg-table tbody tr + tr th,.spg-table tbody tr + tr td{border-top:1px solid var(--color-line)}

/* The galleries: one shape per thumbnail so a row reads as a row, but the picture
   itself is fitted inside it rather than cropped — a meter reading or a terminal
   box is evidence, and cutting the top off a photograph of a measurement would
   remove the number being shown. The cursor says the picture opens. */
.spg-gallery a[data-gallery-item]{display:block;aspect-ratio:4/3;padding:6px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
.spg-gallery a[data-gallery-item] img{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}

/* The viewer: the photograph fills what it can of the screen without ever leaving
   the viewport, and the frame scrolls if a tall shot still needs more room. */
.spg-lightbox{max-height:min(92vh,900px);overflow:auto}
.spg-lightbox [data-gallery-image]{width:auto;max-width:100%;max-height:min(78vh,760px);margin-inline:auto;object-fit:contain}

/* A step whose drawing the builder cannot produce carries no figures at all; its
   instruction then takes the full width at a readable measure instead of sitting
   in the left column with an empty one beside it. */
.spg-step:not(:has(.spg-step__figures)) .spg-step__body{grid-column:1 / -1;max-width:82ch}

/* Captions and the fine print are read as one paragraph each, not as a line the
   width of the page. */
.spg-figure__caption,.spg-alert,.spg-checks li{max-width:88ch}

/* The FAQ is prose: one column at a readable measure rather than the full width of
   a 1440px screen. */
.series-faq .faq__list{max-width:88ch}

/* The request section: the copy beside the form keeps its place while the form is
   filled in, under the header rather than under the contents row. */
@media(min-width:861px){
  .spg-request__grid > :first-child{align-self:start;position:sticky;top:calc(var(--header-height) + 84px)}
}

@media(max-width:860px){
  .spg-request__grid > :first-child{position:static}
}

/* The support section already sits on the shared card grid; this only gives its
   pictures one shape so a row of cards reads as a row. */
#support .card__image img{aspect-ratio:4/3;object-fit:cover}

/* Below 640px the numbers in a table, the figure captions and the step copy all
   lose a little more size than the shared scale gives them, so a phone shows a
   whole table row and a whole caption without a scroll. */
@media(max-width:640px){
  .spg-figure__caption{font-size:13.5px}
  .spg-step__num{padding:4px 9px;font-size:11px}
  .spg-hero__main img{max-height:300px}
}

@media(max-width:520px){
  .spg-toc__link{padding-inline:10px}
}

/* Nothing above moves on its own; the reduced-motion preference the page already
   honours keeps its effect, and a printed page keeps the same arrangement. */
@media print{
  .spg-toc__list{overflow:visible}
  .spg-request__grid > :first-child{position:static}
}

/* A model a link from elsewhere names — the selection tool sends a visitor to
   #model-<code> on the series page — is marked where it stands in the selection
   table, and the row it lands on is held clear of the two sticky bands above it. */

#models tr[id^="model-"]{scroll-margin-top:142px}
#models tr[id^="model-"]:target th,
#models tr[id^="model-"]:target td{background:var(--color-accent-pale)}
#models tr[id^="model-"]:target th[scope="row"]{box-shadow:inset 3px 0 0 var(--color-accent)}

@media(max-width:1100px){
  #models tr[id^="model-"]{scroll-margin-top:132px}
}

/* ------------------------------------------------ Photographs: the whole frame --
   A photograph on this page is evidence — a terminal box, a meter reading, the unit
   itself — so it is never cropped to fit a box: every one of them keeps its own
   proportions and shows the whole frame, on the pale ground the site's pictures sit
   on. It is the two rules that were filling their box by cutting the picture that
   are corrected here, and the gallery frames, which no longer force a landscape
   shape on a portrait shot. */
.spg-hero__shot img,
#support .card__image img{aspect-ratio:4/3;object-fit:contain;background:var(--color-pale)}
.spg-gallery{align-items:start}
.spg-gallery a[data-gallery-item]{aspect-ratio:auto;display:block;padding:6px}
.spg-gallery img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain}

/* ------------------------------------------- Photographs, the whole frame, again --
   The two rules that were filling their box by cutting the picture are corrected
   above; this is the same promise stated once more over every photograph the page
   prints, whatever class a later pass gives it, so no shot on this page — a meter
   reading, a terminal box, the unit, a factory floor — is ever cropped. */
.spg-hero img,
.spg-figure img,
.spg-gallery img,
#support .card img{object-fit:contain}


/* ------------------------------------------------- Continue from here, pass four --
   The four steps a reader takes when this page is not the one they need: the
   general conversion guide, the inverter range, the documents centre and the
   project desk. One row of links under the form, two across on a desktop and one
   on a telephone, in the site's own resource-link shape. */
.spg-next{margin-top:clamp(28px,4vw,44px);padding-top:clamp(20px,3vw,30px);border-top:1px solid var(--color-line)}
.spg-next__title{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--color-heading)}
.spg-next__list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.spg-next__link{display:inline-flex;align-items:center;gap:8px;font-size:15px;overflow-wrap:break-word}

@media(min-width:861px){
  .spg-next__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
}

/* The guide's photographs are the evidence of the method — a meter reading, a
   terminal box — so they are placed at a size the reading can actually be read
   at, and each one keeps the whole frame and its own proportions. */
.spg-gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.spg-gallery a[data-gallery-item] img{aspect-ratio:auto;display:block;width:100%;height:auto;object-fit:contain}

@media(max-width:520px){
  .spg-gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}