/* Pump Help — the after-sales check at /after-sales-support/.
   page-after-sales-support.php prints every class in this sheet: the six
   symptoms and the lighter list under them, the one alarm entry, and the flow in
   section 02 — its bar, the trail of answers already given, the question
   standing in front of the visitor, the result and the handoff — with the two
   things the flow says when it has nothing to ask.
   The check runs without JavaScript: every step is a link, so the whole state of
   a step is on the page and nothing here waits for a class a script added. Hover
   only adds polish, and no variant of a result is read by its colour alone — the
   who label and the stop line are printed in words in every one of them.
   Every value comes from assets/css/tokens.css, and nothing here restyles the
   shared layer: the section head, the container, the checklist, the buttons and
   the arrow stay as pages.css and style.css print them, and where one of them has
   to sit differently inside this page the rule is scoped to a .phelp- class. */

/* ------------------------------------------------------- 01 · The symptoms -- */
/* Six entry points, one card each and the whole card a link. The grid folds on
   its own — three across a desk, two on a tablet, one on a phone. */
.phelp-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
/* The slot a card sits in: the card fills it, so six cards whose notes run to
   different lengths still draw the same box across a row. */
.phelp-choices > li{display:flex}
.phelp-choice{display:grid;flex:1 1 auto;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-navy);text-decoration:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.phelp-choice:hover{border-color:var(--color-accent);box-shadow:var(--shadow-float)}
/* The drawing is 26px and the label's first line box is the same 26px, so the
   two start on the same line. The label is the biggest text in the card and the
   note sits under it; neither is clipped, however long a translation runs. */
.phelp-choice__icon{display:flex;flex:none;align-items:center;justify-content:center;width:26px;height:26px;color:var(--color-accent)}
.phelp-choice__body{min-width:0}
.phelp-choice__label{display:block;font-size:20px;font-weight:600;line-height:1.3;color:var(--color-heading);overflow-wrap:anywhere}
.phelp-choice__note{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--color-muted);overflow-wrap:anywhere}
/* The arrow is polish on the card rather than the label: it sits on the card's
   own axis, beside a note that may run to more than one line. */
.phelp-choice__arrow{align-self:center;color:var(--color-accent);font-size:18px;line-height:1}

/* ----------------------------------------------------- 02 · More problems -- */
/* The entry points that are not the six: no note and no card of their own, a row
   of small chips under the cards, so the six stay the six. */
.phelp-more{margin-top:var(--space-4)}
.phelp-more__title{margin:0 0 var(--space-2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.phelp-more__list{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
.phelp-more__link{display:inline-flex;align-items:flex-start;gap:10px;max-width:100%;min-height:44px;padding:12px var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-navy);font-size:15px;font-weight:600;line-height:1.4;text-decoration:none;overflow-wrap:anywhere;transition:border-color var(--transition-fast),background-color var(--transition-fast)}
.phelp-more__link:hover{border-color:var(--color-accent);background:var(--color-accent-pale);color:var(--color-accent-dark)}
/* A 20px mark on the chip's first line: one pixel down puts the drawing inside
   the 21px line box of the 15px label beside it. */
.phelp-more__icon{display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;color:var(--color-accent)}

/* -------------------------------------------------------- 03 · The alarm -- */
/* The one entry that is dangerous to follow in the wrong order. It takes the
   page's sun ground — the colour the site spends on care — and a 4px rule down
   its left edge where the page's other note carries 3px, so the two are told
   apart by weight and position and not by colour. "Stop here" is written in it
   whatever the ground looks like. */
.phelp-alarm{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--color-line);border-left:4px solid var(--color-sun);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--color-sun-pale)}
.phelp-alarm__title{margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--color-navy)}
.phelp-alarm__text{margin:var(--space-1) 0 0;font-size:15px;line-height:1.6;color:var(--color-text)}
/* The way into the danger check is the shared outline button; only its distance
   from the text is this block's business. */
