/* VerifiedBackupPowerData — design system
 *
 * Thesis: every competitor gives one number; the honest answer is a band.
 * The range band is the signature element and appears on every page.
 *
 * Colour is semantic, never decorative:
 *   --favourable  the optimistic end of a range
 *   --governing   the conservative end — the one your purchase should be sized on
 *   --halt        an exclusion or a safety boundary
 * Numbers, units and model codes are always monospace: the vernacular of the
 * nameplate label and the meter readout this subject actually lives in.
 *
 * Dark mode is not decoration here. People read this page during an outage, at
 * night, on a phone.
 */

:root {
  --ink: #14202b;
  --ink-soft: #47586a;
  /* 4.54:1 on --paper, 5.01:1 on --surface. The previous #6f8093 measured
     3.67:1 and 4.05:1, i.e. it failed WCAG AA for normal text on both.
     Darkened by the minimum that passes so the hierarchy stays intact. */
  --ink-faint: #607184;
  --paper: #f2f4f6;
  --surface: #ffffff;
  --line: #d5dde4;
  --line-strong: #b3c0cb;

  --favourable: #0f6e78;
  --favourable-wash: #e2f1f2;
  --governing: #8a5a00;
  --governing-wash: #f7eeda;
  --halt: #9b2115;
  --halt-wash: #f8e6e3;
  --graphite: #5a6b78;

  --radius: 3px;
  --measure: 68ch;

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6edf3;
    --ink-soft: #a3b3c2;
    --ink-faint: #7d8f9e;
    --paper: #10171e;
    --surface: #17212b;
    --line: #2a3a48;
    --line-strong: #3d5265;

    --favourable: #55c2cc;
    --favourable-wash: #10333a;
    --governing: #e0a33c;
    --governing-wash: #33260d;
    --halt: #ef7a6a;
    --halt-wash: #3a1912;
    --graphite: #8fa2b1;
  }
}

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

/* Skip link. The 7-item nav repeats on all 128 pages, so without this a keyboard
   or screen-reader user traverses it before every single page of content. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 0; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 800;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin-top: 2.4em; }
h3 { font-size: 1.15rem; margin-top: 1.9em; letter-spacing: -0.012em; }
h2:first-child, h3:first-child { margin-top: 0; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
small { font-size: 0.82rem; }

/* Every number, unit and model code is monospace. */
.num, .mono, code, kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1em;
  display: block;
}

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }

/* -------------------------------------------------------------- layout ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.narrow { max-width: 780px; }
main { padding-bottom: 5rem; }
section { margin-bottom: 3.5rem; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------- site chrome ---- */
.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dim { color: var(--ink-faint); font-weight: 400; }
.masthead nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-left: auto; }
.masthead nav a {
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--governing); }

.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 1rem; }

footer.site {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 2.5rem 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
footer.site a { color: var(--ink-soft); }
footer.site .cols { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { footer.site .cols { grid-template-columns: 2fr 1fr 1fr; } }

/* =========================================================== THE BAND ===== *
 * The signature element. A quantity is drawn as a track from its favourable
 * end to its governing end, with the governing end tick-marked, because that
 * is the number a purchase should be sized on.
 * ========================================================================== */
.band { margin: 0 0 1.6rem; max-width: 46rem; }

.band-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.band-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.band-unit { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }

.band-track {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--favourable) 0%, var(--governing) 100%);
  opacity: 0.92;
}
.band-track::after {
  /* the governing tick: a hard stop at the conservative end */
  content: "";
  position: absolute;
  right: 0;
  top: -5px;
  bottom: -5px;
  width: 3px;
  background: var(--governing);
  border-radius: 2px;
}

.band-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.band-end { font-family: var(--mono); font-size: 0.78rem; line-height: 1.4; }
.band-end b { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.band-end.low { color: var(--favourable); }
.band-end.high { color: var(--governing); text-align: right; }
.band-end .cap {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.band-why { font-size: 0.9rem; color: var(--ink-soft); margin: 0.6rem 0 0; max-width: 60ch; }

/* --------------------------------------------------------------- cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.card-link { text-decoration: none; display: block; transition: border-color 0.15s ease; }
.card-link:hover { border-color: var(--line-strong); }
.card-link h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* verdict edge: the left rule states the verdict before the words do */
.verdict { border-left: 4px solid var(--graphite); }
.verdict-fits { border-left-color: var(--favourable); }
.verdict-marginal { border-left-color: var(--governing); }
.verdict-excluded { border-left-color: var(--halt); }
.verdict-suppressed { border-left-color: var(--halt); background: var(--halt-wash); }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18em 0.6em;
  border-radius: 99px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag-fits { color: var(--favourable); background: var(--favourable-wash); }
.tag-marginal { color: var(--governing); background: var(--governing-wash); }
.tag-excluded { color: var(--halt); background: var(--halt-wash); }
.tag-neutral { color: var(--graphite); }

/* ------------------------------------------------------------- notices ---- */
.notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--graphite);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  background: var(--surface);
}
.notice > :last-child { margin-bottom: 0; }
.notice p { max-width: none; }
.notice-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.45rem;
  font-weight: 700;
}
.notice-halt { border-left-color: var(--halt); background: var(--halt-wash); }
.notice-halt .notice-title { color: var(--halt); }
.notice-caution { border-left-color: var(--governing); background: var(--governing-wash); }
.notice-caution .notice-title { color: var(--governing); }
.notice-info { border-left-color: var(--favourable); }
.notice-info .notice-title { color: var(--favourable); }

