/* Pipe Friction Loss Calculator — the tool page's own layout.
 *
 * The page is one form and one panel of results. The form is the wider column
 * (three parts in five) because it carries twenty-odd controls, and the results
 * column is the narrower one because it carries six figures — the head, the two
 * figures that stand with it, and the three that make it up. On a wide screen
 * the panel follows the form down the page; below 1000px the two stack, inputs
 * first, and the panel stops following, because a stuck panel on a phone is a
 * panel that covers the fields.
 *
 * The fitting counters are the one control that is not a plain field: a − and a
 * + around a number, so a count is changed without a keyboard. Each is at least
 * 40px on its narrow side, which is what makes it usable with a thumb.
 *
 * The sheet defines no colour, space, radius or shadow of its own: every value
 * comes from assets/css/tokens.css. The shared field, button and section styles
 * are style.css's and are reused rather than restated — a rule here is scoped
 * under a .pfl- name so it cannot reach a component of another page. Every box
 * laid out here carries its own [hidden] rule at the foot of the file, because
 * the theme has no global one. */

/* ------------------------------------------------------------- layout -- */
.pfl-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:var(--space-4);
  align-items:start;
  margin:0;
}

.pfl-card{
  padding:clamp(20px,3vw,32px);
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-float);
}

/* The panel follows the form while it is on screen, and lines up with it when
   the page is opened at a section further down. Only on a wide screen: below
   that the two columns are one column and a stuck panel would cover the
   fields. */
@media (min-width:1001px){
  .pfl-card--results{
    position:sticky;
    top:calc(var(--header-height) + var(--space-3));
  }
}

.pfl-card__head{
  margin-bottom:var(--space-3);
}

.pfl-card__title{
  margin:0;
  font-size:clamp(19px,2vw,22px);
  line-height:1.25;
}

.pfl-card__note{
  margin:var(--space-1) 0 0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--color-muted);
}

.pfl-card__note--foot{
  padding-top:var(--space-2);
  border-top:1px solid var(--color-line);
}

/* ------------------------------------------------------- the fields ---- */
.pfl-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2) var(--space-3);
}

.pfl-field--full{
  grid-column:1/-1;
}

/* The unit is printed inside the field rather than beside it, so the value and
   its unit are read as one figure. The control keeps a right padding wide
   enough for the widest unit on the page (m³/h). */
.pfl-input{
  position:relative;
}

.pfl-input__unit{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:600;
  color:var(--color-muted);
  pointer-events:none;
}

.pfl-input input,
.pfl-input select{
  padding-right:66px;
  font-variant-numeric:tabular-nums;
}

.pfl-input select{
  padding-right:14px;
}

/* The unit label is printed where the browser would draw its own stepper
   arrows, so these fields carry none: an arrow drawn on top of "m³/h" reads as
   a broken field, and a figure big enough to matter is typed rather than
   nudged. The fitting counters keep their − and +, which are the page's own. */
.pfl-input input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

.pfl-input input[type="number"]::-webkit-outer-spin-button,
.pfl-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.pfl-field__hint{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--color-muted);
}

/* An error is answered in the same words the field's own message uses, and it
   is drawn with the sun accent the site's other invalid feedback is drawn
   with: a left edge rather than a colour of text. */
.pfl-field__error{
  margin:6px 0 0;
  padding-left:10px;
  border-left:3px solid var(--color-sun);
  font-size:12.5px;
  line-height:1.5;
  color:var(--color-navy);
}

.pfl-field--invalid input,
.pfl-field--invalid select{
  border-color:var(--color-sun);
  background:var(--color-sun-pale);
}

/* ----------------------------------------------------- the fittings ---- */
.pfl-fittings{
  min-inline-size:0;
  margin:var(--space-3) 0 0;
  padding:var(--space-3) 0 0;
  border:0;
  border-top:1px solid var(--color-line);
}

.pfl-fittings__legend{
  padding:0;
  font-size:14px;
  font-weight:700;
  color:var(--color-navy);
}

.pfl-fittings__note{
  margin:var(--space-1) 0 var(--space-2);
  font-size:12.5px;
  line-height:1.5;
  color:var(--color-muted);
}

.pfl-fittings__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-1);
  margin:0;
  padding:0;
  list-style:none;
}