.phelp-alarm .btn{margin-top:var(--space-2)}

/* -------------------------------------- 04 · Nothing to ask, and no flow -- */
/* The check with nothing in front of it yet: the flow is there and has nothing
   to say, so the block is a frame waiting rather than a result. */
.phelp-idle{padding:var(--space-4);border:1px dashed var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.phelp-idle__text{margin:0;font-size:17px;font-weight:600;line-height:1.5;color:var(--color-heading)}
.phelp-idle__note{margin:var(--space-1) 0 0;font-size:14px;line-height:1.55;color:var(--color-muted)}
/* The same frame when there is no flow at all to run. It stands on the white
   ground of section 01, so it takes the pale one. */
.phelp-fallback{margin:0;padding:var(--space-3);border:1px dashed var(--color-line);border-radius:var(--radius-md);background:var(--color-pale);font-size:15px;line-height:1.6;color:var(--color-text)}

/* --------------------------------------------------------- 05 · The flow -- */
/* The check under the choice: a bar, the answers already given, the question or
   the result, and the handoff. One column and one gap, and no box here fixes a
   height, so a long translated question only makes the column longer. */
.phelp-flow{display:grid;gap:var(--space-3);align-items:start}
/* What is being checked, in the words of the symptom the visitor picked, with
   the two ways out of the branch at the other end. On a phone the bar wraps into
   two lines rather than shortening either one. */
.phelp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-3);padding:var(--space-1) 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)}
.phelp-bar__here{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-1);min-width:0;margin:0}
.phelp-bar__label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.phelp-bar__value{font-size:17px;font-weight:600;line-height:1.35;color:var(--color-navy);overflow-wrap:anywhere}
.phelp-bar__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-3);margin:0}
/* The two steps back are text links, so they keep the site's own underline and
   only darken under the pointer. */
.phelp-bar__link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.phelp-bar__link:hover{color:var(--color-accent-dark)}

/* -------------------------------------------------------- 06 · The trail -- */
/* What has been answered: the question, the answer, and the one way back into a
   step that is not the last one. A row per answer, hairlines between them, and
   each row is as tall as the 44px Change link it carries. */
.phelp-trail{display:grid;margin:0;padding:0;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);list-style:none}
.phelp-trail__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:var(--space-2);padding:0 var(--space-3);border-top:1px solid var(--color-line)}
.phelp-trail__item:first-child{border-top:0}
.phelp-trail__question{min-width:0;font-size:13px;line-height:1.5;color:var(--color-muted);overflow-wrap:anywhere}
.phelp-trail__answer{min-width:0;font-size:15px;font-weight:600;line-height:1.45;color:var(--color-navy);overflow-wrap:anywhere}
.phelp-trail__change{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.phelp-trail__change:hover{color:var(--color-accent-dark)}

/* ----------------------------------------------------- 07 · The question -- */
/* The one step standing in front of the visitor, a size above the bar and the
   trail, with its answers inside it as framed links: the whole of an answer is
   pressable, and the words the visitor reads are the words the step prints. */
.phelp-step{padding:clamp(20px,3vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-float)}
/* The question keeps the heading scale style.css gives an h3: the card's own
   padding is the space around it. */
.phelp-step__question{margin:0}
.phelp-step__help{margin:var(--space-2) 0 0;font-size:15px;line-height:1.6;color:var(--color-muted)}
/* A safety line inside a question, on the sun ground the alarm entry uses and
   with the page's usual 3px rule: the ground says read this first, the thin rule
   says it is a line and not the entry point itself. */
.phelp-step__safety{margin:var(--space-2) 0 0;padding:var(--space-1) var(--space-2);border-left:3px solid var(--color-sun);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-sun-pale);font-size:14px;font-weight:600;line-height:1.55;color:var(--color-navy)}
/* The answers fold on their own: one to a row on a phone, four across a desk. */
.phelp-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-1);margin:var(--space-3) 0 0;padding:0;list-style:none}
.phelp-answers > li{display:flex}
.phelp-answer{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-pale);color:var(--color-navy);font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;transition:border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast)}
.phelp-answer:hover,.phelp-answer:focus-visible{border-color:var(--color-accent);background:var(--color-accent-pale);color:var(--color-accent-dark)}
.phelp-answer__label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.phelp-answer__arrow{flex:none;color:var(--color-accent);font-size:18px;line-height:1}
.phelp-step__note{margin:var(--space-2) 0 0;font-size:13px;line-height:1.6;color:var(--color-muted)}

