/* RateGrid design system.
 *
 * ONE stylesheet. Until now the CSS lived inline in six static HTML files AND
 * again in pages.py's _layout, so the same rules were maintained in seven
 * places and had already drifted: the landing page had --line2, --accent2 and
 * --bad that the server-rendered pages did not, and its max-width was 900px
 * against 860px everywhere else. A design system that exists seven times is
 * not a system.
 *
 * WHAT THIS IS SUPPOSED TO FEEL LIKE
 * ----------------------------------
 * A measuring instrument, not a SaaS landing page. Utility tariffs are filed
 * documents: paper, tables, sheet numbers, effective dates, stamps. The
 * product's whole claim is that every number traces to a filed sheet. So the
 * surface is paper, the structure is hairline rules rather than floating
 * cards, and the thing that gets to be big is the NUMBER.
 *
 * THREE TYPOGRAPHIC VOICES, and they do different jobs:
 *
 *   editorial   .display        large, tight, for the one sentence per page
 *                               that has to land
 *   product     .figure         monospace, tabular, enormous - a rate or a
 *                               bill is the subject, so it is set like one
 *   technical   .mono / code    real monospace for anything a machine emits:
 *                               tariff labels, sheet numbers, JSON, dates
 *
 * Setting DATA in monospace is the identity decision here. It costs nothing,
 * needs no webfont, and no generic SaaS template does it.
 *
 * NO CARDS. There is no .card class and that is deliberate. An interface made
 * of rounded boxes with an icon, a heading and a line of text is the shape
 * every generated page takes. Hierarchy here comes from type scale, hairlines
 * and whitespace. The only filled surfaces are ones that mean something: a
 * warning, a code block, an inset note.
 */

:root {
  /* TWO grounds, and they mean different things. This is the whole idea.
   *
   *   graphite  = infrastructure. The frame the product is built on - the
   *               masthead, the footer, the plumbing. Structural, not content.
   *   paper     = the utility filing. Every rate on this site came off a
   *               printed tariff sheet, so the surface those rates sit on is
   *               the colour of one.
   *
   * Using only one of them would have thrown away half the vocabulary and
   * left "light theme" doing the work a design decision should do. A visitor
   * should be able to tell, without reading a word, which parts of the page
   * are RateGrid and which parts are the utility's own numbers. */
  --graphite:      #111315;
  --graphite-edge: #1c2024;   /* rules inside the graphite frame */
  --on-graphite:   #f2f2ee;
  --on-graphite-dim: #9aa1a8;

  --paper:      #f7f7f4;
  --paper-sunk: #f1f1ec;   /* code blocks, insets - a shade of the same paper */
  --paper-edge: #fbfbf9;   /* raised, used sparingly */

  /* Ink. Graphite rather than black: filings are printed, not emitted. */
  --ink:        #111315;
  --ink-mid:    #4a5056;
  --ink-dim:    #6f767d;
  --ink-faint:  #9aa1a8;

  /* Rules. Hairlines are the main structural device, so there are three. */
  --rule:       #e2e2dc;   /* between rows */
  --rule-mid:   #d0d0c8;   /* between sections */
  --rule-firm:  #b4b4aa;   /* under a heading that owns what follows */

  /* One signature colour. Electricity and data. Used for links, the current
     value, and nothing decorative. */
  --electric:      #2f7bff;
  --electric-ink:  #1f5bd0;   /* on paper, for text that must stay legible */
  --electric-wash: #eaf1ff;

  /* Signals. Amber warns, green saves, red costs. Never used as decoration -
     if something is amber on this site, a number is uncertain. */
  --amber:      #e9a23b;
  --amber-ink:  #8a5a06;
  --amber-wash: #fdf4e3;
  --green:      #18a66a;
  --green-ink:  #0e6b45;
  --red:        #d6453d;
  --red-ink:    #9c2b25;
  --red-wash:   #fdeeed;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --measure: 68ch;         /* prose never runs wider than this */
  --record:  74ch;         /* technical records and the rules that head them */
  --page:    1040px;
}

