/* ============================================================
   FE Outages — shared stylesheet
   Every page links this file, so a change here changes the
   whole site. Colors are defined once as variables below.
   ============================================================ */

:root {
  --bg:        #ffffff;
  --surface:   #f4f6fb;
  --border:    #e3e8f2;
  --text:      #0f1533;
  --muted:     #5a6478;
  --accent:      #1f7fd4;   /* brand blue — logo, links, active tab */
  --accent-deep: #1663b6;   /* darker blue, bottom of the logo gradient */
  --amber:       #e8912a;   /* reserved for outage severity on the map */
  --tint:        #e9f2fc;   /* pale blue background for the status pill */
  --logo-ink:    #E6D639;   /* letters + bolt + keyline — one colour, every background */
  --shadow:    0 1px 2px rgba(15, 21, 51, .06), 0 8px 24px rgba(15, 21, 51, .05);

  /* How far right the header logo sits. Purely optical — nothing else moves,
     because it is applied as a transform on .brand svg. */
  --logo-nudge: 13px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0d1130;
    --surface: #161b40;
    --border:  #29305e;
    --text:    #eef1fa;
    --muted:   #9fa8c6;
    --accent:      #5cb3f5;
    --accent-deep: #3a8ede;
    --amber:       #f5b942;
    --tint:        #14243f;
    --shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header + navigation ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 64px;
}

/* THE LOGO — the letters "FE" plus the icon, which stands in for the O.
   The SVG in each page's header holds the SAME paths and the SAME transform as
   logo-white.svg / logo-black.svg, so the site and the files cannot drift.
   Sits hard against the left edge and is deliberately not a link;
   navigation happens through the tabs. */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

.brand svg {
  display: block;
  height: 18px;            /* the only knob for logo size in the header */
  width: auto;
  /* Nudges the logo horizontally without moving anything else. It is a
     transform, not padding or a margin, so the nav and the button stay
     exactly where they are. Set --logo-nudge below. */
  transform: translateX(var(--logo-nudge, 0px));
}

/* The letters, the bolt and the keyline always share one colour, and it is the
   same on every background — there is only one logo now. Never set one
   without the others. */
.logo-ink { fill: var(--logo-ink); }
.logo-key {
  fill: none;
  stroke: var(--logo-ink);
  stroke-width: 13;
  stroke-linejoin: round;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease;
}

.nav a:hover { color: var(--text); }

.nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ---------- Page layout ---------- */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 104px;
}

h1 {
  font-size: clamp(30px, 5.2vw, 44px);
  line-height: 1.13;
  letter-spacing: -0.028em;
  margin: 22px 0 16px;
}

h2 {
  font-size: 15px;
  margin: 0 0 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  color: var(--muted);
  font-size: 18.5px;
  line-height: 1.55;
  margin: 0 0 38px;
  max-width: 58ch;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
}

.card + .card { margin-top: 18px; }

.card ul { margin: 0; padding-left: 20px; }
.card li { margin-bottom: 8px; }
.card li:last-child { margin-bottom: 0; }

/* ---------- Map placeholder ---------- */

.map-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 44px 100%,
    var(--surface);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  margin-bottom: 34px;
}

.map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 25%, var(--bg) 92%);
  opacity: .75;
  pointer-events: none;
}

.map-frame > * { position: relative; z-index: 1; }

.map-note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 26px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 560px) {
  .header-inner { gap: 14px; padding: 0 14px; }
  .brand svg { height: 16px; }
  .nav a { padding: 0 10px; font-size: 14px; }
  main { padding: 56px 20px 80px; }
}

/* ============================================================
   OUTAGE MAP
   The map panel keeps a dark ground in both themes, the way map
   apps do — it is what lets the severity colours stay legible.
   ============================================================ */