/* ------------------------------------------------------- 08 · The result -- */
/* What to do next, who does it, and when to stop. The panel is the site's card
   with a rule down its left edge naming who carries the action out; the who
   label is printed above the title in every variant, so the colour adds to the
   words rather than standing for them. */
.phelp-result{padding:clamp(20px,3vw,32px);border:1px solid var(--color-line);border-left:6px solid var(--color-field-line);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--color-surface);box-shadow:var(--shadow-card)}
/* The visitor can check it: the site's action colour. */
.phelp-result--you{border-left-color:var(--color-accent)}
/* Someone else has to do it — an installer, or HOBER support: structure navy for
   both, because the label above the title says which of the two it is. */
.phelp-result--installer,.phelp-result--support{border-left-color:var(--color-navy)}
/* The one result that is a stop rather than a step: a heavier frame, a wider
   rule, the sun ground the alarm entry uses, and a filled kicker over the title.
   The stop line inside is printed whether or not the panel is this one. */
.phelp-result--danger{border-width:2px;border-left-width:8px;border-color:var(--color-navy);border-left-color:var(--color-sun);background:var(--color-sun-pale)}
.phelp-result--danger .phelp-result__kicker{width:fit-content;padding:4px 10px;border-radius:var(--radius-sm);background:var(--color-navy);color:var(--color-surface)}
.phelp-result--danger .phelp-result__stop{border-top:2px solid var(--color-navy)}
.phelp-result__kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.phelp-result__who{display:inline-block;margin:var(--space-1) 0 0;padding:4px 10px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent);font-size:13px;font-weight:600}
.phelp-result__title{margin:var(--space-2) 0 0}
/* The one line a visitor who fixed it themselves reads: the accent ground, so it
   is not mistaken for one more step to carry out. */
.phelp-result__worked{margin:var(--space-3) 0 0;padding:var(--space-2);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-accent-pale);font-size:14px;font-weight:600;line-height:1.6;color:var(--color-accent-dark)}
/* The lines to carry out, in the order they are to be carried out: numbered,
   because two or three steps are a sequence and the markup carries no number. */