/* The dark side is defined, but paper is the default and the identity. Dark
   here is a courtesy to people whose OS asks for it, not a second brand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* The frame must stay READABLE as a separate surface. In dark mode the
       content ground moves to graphite, so the frame goes darker still -
       otherwise infrastructure and filing become the same colour and the one
       distinction this palette exists to draw disappears. */
    --graphite:      #08090a;
    --graphite-edge: #1e2226;
    --paper:      #131619;
    --paper-sunk: #0d0f11;
    --paper-edge: #1a1e21;
    --ink:        #f2f2ee;
    --ink-mid:    #b6bcc2;
    --ink-dim:    #8b9298;
    --ink-faint:  #6b7278;
    --rule:       #24282c;
    --rule-mid:   #31363b;
    --rule-firm:  #454b51;
    --electric-ink:  #7aa8ff;
    --electric-wash: #16233c;
    --amber-ink:  #f0be74;
    --amber-wash: #2a2312;
    --green-ink:  #5fd39f;
    --red-ink:    #f0938c;
    --red-wash:   #2c1817;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 28px 96px; }
.wrap.narrow { max-width: 760px; }

/* ---------------------------------------------------------------- masthead
   GRAPHITE, full bleed: this is the infrastructure, not the filing. It is the
   one band on the page that belongs to RateGrid rather than to a utility, and
   it is coloured to say so. Everything below it is paper, and everything below
   it came off somebody's tariff sheet.

   The nav is small monospace because a set of routes is a technical object. */
.frame {
  background: var(--graphite); color: var(--on-graphite);
  border-bottom: 1px solid var(--graphite-edge);
}
.masthead {
  max-width: var(--page); margin: 0 auto;
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 15px 28px;
}
.masthead .brand {
  font-weight: 700; font-size: 16.5px; letter-spacing: -0.02em;
  color: var(--on-graphite); text-decoration: none; margin-right: auto;
}
.masthead .brand::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--electric); border-radius: 50%;
  margin-left: 6px; vertical-align: 0.12em;
}
.masthead nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.masthead nav a {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--on-graphite-dim); text-decoration: none; white-space: nowrap;
}
.masthead nav a:hover { color: var(--on-graphite); text-decoration: none; }
.masthead nav a[aria-current] { color: var(--on-graphite); font-weight: 600; }
.masthead nav a.cta { color: var(--electric); }
.wrap { padding-top: 40px; }

/* -------------------------------------------------------------- typography */
.display {
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.033em;
  font-weight: 660;
  margin: 0 0 18px;
  max-width: 19ch;
}
h1 { font-size: clamp(25px, 3.4vw, 34px); line-height: 1.14;
     letter-spacing: -0.025em; font-weight: 660; margin: 0 0 10px; }
h2 { font-size: 20px; letter-spacing: -0.012em; font-weight: 640;
     margin: 52px 0 14px; }
h3 { font-size: 15px; font-weight: 620; margin: 30px 0 8px; }

/* A section label, not a heading: monospace, small, ruled. Used to name a
   band of data the way a column header names a column. */
.label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
  margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-mid);
  /* Not var(--measure). .label is a <p>, so it picked up the 68ch prose
     measure while the .provenance it introduces is 74ch - the two rules were
     drawn at visibly different lengths and the section looked unfinished. */
  max-width: var(--record);
}

.lede { font-size: 18.5px; line-height: 1.5; color: var(--ink-mid);
        max-width: var(--measure); margin: 0 0 22px; }
p { max-width: var(--measure); }
.note { font-size: 13.5px; color: var(--ink-dim); max-width: var(--measure); }
.dim  { color: var(--ink-dim); }

a { color: var(--electric-ink); text-decoration: none;
    text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; }
pre {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  background: var(--paper-sunk); border: 1px solid var(--rule);
  border-radius: 4px; padding: 15px 16px; overflow-x: auto;
  color: var(--ink-mid);
}
pre code { font-size: inherit; }

