/* Panel heat-dissipation calculator — loaded only on its own page.
 *
 * Every colour, radius, shadow and font here is a site token from site.css.
 * The tool carries no palette of its own: the page already sits inside the
 * site's header, hero band and footer, and a tool that looks like a different
 * site is a tool people distrust. Same rule finder.css follows.
 *
 * Single column inside the existing 900 px wrap. No sidebar, no sticky
 * anything — the form is the page. */

.ph__noscript {
  background: var(--sg-amber-bg); border: 1px solid var(--sg-amber-line);
  border-radius: var(--sg-r-sm); padding: 14px 16px; margin: 0 0 18px;
}

/* --- Steps --------------------------------------------------------------- */
/* A fieldset so the browser and a screen reader both treat each step as one
   group, with the legend naming it. Its default border and padding are
   removed rather than restyled. */
.ph__step {
  border: 0; margin: 0 0 30px; padding: 0; min-width: 0;
}
.ph__step:last-child { margin-bottom: 0; }

.ph__legend {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 18px; padding: 0; width: 100%;
}
.ph__num {
  flex: 0 0 44px; height: 44px;
  background: var(--sg-navy); color: #fff;
  border-radius: 12px;                 /* a rounded square, not a circle */
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
}
.ph__title { display: block; font-size: 20px; font-weight: 800; color: var(--sg-midnight); }
.ph__desc  { display: block; margin-top: 2px; color: var(--sg-muted); font-size: 14.5px; font-weight: 400; }

.ph__h {
  font-size: 15.5px; font-weight: 800; margin: 22px 0 10px; color: var(--sg-midnight);
}
.ph__grid + .ph__h { margin-top: 24px; }
.ph__opt { font-weight: 400; color: var(--sg-muted); }

/* --- Fields -------------------------------------------------------------- */
.ph label {
  display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 5px;
  color: var(--sg-midnight);
}
.ph select,
.ph input[type="number"] {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm);
  font: inherit; font-size: 15px; background: var(--sg-paper); color: inherit;
}
.ph select:focus-visible,
.ph input:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 1px; }