.phelp-result__steps{display:grid;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none;counter-reset:phelp-carry}
.phelp-result__steps li{display:flex;gap:var(--space-2);font-size:15px;line-height:1.6;color:var(--color-text)}
.phelp-result__steps li::before{counter-increment:phelp-carry;content:counter(phelp-carry);display:flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--color-accent-pale);color:var(--color-accent);font-size:12px;font-weight:700}
.phelp-result__stop{margin:var(--space-3) 0 0;padding-top:var(--space-2);border-top:1px solid var(--color-line);font-size:15px;line-height:1.6;color:var(--color-navy)}
.phelp-result__stop-label{display:block;margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
/* What to send with it, framed on the panel's own surface rather than tinted, so
   the same box reads on the white panel and on the sun ground of a stop. */
.phelp-result__evidence{margin:var(--space-3) 0 0;padding:var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface)}
.phelp-result__evidence-title{margin:0 0 var(--space-1);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.phelp-result__evidence-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.phelp-result__evidence-list li{display:flex;gap:var(--space-1);font-size:14px;line-height:1.55;color:var(--color-text)}
/* A hairline marker rather than a glyph, so a line that wraps still starts at
   the text and not under the marker. */
.phelp-result__evidence-list li::before{content:"";flex:none;width:8px;height:1px;margin-top:10px;background:var(--color-field-line)}
/* The shared action row, given this panel's own space above it. */
.phelp-result__actions{margin-top:var(--space-3)}

/* ------------------------------------------------------ 09 · The handoff -- */
/* What the visitor carries away: what to photograph, and the check itself as
   plain text. It is the last block of the flow, so it takes the page's card and
   leaves the loudest treatment to the result above it. */
.phelp-handoff{padding:clamp(20px,3vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.phelp-handoff__title{margin:0}
.phelp-handoff__text{margin:var(--space-2) 0 0;max-width:70ch;font-size:15px;line-height:1.6;color:var(--color-text)}
.phelp-handoff__note{margin:var(--space-2) 0 0;max-width:70ch;font-size:13px;line-height:1.55;color:var(--color-muted)}
.phelp-handoff__label{display:block;margin:var(--space-3) 0 6px;font-size:13px;font-weight:700;color:var(--color-navy)}
/* The check as plain text: a dense mono face, the width of the block it sits in
   and resizable downwards only, so a long summary scrolls inside itself instead
   of widening the page. It is readonly rather than disabled, so the text stays
   selectable and stays in the tab order: that is how it is copied when the copy
   button cannot run. */
.phelp-handoff__summary{display:block;width:100%;min-height:220px;margin:0;padding:var(--space-2);border:1px solid var(--color-field-line);border-radius:var(--radius-sm);background:var(--color-pale);color:var(--color-text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13px;line-height:1.6;resize:vertical}
.phelp-handoff .actions{margin-top:var(--space-3)}
/* Where the copy button says what happened. It is written by a script, and it is
   empty — not hidden — when the script has had nothing to say. */
.phelp-handoff__status{margin:var(--space-1) 0 0;font-size:13px;font-weight:600;line-height:1.5;color:var(--color-accent-dark)}

/* ---------------------------------------------------------- Focus ring -- */
/* The same 3px ring style.css draws for every :focus-visible, written out for
   the links this sheet frames: a visitor without a pointer needs to see which
   card he is on, whatever the browser does with an outline around a radius. */
.phelp-choice:focus-visible,
.phelp-more__link:focus-visible,
.phelp-answer:focus-visible,
.phelp-trail__change:focus-visible,
.phelp-bar__link:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}

/* ---------------------------------------------------------- Responsive -- */
/* One number, the theme's phone width. Above it the two grids fold on their own
   and a trail row reads as question, answer and Change across one line; at or
   under it a 300px track would be wider than the screen, the question stands
   above its answer, and every button this sheet frames takes the full width. */
@media(max-width:760px){
  .phelp-choices{grid-template-columns:minmax(0,1fr)}
  /* The answer column carries the same 260px floor as the symptom cards, which
     is wider than the question card's inner width at 320px: one column there. */
  .phelp-answers{grid-template-columns:minmax(0,1fr)}
  .phelp-idle{padding:var(--space-3)}
  .phelp-trail__item{grid-template-columns:minmax(0,1fr) auto;gap:4px var(--space-2)}
  .phelp-trail__question{grid-column:1 / -1}
  .phelp-alarm .btn{width:100%}
  .phelp-result__actions .btn,
  .phelp-handoff .btn{flex:1 1 100%;justify-content:center;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  /* The only transitions in this sheet are the colour of a card a visitor is
     pointing at, so under reduced motion they change without one. Nothing here
     moves, and nothing here arrives. */
  .phelp-choice,
  .phelp-more__link,
  .phelp-answer{transition:none}
}

/* ------------------------------------------------------------------------ */
/* Appended: the two fault-code screens of the same check — the message list a
   visitor reads off the display (kind "codes", 10) and the one message it opens
   (kind "code", 11). Both stand in section 02 of page-after-sales-support.php,
   inside the same .phelp-flow as the question and the result above, so they use
   the frames, the hairline, the 44px target and the sun ground this sheet
   already prints, and every value still comes from assets/css/tokens.css. The
   list is one native select in a plain GET form, so nothing here waits for a
   class a script added: the script only takes the second press out of a choice. */

/* ---------------------------------------------------- 10 · The code list -- */
/* The list step is the same standing question as 07, one size above the bar and
   the trail, so it takes the question card's frame. Its children carry their own
   spacing rather than one uniform gap, because the heading, its help and the
   safety line read as one block and the message list under them does not. */
.phelp-codes{padding:clamp(20px,3vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-float)}
/* The step heading keeps the h3 scale style.css gives every step's question. */
.phelp-codes__question{margin:0;overflow-wrap:anywhere}
.phelp-codes__help{margin:var(--space-1) 0 0;max-width:70ch;font-size:15px;line-height:1.6;color:var(--color-muted)}
/* A safety line inside this step: the same sun ground and 3px rule as the
   safety line in 07, and navy on it rather than muted, because it is a line to
   read before anything else and not a note about the list. */
.phelp-codes__safety{margin:var(--space-2) 0 0;padding:var(--space-1) var(--space-2);border-left:3px solid var(--color-sun);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-sun-pale);font-size:14px;font-weight:600;line-height:1.55;color:var(--color-navy)}

/* What was typed when it did not settle on one message. It is framed on the
   pale ground with the accent rule the bar in 05 carries, so it reads as "this
   is what you gave us" rather than as one more paragraph of the answer. */
.phelp-codes__typed{margin:var(--space-3) 0 0;padding:var(--space-2);border:1px solid var(--color-line);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--color-pale)}
.phelp-codes__typed-line{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--color-navy);overflow-wrap:anywhere}
.phelp-codes__typed-note{margin:var(--space-1) 0 0;font-size:13px;line-height:1.55;color:var(--color-muted);overflow-wrap:anywhere}
/* The messages the typed string may be. Each one is a real link on the page, so
   the message that is on the display is one press away with no script at all,
   and it is framed as a chip to look pressable. */
.phelp-codes__candidates{display:grid;gap:var(--space-1);margin:var(--space-2) 0 0;padding:0;list-style:none}
.phelp-codes__candidate{display:inline-flex;align-items:center;min-height:44px;padding:10px var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-accent);font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;overflow-wrap:anywhere;transition:border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast)}
.phelp-codes__candidate:hover{border-color:var(--color-accent);background:var(--color-accent-pale);color:var(--color-accent-dark)}