/* ------------------------------------------------------------- the figure
   The product's subject. Monospace and tabular so digits line up and a
   changing value does not reflow. This is the piece the whole design exists
   to serve, so it is allowed to be very large. */
.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  /* The floor was 44px, which put a 15-character range at 469px
     inside a 358px phone column - a horizontal scrollbar on the
     first thing anyone sees. 7vw with a 28px floor fits the
     widest range in the catalogue at 320px - the smallest phone
     still in use - and leaves the 82px
     desktop size untouched. */
  font-size: clamp(26px, 7vw, 82px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin: 6px 0 10px;
}
.figure .unit {
  font-size: 0.3em; letter-spacing: 0; font-weight: 500;
  color: var(--ink-dim); margin-left: 0.28em;
}
/* The range separator, at FIGURE size. It was styled as a .unit - 0.3em and
 * dim - which between two monospace numbers disappeared entirely: "0.12227
 * 0.20617" read as two unrelated figures rather than one range. */
.figure .sep {
  color: var(--ink-faint); font-weight: 400;
  margin: 0 0.06em; letter-spacing: 0;
}
.figure.sm { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.03em; }

/* --------------------------------------------------------------- datastrip
   Replaces the three-cards-in-a-row pattern. Same information, no boxes:
   figures separated by hairlines, aligned on a baseline. */
.datastrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-top: 1px solid var(--rule-firm);
  border-bottom: 1px solid var(--rule);
  margin: 26px 0;
}
.datastrip > div { padding: 16px 20px 15px; border-left: 1px solid var(--rule); }
.datastrip > div:first-child { border-left: 0; padding-left: 0; }
.datastrip .n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  display: block;
}
.datastrip .l {
  font-size: 11.5px; color: var(--ink-dim); margin-top: 5px;
  letter-spacing: 0.045em; text-transform: uppercase;
  font-family: var(--font-mono);
}

/* -------------------------------------------------------------- provenance
   The identity of the product. Every rate says where it came from, when it
   took effect and when a human last looked at it. Set as a technical record,
   because that is what it is. */
.provenance {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
  border-top: 1px solid var(--rule-firm); padding-top: 12px; margin: 26px 0;
  max-width: var(--record);
}
/* A .label already draws a rule under itself. When one introduces a block that
 * draws its own top rule, the two stack with dead space between them and the
 * section opens with what looks like an empty row. */
.label + .provenance, .label + .datastrip, .label + .checks, .label + .tree {
  border-top: 0; padding-top: 0; margin-top: 12px;
}
/* The signature. A single electric hairline down the left edge, so the ledger
 * is recognisable at a glance as the same object wherever it appears - a
 * reader should learn that this structure means EVIDENCE. Deliberately a rule
 * and not a badge: a green tick on every row would claim more than the record
 * says, and the record is the point. */
.provenance {
  border-left: 2px solid var(--electric);
  padding-left: 16px;
}
/* The stamp. Small, and absent on two thirds of tariffs - a mark that appears
 * on everything is decoration. Square rather than a tick: a tick reads as
 * approval, and this is a statement about arithmetic, not endorsement. */