:root {
  --map-ground:  #0e1330;
  --map-grid:    #1b2249;
  --sev-none:    #454f6b;   /* no outage — deliberately recessive */
  --sev-minor:   #f7c978;   /* under 2% of the town */
  --sev-mod:     #f09441;   /* 2–10% */
  --sev-serious: #e25c2b;   /* 10–30% */
  --sev-critical:#c62d46;   /* over 30% */
}

/* ---------- headline ---------- */
.status{
  display:flex; align-items:flex-start; gap:34px; flex-wrap:wrap;
  margin: 4px 0 30px;
}
.status-main{min-width:min(100%,240px)}
.hero-num{
  font-size:clamp(44px,8vw,68px); font-weight:700; line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; margin:0;
}
.hero-label{color:var(--muted); font-size:15px; margin:8px 0 0}
.figs{display:flex; gap:30px; flex-wrap:wrap; padding-top:8px}
.fig{min-width:88px}
.fig-v{font-size:21px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2}
.fig-k{font-size:12px; color:var(--muted); letter-spacing:.02em; margin-top:3px}

/* ---------- map ---------- */
.map-wrap{position:relative; border:1px solid var(--border); border-radius:14px; overflow:hidden;
          background:var(--map-ground); margin:0 auto 14px;
          /* a drag across the map is a drag, never a text selection */
          user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none}
.map-wrap text{user-select:none; -webkit-user-select:none}
.map-wrap svg{display:block; width:100%; height:auto}
.dot{transition:r .15s ease}
.hit{fill:transparent; cursor:pointer}
/* Hovering a county lays a thin sheet of white over it, so whatever colour it
   already is simply becomes a lighter version of itself. No outline, nothing
   that has to match a shape, and one attribute to update. */
#hot{fill:#fff; fill-opacity:0; pointer-events:none; transition:fill-opacity .12s ease}
#hot.on{fill-opacity:.13}

.tip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-118%);
  background:#070a1c; color:#eef1fa; border:1px solid #2b3360; border-radius:9px;
  padding:9px 12px; font-size:13px; line-height:1.5; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.45); z-index:5; transition:opacity .12s;
}
.tip.on{opacity:1}
.tip b{display:block; font-size:14px; margin-bottom:2px}
.tip .sub{color:#9aa3c4; font-size:12px}

.legend{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); margin-bottom:30px;
}
.legend .item{display:flex; align-items:center; gap:6px}
.legend .key{width:11px; height:11px; border-radius:50%; flex:none}
.legend .sep{flex:1}

/* ---------- search ---------- */
.search{position:relative; margin-bottom:16px; max-width:420px}
.search input{
  width:100%; font:inherit; font-size:15px; padding:11px 14px 11px 38px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--text);
}
.search input:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%);
            width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:2}

/* ============================================================
   THE OUTAGE TABLE — COLUMN GEOMETRY
   Every number below is tunable in the Table Column Editor
   artifact. Paste a new :root block from it over this one;
   nothing else in this file needs to change.
   ------------------------------------------------------------
   *-w   column width      *-x  horizontal nudge, + moves right
   hd-*  the label in the header row
   td-*  the value in the body rows
   ============================================================ */
:root{
  --tbl-pad-x: 16px;      /* left/right padding inside every cell  */
  --tbl-pad-y: 10px;      /* top/bottom padding — sets row height  */

  --col-power-w: 148px;   /* Without power */
  --col-pct-w:   195px;   /* Percent       */
  --col-out-w:   107px;   /* Outages       */
  --col-etr-w:   134px;   /* Est. restored */

  --bar-w:     64px;      /* the track — the SAME on every row     */
  --bar-h:      5px;
  --bar-gap:    9px;      /* track to the number beside it         */
  --pctnum-w:  50px;      /* fixed, so the track never shifts      */

  --hd-town-x:  -12px;   --td-town-x:  2px;
  --hd-power-x: 0px;  --td-power-x: -3px;
  --hd-pct-x:   -4px;  --td-pct-x:   -8px;
  --hd-out-x:   -12px;  --td-out-x:   -16px;
  --hd-etr-x:   0px;  --td-etr-x:   3px;

  /* Centred columns (v41). + moves right. Set in the table preview. */
  --hd-rank-x:  5px;    --td-rank-x:  2px;
  --hd-power-c: -0.5px; --td-power-c: 0px;
  --hd-pct-c:   0px;    --td-pct-c:   0px;
  --hd-out-c:   0px;    --td-out-c:   -1px;
  --hd-etr-c:   0px;    --td-etr-c:   0px;
}