/* --------------------------------------------------- The message list -- */
/* One native select and the button that sends it. The form is a plain GET back
   to this step, so a visitor whose script is gone — and a visitor choosing with
   the keyboard — sends the button and lands on the message they chose. One
   column: the label, then the row of list and button. */
.phelp-pick{display:grid;gap:var(--space-1);margin:var(--space-3) 0 0;max-width:640px}
.phelp-pick__label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
/* The list and its button stand side by side and stack on their own when the
   screen is narrow; the list takes the room that is left. */
.phelp-pick__row{display:flex;flex-wrap:wrap;gap:var(--space-1)}
/* The list is the browser's own control, framed the way the shared field is:
   16px so a phone does not zoom into it, a 50px target, and the accent border
   while it holds the caret. The messages are long, so it is given the wider
   share of the row and its own text is never clipped. */
.phelp-pick__field{flex:1 1 260px;min-width:0;min-height:50px;padding:12px 16px;border:1px solid var(--color-field-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:16px;transition:border-color var(--transition-fast)}
.phelp-pick__field:focus{border-color:var(--color-accent)}
.phelp-pick__field:focus-visible{outline-offset:2px}
/* The way on without the script, and the way on from the keyboard: it sends
   the form. */
.phelp-pick__submit{flex:0 0 auto}

/* ---------------------------------------------------------- The list -- */
/* Where the list comes from: a note under the message list, muted and measured,
   so it is read as the source of the list and not as one more question. */
.phelp-codes__family{margin:var(--space-2) 0 0;max-width:70ch;font-size:13px;line-height:1.55;color:var(--color-muted)}
/* No list published for this equipment: the same waiting frame as 04, so the
   step still says what carries the question instead of standing empty. */
.phelp-codes__empty{margin:var(--space-2) 0 0;padding:var(--space-3);border:1px dashed var(--color-line);border-radius:var(--radius-md);background:var(--color-pale);font-size:15px;line-height:1.6;color:var(--color-text)}
/* "My message is not in this list": the shared outline button on its own line,
   as wide as its words on a desk and the full column on a phone (see below).
   Where the step carries more than one, they keep a gap between them. */
.phelp-codes__unlisted{display:inline-flex;margin:var(--space-3) var(--space-1) 0 0}

/* --------------------------------------------------- 11 · One message -- */
/* The message the visitor chose, answered in the five areas every message is
   answered with. It takes the page's card without a shadow: the result panel in
   08 stays the loudest thing on this page. */
.phelp-code-card{padding:clamp(20px,3vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.phelp-code-card__kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
/* The message itself: the anchor of the card, at the h3 scale every step of the
   check uses for the thing the visitor is looking at. */
.phelp-code-card__code{margin:var(--space-1) 0 0;overflow-wrap:anywhere}
.phelp-code-card__typed{margin:var(--space-1) 0 0;font-size:14px;line-height:1.5;color:var(--color-muted);overflow-wrap:anywhere}
.phelp-code-card__source{margin:var(--space-1) 0 0;font-size:13px;line-height:1.55;color:var(--color-muted);overflow-wrap:anywhere}
/* The honesty line, between the message and the areas: the exact unit has not
   been matched yet. It is framed and printed in the body colour rather than
   muted, because it is a condition on everything under it and not small print. */
.phelp-code-card__mapping{margin:var(--space-2) 0 0;padding:var(--space-1) var(--space-2);border-left:3px solid var(--color-field-line);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-pale);font-size:14px;line-height:1.6;color:var(--color-text)}
/* The shared action row, given this card's own space above it. */
.phelp-code-card__actions{margin-top:var(--space-3)}

/* ------------------------------------------------------- The five areas -- */
/* One area of the card: a hairline above it, a title, then its line, its note
   or its steps. Two areas are open and three are native <details>, so the
   installer lines, the evidence and the stop are one press away on a phone and
   work with no script at all. Nothing here fixes a height, so a long translated
   area only makes the card longer. */
.phelp-area{padding:var(--space-3) 0 0;border-top:1px solid var(--color-line)}
.phelp-area__title{margin:0;font-size:15px;font-weight:700;line-height:1.4;color:var(--color-heading);overflow-wrap:anywhere}
.phelp-area__line{margin:var(--space-1) 0 0;font-size:15px;line-height:1.6;color:var(--color-text);overflow-wrap:anywhere}
.phelp-area__note{margin:var(--space-1) 0 0;font-size:13px;line-height:1.55;color:var(--color-muted);overflow-wrap:anywhere}
/* The steps of an area. The unordered ones carry the hairline marker this page
   already uses for its evidence list, so a line that wraps still starts at the
   text; the ordered one keeps the number the markup gives it, so this sheet
   invents no order of its own. */
.phelp-area__steps{margin:var(--space-2) 0 0;padding:0;font-size:15px;line-height:1.6;color:var(--color-text)}
.phelp-area__steps li{overflow-wrap:anywhere}
.phelp-area__steps li + li{margin-top:var(--space-1)}
ul.phelp-area__steps{list-style:none}
ul.phelp-area__steps li{display:flex;gap:var(--space-1)}
ul.phelp-area__steps li::before{content:"";flex:none;width:8px;height:1px;margin-top:11px;background:var(--color-field-line)}
ol.phelp-area__steps{padding-left:var(--space-3)}

/* The three folded areas are the site's own disclosure. The title is the
   summary, the browser's triangle is off, and the + / − the site prints on every
   expanding block (style.css .faq summary, and .spec-group and .bldc-acc on the
   pages that carry them) is drawn instead: the marker is a shape that changes,
   so the open state is visible without reading a colour. The row is 44px tall
   and the whole of it is the target. */
.phelp-area--fold > .phelp-area__title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-2);min-height:44px;cursor:pointer;list-style:none;transition:color var(--transition-fast)}
.phelp-area--fold > .phelp-area__title::-webkit-details-marker{display:none}
.phelp-area--fold > .phelp-area__title::marker{content:""}
.phelp-area--fold > .phelp-area__title::after{content:"+";flex:none;font-size:20px;font-weight:600;line-height:1;color:var(--color-accent)}
.phelp-area--fold[open] > .phelp-area__title::after{content:"−"}
.phelp-area--fold > .phelp-area__title:hover{color:var(--color-accent)}

