/* Corridor Atlas — reads like a printed corridor plan, not a SaaS dashboard.
   Same system as the Omaha by Design Dive: drafting navy, rust annotation,
   warm cream. See docs/DESIGN.md. */

:root {
  --navy:   #1f4d6b;
  --rust:   #a3462c;
  --ink:    #231f20;
  --muted:  #6a6a6a;
  --faint:  #9a948a;
  --band:   #f2ece1;
  --line:   #e3e1d6;
  --paper:  #fbfaf6;
  --sand:   #cbb9a4;

  /* Sequential single hue. Not diverging: intensity runs from none to a lot
     and has no meaningful midpoint. */
  --c5: #8c2f16;
  --c4: #bf5f36;
  --c3: #dc9a63;
  --c2: #eccb9f;
  --c1: #f5e7d2;
  --ex: #ddd8cd;

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

  --panel-w: 340px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  /* Body copy never below 16px; contrast floor 4.5:1. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 60;
  background: var(--navy); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 0; }

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

/* ------------------------------------------------------------- header band */
.band {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 12px 20px;
  background: var(--navy); color: #fff;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.brand p  { margin: 2px 0 0; font-size: 12.5px; color: var(--sand); }

.meta { text-align: right; }
.dates { display: flex; gap: 22px; justify-content: flex-end; }
.meta .lbl { display: block; font-size: 10.5px; color: var(--sand);
             letter-spacing: .08em; text-transform: uppercase; }
.meta .val { font-size: 14px; font-variant-numeric: tabular-nums; }
.meta .cmp { min-width: 96px; }          /* reserved for the second date */
.meta .src { margin: 4px 0 0; font-size: 11px; color: var(--sand); }
.meta a { color: #fff; }

/* ------------------------------------------------------------------ shell */
.shell {
  display: flex; align-items: stretch;
  height: calc(100vh - 66px);
}

.panel {
  width: var(--panel-w); flex: 0 0 var(--panel-w);
  background: var(--band); border-right: 1px solid var(--line);
  padding: 20px; overflow-y: auto;
}

.ph {
  margin: 0 0 6px; font-size: 21px; font-weight: 700;
  letter-spacing: -.01em; color: var(--navy);
}
.ph::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--rust); margin-top: 8px;
}
.rub {
  margin: 26px 0 10px; font-size: 11px; font-weight: 700; color: var(--navy);
  letter-spacing: .11em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}

/* ---------------------------------------------------------------- readout */
.readout { display: flex; gap: 20px; margin: 18px 0 10px; align-items: baseline; }
.readout b {
  font-size: 40px; color: var(--rust); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.readout span { font-size: 12px; color: var(--muted); margin-left: 5px;
                text-transform: uppercase; letter-spacing: .07em; }

input[type=range] {
  width: 100%; margin: 6px 0 2px; height: 44px;   /* 44px touch target */
  -webkit-appearance: none; appearance: none; background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: var(--line); border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rust); border: 3px solid var(--band);
  margin-top: -9px; cursor: pointer;
}
input[type=range]::-moz-range-track { height: 4px; background: var(--line); }
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: 3px solid var(--band);
  border-radius: 50%; background: var(--rust); cursor: pointer;
}
.ticks { display: flex; justify-content: space-between;
         font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
.help { font-size: 11.5px; color: var(--faint); margin: 8px 0 0; line-height: 1.5; }

/* ------------------------------------------------------- toggles + legend */
.toggles, .legend, .districts { list-style: none; margin: 0; padding: 0; }
.toggles li { margin-bottom: 2px; }
.toggles label {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; font-size: 14px;
}
.toggles input { width: 18px; height: 18px; accent-color: var(--navy); flex: 0 0 auto; }

/* Overlays are told apart by LINE STYLE, not colour, so they survive colour
   vision deficiency and greyscale printing. */
.sw { width: 26px; height: 14px; flex: 0 0 26px; display: inline-block; }
.sw.tif      { border: 2px dashed var(--navy); }
.sw.blight   { border: 2px solid var(--rust);
               background: repeating-linear-gradient(45deg, transparent, transparent 3px,
                            rgba(163,70,44,.5) 3px, rgba(163,70,44,.5) 5px); }
.sw.historic { border: 2px dotted #4a6741; }
.sw.bid      { border: 2px dotted #6b4a7a; }

.legend li { display: grid; grid-template-columns: 26px 1fr;
             gap: 10px; align-items: baseline; margin-bottom: 9px; }
.legend b { font-size: 13.5px; }
.legend span { grid-column: 2; font-size: 11.5px; color: var(--muted); }
.legend .sw { height: 15px; border: 1px solid rgba(0,0,0,.18); }
/* The top two classes carry a heavier border on the map too — the non-colour
   channel that makes the finding readable without hue. */
.legend .c5 { background: var(--c5); border: 2.5px solid var(--ink); }
.legend .c4 { background: var(--c4); border: 1.75px solid var(--ink); }
.legend .c3 { background: var(--c3); }
.legend .c2 { background: var(--c2); }
.legend .c1 { background: var(--c1); }
.legend .ex { background: var(--ex); }

.note { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 24px;
        border-top: 1px solid var(--line); padding-top: 14px; }
.note a, .county { color: var(--rust); }

/* ------------------------------------------------------------ parcel detail */
.back {
  background: none; border: 0; color: var(--navy); font-size: 12.5px;
  cursor: pointer; padding: 10px 0; min-height: 44px; font-family: inherit;
}
.owner   { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.verdict {
  margin: 14px 0; padding: 12px 14px; background: #fff;
  border-left: 3px solid var(--rust); font-size: 15px; line-height: 1.5;
}
.facts { margin: 14px 0 0; font-size: 13.5px; }
.facts dt { color: var(--faint); font-size: 10.5px; letter-spacing: .08em;
            text-transform: uppercase; margin-top: 10px; }
.facts dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.districts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.districts li {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--navy); color: var(--navy);
  border-radius: 2px;
}
.county { display: inline-block; margin-top: 20px; font-size: 13px; }

/* -------------------------------------------------------------------- map */
.mapwrap { position: relative; flex: 1 1 auto; min-width: 0; }
#map { position: absolute; inset: 0; }

.summary {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  background: #fff; border: 1px solid var(--line); padding: 16px 20px;
  min-width: 200px;
}
.summary .big { margin-bottom: 12px; }
.summary .big:last-child { margin-bottom: 0; }
.summary b {
  display: block; font-size: 30px; color: var(--rust); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.summary span { font-size: 11px; color: var(--muted);
                letter-spacing: .07em; text-transform: uppercase; }
.summary em { font-style: normal; font-size: 12px; color: var(--faint); margin-left: 6px; }

.state {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 6; background: #fff; border: 1px solid var(--line);
  padding: 16px 22px; font-size: 14px; color: var(--muted); text-align: center;
  max-width: 300px;
}
.state b { display: block; color: var(--ink); margin-bottom: 4px; }
.state span { display: block; font-size: 13px; line-height: 1.5; }
.state.err { border-color: var(--rust); }
.state button {
  margin-top: 12px; min-height: 44px; padding: 0 18px; cursor: pointer;
  background: var(--navy); color: #fff; border: 0; font-family: inherit; font-size: 13px;
}

/* --------------------------------------------------------------- phone ---
   Map-first with a bottom sheet: the map stays the hero at every size and the
   controls are one gesture away. A stacked panel would push the corridor below
   the fold, which is the first thing a board member would see. */
@media (max-width: 700px) {
  .shell { display: block; height: calc(100vh - 92px); position: relative; }
  .mapwrap { position: absolute; inset: 0; }

  .panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    width: auto; flex: none; max-height: 78vh;
    border-right: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    transform: translateY(calc(100% - 74px));
    transition: transform .28s ease;
    box-shadow: 0 -2px 14px rgba(0,0,0,.13);
  }
  .panel.open { transform: translateY(0); }
  .panel::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 2px;
    background: var(--faint); margin: -8px auto 12px;
  }
  .summary {
    top: auto; bottom: 84px; right: 12px; left: 12px;
    display: flex; gap: 22px; padding: 12px 16px;
  }
  .summary .big { margin-bottom: 0; }
  .summary b { font-size: 22px; }
  .band { padding: 10px 14px; flex-direction: column; gap: 8px; }
  .meta { text-align: left; }
  .dates { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}

/* `hidden` must always win. The UA stylesheet gives [hidden] display:none at
   element specificity, so ANY class that sets display beats it — which is how
   `.private { display: inline-block }` kept the "owner detail loaded" badge on
   screen on the PUBLIC site, where the detail archive 404s and the claim is
   simply false. Declared once here rather than patched per-component, because
   the next hidden element to grow a display rule would fail the same way. */
[hidden] { display: none !important; }

/* Detail mode is visually unmistakable. Someone screenshotting the map for a
   board packet must never mistake a private view for the published one. */
.private {
  margin: 6px 0 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--rust);
  padding: 4px 9px; display: inline-block;
}
body.detail-mode .band { box-shadow: inset 0 -4px 0 var(--rust); }

/* ----------------------------------------------------------- stops ------ */

.ride {
  position: absolute; left: 16px; top: 16px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
}
.ride button {
  min-height: 44px; padding: 0 16px; cursor: pointer;
  background: var(--navy); color: #fff; border: 0;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.ride button[aria-pressed="true"] { background: var(--rust); }
.ridenow {
  font-size: 12.5px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); padding: 7px 12px;
}
.ridenow:empty { display: none; }

/* Ranking strip. Ordered along the route, so its shape IS the corridor: the
   dense ends and the hollow middle read without anyone explaining them. */
.strip {
  position: absolute; left: 16px; right: 16px; bottom: 30px; z-index: 5;
  background: rgba(255,255,255,.96); border: 1px solid var(--line);
  padding: 12px 16px 10px;
}
.striphead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
             margin-bottom: 10px; }
.striphead b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
               color: var(--navy); }