.pfl-fitting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-1);
  min-width:0;
  padding:6px 6px 6px 12px;
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
}

.pfl-fitting__text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.pfl-fitting__label{
  font-size:13.5px;
  line-height:1.3;
  color:var(--color-navy);
}

.pfl-fitting__k{
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--color-muted);
}

/* The − and + over a number: one box, so the count reads as the middle of a
   control rather than as a field with two buttons beside it. Each button keeps
   a 40px side, which is what makes it pressable with a thumb. */
.pfl-stepper{
  display:inline-flex;
  flex:none;
  align-items:center;
  overflow:hidden;
  background:var(--color-surface);
  border:1px solid var(--color-field-line);
  border-radius:var(--radius-sm);
}

.pfl-stepper__btn{
  width:40px;
  min-height:40px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--color-accent);
  font-family:inherit;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--transition-fast),color var(--transition-fast);
}

.pfl-stepper__btn:hover{
  background:var(--color-accent-pale);
}

.pfl-stepper__btn:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:-2px;
}

.pfl-stepper__value{
  width:46px;
  min-height:40px;
  padding:0;
  border:0;
  border-inline:1px solid var(--color-line);
  border-radius:0;
  background:var(--color-surface);
  color:var(--color-navy);
  font-size:15px;
  font-weight:600;
  text-align:center;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
  appearance:textfield;
}

.pfl-stepper__value::-webkit-outer-spin-button,
.pfl-stepper__value::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.pfl-stepper__value:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:-2px;
}

/* -------------------------------------------------------- the submit --- */
.pfl-submit{
  margin-top:var(--space-3);
}

.pfl-submit__btn{
  width:100%;
}

.pfl-submit__note{
  margin:var(--space-2) 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--color-muted);
}

.pfl-status{
  margin:var(--space-2) 0 0;
  font-size:12.5px;
  color:var(--color-muted);
}

/* ------------------------------------------------- the results panel --- */
/* The head is the figure the page is opened for, so it is the largest thing in
   the panel and the only block drawn on the navy ground. */
.pfl-tdh{
  padding:var(--space-3);
  background:var(--color-navy);
  border-radius:var(--radius-md);
}

.pfl-tdh__label{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.pfl-tdh__value{
  display:flex;
  align-items:baseline;
  gap:var(--space-1);
  margin:10px 0 0;
}

.pfl-tdh__number{
  font-size:clamp(38px,5.2vw,56px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.pfl-tdh__unit{
  font-size:19px;
  font-weight:600;
  color:rgba(255,255,255,.8);
}

.pfl-tdh__note{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(255,255,255,.7);
}

.pfl-highlights{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--space-2);
  margin-top:var(--space-2);
}

.pfl-highlight{
  padding:var(--space-2);
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
}

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

.pfl-highlight__value{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:8px 0 0;
}

.pfl-highlight__number{
  font-size:clamp(22px,2.4vw,26px);
  font-weight:700;
  line-height:1;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
}

.pfl-highlight__unit{
  font-size:13px;
  font-weight:600;
  color:var(--color-muted);
}

/* The two velocity checks the page states. Between them nothing is shown. */
.pfl-velocity-note{
  margin:var(--space-2) 0 0;
  padding:10px 14px;
  border-left:3px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
  font-size:13px;
  line-height:1.5;
  color:var(--color-muted);
}

.pfl-velocity-note--high{
  border-left-color:var(--color-sun);
  background:var(--color-sun-pale);
  color:var(--color-navy);
}

/* The three figures the head is made of: rows rather than boxes, because they
   are read together as one sum. */
.pfl-losses{
  margin:var(--space-3) 0 0;
  padding:0;
  list-style:none;
}

.pfl-loss{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2);
  padding:11px 0;
  border-top:1px solid var(--color-line);
}

.pfl-loss__label{
  font-size:13.5px;
  line-height:1.4;
  color:var(--color-muted);
}

.pfl-loss__value{
  display:flex;
  flex:none;
  align-items:baseline;
  gap:6px;
}

.pfl-loss__number{
  font-size:16px;
  font-weight:600;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
}

.pfl-loss__unit{
  font-size:12px;
  color:var(--color-muted);
}

/* Where the finished head goes. The figure is carried to the pump route of the
   online selection as a query parameter, and that page prints it into its own
   total head field; the link is therefore the calculation's second outcome, and
   it is only shown once there is a figure to carry. */
.pfl-handoff{
  margin:var(--space-3) 0 0;
  padding:14px 16px;
  background:var(--color-accent-pale);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-sm);
}