.tablewrap{border:1px solid var(--border); border-radius:14px; overflow:hidden}
.scroller{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th{
  text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  padding:var(--tbl-pad-y) var(--tbl-pad-x);
  border-bottom:1px solid var(--border); background:var(--surface); white-space:nowrap;
}
td{padding:var(--tbl-pad-y) var(--tbl-pad-x); border-bottom:1px solid var(--border); white-space:nowrap}
tr:last-child td{border-bottom:0}

/* A number column and its label are right-aligned together. Before this,
   the labels were left-aligned over right-aligned figures. */
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}

/* Column widths and nudges. Columns are tagged by what they hold (c-power,
   c-pct …), not by position, because sorting moves the sorted column next to
   the town name. The town column takes whatever is left. */
.tablewrap th.c-rank{width:1%}
.tablewrap th.c-town{width:auto}
.tablewrap th.c-power{width:var(--col-power-w)}
.tablewrap th.c-pct{width:var(--col-pct-w)}
.tablewrap th.c-out{width:var(--col-out-w)}
.tablewrap th.c-etr{width:var(--col-etr-w)}

/* Every column except the town is centred under its label. */
.tablewrap .c-rank, .tablewrap .c-power, .tablewrap .c-pct,
.tablewrap .c-out, .tablewrap .c-etr{text-align:center}
/* The Town label sits just left of the town names (the spot picked in the
   tuner). It is measured from the left edge, not the centre, because the town
   column changes width with the screen and a centred label slid onto Sort on
   phones. Nudge it with --hd-town-x. */
.tablewrap th.c-town{text-align:left}

/* The nudges. The label and the value each sit in an inline-block wrapper,
   because a transform on a table cell itself is not reliable. */
.tablewrap th .hl, .tablewrap td .cv{display:inline-block}
.tablewrap td.c-town .cv{display:block}
.tablewrap th.c-town  .hl{transform:translateX(var(--hd-town-x))}
.tablewrap td.c-town  .cv{transform:translateX(var(--td-town-x))}
.tablewrap th.c-rank  .hl{transform:translateX(var(--hd-rank-x))}
.tablewrap td.c-rank  .cv{transform:translateX(var(--td-rank-x))}
.tablewrap th.c-power .hl{transform:translateX(var(--hd-power-c))}
.tablewrap td.c-power .cv{transform:translateX(var(--td-power-c))}
.tablewrap th.c-pct   .hl{transform:translateX(var(--hd-pct-c))}
.tablewrap td.c-pct   .cv{transform:translateX(var(--td-pct-c))}
.tablewrap th.c-out   .hl{transform:translateX(var(--hd-out-c))}
.tablewrap td.c-out   .cv{transform:translateX(var(--td-out-c))}
.tablewrap th.c-etr   .hl{transform:translateX(var(--hd-etr-c))}
.tablewrap td.c-etr   .cv{transform:translateX(var(--td-etr-c))}

/* row numbers under Sort */
.tablewrap td.c-rank{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}


.town{font-weight:550}
.county{color:var(--muted); font-size:13px}

/* PERCENT — the track is one fixed length on every row and the fill inside
   it is the actual percentage. The number beside it has a fixed width too,
   so the track sits in the same place down the whole column. */
