/* waterheaterspecs.com — one stylesheet. No framework, no build step, no
 * web fonts, no third-party request of any kind.
 *
 * The brief is a REFERENCE DOCUMENT, not a content site. A plumber
 * standing beside a failed water heater with a phone in one hand wants a
 * part number, and everything here is subordinate to that: search first
 * and unmissable, tables that read like a printed spec sheet, and no
 * decoration that competes with a figure.
 *
 * Restraint is not an aesthetic preference here. The site's entire claim
 * is that its numbers can be checked (CLAUDE.md §2), and a page that
 * looks like it is selling something undercuts that before a single
 * figure is read. One accent colour, used on links, on the search field
 * and on the one line that states the claim. Nothing else is coloured.
 *
 * Mobile first throughout: every base rule is the phone rule, and the
 * media queries only ADD width. There is no desktop layout being undone
 * for small screens.
 */

:root {
  --ink:       #17191c;   /* body text */
  --ink-mid:   #454b52;   /* labels, secondary */
  --ink-soft:  #6a717a;   /* notes, captions */
  --rule:      #ccd1d7;   /* table and section rules */
  --rule-soft: #e4e7eb;   /* zebra edges, hairlines */
  --zebra:     #f5f7f8;   /* alternating table rows */
  --paper:     #fff;
  --accent:    #0a5b7a;   /* the ONE accent */
  --accent-bg: #eef4f7;
  --focus:     #0a5b7a;
  --shadow:    rgba(0,0,0,.10);

  /* Tells the browser to render form controls — the search input above
     all — in the matching scheme. Without it the one interactive element
     on the page stays a white box in a dark document. */
  color-scheme: light dark;
}

/* Dark mode, by preference only. No toggle: the reader who wants this has
 * already set it at the OS, and a control that duplicates a system
 * setting is one more thing on a page that is trying to be a document.
 *
 * The literal use case is a plumber in an unlit basement at night. A
 * full-brightness white screen there is not a style preference, it is
 * hostile — and it wrecks the dark adaptation they need to read a rating
 * plate by torchlight thirty seconds later.
 *
 * Only the tokens change. Every rule below this block is written once and
 * works in both schemes, which is the entire reason the palette is
 * variables rather than literals.
 *
 * #0a5b7a is a link colour on white and nearly invisible on near-black,
 * so the accent is LIFTED rather than reused — same hue, raised lightness
 * and lowered saturation, ~9:1 against the page. Restraint means one
 * accent, not one hex code.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #e4e7ea;
    --ink-mid:   #adb4bb;
    --ink-soft:  #868e96;
    --rule:      #394046;
    --rule-soft: #272c31;
    --zebra:     #1a1e22;
    --paper:     #131619;
    --accent:    #6cc0e0;
    --accent-bg: #17303a;
    --focus:     #6cc0e0;
    --shadow:    rgba(0,0,0,.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* System stack. A web font is a render-blocking request that buys
     nothing on a page whose content is numbers. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  /* Figures line up in columns; this is a table-heavy document. */
  font-variant-numeric: tabular-nums;
}

@media (min-width: 40em) { body { font-size: 18px; } }

/* One measure for every band, so the masthead, breadcrumb, body and
   footer share an edge. Wider than 70ch because TABLES live here; prose
   is capped separately below. */
.band { max-width: 62rem; margin-inline: auto; padding-inline: 1rem; }

a { color: var(--accent); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- search
 *
 * Prominent on the phone, and never behind an icon. A magnifying glass
 * that opens a field is one tap and one guess more than typing, and this
 * is the single control the whole site exists to offer. It sits above the
 * fold, full width, at 16px so iOS does not zoom the page on focus.
 */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  padding-block: .7rem .85rem;
}

.wordmark {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: .5rem;
}
.wordmark:hover { color: var(--accent); }

.search label {
  display: block;
  font-size: .8rem;
  color: var(--ink-mid);
  margin-bottom: .3rem;
}

.search-field { position: relative; }

#wh-q {
  width: 100%;
  /* 16px minimum: below it, iOS Safari zooms the viewport on focus and
     the reader has to pinch back out mid-search. */
  font: inherit;
  font-size: 16px;
  min-height: 2.9rem;              /* comfortable thumb target */
  padding: .55rem .7rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}
#wh-q:focus { border-color: var(--accent); outline: none; }
#wh-q::-webkit-search-cancel-button { filter: invert(0); }
#wh-q::placeholder { color: var(--ink-soft); }

#wh-hint { margin: .3rem 0 0; font-size: .78rem; color: var(--ink-soft); }

/* Results overlay the page rather than pushing it down, so the reader's
   place is not lost on every keystroke. Without CSS they fall back to
   normal flow, which is why the markup order is input then list. */
#wh-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 6px 18px var(--shadow);
}
#wh-results[hidden] { display: none; }

#wh-results .wh-group {
  padding: .45rem .7rem .2rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft);
}
#wh-results .wh-group:first-child { border-top: 0; }
#wh-results .wh-group strong { font-weight: 600; }

#wh-results [role="option"] {
  padding: .5rem .7rem;
  line-height: 1.35;
  cursor: pointer;
}
#wh-results [role="option"] a {
  font-weight: 600;
  text-decoration: none;
}
#wh-results [role="option"] span {
  display: block;
  font-size: .82rem;
  color: var(--ink-soft);
}
#wh-results [role="option"][aria-selected="true"],
#wh-results [role="option"]:hover { background: var(--accent-bg); }