.striphead span { font-size: 11px; color: var(--faint); }

.strip ol { list-style: none; margin: 0; padding: 0;
            display: flex; align-items: flex-end; gap: 4px; height: 74px; }
.strip li { flex: 1 1 0; display: flex; flex-direction: column;
            justify-content: flex-end; height: 100%; }
.strip button {
  border: 0; padding: 0; cursor: pointer; background: none;
  font-family: inherit; width: 100%; text-align: center;
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
}
.strip .bar {
  width: 100%; background: var(--c4); min-height: 2px;
  border-top: 2px solid var(--ink);
}
.strip .bar.hi { background: var(--c5); }
.strip .pct { font-size: 10.5px; color: var(--ink); font-variant-numeric: tabular-nums;
              margin-bottom: 3px; }
.strip .who { font-size: 9px; color: var(--muted); margin-top: 4px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip button[aria-current="true"] .bar { background: var(--rust); }
.strip button[aria-current="true"] .who { color: var(--rust); font-weight: 700; }
.strip button:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }

@media (max-width: 700px) {
  .strip { display: none; }          /* 16 bars do not survive 375px */
  .ride { left: 12px; top: 12px; }
}

/* ---- walkshed basis toggle -------------------------------------------
   Two labelled buttons rather than a checkbox. A checkbox would make one
   basis the default and the other a deviation; here the point is that the
   straight-line figure was the published one and is wrong, so both have to
   be nameable and neither should read as the correction. */