/* ------------------------------------------------- Published, or not yet -- */
/* Whether the meaning is published is read from the card and never from a
   colour on its own. A message whose meaning is published stands in the page's
   solid 1px hairline, and the meaning it carries is the heaviest line of its
   area. One whose meaning is still with engineering stands in the dashed frame
   the page already uses for what is not settled yet (04), and its meaning area
   takes the sun ground and the 3px rule this page spends on "read this first",
   with its notes in the body colour rather than muted. So the two are told apart
   by frame, ground, and the weight of one line — and by the words inside, which
   say the same thing. Neither is an error state: this site has no red. */
.phelp-code-card--pending{border-style:dashed;border-color:var(--color-field-line)}
.phelp-code-card--confirmed .phelp-area[data-phelp-area="meaning"] .phelp-area__line{font-weight:600;color:var(--color-navy)}
.phelp-code-card--pending .phelp-area[data-phelp-area="meaning"]{padding:var(--space-2);border-top:0;border-left:3px solid var(--color-sun);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-sun-pale)}
.phelp-code-card--pending .phelp-area[data-phelp-area="meaning"] .phelp-area__title{color:var(--color-navy)}
.phelp-code-card--pending .phelp-area[data-phelp-area="meaning"] .phelp-area__note{color:var(--color-text)}