/* The last row when there are more than ten. Set apart with a rule so it
   reads as an action rather than as an eleventh result. */
#wh-results .wh-more {
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: .88rem;
}
#wh-results .wh-more a { font-weight: 600; }

/* ------------------------------------------------------ /search/ page */
#wh-page-results h2 .count { color: var(--ink-soft); font-weight: 400; }
#wh-page-results ul.cols li small { color: var(--ink-soft); }

/* The live region is for screen readers. Printing "10 matches." on the
   page as well is noise beside a list the reader can already see. */
#wh-status {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ breadcrumb */
nav[aria-label="Breadcrumb"] { padding-block: .7rem; font-size: .82rem; }
nav[aria-label="Breadcrumb"] ol {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  color: var(--ink-soft);
}
nav[aria-label="Breadcrumb"] li + li::before {
  content: "/"; margin-right: .5rem; color: var(--rule);
}

/* ----------------------------------------------------------------- prose */
main { padding-bottom: 3rem; }

h1 {
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: .6rem 0 .35rem;
  overflow-wrap: anywhere;      /* URG2PV50H6N must not overflow a phone */
}
@media (min-width: 40em) { h1 { font-size: 2rem; } }

h2 {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-mid);
  margin: 2.4rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-size: .95rem;
  margin: 1.4rem 0 .45rem;
  color: var(--ink-mid);
}

/* 70ch is the prose measure. Tables and part lists deliberately escape
   it — a spec table narrowed to reading width wastes the column it
   needs. */
p, .lead, ul:not(.cols):not(.cols-tight):not(#wh-results) { max-width: 70ch; }

.lead { font-size: 1.05rem; color: var(--ink-mid); margin-top: 0; }

/* ------------------------------------------------------- the claim line
 *
 * This one sentence is what the site is FOR, and it is also the easiest
 * thing to overstate. It gets a rule and a tint — enough that the eye
 * stops on it — and deliberately not a badge, a pill or a green tick
 * shouting VERIFIED. It covers specifications only; nobody has hand
 * checked a parts list, and the styling must not imply otherwise.
 */
.verified {
  margin: 1rem 0 0;
  padding: .6rem .8rem .6rem 2.1rem;
  position: relative;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-style: normal;
  font-size: .93rem;
}
.verified::before {
  content: "✓";
  position: absolute; left: .75rem; top: .6rem;
  color: var(--accent);
  font-weight: 700;
}
.verified em { font-style: normal; }

/* ---------------------------------------------------------------- tables
 *
 * Horizontal rules only. Vertical lines box every figure in and make a
 * 16-row table read as a grid of cells rather than a list of facts;
 * printed spec sheets have used horizontal rules alone for a century.
 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: .2rem 0 1rem;
  font-size: .95rem;
}
th, td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
}
tbody tr:nth-child(odd) { background: var(--zebra); }
tbody tr:last-child th, tbody tr:last-child td {
  border-bottom: 1px solid var(--rule);
}
th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--ink-mid);
  width: 60%;
}
/* Figures right-aligned so decimal points and digit counts line up down
   the column — the reason tabular-nums is set on body. */
td { text-align: right; font-weight: 600; white-space: nowrap; }

/* Wide content scrolls inside its own box; the page never scrolls
   sideways. */
.scroll-x { overflow-x: auto; }

/* ------------------------------------------------------- spec footnotes */
.notes { margin-top: .2rem; }
.notes p {
  margin: .35rem 0;
  font-size: .86rem;
  color: var(--ink-soft);
}
.notes strong { color: var(--ink-mid); font-weight: 600; }

/* ------------------------------------------------------------- listings
 *
 * Part numbers and model numbers are scanned, not read, so on anything
 * wider than a phone they run in columns. `break-inside: avoid` keeps an
 * entry from being split across the column boundary, which is the one
 * thing that makes multi-column lists unreadable.
 */
ul.cols, ul.cols-tight {
  list-style: none;
  margin: .2rem 0 1.2rem;
  padding: 0;
  max-width: none;
}
ul.cols li, ul.cols-tight li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: .28rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .92rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
ul.cols li a, ul.cols-tight li a { font-weight: 600; }
ul.cols li small { display: block; color: var(--ink-soft); }

/* Entries carrying a description need more measure than bare numbers, so
   they earn their second and third column later. */
@media (min-width: 46em) { ul.cols { columns: 2; column-gap: 2.2rem; } }
@media (min-width: 76em) { ul.cols { columns: 3; } }

@media (min-width: 34em) { ul.cols-tight { columns: 2; column-gap: 2rem; } }
@media (min-width: 52em) { ul.cols-tight { columns: 3; } }

/* ------------------------------------------------------------- sources */
.sources { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .9rem; }
.sources li { padding: .3rem 0; }
.sources .where { color: var(--ink-soft); font-size: .85rem; }

/* ------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--rule);
  padding-block: 1.2rem 2.5rem;
  color: var(--ink-soft);
}
footer p { margin: 0; font-size: .82rem; }

/* ------------------------------------------------------------- print
 * The reader who prints this is taking it to the basement. Drop the
 * search box and the tint; keep the rules and the figures. */
@media print {
  .masthead, nav[aria-label="Breadcrumb"] { display: none; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: none; }
  .verified { background: none; border-left: 2px solid #000; }
  tbody tr:nth-child(odd) { background: none; }
  ul.cols, ul.cols-tight { columns: 2; }
}