.walkmode { margin: 14px 0 0; padding: 11px 12px 10px;
            background: var(--band); border: 1px solid var(--line); }
.walkmode-label { display: block; font-size: 10.5px; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.seg { display: flex; gap: 0; border: 1px solid var(--sand); background: #fff; }
.seg-btn { flex: 1 1 0; padding: 7px 6px; font: inherit; font-size: 12px;
           line-height: 1.2; color: var(--muted); background: #fff;
           border: 0; cursor: pointer; transition: background .12s, color .12s; }
.seg-btn + .seg-btn { border-left: 1px solid var(--sand); }
.seg-btn:hover { background: var(--band); color: var(--ink); }
.seg-btn.is-on { background: var(--navy); color: #fff; font-weight: 600; }
.seg-btn:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }
.walkmode-delta { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45;
                  color: var(--muted); font-variant-numeric: tabular-nums; }
.walkmode-delta b { color: var(--ink); }

/* ---- amenity dots ----------------------------------------------------
   Round, to read as points on the street, against the square district
   swatches which are areas. Same colours as the map circles. */
.amenities .ct { margin-left: auto; color: var(--faint); font-size: 11px;
                 font-variant-numeric: tabular-nums; }
.amenities label { display: flex; align-items: center; gap: 8px; }
/* Legend marks mirror the map icons: a disc in the family colour with the
   glyph knocked out in white, so sidebar and map agree at a glance. */
.dot, .ico { width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
             background-position: center; background-repeat: no-repeat;
             background-size: 13px 13px; }
.ico { border: 1px solid #fff; box-shadow: 0 0 0 1px var(--line); }
/* County marks: same disc-plus-glyph construction as the places, in the
   family colours — navy for car parking, rust for bikes, sage for the
   county's cultural assets. Parking uses a letter rather than a glyph
   because a P is the universal sign and no drawing beats it. */
.dot.cultural { background-color: #4a6741; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.2h16M6.4 20.2V9.6M10.1 20.2V9.6M13.9 20.2V9.6M17.6 20.2V9.6M3.2 9.6h17.6L12 4.2z'/%3E%3C/svg%3E"); }
.dot.bike { background-color: #a3462c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 18.4a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8zM18.4 18.4a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8zM5.6 15l4-7.6h4.8l-3.6 7.6h7.6M12.6 7.4h2.6'/%3E%3C/svg%3E"); }
.dot.rack { background-color: #c08b6e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 19v-7.4M19.6 19v-7.4M4.4 11.6h15.2M9.5 19v-7.4M14.5 19v-7.4'/%3E%3C/svg%3E"); }
.dot.meter { background-color: #7d7669; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 21h5.2M12 21v-3.6M7.4 3.6h9.2v9.4a4.6 4.6 0 0 1-9.2 0zM10 8.4h4'/%3E%3C/svg%3E"); }
.dot.pgar { background-color: #1f4d6b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='17' font-weight='700' fill='%23fff'%3EP%3C/text%3E%3C/svg%3E"); }
.dot.psur { background-color: #6b8ca3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17.5' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='17' font-weight='700' fill='%23fff'%3EP%3C/text%3E%3C/svg%3E"); }

/* Place marks — one family colour, the glyph carries the kind. Inline SVG
   data URIs so the legend needs no extra files and cannot 404. */
.ico { background-color: #5d4a7a; }
.ico.food     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3v5.6a2.6 2.6 0 0 0 5.2 0V3M8.8 8.6V21M17.8 3c-1.7 1.5-2.4 3.6-2.4 5.9s.9 3.5 2.4 3.5V21'/%3E%3C/svg%3E"); }
.ico.retail   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1.1 13H7.1zM9.2 8V6.2a2.8 2.8 0 0 1 5.6 0V8'/%3E%3C/svg%3E"); }
.ico.services { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9h17v11h-17zM9 9V6h6v3M3.5 14h17'/%3E%3C/svg%3E"); }
.ico.lodging  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 19v-6.5h17V19M3.5 12.5V7M7.6 12.5a2.1 2.1 0 1 1 4.2 0'/%3E%3C/svg%3E"); }
.ico.leisure  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.7l6-.8z'/%3E%3C/svg%3E"); }

/* Attribution. ODbL requires it for the OpenStreetMap places and Mapbox
   requires its own. On the face of the map, not buried in the method doc. */
.attrib { position: absolute; right: 8px; bottom: 6px; z-index: 3;
          font-size: 10.5px; color: var(--muted);
          background: rgba(251,250,246,.86); padding: 2px 7px; border-radius: 2px; }
.attrib a { color: var(--muted); }

/* The one-line reading of a stop: land vs activity. Set apart from the facts
   because it is an interpretation, not a measurement. */
.reading { margin: 12px 0 0; padding: 9px 11px; font-size: 12.5px;
           line-height: 1.5; color: var(--ink); background: #fff;
           border-left: 3px solid var(--navy); }

/* ---- what is inside a stop's walkshed --------------------------------
   A scannable list, not a table: the reader is looking for whether they
   recognise anything, which is a name-shape task. The count sits in the
   group heading so the totals stay visible when a long group pushes its
   own items off screen. The panel already scrolls. */
.items { margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 16px; }
.items .rub { margin: 0 0 10px; }
.items .grp {
  display: flex; align-items: baseline; gap: 8px;
  margin: 16px 0 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
}
.items .grp:first-of-type { margin-top: 4px; }
.items .grp .n {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.items ul { list-style: none; margin: 0; padding: 0; }
.items li + li { border-top: 1px solid rgba(0,0,0,.05); }
.items li button {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 5px 6px 5px 0; font: inherit; font-size: 12.5px; line-height: 1.35;
  color: var(--ink); background: none; border: 0; text-align: left;
  cursor: pointer; border-radius: 2px;
}
.items li button:hover { background: #fff; }
.items li button:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }
.items .nm { flex: 1 1 auto; }
/* Detail is context, not the thing being scanned for — it must not compete
   with the name for the eye. */
.items .dt {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right; max-width: 45%;
}
.metered {
  margin: 16px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Residential. Cool against the warm intensity ramp so it reads as a different
   category rather than another rung on the same ladder. */
.sw.resid { background: #7f97ad; border: 1px solid #5d7289; }