.sev{display:inline-flex; align-items:center; gap:var(--bar-gap)}
.tablewrap td .cv.sev{display:inline-flex}
.sev .key{width:9px; height:9px; border-radius:50%; flex:none}
.bar{
  width:var(--bar-w); flex:none; height:var(--bar-h);
  border-radius:999px; background:var(--border); overflow:hidden;
}
.bar i{display:block; height:100%; border-radius:999px}
.pctnum{display:inline-block; width:var(--pctnum-w); text-align:right; flex:none}

.allclear{padding:44px 24px; text-align:center; color:var(--muted)}
.allclear strong{display:block; color:var(--text); font-size:17px; font-weight:600; margin-bottom:6px}

.meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--muted); font-size:13px; margin:14px 0 34px;
}
.live{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none}
.stale-flag{color:var(--amber)}

.wide{max-width:1000px}
@media (max-width:600px){
  .status{gap:22px}
  .figs{gap:20px}
}

/* ---------- state tabs (second level, inside Outage Map) ---------- */
.subtabs{
  display:flex; gap:2px; flex-wrap:nowrap;
  border-bottom:1px solid var(--border);
  margin:0 0 18px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.subtabs::-webkit-scrollbar{display:none}
.subtab{
  font:inherit; font-size:19px; font-weight:550;
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  flex:1 0 auto; white-space:nowrap;      /* tabs share the full width of the line */
  padding:20px 14px 21px; cursor:pointer;
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--muted); margin-bottom:-1px; border-radius:6px 6px 0 0;
}
.subtab:hover{color:var(--text); background:var(--surface)}
.subtab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.subtab[aria-selected="true"]{
  color:var(--text); border-bottom-color:var(--accent); background:none;
}
.subtab .cnt{
  font-size:16px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums;
  background:var(--surface); border-radius:999px; padding:1px 6px;
}
.subtab[aria-selected="true"] .cnt{color:var(--accent); background:var(--tint)}
.subtab .cnt.hot{color:#fff; background:var(--sev-serious)}
.subtab[aria-selected="true"] .cnt.hot{color:#fff; background:var(--sev-serious)}

/* ---------- map controls ---------- */
.zoom{
  position:absolute; top:12px; right:12px; z-index:4;
  display:flex; flex-direction:column; gap:6px;
}
.zoom button{
  width:34px; height:32px; border-radius:8px; cursor:pointer; padding:0;
  border:1px solid #2b3360; background:rgba(10,14,38,.82); color:#dfe5ff;
  font:600 17px/1 var(--sans, inherit); backdrop-filter:blur(3px);
}
.zoom button:hover{border-color:#4a56a0; background:rgba(20,26,60,.92)}
.zoom button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.zoom button.reset{width:auto; padding:0 9px; font-size:10.5px;
                   font-weight:700; letter-spacing:.06em}
.map-wrap svg{cursor:grab; touch-action:none}
.map-wrap svg.dragging{cursor:grabbing}
.hint{
  position:absolute; right:12px; bottom:10px; z-index:4; pointer-events:none;
  font-size:11.5px; color:#7f89b5; letter-spacing:.02em; text-align:right;
}
@media (max-width:620px){ .hint{display:none} }

/* ============================================================
   HEADER CALL TO ACTION
   A solid button on the right of every header — the one thing
   this site cannot do for you is report your outage.
   ============================================================ */

.header-inner .spacer{flex:1}

.cta{
  display:inline-flex; align-items:center; gap:8px;
  flex-shrink:0; white-space:nowrap;
  background:var(--accent); color:#fff;
  font-size:14px; font-weight:600; letter-spacing:.005em;
  text-decoration:none; padding:8px 15px; border-radius:9px;
  transition:background .15s ease, transform .08s ease;
}
.cta:hover{background:var(--accent-deep)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cta svg{width:13px; height:13px; fill:none; stroke:currentColor;
         stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
@media (prefers-color-scheme: dark){ .cta{color:#08102a} }

/* A quieter version for inside the page body */
.cta.ghost{
  background:none; color:var(--accent);
  border:1px solid var(--accent); padding:9px 15px;
}
.cta.ghost:hover{background:var(--tint)}
@media (prefers-color-scheme: dark){ .cta.ghost{color:var(--accent)} }

/* ============================================================
   MAP GEOGRAPHY LAYERS
   The map now draws real county and state boundaries under the
   town dots. Everything below lives inside the camera <g>, so
   strokes use vector-effect:non-scaling-stroke to stay the same
   visual weight however far you zoom in.
   ============================================================ */

:root{
  --map-water:      #070a1e;   /* outside the states shown / ocean */
  --map-land:       #2c3768;   /* a FirstEnergy county with no outages */
  --map-land-off:   #10142b;   /* a county FirstEnergy does not serve —
                                  kept well clear of --map-land so the two
                                  never read as the same thing */
  --map-cty-line:   #5f6ea8;   /* county boundaries — drawn over every fill,
                                  so two same-coloured counties still show a
                                  line between them */
  --map-state-line: #a8b6e8;   /* state boundaries */
  --map-context:    #151a35;   /* a state you are not looking at */
  --map-ctx-line:   #262e55;
  --map-far:        #0d1128;   /* the states around the edge, for context only */
  --map-far-line:   #1b2143;
  --map-label:      #aab6e0;   /* county name labels */
  --map-label-halo: #0b1029;
}

/* Fills carry no stroke of their own. Borders are three separate passes drawn
   on top of every fill — otherwise the next county's fill paints over half of
   its neighbour's outline and the line disappears wherever two counties happen
   to share a colour. */
.geo-county{stroke:none}

.geo-county-line{
  fill:none; stroke:var(--map-cty-line); stroke-width:1.15;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.geo-county-line.ctx{stroke:var(--map-ctx-line); stroke-width:.9}

.geo-state{
  fill:none; stroke:var(--map-state-line); stroke-width:1.7;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.geo-state.ctx{stroke:var(--map-ctx-line); stroke-width:1.2}

.geo-far{fill:var(--map-far); stroke:var(--map-far-line); stroke-width:1;
         stroke-linejoin:round; vector-effect:non-scaling-stroke}

.geo-dot{vector-effect:non-scaling-stroke}
/* once the town areas carry the colour, the dot is only a marker for where the
   town centre is */
.geo-dot.pin{fill:#0a0f28; stroke:#c3ccec; vector-effect:non-scaling-stroke}
.geo-label{
  fill:var(--map-label); font-weight:600; letter-spacing:.02em;
  text-anchor:middle; pointer-events:none; paint-order:stroke;
  stroke:var(--map-label-halo); stroke-width:3px; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* Named so they cannot collide with the .town / .county classes the outage
   table uses — an SVG <text> picking up the table's font-size is exactly the
   kind of bug that only shows up when you zoom in. */
.geo-label-county{
  fill:var(--map-label); font-weight:600; letter-spacing:.07em; opacity:.9;
}
.geo-label-town{
  fill:#bfcaea; font-weight:650; letter-spacing:.01em;
  transition:fill .1s ease;
}
/* Hovering a town lifts its NAME to a lighter shade — the same idea as a county
   lightening, just applied to the text, since towns have no area of their own.
   The dot lifts with it, by brightness rather than by an outline. */
.geo-label-town.hot{fill:#ffffff}
.geo-dot{transition:filter .1s ease}
.geo-dot.hot{filter:brightness(1.5)}

.legend .key.sq{border-radius:3px; width:12px; height:12px;
                box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.legend .grp{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.legend .lbl{font-weight:600; color:var(--text); font-size:12px;
             letter-spacing:.05em; text-transform:uppercase}

/* the scale readout in the corner of the map */
.scalebar{
  position:absolute; left:12px; bottom:10px; z-index:4; pointer-events:none;
  font-size:11px; color:#93a0cc; letter-spacing:.02em;
}
.scalebar .rule{display:block; height:5px; border:1px solid #93a0cc;
                border-top:0; margin-bottom:3px}

/* ============================================================
   POWER-OUT PAGE
   ============================================================ */

.now{
  border:1px solid var(--sev-serious);
  background:color-mix(in srgb, var(--sev-serious) 9%, transparent);
  border-radius:14px; padding:20px 24px; margin:0 0 16px;
}
/* the help-center button sits just under the urgent box */
.help-link{margin:0 0 34px}
.now h2{color:var(--sev-serious); margin-bottom:10px}
.now p{margin:0 0 14px}
.now p:last-child{margin-bottom:0}
/* A second line inside one of the urgent paragraphs. It gets the same gap
   that separates the paragraphs themselves, so the box reads as evenly spaced. */
.now .sub{display:block; margin-top:14px}
.now .big{font-size:22px; font-weight:700; letter-spacing:-.01em}
.now a{color:var(--sev-serious); font-weight:600}

.steps{counter-reset:step; list-style:none; padding:0; margin:0}
.steps > li{
  counter-increment:step; position:relative;
  padding:0 0 26px 46px; margin:0;
}
.steps > li::before{
  content:counter(step);
  position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tint); color:var(--accent);
  font-size:14px; font-weight:700;
}
.steps > li:last-child{padding-bottom:0}
.steps h3{font-size:17px; margin:2px 0 7px; letter-spacing:-.012em}
.steps p{margin:0 0 8px; color:var(--muted)}
.steps p:last-child{margin-bottom:0}
.steps strong{color:var(--text)}

.tiles{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:0}
/* icon and title share the top row; the text runs full width beneath them */
.tile{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center;
}
/* a tile marked wide runs the full width of the grid, whatever the column count */
.tile.wide{grid-column:1 / -1}
.tile h3{font-size:16px; margin:0; letter-spacing:-.012em}
.tile p{grid-column:1 / -1; margin:12px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6}
.tile .ico{
  width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center; background:var(--tint); color:var(--accent);
}
.tile .ico svg{width:17px; height:17px; fill:none; stroke:currentColor;
               stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

.dont{border-color:color-mix(in srgb, var(--sev-critical) 40%, var(--border))}
.dont .ico{background:color-mix(in srgb, var(--sev-critical) 13%, transparent);
           color:var(--sev-critical)}

.phones{width:100%; border-collapse:collapse; font-size:14.5px}
.phones th, .phones td{padding:11px 14px; border-bottom:1px solid var(--border); text-align:left}
.phones tr:last-child td{border-bottom:0}
.phones td.tel{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; text-align:right}
.phones a{color:var(--accent); text-decoration:none}
.phones a:hover{text-decoration:underline}
.phones .st{color:var(--muted); font-size:13px}

h2.sec{
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:44px 0 18px;
}
h2.sec:first-of-type{margin-top:0}
/* a section whose boxes are all warnings gets a heading to match them */
h2.sec.warn{color:var(--sev-serious)}

.toc{
  display:flex; gap:8px; flex-wrap:wrap; margin:0 0 40px;
}
.toc a{
  font-size:13.5px; font-weight:700; text-decoration:none;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
}
.toc a:hover{border-color:var(--accent); color:var(--accent)}

@media (max-width:760px){
  .header-inner{gap:12px}
  .cta span.long{display:none}
  .cta{padding:8px 12px}
}

/* Below this width the three tabs plus the button cannot share one line, so
   the navigation moves to a second row instead of pushing the button off
   the screen. */
@media (max-width:640px){
  .header-inner{
    height:auto; flex-wrap:wrap; row-gap:0; padding:9px 14px 0;
  }
  .brand{order:1}
  .spacer{order:2}
  .cta{order:3}
  /* Four tabs will not fit on one phone-width line. They wrap onto a second
     row rather than scrolling off the edge, where nobody would find them. */
  .nav{
    order:4; width:100%; height:auto; margin-top:7px;
    gap:0; flex-wrap:wrap; row-gap:0;
  }
  .nav a{height:38px; padding:0 12px 0 0; margin-right:14px; font-size:14.5px}
  .site-header{position:static}
}
@media (max-width:560px){
  .subtab{padding:8px 9px 9px; font-size:13px}
  .steps > li{padding-left:40px}
}

/* ============================================================
   THE TOWN NAME IN THE TABLE IS A CONTROL
   Click it and the map flies to that town. The page does not
   scroll — you looked the town up to read its figures, so the
   map moves quietly and is waiting when you go back to it.
   ============================================================ */

.rowgo{
  font:inherit; color:inherit; text-align:left;
  background:none; border:0; padding:0; margin:0;
  display:block; width:100%; cursor:pointer;
  border-radius:6px;
}
.rowgo .town{ opacity:.84; transition:opacity .1s ease, color .1s ease }
.rowgo .county{ transition:color .1s ease }
.rowgo:hover .town,
.rowgo:focus-visible .town{ opacity:1 }
.rowgo:hover .county,
.rowgo:focus-visible .county{ color:var(--text) }
.rowgo:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* the one currently shown on the map */
.rowgo.on .town{ opacity:1; color:var(--accent) }
.rowgo.on .county{ color:var(--accent); opacity:.75 }

/* the way back out of a county or town you clicked into */
.clearfocus{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  margin-top:9px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--muted);
}
.clearfocus::before{content:"← "}
.clearfocus:hover{border-color:var(--accent); color:var(--accent)}
.clearfocus:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* the small sourced note inside a card, and the note that follows one */
.card .src{margin:16px 0 0; color:var(--muted); font-size:14px}
.after{color:var(--muted); font-size:14px; margin:14px 0 0; max-width:76ch}

/* ---------- welcome text above the state tabs (home = map page) ----------
   Same h1 and .lead sizes the old home page used; the two paragraphs sit
   closer together, then the usual gap before the tabs. */
.intro .lead{margin-bottom:14px; max-width:none}   /* run the full width of the tabs line */
.intro .lead:last-child{margin-bottom:38px}

/* ============================================================
   PHONE HEADER (v40)
   Logo, page tabs and the Report button share one row. The tabs
   scroll sideways, the same way the state tabs do, instead of
   wrapping onto a second line.
   ============================================================ */
@media (max-width:640px){
  .header-inner{
    height:54px; flex-wrap:nowrap; padding:0 0 0 14px; gap:0;
  }
  .brand{order:0; margin-right:4px}
  .nav{
    order:0; flex:1 1 auto; min-width:0; width:auto;
    height:100%; margin:0; gap:0; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    /* soft fade on whichever edge has more tabs hidden behind it
       (the fade-l / fade-r classes are set by the small script under the header) */
  }
  .nav.fade-r{
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
            mask-image:linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
  }
  .nav.fade-l{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px);
            mask-image:linear-gradient(90deg, transparent 0, #000 16px);
  }
  .nav.fade-l.fade-r{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{height:100%; padding:0 10px; margin:0; font-size:14px; flex:none}
  .nav a:first-child{margin-left:6px}
  .nav a:last-child{margin-right:48px}  /* room to scroll the last tab clear of the logo */
  .spacer{display:none}
  .cta{order:0; margin:0 14px 0 8px; padding:7px 11px; font-size:13px; gap:6px}
}
@media (max-width:400px){
  /* the shorter label buys the tabs about 50px on the smallest phones */
  .cta .txt{font-size:0}
  .cta .txt::before{content:"Report"; font-size:13px}
}

/* ============================================================
   SORT (v41)
   Sits in the header above the row numbers and reads like the other
   column labels. Its menu uses the search field's box.
   ============================================================ */
.sortbtn{font:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.sortbtn:hover{color:var(--text)}
.sortbtn svg{width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .15s}
.sortbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sortbtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.sortmenu{position:fixed; z-index:30; min-width:180px; margin:0; padding:5px; list-style:none;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow)}
.sortmenu[hidden]{display:none}
.sortmenu li{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 11px; border-radius:7px; cursor:pointer; outline:none;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--muted)}
.sortmenu li:hover, .sortmenu li.act{background:var(--bg)}
.sortmenu li svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; visibility:hidden}
.sortmenu li[aria-selected="true"] svg{visibility:visible}

/* ============================================================
   SHOW MORE / LESS (v41)
   Count in the middle, a chevron above to show fewer, one below
   to show more. The arrows take only the height of the chevron
   you see, so the spacing is the same whichever arrows show;
   their tap area is enlarged invisibly.
   ============================================================ */
:root{
  --pg-top:    10px;   /* divider line to the first thing under it */
  --pg-gap:    10px;   /* between the count and each arrow */
  --pg-bottom: 10px;   /* last thing to the bottom of the table */
  --pg-arrow:  10px;   /* arrow width */
  --pg-line:  100%;    /* length of the divider line */
}
.pager{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--pg-gap);
  padding:var(--pg-top) 0 var(--pg-bottom); user-select:none; -webkit-user-select:none}
.pager::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:var(--pg-line); height:1px; background:var(--border)}
.pager[hidden]{display:none}
.pager .count{font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; line-height:1}
.pager .count strong{color:inherit; font-weight:inherit}
.pager button{position:relative; font:inherit; background:none; border:0; color:var(--muted); cursor:pointer;
  padding:0; display:block; transition:color .15s}
.pager button::after{content:""; position:absolute; inset:-9px -18px}
.pager button[hidden]{display:none}
.pager button svg{display:block; width:var(--pg-arrow); height:calc(var(--pg-arrow) * .6); fill:none;
  stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.pager button:hover{color:var(--accent)}
.pager button:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}

/* Per-state arrow spacing (v44), set in the arrow tuner.
   first = "10 of 128" + down arrow · mid = up + count + down · end = up + count */
:root{
  --pg1-top: 10px;  --pg1-gap: 7px;                          --pg1-bottom: 10.5px;
  --pg2-top: 10px;  --pg2-gap-up: 6px;  --pg2-gap-dn: 10px;  --pg2-bottom: 10px;
  --pg3-top: 8.5px; --pg3-gap: 4px;                          --pg3-bottom: 11.5px;
}
.pager.s-first, .pager.s-mid, .pager.s-end{gap:0}
.pager.s-first{padding:var(--pg1-top) 0 var(--pg1-bottom)}
.pager.s-first .dn{margin-top:var(--pg1-gap)}
.pager.s-mid{padding:var(--pg2-top) 0 var(--pg2-bottom)}
.pager.s-mid .count{margin:var(--pg2-gap-up) 0 var(--pg2-gap-dn)}
.pager.s-end{padding:var(--pg3-top) 0 var(--pg3-bottom)}
.pager.s-end .count{margin-top:var(--pg3-gap)}

/* the one-paragraph source note under the table */
.card.plain{padding:17px 20px}
.card.plain p{margin:0; color:var(--muted); font-size:14.5px; font-weight:600}

/* ============================================================
   SPACING (v42)
   The gap from the intro sentence to the state tabs matches the
   gap from the heading to the sentence; the tabs are a little
   shorter on desktop so that gap can close without the hover
   background touching the text. Less room under the bottom note.
   ============================================================ */
.intro .lead:last-child{margin-bottom:10px}
.subtab{padding-top:14px; padding-bottom:15px}
main.wide{padding-bottom:58px}
/* Managing an Outage: shorter gap between the disclaimer and the footer */
main.out{padding-bottom:39px}
@media (max-width:560px){
  .intro .lead:last-child{margin-bottom:17px}
  .subtab{padding:8px 9px 9px}
  main.wide{padding-bottom:44px}
}
@media (max-width:560px){ main.out{padding-bottom:30px} }