.provenance .stamp {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.provenance .stamp .mk {
  width: 7px; height: 7px; flex: none; border-radius: 1px;
}
.provenance .stamp.ok   { color: var(--electric-ink); }
.provenance .stamp.ok   .mk { background: var(--electric); }
.provenance .stamp.none { color: var(--ink-faint); }
.provenance .stamp.none .mk { box-shadow: inset 0 0 0 1px var(--ink-faint); }

.provenance div { display: flex; gap: 14px; align-items: baseline; }
.provenance dt, .provenance .k {
  color: var(--ink-faint); min-width: 11ch; flex: none;
  letter-spacing: 0.03em; text-transform: uppercase; font-size: 11px;
}
.provenance dd, .provenance .v {
  margin: 0; color: var(--ink-mid); overflow-wrap: anywhere;
}
.provenance .v strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- rateline
   The one visual motif, and it is drawn from the domain rather than applied to
   it: a rate has a document behind it, a date it took effect, a date somebody
   transcribed it, and a today it is still being asserted against. The electric
   mark is the effective date - the moment the number on this page became the
   number the utility bills. */
.rateline { margin: 22px 0 6px; max-width: var(--record); }
.rateline svg { display: block; overflow: visible; }
.rateline .rl-stack { display: none; }
.rateline .rl-stack li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--rule); list-style: none;
}
.rateline .rl-stack { padding: 0; margin: 0; border-top: 1px solid var(--rule-firm); }
.rateline .rl-stack .rl-cap {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rateline .rl-stack .rl-date {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid);
}
.rateline .rl-stack li.on .rl-date { color: var(--ink); font-weight: 600; }
.rateline .rl-cap {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; fill: var(--ink-faint);
}
.rateline .rl-date {
  font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink-mid);
}

/* ------------------------------------------------------------------ checks
   Confidence as a first-class element. A tick is a thing we verified; a
   caution is a limitation we are telling you about before you find it. */
/* FOUR LEVELS, AND NEVER COLOUR ALONE. Each row carries a level WORD in its
 * own column - verified, approximate, excluded, unavailable - as well as a
 * colour. Encoding state only as green-versus-amber fails for anyone who
 * cannot separate those hues, in greyscale, and in a screen reader, where a
 * bare "✓" is announced inconsistently or not at all. The word always
 * survives, so the colour is reinforcement rather than the message. */
.checks { list-style: none; padding: 0; margin: 16px 0; max-width: var(--record); }
.checks li {
  display: grid; grid-template-columns: 11ch 1fr; gap: 14px;
  align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px;
}
.checks .lvl {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; padding-top: 2px;
}
.checks li.ok   .lvl { color: var(--electric-ink); }
.checks li.warn .lvl { color: var(--amber-ink); }
.checks li.grey .lvl { color: var(--ink-faint); }
.checks li.no   .lvl { color: var(--red-ink); }
.checks .what { display: block; }
.checks li .why { display: block; color: var(--ink-dim); font-size: 13px;
                  margin-top: 3px; }

/* ------------------------------------------------------------------ notice
   The only filled boxes on the site, and each colour means one thing. */
.notice {
  border-left: 2px solid var(--rule-firm); background: var(--paper-sunk);
  padding: 13px 16px; margin: 20px 0; font-size: 14.5px;
  max-width: var(--measure);
}
.notice.warn { border-left-color: var(--amber); background: var(--amber-wash);
               color: var(--amber-ink); }
.notice.bad  { border-left-color: var(--red);   background: var(--red-wash);
               color: var(--red-ink); }
.notice.info { border-left-color: var(--electric); background: var(--electric-wash);
               color: var(--electric-ink); }
.notice strong { font-weight: 640; }

/* ------------------------------------------------------------------ tables
   Data, so: monospace numerals, tabular figures, hairline rows, no zebra and
   no outer border. A table is a grid of facts, not a component. */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 16px 0; }
caption { text-align: left; font-size: 13px; color: var(--ink-dim);
          padding-bottom: 8px; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); }
th {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-dim);
  border-bottom: 1px solid var(--rule-firm); padding-bottom: 7px;
}
/* Right-aligned numeric columns.
 *
 * padding-right was zeroed here on the assumption that a numeric column is
 * always the LAST one - true on a tariff page, where $/kWh ends the row, and
 * false on /rates, where "Plans" is numeric and "Latest filing" follows it.
 * A right-aligned "1" then sat flush against "2026-08-01" and read as
 * "12026-08-01": the count looked like extra digits on the front of the year.
 *
 * So the gap is only removed on the last cell in a row, where there is nothing
 * to collide with. The left padding stops a right-aligned figure crowding
 * whatever text sits to its left. */