/* Refused, not clamped — so the field has to look wrong until it is fixed. */
.ph input[aria-invalid="true"] { border-color: #c0392b; background: #fdf3f2; }

.ph__hint { color: var(--sg-muted); font-size: 13.5px; margin: 5px 0 0; }
.ph__hint--bad { color: #c0392b; font-weight: 600; }
.ph__hint--bad::after { content: ""; }

.ph__grid { display: grid; gap: 16px; }
.ph__grid--2 { grid-template-columns: 1fr 1fr; }
.ph__grid--panel { grid-template-columns: 96px 1fr; }

/* --- Yes / No ------------------------------------------------------------ */
.ph__toggle { display: flex; gap: 8px; }
.ph__toggle button {
  flex: 1; padding: 9px 12px;
  border: 1px solid var(--sg-line); background: var(--sg-paper);
  border-radius: var(--sg-r-sm);
  font: inherit; font-weight: 600; font-size: 14.5px;
  color: var(--sg-muted); cursor: pointer;
}
.ph__toggle button[aria-pressed="true"] {
  background: var(--sg-navy); border-color: var(--sg-navy); color: #fff;
}

/* --- Device rows --------------------------------------------------------- */
.ph__rows { display: flex; flex-direction: column; gap: 9px; }
.ph__row {
  display: grid; grid-template-columns: 84px 1fr auto 38px;
  gap: 9px; align-items: center;
}
.ph__rowinfo { text-align: right; }
.ph__del {
  border: 1px solid var(--sg-line); background: var(--sg-paper);
  border-radius: var(--sg-r-sm); height: 38px;
  color: var(--sg-muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.ph__del:hover { color: #c0392b; border-color: #c0392b; }
.ph__add {
  margin-top: 11px;
  border: 1px dashed var(--sg-blue); background: var(--sg-tint); color: var(--sg-navy);
  border-radius: var(--sg-r-sm); padding: 9px 14px;
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
}

/* --- Data-quality badges ------------------------------------------------- */
/* Four tiers, four colours. Green is the only one that means "measured and
   published"; the others have to be distinguishable at a glance, because the
   whole point is that the reader can see which numbers carry weight. */
.ph__badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.ph__badge--published       { background: #e4f4ea; color: #1a7f4b; }
.ph__badge--electronicsOnly { background: var(--sg-amber-bg); color: #8a5a09; }
.ph__badge--legacyTable     { background: #e9edfb; color: #3a4a99; }
.ph__badge--assumedZero     { background: #eceff3; color: var(--sg-muted); }

/* --- Result -------------------------------------------------------------- */
.ph__result { border-top: 1px solid var(--sg-line); padding-top: 26px; }

.ph__ledgers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ph__ledger { background: var(--sg-tint); border-radius: var(--sg-r-sm); padding: 16px 18px; }
.ph__ledger h3 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--sg-navy);
}
.ph__ledger dl { margin: 0; }
.ph__ledger dl > div {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
}
.ph__ledger dt { color: var(--sg-muted); font-size: 14.5px; }
.ph__ledger dd {
  margin: 0; text-align: right; font-weight: 600; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.ph__rest {
  border-top: 1px solid var(--sg-line); margin-top: 5px; padding-top: 8px !important;
}
.ph__rest dt, .ph__rest dd { font-weight: 800; color: var(--sg-midnight); }
.ph__pct dt, .ph__pct dd { font-size: 13px; color: var(--sg-muted); font-weight: 600; }
.ph__neg { color: #c0392b; }

.ph__verdict {
  margin: 16px 0 0; border-radius: var(--sg-r-sm); padding: 16px 18px;
  font-size: 19px; font-weight: 800;
}
.ph__verdict small { display: block; font-weight: 600; font-size: 14px; opacity: .85; margin-top: 2px; }
.ph__verdict--ok    { background: #e4f4ea; color: #1a7f4b; }
.ph__verdict--tight { background: var(--sg-amber-bg); color: #8a5a09; }
.ph__verdict--bad   { background: #fbeae8; color: #c0392b; }
.ph__verdict--empty { background: var(--sg-tint); color: var(--sg-muted); font-weight: 600; font-size: 15px; }

.ph__note {
  background: var(--sg-tint); border-radius: var(--sg-r-sm);
  padding: 13px 15px; margin: 16px 0 0; font-size: 14.5px;
}
.ph__note b { display: block; margin-bottom: 3px; }
.ph__note p { margin: 0 0 8px; }
.ph__note p:last-child { margin-bottom: 0; }
.ph__note--limits { background: var(--sg-amber-bg); border: 1px solid var(--sg-amber-line); }
.ph__note--limits b { display: inline; }
.ph__note--limits > b:first-child { display: block; }

.ph__details { margin-top: 16px; border-top: 1px solid var(--sg-line); padding-top: 14px; }
.ph__details summary {
  cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--sg-navy);
}
.ph__steps {
  margin-top: 12px; display: grid; grid-template-columns: 1fr auto;
  gap: 5px 14px; font-size: 14px;
}
.ph__steplabel { color: var(--sg-muted); }
.ph__stepvalue { text-align: right; font-variant-numeric: tabular-nums; }
.ph__stephead {
  grid-column: 1 / -1; margin-top: 9px;
  font-weight: 800; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sg-navy);
}

.ph__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ph__btn {
  border: 0; border-radius: var(--sg-r-sm); padding: 11px 18px;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.ph__btn--primary { background: var(--sg-navy); color: #fff; }
.ph__btn--secondary {
  background: var(--sg-paper); color: var(--sg-navy); border: 1px solid var(--sg-line);
}

.ph__credit {
  color: var(--sg-muted); font-size: 13.5px; margin: 22px 0 0; text-align: center;
}

/* --- The published figures ----------------------------------------------- */
.ph__reference table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ph__reference th, .ph__reference td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--sg-line);
}
.ph__reference th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--sg-navy); }
.ph__reference td:nth-child(2), .ph__reference td:nth-child(3) { font-variant-numeric: tabular-nums; }
/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.ph__tablewrap { overflow-x: auto; margin-bottom: 8px; }

/* --- Narrow screens ------------------------------------------------------ */
@media (max-width: 640px) {
  .ph__grid--2, .ph__ledgers { grid-template-columns: 1fr; }
  .ph__row {
    grid-template-columns: 72px 1fr 38px;
    grid-template-areas: "qty pick del" "info info info";
  }
  .ph__qty { grid-area: qty; }
  .ph__pick { grid-area: pick; }
  .ph__del { grid-area: del; }
  .ph__rowinfo { grid-area: info; text-align: left; }
  .ph__num { flex-basis: 38px; height: 38px; font-size: 16px; }
  .ph__title { font-size: 18px; }
}

/* --- The printed sheet --------------------------------------------------- */
/* Built by the JavaScript on every update, never shown on screen. */
.ph__print { display: none; }

/* --- Print --------------------------------------------------------------- */
/* A printed calculation is a record somebody files in a job folder, so it has
   to say what was calculated — not show the controls it was calculated with.
   The form is hidden and the summary takes its place.
 
   Nothing here may depend on background graphics. Chromium prints them only
   when the reader ticks the box, and its default is off, so every panel that
   is a tinted block on screen becomes a bordered block on paper. A field that
   is only distinguishable by its fill disappears entirely in the default
   setting, which is how the light blue boxes in the first PDF came to be
   empty rectangles. */
@media print {
  /* The hero band does not print on this page.
 
     On a guide it has to: the h1 in that band is the only title the page has.
     Here the sheet has its own — "Panel heat calculation" — so the band
     contributes a second title, an eyebrow, a lead and a full-width rule, and
     two thirds of a blank first page before the document starts.
 
     Hiding the band rather than its parts also removes the black border-bottom
     the site's print block draws under it, which is what put a rule across the
     top of an otherwise empty page. */
  .sg-band { display: none; }

  /* The controls, and everything that only operates them. */
  .ph__form,
  .ph__actions,
  .ph__add,
  .ph__del,
  .ph__toggle,
  .ph__result .ph__ledgers,
  .ph__result .ph__verdict,
  .ph__result .ph__details,
  .ph__result .ph__note,
  .ph__result .ph__credit,
  .ph__result .ph__legend { display: none; }

  /* The reference tables never print, whether the script ran or not.
 
     They were kept for the no-JavaScript case at first, and that was wrong in
     a way worth writing down: it made what comes out of the printer depend on
     whether a script had run. The same page, printed twice, gave a one-page
     specification or 117 rows of reference data, and neither reader chose
     which.
 
     So the rule is what the sheet is FOR. It is a record of one calculation,
     filed against one job. The tables are neither — they are the same figures
     for every job, they are on the screen, and they are five pages of paper.
 
     Without a calculation there is nothing to record, and the honest printout
     says so: the noscript message leads, and it is the only thing on the page.
     A short sheet that explains itself is better than a long one that answers
     a question nobody asked. */
  .ph__reference { display: none; }

  /* With a summary to print, the noscript message is not true and not shown.
     Without one it is the whole printout, so it leads. */
  .ph--ready .ph__noscript { display: none; }
  .ph:not(.ph--ready) .ph__noscript {
    display: block; border: 1px solid #666; font-size: 10pt;
  }

  .ph__print { display: block; }
  .ph__print h2 {
    font-size: 15pt; margin: 0 0 10px; break-after: avoid;
  }
  .ph__print h3 {
    font-size: 11pt; margin: 16px 0 6px; break-after: avoid;
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid #999; padding-bottom: 3px;
  }

  .ph__printlist { margin: 0; font-size: 10pt; break-inside: avoid; }
  .ph__printlist > div {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 2px 0; border-bottom: 1px dotted #ccc;
  }
  .ph__printlist dt { color: #333; }
  .ph__printlist dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

  .ph__printtable {
    width: 100%; border-collapse: collapse; font-size: 10pt;
    margin: 0 0 4px; break-inside: avoid;
  }
  .ph__printtable th, .ph__printtable td {
    text-align: left; padding: 3px 6px; border-bottom: 1px solid #ccc;
  }
  .ph__printtable th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; }
  .ph__printtable td:nth-child(1),
  .ph__printtable td:nth-child(3),
  .ph__printtable td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* The verdict is the line somebody looks for first, so it gets a box that
     exists without a fill — but a thin one. At 2px it was heavier than every
     other rule on the sheet and read as a warning rather than a result. */
  .ph__printverdict {
    border: 1px solid #666; padding: 8px 10px; margin: 12px 0 0;
    font-size: 11.5pt; break-inside: avoid;
  }

  /* The two budgets and the verdict they add up to, kept on one page. */
  .ph__printblock { break-inside: avoid; }
  .ph__printsub {
    font-size: 9.5pt; margin: 12px 0 4px; text-transform: uppercase;
    letter-spacing: .06em; color: #333; break-after: avoid;
  }

  .ph__printnote {
    border: 1px solid #666; padding: 8px 10px; margin: 12px 0;
    font-size: 9.5pt; break-inside: avoid;
  }
  .ph__printnote b { display: block; margin-bottom: 3px; }
  .ph__printnote p { margin: 0 0 6px; }
  .ph__printnote p:last-child { margin-bottom: 0; }

  .ph__printlink {
    font-size: 8.5pt; margin: 14px 0 0; word-break: break-all;
    border-top: 1px solid #ccc; padding-top: 6px; break-inside: avoid;
  }
  .ph__printlink b { word-break: normal; }

  /* Always open on paper. On screen the calculation sits behind a disclosure
     because most readers want the answer; on paper it is the reason to keep
     the sheet. */
  .ph__print .ph__steps { display: grid; font-size: 9.5pt; break-inside: avoid; }
  .ph__print .ph__steplabel { color: #333; }
  .ph__print .ph__stephead { color: #111; margin-top: 8px; }

  .ph__print .ph__credit { color: #555; font-size: 9pt; margin-top: 14px; }

  /* The tool's own card must not carry a border of its own here: the site's
     print block already boxes .sg-card, and a box inside a box inside a box is
     the "frame with nothing in it" the first PDF was full of. */
  #panel-heat { border: 0 !important; padding: 0; }
  .ph__print, .ph__print h3 { break-inside: auto; }
  .ph__result { border-top: 0; padding-top: 0; }
}