.pfl-handoff__text{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--color-navy);
}

.pfl-handoff__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:13.5px;
  font-weight:600;
  color:var(--color-accent);
}

.pfl-handoff__link:hover{
  color:var(--color-accent-dark);
}

/* -------------------------------------------------- how it is worked --- */
.pfl-formulas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--space-3);
}

.pfl-formula{
  padding:var(--space-3);
  background:var(--color-pale);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
}

.pfl-formula__title{
  margin:0;
  font-size:17px;
}

.pfl-formula__name{
  margin:6px 0 0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* A formula is read character by character, so it is set in a monospaced face
   on its own line. The box scrolls rather than the page: the Hazen-Williams
   line is longer than a phone's column, and a page that scrolls sideways on a
   phone is a page with a broken layout. */
.pfl-formula__expression{
  margin:var(--space-2) 0 0;
  padding:12px 14px;
  overflow-x:auto;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13.5px;
  line-height:1.5;
  color:var(--color-navy);
  white-space:nowrap;
}

.pfl-formula__vars{
  display:grid;
  gap:7px;
  margin:var(--space-2) 0 0;
}

.pfl-formula__vars > div{
  display:grid;
  grid-template-columns:minmax(2.5em,auto) minmax(0,1fr);
  gap:10px;
  align-items:baseline;
}

.pfl-formula__vars dt{
  font-size:13.5px;
  font-weight:700;
  color:var(--color-navy);
  font-variant-numeric:tabular-nums;
}

.pfl-formula__vars dd{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--color-muted);
}

/* The two steps that combine the three formulas into the two figures the
   results panel leads with. */
.pfl-derived{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-2);
  margin-top:var(--space-3);
}

.pfl-derived__item{
  padding:14px 18px;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-sm);
}

.pfl-derived__label{
  margin:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.pfl-derived__expression{
  margin:8px 0 0;
  overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13.5px;
  line-height:1.5;
  color:var(--color-navy);
  white-space:nowrap;
}

.pfl-units{
  max-width:80ch;
  margin:var(--space-3) 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--color-muted);
}

/* What the figure does and does not cover. It stands with the calculation
   itself, because a total head read without its boundary is a head that
   looks like it already carries the pressure the outlet needs. */
.pfl-scope{
  max-width:80ch;
  margin:var(--space-3) 0 0;
  padding-left:12px;
  border-left:3px solid var(--color-sun);
  font-size:13px;
  line-height:1.6;
  color:var(--color-text);
}

/* -------------------------------------------------------- the notice -- */
.pfl-disclaimer{
  padding-block:var(--space-3);
  background:var(--color-surface);
  border-top:1px solid var(--color-line);
}

.pfl-disclaimer p{
  max-width:90ch;
  margin:0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--color-muted);
}

/* ----------------------------------------------------------- narrower -- */
/* One column, inputs first and the panel after them, and the panel stops
   following the page: a panel that stays on screen while a phone is scrolled
   is a panel that covers the fields it is meant to answer. */
@media (max-width:1000px){
  .pfl-grid{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-3);
  }

  .pfl-card--results{
    position:static;
    top:auto;
  }
}

/* The fields and the fitting counters fold to one to a row, which is where a
   label and its control stop fitting side by side. */
@media (max-width:620px){
  .pfl-fields{
    grid-template-columns:minmax(0,1fr);
  }

  .pfl-fittings__list{
    grid-template-columns:minmax(0,1fr);
  }
}

/* The narrowest column the page is read in: the figure is still the largest
   thing in the panel, and a four-figure head still reads on one line. */
@media (max-width:400px){
  .pfl-card,
  .pfl-tdh{
    padding:var(--space-2);
  }

  .pfl-stepper__value{
    width:38px;
  }

  .pfl-tdh__number{
    font-size:34px;
  }
}

/* The theme has no global rule for the attribute, so every box this sheet lays
   out carries its own. */
.pfl-field__error[hidden],
.pfl-velocity-note[hidden]{
  display:none;
}