td.num, th.num {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; padding-left: 28px;
}
td.num:last-child, th.num:last-child { padding-right: 0; }
tbody tr:hover td { background: var(--paper-edge); }
tr.best td { color: var(--green-ink); font-weight: 600; }

/* -------------------------------------------------------------------- tree
   utility -> plan -> rate -> source, drawn as the hierarchy it is. The
   product's information architecture IS the interface. */
.tree {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.95;
  margin: 18px 0; overflow-x: auto;
}
.tree .branch { color: var(--ink-faint); user-select: none; }
.tree .node   { color: var(--ink); }
.tree .val    { color: var(--ink); font-variant-numeric: tabular-nums; }
.tree .src    { color: var(--ink-dim); }

/* ------------------------------------------------------------------ deltas */
.up   { color: var(--red-ink); }
.down { color: var(--green-ink); }
.up::before   { content: "\2191\FE0E "; }
.down::before { content: "\2193\FE0E "; }

/* ------------------------------------------------------------------ forms */
label { display: block; font-family: var(--font-mono); font-size: 11px;
        letter-spacing: 0.07em; text-transform: uppercase;
        color: var(--ink-dim); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=number], input[type=search],
select, textarea {
  width: 100%; background: var(--paper-edge); color: var(--ink);
  border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 10px 12px; font-size: 16px; font-family: var(--font-sans);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--electric); outline-offset: -1px; border-color: transparent;
}
input[type=range] { width: 100%; accent-color: var(--electric); padding: 0; }
.controls { display: grid; gap: 18px;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            margin-bottom: 22px; }

.btn {
  display: inline-block; background: var(--electric); color: #fff;
  border: 0; border-radius: 3px; padding: 11px 18px;
  font-size: 15px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--electric-ink); text-decoration: none; }
.btn.quiet { background: transparent; color: var(--electric-ink);
             border: 1px solid var(--rule-firm); }
.btn.quiet:hover { background: var(--paper-sunk); }

/* ------------------------------------------------------------------ search
   On /rates. Lives here rather than in pages.py, which is what it replaced. */
.search { margin: 0 0 22px; max-width: 520px; }
.search button { margin-top: 8px; }
#miss { border: 1px solid var(--rule-firm); border-radius: 3px;
        padding: 14px 16px; margin-top: 12px; background: var(--paper-sunk); }

/* ------------------------------------------------------------------- plans
   /signup's price tiers. Ruled columns, not floating boxes - the price is a
   figure, so it is set like every other figure on the site. */
.plans { display: grid; gap: 0; margin: 22px 0 0;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         border-top: 1px solid var(--rule-firm);
         border-bottom: 1px solid var(--rule); }