/* ---------------------------------------------- Focus ring, the codes -- */
/* The same 3px ring style.css draws for every :focus-visible, written out for
   the controls this part frames: a summary is a control, and the shared ring
   would otherwise be drawn tight against the hairline above it. The message list
   and the candidates take their own offset and are written out with their own
   rules above. */
.phelp-codes__candidate:focus-visible,
.phelp-codes__unlisted:focus-visible,
.phelp-pick__submit:focus-visible,
.phelp-area--fold > .phelp-area__title:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}

/* ------------------------------------------------- Responsive, the codes -- */
/* The same phone width as the rest of this sheet. Below it the field and the
   button stack rather than squeezing either one, the two full-width controls
   take the column, and the two cards come down to the 24px the other blocks of
   this page use on a phone. */
@media(max-width:760px){
  .phelp-codes{padding:var(--space-3)}
  .phelp-code-card{padding:var(--space-3)}
  .phelp-pick__row{display:grid;gap:var(--space-1)}
  .phelp-pick__field,
  .phelp-pick__submit{width:100%}
  .phelp-pick__submit{justify-content:center;text-align:center}
  .phelp-codes__candidate{display:flex;width:100%}
  .phelp-codes__unlisted{display:flex;width:100%;margin-right:0}
  .phelp-code-card__actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  /* The transitions this part of the sheet adds are the colour of a candidate
     chip, a summary being pointed at and the border of the message list. Under
     reduced motion they change without one. Nothing here moves and nothing here
     arrives, and the assets/css/motion.css sheet is untouched. */
  .phelp-codes__candidate,
  .phelp-area--fold > .phelp-area__title,
  .phelp-pick__field{transition:none}
}