/* --------------------------------------------------------------- specs ---- */
.spec {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}
.spec dt { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); padding-top: 0.18em; }
.spec dd { margin: 0; }
.spec dd .num { font-weight: 600; }

.status-captured { color: var(--favourable); }
.status-confirm { color: var(--governing); }
.status-missing { color: var(--halt); }

.evidence {
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  margin-top: 0.3rem;
}

/* --------------------------------------------------------------- forms ---- */
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 0 0 1.25rem; background: var(--surface); }
legend { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 0 0.4em; }

.load-grid { display: grid; gap: 0.5rem; }
@media (min-width: 620px) { .load-grid { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--paper);
}
.check:hover { border-color: var(--line-strong); }
.check:has(input:checked) { border-color: var(--favourable); background: var(--favourable-wash); }
.check input { margin-top: 0.32em; flex: none; accent-color: var(--favourable); width: 1.05em; height: 1.05em; }
.check .n { font-weight: 600; display: block; line-height: 1.35; }
.check .w { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); }

input[type="number"], select {
  font: inherit;
  font-family: var(--mono);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  max-width: 9rem;
}

.btn {
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { opacity: 0.88; }
.btn-ghost { background: transparent; color: var(--ink); }

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--governing);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- table ---- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 40rem; }
th, td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--paper); }

/* -------------------------------------------------------------- detail ---- */
details { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; margin-bottom: 0.7rem; background: var(--surface); }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: 0.7rem; }

ul.plain { list-style: none; padding: 0; margin: 0 0 1.1em; }
ul.plain li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }

.muted { color: var(--ink-faint); }
.stack > * + * { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------ diagrams ---- */
/* Four ideas on this site are spatial. Prose makes the reader rebuild the
   picture in their head; these draw it. Each carries a caption that repeats the
   point in words, so the meaning survives if the image does not render. */
.diagram {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 46rem;
}
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.diagram figcaption strong { color: var(--ink); }

/* ---------------------------------------------------------------- BLUF ---- */
/* The answer, before the reasoning. Someone landing here has one question and
   should not have to read four sections to find it. */
.bluf {
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--favourable);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem 1.4rem;
  margin: 0 0 2rem;
  max-width: 46rem;
}
.bluf h2 {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.bluf p { font-size: 1.08rem; line-height: 1.55; margin: 0 0 0.6rem; max-width: none; }
.bluf p:last-child { margin-bottom: 0; }
.bluf .answer { font-weight: 700; color: var(--ink); }
.bluf ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.bluf li { margin-bottom: 0.3rem; }

/* ----------------------------------------------------- tables on phones ---- */
/* People read this during an outage, on a phone. A seven-column table forces
   sideways scrolling, which is where a task quietly ends. Below 40rem the rows
   stack: each cell sits on its own line with its column name in front of it,
   supplied by the data-label the builders emit. */
@media (max-width: 40rem) {
  table { min-width: 0; }
  table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
  }
  table td { border: 0; padding: 0.22rem 0; text-align: left !important; }
  table td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  table td:first-child { font-weight: 700; padding-bottom: 0.45rem; }
  .scroll-x { overflow-x: visible; }
}

/* ------------------------------------------------- touch targets on phone ---- */
/* Measured in a real browser at 390px: nav links were 26px tall and the wordmark
   23px. WCAG 2.5.8 asks for 24px minimum and practical guidance is closer to 44.
   A cold, wet, or hurried thumb misses a 26px target. */
@media (max-width: 48rem) {
  .masthead nav { gap: 0.2rem 0.9rem; }
  .masthead nav a,
  .wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.35rem;
  }
  footer.site ul.plain li a { display: inline-flex; align-items: center; min-height: 44px; }
  .check { padding: 0.85rem 0.8rem; }
  .check input { width: 1.25em; height: 1.25em; margin-top: 0.2em; }
  summary { padding-block: 0.45rem; }
}

/* A link that stands alone as its own paragraph is a control, not prose, so it
   needs a real target. Links inside a sentence are exempt (WCAG 2.5.8 inline). */
@media (max-width: 48rem) {
  p > a:only-child { display: inline-flex; align-items: center; min-height: 24px; padding-block: 0.25rem; }
}

/* Links that act as row or card targets need the 24px minimum too. Measured at
   20px in Chromium at 390px before this. */
@media (max-width: 48rem) {
  /* Padding, not inline-flex. inline-flex stopped long product names wrapping
     and pushed 41px of overflow off the side of the generator pages. Vertical
     padding grows the hit area while leaving the text in normal flow. */
  td a, .card-link h3 a, h2 a, h3 a, ul.plain li > a:only-child {
    padding-block: 0.3rem;
  }
}

/* Defensive: a long unbroken string (a URL, a model code) must break rather than
   push the whole page sideways. Measured: a raw source URL overflowed generator
   pages by 41px at 390px wide before the link text was made readable. */
.evidence, .evidence a, code, .num { overflow-wrap: anywhere; }