.plan { padding: 16px 20px 15px; border-left: 1px solid var(--rule); }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan .p { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
           font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.plan .q { font-size: 11.5px; color: var(--ink-dim); margin-top: 5px;
           letter-spacing: 0.045em; text-transform: uppercase;
           font-family: var(--font-mono); }

details.credits { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
details.credits summary { cursor: pointer; font-size: 14px; color: var(--ink-mid); }
details.credits table { margin-top: 10px; font-size: 13.5px; }

/* ---------------------------------------------------------------- termsbox
   The scrollable terms on /signup. Sunken paper: it is a document being read
   inside a form, and it should look like one. */
.termsbox { height: 230px; overflow-y: auto; background: var(--paper-sunk);
            border: 1px solid var(--rule-firm); border-radius: 3px;
            padding: 15px 16px; font-size: 13.5px; line-height: 1.62; }
.termsbox h1 { font-size: 16px; margin: 0 0 8px; }
.termsbox h2 { font-size: 13.5px; margin: 16px 0 5px; color: var(--ink); }
.termsbox p, .termsbox li { color: var(--ink-mid); margin: 6px 0; }
.termsbox .danger, .termsbox .notice { border: 1px solid var(--rule-firm);
            border-radius: 3px; padding: 10px 12px; margin: 0 0 12px; }
.accept { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
          font-size: 14px; color: var(--ink); cursor: pointer;
          font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.accept input { width: auto; margin-top: 3px; flex: 0 0 auto; }

/* -------------------------------------------------------------------- admin
   Behind a token, so it is a dashboard rather than a document - but it uses
   the same tokens and the same figure treatment as everything else. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         border-top: 1px solid var(--rule-firm);
         border-bottom: 1px solid var(--rule); }
.card { padding: 15px 18px; border-left: 1px solid var(--rule); }
.card:first-child { border-left: 0; padding-left: 0; }
.card .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
           font-size: 25px; font-weight: 600; letter-spacing: -0.03em; }
.card .l { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px;
           font-family: var(--font-mono); letter-spacing: 0.045em;
           text-transform: uppercase; }
.card.hero .n { color: var(--electric-ink); }
.row { display: flex; gap: 10px; align-items: center; }
.verdict { border-left: 2px solid var(--rule-firm); background: var(--paper-sunk);
           padding: 13px 16px; margin: 14px 0 0; font-size: 14.5px; }
.empty { color: var(--ink-dim); font-size: 14px; padding: 10px 0; }
.bar { height: 5px; background: var(--rule-mid); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--electric); }
.good { color: var(--green-ink); }
.bad  { color: var(--red-ink); }
.warn { color: var(--amber-ink); }

/* ------------------------------------------------------------------- misc */
hr { border: 0; border-top: 1px solid var(--rule-mid); margin: 44px 0; }
ul, ol { max-width: var(--measure); padding-left: 20px; }
li { margin: 5px 0; }

/* Freshness strip on /status. Kept, retinted: green means the monitor ran. */
.strip { display: flex; gap: 3px; flex-wrap: wrap; margin: 12px 0 6px; }
.strip .d { width: 11px; height: 24px; border-radius: 2px; background: var(--rule); }
.strip .d.ok { background: var(--green); }
.strip .d.no { background: var(--rule-mid); }

/* The footer closes the graphite frame the masthead opened, so the page is
   bracketed by infrastructure with the filings held between. */
.frame.foot { border-bottom: 0; border-top: 1px solid var(--graphite-edge);
              margin-top: 84px; }
.frame.foot footer {
  max-width: var(--page); margin: 0 auto; padding: 22px 28px 30px;
  font-size: 12.5px; color: var(--on-graphite-dim);
  font-family: var(--font-mono); line-height: 1.9;
}
.frame.foot footer a { color: var(--on-graphite); }

@media (max-width: 640px) {
  .wrap { padding: 28px 16px 64px; }
  .masthead { gap: 14px; padding: 13px 16px; }
  .frame.foot footer { padding: 20px 16px 26px; }
  .frame.foot { margin-top: 56px; }
  .masthead nav { gap: 14px; }
  h2 { margin: 38px 0 12px; }
  .lede { font-size: 16.5px; }
  .datastrip { grid-template-columns: repeat(2, 1fr); }
  .datastrip > div { padding: 13px 14px; border-left: 1px solid var(--rule); }
  .datastrip > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .datastrip > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  table { font-size: 13px; }
  th, td { padding: 8px 8px 8px 0; }
  td { overflow-wrap: anywhere; }
  .provenance div { flex-direction: column; gap: 0; }
  .provenance dt, .provenance .k { min-width: 0; }
  /* The SVG scales with its column: 720 user units in a 358px phone column is
     a scale of 0.497, so 11.5px date text lands at 5.7 CSS px. Swap to the
     stacked list, which makes no claim about intervals and stays legible. */
  .rateline svg { display: none; }
  .rateline .rl-stack { display: block; }
  .rateline .rl-stack[aria-hidden] { }
  /* An 11ch label column plus body text is tight at 358px; stack instead. */
  .checks li { grid-template-columns: 1fr; gap: 3px; }
  pre { font-size: 11.5px; padding: 12px; }
}