/*
Theme Name: LFW District Classic
Theme URI: https://lfw.com/
Author: LFW.com LLC
Author URI: https://lfw.com/
Description: A classic theme for water and utility districts. Pages are built from sections in the LFW Page Builder box (flexible content, no block editor): an opening with three top tasks beside today's reservoir gauge, a status strip, outages with a service-zone map and address check, the bill and meter, water quality and lead service lines, conservation, projects, the next board meeting and an email notices band. Inner pages add a bill lookup, rates with a bill estimate, the reservoir and drought stages, data tables for test results, a meetings center, a document center, people, a contact directory, jobs and request forms. Lookups, filters and search run in the visitor's browser and send nothing. Alerts come from LFW Site Alerts, printed into the page. Light color scheme only. Built for WCAG 2.2 AA.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lfw-district-classic
*/

/* Overpass for everything, weights 400, 600 and 700. Reservoir blue, teal pipe, sediment alert,
   hydrant orange. Light only: government sites do not ship a dark scheme (Leland, 10/27).
   Overpass descends from Highway Gothic, the lettering of US road and public works signs; one
   plain family, headlines bold at most with normal spacing (Leland, 9/26 and 10/27). SIL Open Font
   License 1.1 (assets/fonts/OFL-overpass.txt). */
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: optional; src: url(assets/fonts/overpass-var.woff2) format("woff2"); }
@font-face { font-family: "Overpass"; font-style: italic; font-weight: 100 900; font-display: optional; src: url(assets/fonts/overpass-var-italic.woff2) format("woff2"); }

:root {
  --page: #F6FBFB;
  --card: #FFFFFF;
  --clear: #E5F3F3;
  --res: #0A3A4A;
  --res-rule: #2A5B6A;
  --res-muted: #B9D7DC;
  --head: #0A3A4A;
  --ink: #0B2A34;
  --muted: #45616A;
  --rule: #C9DEE0;
  --link: #0B6169;
  --teal: #0E7C86;
  --teal-dk: #0B6169;
  --aqua: #5CD3E0;
  --orange: #B84A0E;
  --orange-dk: #9A3D0B;
  --orange-text: #A8430C;
  --sed: #CBB994;
  --sed-soft: #F3ECDC;
  --hover: #B84A0E;
  --focus: #B84A0E;
  --tint: #EEF7F7;
  --z-normal: #E9F4F4;
  --z-flushing: #CDEBEE;
  --z-boil: #F6D9C4;
  --z-repair: #F3E5CF;
  --z-main: #8FB7BE;
  --serif: "Overpass", "Arial Narrow", Arial, sans-serif;
  --sans: "Overpass", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 18px/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--hover); }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
em { font-style: italic; }
[hidden] { display: none !important; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.acct :focus-visible, .reservoir :focus-visible, .foot :focus-visible, .lfw-concept-bar :focus-visible, .signup :focus-visible, .q-report :focus-visible { outline-color: var(--aqua); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--aqua); color: #0A3A4A; padding: 12px 18px; font-weight: 700; }
.skip:focus { top: 12px; }

/* Example-site notice */
.lfw-concept-bar { background: #062530; color: #E5F3F3; font-size: 15px; line-height: 1.45; text-align: center; padding: 8px 16px; margin: 0; }
.lfw-concept-bar a { color: var(--aqua); }
.lfw-concept-bar a:hover { color: #fff; }

/* Account bar and masthead */
.acct { background: var(--res); color: #E5F3F3; font-size: 16px; }
.acct-in { display: flex; align-items: center; gap: 8px 20px; }
.acct ul { display: flex; flex-wrap: wrap; gap: 4px; }
.acct ul a { display: block; padding: 12px 14px; color: #E5F3F3; text-decoration: none; font-weight: 400; }
.acct ul li:first-child a { padding-left: 0; }
.acct ul a:hover, .acct ul a[aria-current="page"] { text-decoration: underline; color: #fff; }
.break { margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--orange); color: #fff; padding: 9px 16px; font-weight: 700; text-decoration: none; border-radius: 999px; }
.break:hover { background: var(--orange-dk); color: #fff; }
.b-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; }
.top { background: var(--page); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 12px 32px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--head); }
.brand:hover { color: var(--head); }
.drop { width: 44px; height: 55px; flex: none; }
.d-body { fill: var(--head); }
.d-w1 { stroke: var(--aqua); }
.d-w2 { stroke: var(--page); }
.brand-t { display: flex; flex-direction: column; }
.b1 { font: 400 34px/1 var(--serif); }
.b2 { font-size: 14px; color: var(--muted); margin-top: 4px; }
.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px; }
.nav a { display: block; padding: 10px 13px; color: var(--ink); text-decoration: none; font-weight: 400; }
.nav a:hover { color: var(--link); text-decoration: underline; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; color: var(--link); }

/* Alerts */
.alert { background: var(--sed); color: var(--ink); font-size: 16px; }
.alert-in { padding-top: 12px; padding-bottom: 12px; }
.alert-tag { flex: none; background: var(--res); color: #fff; font: 700 14px/1 var(--sans); padding: 7px 10px 6px; margin-top: 2px; border-radius: 4px; }
.alert-warning .alert-tag, .alert-emergency .alert-tag { background: var(--orange); }
.alert-h { font-weight: 700; }
.alert a { color: var(--ink); font-weight: 700; }

/* Hero */
.hero { background: var(--clear); padding: 64px 0 72px; }
.hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.hero-in > * { min-width: 0; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--link); }
.hero h1 { font: 400 74px/0.98 var(--serif); color: var(--head); margin: 14px 0 18px; }
.hero h1 em { display: block; color: var(--link); }
.lede { font-size: 21px; }
.tasks { margin-top: 28px; border-top: 2px solid var(--head); }
.tasks a { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.tasks a:hover .t-n { text-decoration: underline; color: var(--hover); }
.t-n { font: 400 32px/1.05 var(--serif); color: var(--head); }
.t-d { font-size: 16px; color: var(--muted); }

/* Reservoir panel */
.reservoir { background: var(--res); color: #E5F3F3; border-radius: 22px; padding: 28px 30px 24px; }
.r-title { font: 400 30px/1.1 var(--serif); padding-bottom: 16px; border-bottom: 1px solid var(--res-rule); }
.r-body { display: grid; grid-template-columns: 128px 1fr; gap: 28px; padding-top: 22px; }
.r-body > * { min-width: 0; }
.gauge { display: flex; gap: 12px; height: 330px; }
.g-svg { height: 100%; width: auto; flex: none; }
.g-tube { fill: #0F4C5E; }
.g-water { fill: var(--aqua); }
.g-surface { fill: #A6EAF1; }
.g-mark { stroke: #F08A4B; }
.g-rim { fill: none; stroke: #E5F3F3; }
.g-scale { display: flex; flex-direction: column; justify-content: space-between; font-size: 14px; color: var(--res-muted); height: 100%; margin: -9px 0; }
.r-pct { display: flex; align-items: baseline; gap: 8px; }
.r-pct .num { font: italic 400 130px/0.85 var(--serif); color: var(--aqua); }
.r-pct .unit { font: 400 30px/1 var(--serif); }
.r-change { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; }
.arrow.down { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 11px solid #CBB994; }
.arrow.up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 11px solid var(--aqua); }
.r-stats { margin: 18px 0 0; }
.r-stats div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--res-rule); }
.r-stats dt { color: var(--res-muted); font-size: 16px; }
.r-stats dd { font-weight: 600; }
.stage { background: #E5F3F3; color: #0A3A4A; padding: 0 10px; border-radius: 999px; }
.r-rule { margin-top: 14px; font: italic 400 21px/1.3 var(--serif); color: #fff; }
.r-foot { margin-top: 18px; font-size: 14px; color: var(--res-muted); }
.r-foot a { color: var(--aqua); font-weight: 600; }

/* Today */
.today { background: var(--card); border-bottom: 1px solid var(--rule); padding: 30px 0; }
.today-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: 14px; }
.today-head h2 { font: 400 28px/1 var(--serif); color: var(--head); }
.today-head p { color: var(--muted); font-size: 16px; }
.today-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.today-list.n4 { grid-template-columns: repeat(4, 1fr); }
.today-list.n3 { grid-template-columns: repeat(3, 1fr); }
.today-list li { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 4px solid var(--teal); }
.today-list li.note { border-top-color: #CBB994; }
.today-list li.warn { border-top-color: var(--orange); }
.tl-k { font-size: 14px; font-weight: 600; color: var(--muted); }
.tl-v { font: 400 21px/1.2 var(--serif); }
.tl-v a { color: var(--ink); }

/* The pipe that runs down the homepage */
.sect { --bg: var(--page); background: var(--bg); }
.sect.bill, .sect.save { --bg: var(--card); }
.sect.quality, .sect.board { --bg: var(--clear); }
.piped { padding-top: 72px; padding-bottom: 72px; }
.ph { font: 400 52px/1.05 var(--serif); color: var(--head); margin-bottom: 34px; }

/* Outages */
.out-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "map check" "map list"; gap: 24px 40px; align-items: start; }
.out-check { grid-area: check; } .out-map { grid-area: map; } .out-list { grid-area: list; }
.out-list .work:first-child { margin-top: 0; }
.out-grid > * { min-width: 0; }
.k { display: inline-block; width: 18px; height: 12px; border-radius: 3px; flex: none; }
.work { margin-top: 20px; padding: 16px 0 16px 20px; border-left: 5px solid var(--teal); }
.work.repair, .work.boil { border-left-color: var(--orange); }
.w-kind { font-size: 14px; font-weight: 700; color: var(--link); }
.repair .w-kind, .boil .w-kind { color: var(--orange-text); }
.work h3 { font: 400 30px/1.1 var(--serif); margin: 4px 0 6px; color: var(--head); }
.w-link { margin-top: 6px; font-weight: 600; }
.out-call { margin-top: 18px; font-weight: 600; }

/* Fields and buttons shared by lookups and forms */
.lookup label { display: block; font-weight: 600; margin-bottom: 8px; }
.addr-row, .su-row { display: flex; gap: 8px; }
.addr-row input, .su-row input { flex: 1; min-width: 0; height: 52px; border: 2px solid var(--head); border-radius: 12px; padding: 0 14px; font: 400 18px var(--sans); color: var(--ink); background: var(--card); }
::placeholder { color: var(--muted); opacity: 1; }
.addr-row button, .su-row button { height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--res); color: #fff; font: 600 18px var(--sans); cursor: pointer; flex: none; }
.addr-row button:hover { background: var(--teal-dk); }
.note { font-size: 14px; color: var(--muted); margin-top: 8px; }
.lk-out:empty { display: none; }
.lk-out { margin-top: 14px; border-left: 4px solid var(--teal); background: var(--tint); padding: 12px 16px; border-radius: 0 12px 12px 0; }
.lk-hit { font-weight: 700; }
.lk-miss { font-weight: 600; }
.lk-status { display: inline-block; margin: 6px 0; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 16px; background: var(--card); border: 1px solid var(--rule); }
.lk-status.lk-boil { background: var(--orange); color: #fff; border-color: var(--orange); }
.lk-status.lk-flushing { border-color: var(--teal); }
.lk-facts { margin: 8px 0 0; }
.use { margin-top: 12px; }
.use-h { font-weight: 600; font-size: 16px; }
.use-chart { width: 100%; max-width: 440px; margin: 6px 0; }
.u-bar { fill: var(--teal); opacity: 0.55; }
.u-bar.u-now { opacity: 1; }
.u-lbl { font: 600 14px/1 var(--sans); fill: var(--muted); }
.use-t { font-size: 16px; color: var(--muted); }
.pay-btn { margin-top: 14px; }
.pay-done { margin-top: 10px; font-weight: 600; }
.pay-done:empty { display: none; }
.btn { display: inline-block; padding: 13px 24px; border-radius: 999px; font: 600 18px/1.2 var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn.teal, .req-form .btn { background: var(--teal); color: #fff; }
.btn.teal:hover, .req-form .btn:hover { background: var(--teal-dk); color: #fff; }
.btn.line { border-color: var(--head); color: var(--head); background: transparent; }
.btn.line:hover { background: var(--clear); color: var(--head); }

/* Bill */
.bill-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.bill-grid > * { min-width: 0; }
.meter { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.m-dial { width: 220px; }
.md-ring { fill: #0A3A4A; }
.md-face { fill: #E5F3F3; }
.md-ticks { stroke: #0A3A4A; }
.md-hand { stroke: var(--orange); }
.odo { display: flex; gap: 4px; align-items: center; }
.odo span { width: 38px; height: 52px; display: grid; place-items: center; background: #0A3A4A; color: var(--aqua); font: 600 30px/1 var(--sans); font-variant-numeric: tabular-nums; border-radius: 4px; }
.odo span.g { width: auto; background: none; color: var(--muted); font-size: 16px; margin-left: 6px; }
.big-fig { font: 400 40px/1 var(--serif); color: var(--head); }
.big-fig em { font-size: 96px; color: var(--link); }
.bill-sub { margin-top: 12px; font-size: 21px; max-width: 30em; }
.bill-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.bill-links { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.bill-links li { border-top: 1px solid var(--rule); }
.bill-links a { display: block; padding: 10px 0; font-weight: 400; }

/* Water quality */
.q-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; }
.q-grid > * { min-width: 0; }
.q-report { background: var(--res); color: #E5F3F3; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.q-stamp { background: var(--aqua); color: #0A3A4A; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.q-report h3 { font: 400 40px/1.05 var(--serif); color: #fff; }
.q-report .btn.teal { background: #E5F3F3; color: #0A3A4A; }
.q-report .btn.teal:hover { background: #fff; color: #0A3A4A; }
.q-lead h3 { font: 400 36px/1.1 var(--serif); color: var(--head); margin-bottom: 8px; }
.q-lead form { margin-top: 18px; }
.lines { width: 100%; height: 18px; border-radius: 9px; margin-top: 26px; }
.l-ok { fill: var(--teal); background: var(--teal); } .l-galv { fill: #CBB994; background: #CBB994; } .l-lead { fill: var(--orange); background: var(--orange); }
.lines-key { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.lines-key li { display: flex; align-items: center; gap: 10px; }
.q-note { margin-top: 14px; color: var(--muted); }

/* Big figures */
.save-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.save-grid.n4 { grid-template-columns: repeat(4, 1fr); }
.save-grid.n2 { grid-template-columns: repeat(2, 1fr); }
.save-grid li { border-top: 2px solid var(--head); padding-top: 18px; }
.s-fig { font: italic 400 60px/1 var(--serif); color: var(--link); }
.save-grid h3 { font: 600 21px/1.2 var(--sans); margin: 12px 0 6px; }
.s-link { margin-top: 8px; font-weight: 600; }

/* Projects */
.proj-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
.proj-grid > * { min-width: 0; }
.plant { margin: 0; }
.plant img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 75%; border-radius: 20px; }
.plant figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.plant .cap { display: block; font-weight: 700; color: var(--ink); }
.plant a { color: var(--muted); }
.proj-list article { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.proj-list article:first-child { padding-top: 0; }
.n-meta { font-size: 14px; font-weight: 600; color: var(--link); }
.proj-list h3 { font: 400 30px/1.1 var(--serif); margin: 6px 0; color: var(--head); }
.proj-list h3 a { color: var(--head); text-decoration: none; }
.proj-list h3 a:hover { text-decoration: underline; color: var(--hover); }

/* Board */
.board-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.board-in > * { min-width: 0; }
.m-when { font: 400 26px/1.3 var(--serif); }
.m-state-line { margin: 14px 0; font-weight: 600; }
.agenda { counter-reset: a; margin: 18px 0; }
.agenda li { counter-increment: a; display: grid; grid-template-columns: 36px 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.agenda li::before { content: counter(a); font: italic 400 24px/1 var(--serif); color: var(--link); }
.m-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.iw-h { font: italic 400 34px/1 var(--serif); color: var(--head); margin-bottom: 14px; }
.iwant li { border-top: 1px solid var(--rule); }
.iwant a { display: block; padding: 9px 0; font-weight: 400; color: var(--ink); text-decoration: none; }
.iwant a:hover { color: var(--hover); text-decoration: underline; }

/* Email notices band */
.signup { background: var(--teal-dk); color: #fff; padding: 56px 0; }
.su-in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.su-in > * { min-width: 0; }
.signup h2 { font: 400 42px/1.05 var(--serif); margin-bottom: 10px; }
.signup label { display: block; font-weight: 600; margin-bottom: 8px; }
.signup .su-row input { border-color: #fff; background: #fff; color: #0B2A34; }
.signup .su-row input::placeholder { color: #45616A; }
.signup .su-row button { background: #0A3A4A; }
.signup .su-row button:hover { background: #062530; }
.su-note { margin-top: 8px; font-size: 15px; }
.signup .rf-e { color: #fff; }
.signup .req-done { background: #fff; color: #0B2A34; }

/* Inner pages */
.page-head { background: var(--clear); border-bottom: 1px solid var(--rule); padding: 28px 0 40px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; margin-bottom: 14px; }
.crumbs li + li::before { content: "/"; margin: 0 8px 0 4px; color: var(--muted); }
.page-head h1 { font: 400 56px/1.02 var(--serif); color: var(--head); }
.ph-plain h1 { max-width: 22ch; }
.ph-lede { font-size: 21px; max-width: 58ch; margin-top: 14px; }
.panel-k { font-size: 15px; font-weight: 600; color: var(--link); margin-bottom: 8px; }
.page-head .st-meta { margin-bottom: 8px; }
.dh-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: end; }
.dh-grid > * { min-width: 0; }
.due { background: var(--card); border: 1px solid var(--rule); border-top: 5px solid var(--orange); border-radius: 14px; padding: 18px 20px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.due-k { grid-column: 1 / -1; font-size: 15px; font-weight: 700; color: var(--orange-text); }
.due-d { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--rule); min-width: 76px; border-radius: 8px; overflow: hidden; }
.due-m { width: 100%; text-align: center; background: var(--res); color: #fff; font-weight: 700; font-size: 14px; padding: 4px 0; }
.due-n { font: 400 44px/1.1 var(--serif); padding: 2px 0 4px; }
.due-t { font-size: 16px; }
.due .btn { grid-column: 1 / -1; text-align: center; background: var(--teal); color: #fff; margin-top: 8px; }
.due .btn:hover { background: var(--teal-dk); color: #fff; }

.sec-in { padding-top: 56px; }
.sec-in h2 { font: 400 38px/1.08 var(--serif); color: var(--head); margin-bottom: 18px; }
.sec-intro { max-width: 66ch; margin: -6px 0 20px; }
main > .sec-in:last-child, main > .wrap:last-child, main > section:last-child.sec-in { padding-bottom: 72px; }
.page-body { padding-top: 40px; padding-bottom: 72px; }
.prose > * { max-width: 70ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul { list-style: disc; padding-left: 24px; }
.prose ol { list-style: decimal; padding-left: 24px; }
.prose li { margin: 4px 0; }
.prose h3 { font: 600 21px/1.3 var(--sans); margin: 22px 0 8px; }
.prose-notice > p:first-of-type { background: var(--sed-soft); border-left: 5px solid var(--orange); padding: 14px 18px; border-radius: 0 12px 12px 0; }
.after { margin-top: 20px; font-weight: 600; }

.facts { margin: 0 0 22px; border-top: 2px solid var(--head); }
.facts div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; overflow-wrap: break-word; }
.lk-facts { border-top: 0; }
.lk-facts div { grid-template-columns: 1fr 2fr; padding: 7px 0; }
.lk-facts div:last-child { border-bottom: 0; }
.sec-in.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.sec-in.two > * { min-width: 0; }
.sec-in.two p + p { margin-top: 12px; }

.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pay-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pay-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pay-grid li { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--teal); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.pay-grid h3 { font: 400 28px/1.1 var(--serif); color: var(--head); }
.card-meta { font-size: 14px; font-weight: 700; color: var(--link); }
.pay-grid .card-link { margin-top: auto; padding-top: 4px; font-weight: 600; }

.faq { border-top: 2px solid var(--head); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 19px; }
.faq summary:hover { color: var(--link); }
.faq details p { padding: 0 0 16px; max-width: 70ch; }
.ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px; }
.ct-grid h3 { font: 600 18px/1.3 var(--sans); margin-bottom: 4px; }
.ct-grid p { font-size: 17px; }

/* How do I */
.sec { padding: 56px 0; border-top: 1px solid var(--rule); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-head h2 { font: 400 38px/1.08 var(--serif); color: var(--head); }
.sec-head a { font-weight: 600; }
.how-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.how-list a { display: block; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--rule); font-weight: 600; text-decoration: none; position: relative; }
.how-list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg); }
.how-list a:hover { text-decoration: underline; }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.story { border-top: 2px solid var(--head); padding-top: 14px; }
.st-meta { font-size: 15px; color: var(--muted); }
.story h3 { font: 400 28px/1.1 var(--serif); margin: 6px 0 8px; }
.story h3 a { color: var(--head); text-decoration: none; }
.story h3 a:hover { text-decoration: underline; color: var(--hover); }
.news-list { padding-top: 40px; padding-bottom: 72px; }
.releases { max-width: 820px; display: flex; flex-direction: column; gap: 28px; }
.releases h2 { font: 400 32px/1.1 var(--serif); margin: 6px 0 8px; }
.releases h2 a { color: var(--head); text-decoration: none; }
.releases h2 a:hover { text-decoration: underline; color: var(--hover); }
.nav-links { display: flex; gap: 16px; margin-top: 24px; }

/* Meetings preview */
.mtg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mtg { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; }
.mtg-when { font-weight: 700; color: var(--link); font-size: 16px; }
.mtg h3 { font: 400 26px/1.1 var(--serif); margin: 6px 0 2px; }
.mtg h3 a { color: var(--head); text-decoration: none; }
.mtg h3 a:hover { text-decoration: underline; }
.mtg-where { font-size: 16px; color: var(--muted); }
.mtg-items { margin: 14px 0 16px; list-style: disc; padding-left: 20px; font-size: 17px; }
.mtg-status { margin-top: auto; font-size: 15px; font-weight: 700; border-top: 1px solid var(--rule); padding-top: 10px; }

/* Meetings center */
.m-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding-top: 48px; padding-bottom: 72px; align-items: start; }
.m-layout > * { min-width: 0; }
.m-side { position: sticky; top: 16px; }
.side-h { font: 400 26px/1.1 var(--serif); color: var(--head); margin-bottom: 8px; }
.side-list { border-top: 2px solid var(--head); margin-bottom: 28px; }
.side-list a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; text-decoration: none; }
.side-list a:hover { text-decoration: underline; }
.speak { background: var(--sed-soft); border-left: 5px solid #CBB994; border-radius: 0 12px 12px 0; padding: 18px; font-size: 16px; }
.speak h2 { font: 600 19px/1.3 var(--sans); margin-bottom: 6px; }
.speak p + p { margin-top: 8px; font-weight: 600; }
.up { margin-bottom: 40px; }
.up h2 { font: 400 32px/1.1 var(--serif); color: var(--head); margin-bottom: 14px; }
.up-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.up-list li { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--teal); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.u-day { font-size: 15px; font-weight: 700; color: var(--link); }
.u-day b { font: 400 34px/1 var(--serif); color: var(--head); margin-left: 4px; letter-spacing: 0; }
.u-n { font-weight: 700; line-height: 1.3; margin-top: 6px; }
.u-w { font-size: 15px; color: var(--muted); }
.up-list a { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 16px; }
.m-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; margin-bottom: 32px; }
.mf-field { display: flex; flex-direction: column; gap: 4px; }
.mf-field label { font-weight: 600; font-size: 16px; }
.mf-field select, .mf-field input, .req-form input[type="text"], .req-form input[type="email"], .req-form input[type="tel"], .req-form input[type="date"], .req-form textarea { font: inherit; font-size: 17px; padding: 9px 12px; border: 2px solid var(--head); background: var(--card); color: var(--ink); border-radius: 10px; min-height: 46px; }
.mf-q { flex: 1 1 220px; }
.mf-count { flex-basis: 100%; font-size: 15px; color: var(--muted); }
.mf-count:empty { display: none; }
.m-none { font-weight: 600; margin: 8px 0 24px; }
.bd-sec { border-top: 2px solid var(--head); padding-top: 22px; margin-bottom: 48px; scroll-margin-top: 16px; }
.bd-head h2 { font: 400 34px/1.1 var(--serif); color: var(--head); }
.bd-when { font-weight: 700; color: var(--link); margin: 4px 0 8px; font-size: 17px; }
.bd-head p:last-child { max-width: 68ch; }
.mlist li { padding: 12px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.mlist li:first-child { border-top: 1px solid var(--rule); }
.m-date { font-weight: 600; }
.m-type { color: var(--muted); font-size: 17px; margin-top: 2px; }
.m-state { display: inline-block; margin-left: 10px; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--sed-soft); border: 1px solid #CBB994; padding: 1px 8px; border-radius: 999px; }
.m-doc { margin-top: 6px; }
.m-doc summary { cursor: pointer; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.m-doc ol, .m-doc ul { margin: 6px 0 6px 24px; font-size: 17px; }
.m-doc ol { list-style: decimal; }
.m-doc ul { list-style: disc; }
.m-note { font-size: 15px; color: var(--muted); margin-top: 4px; }

/* Tables: documents, rates, test results */
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: 2px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 17px; background: var(--card); border: 1px solid var(--rule); }
.doc-table caption { text-align: left; font: 600 18px/1.3 var(--sans); padding: 0 0 8px; }
.doc-table th { text-align: left; font-size: 15px; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--head); }
.doc-table tbody th { text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc-table td:first-child a { font-weight: 600; }
.doc-type { display: block; font-size: 15px; color: var(--muted); }
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.rate-grid > * { min-width: 0; }
.rate-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.lookup-card { background: var(--card); border: 1px solid var(--rule); border-top: 5px solid var(--teal); border-radius: 18px; padding: 26px 28px 28px; max-width: 780px; }
.lookup-card h2, .lookup-card h3 { font: 400 34px/1.1 var(--serif); color: var(--head); margin-bottom: 10px; }
.lk-intro { margin-bottom: 16px; max-width: 62ch; }
.est-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.est-row .btn { min-height: 46px; padding: 10px 22px; }

/* Reservoir page */
.resv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.hist { margin: 0; }
.hist h3 { font: 400 30px/1.1 var(--serif); color: var(--head); }
.hist figcaption p { color: var(--muted); margin: 4px 0 8px; }
.hist svg { width: 100%; }
.h-grid { stroke: var(--rule); stroke-width: 1; }
.h-ax { font: 400 15px/1 var(--sans); fill: var(--muted); }
.h-bar { fill: var(--teal); opacity: 0.6; }
.h-bar.h-now { opacity: 1; }
.h-watch { stroke: var(--orange); stroke-width: 3; }
.stages-h { margin-top: 48px; }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stages li { background: var(--card); border: 1px solid var(--rule); border-top: 5px solid var(--rule); border-radius: 14px; padding: 18px 20px; }
.stages li.now { border-top-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.st-level { font-size: 14px; font-weight: 700; color: var(--link); }
.stages h3 { font: 400 30px/1.1 var(--serif); color: var(--head); margin: 4px 0 8px; }
.st-now { display: inline-block; vertical-align: middle; font: 700 14px/1 var(--sans); background: var(--teal); color: #fff; padding: 5px 9px; border-radius: 999px; }

/* People, directory, jobs */
.people, .dir-list, .job-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.people.n5 { grid-template-columns: repeat(5, 1fr); }
.people.n4, .people.n2 { grid-template-columns: repeat(2, 1fr); }
.people li, .dir-list li, .job-list li { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--teal); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.people h3, .dir-list h3, .job-list h3 { font: 400 26px/1.1 var(--serif); color: var(--head); }
.pp-area, .job-meta { font-size: 14px; font-weight: 700; color: var(--link); }
.pp-role { font-weight: 600; }
.pp-term, .dir-topics { font-size: 15px; color: var(--muted); }
.pp-mail { margin-top: auto; padding-top: 8px; font-size: 16px; overflow-wrap: anywhere; }
.dc-who { font-weight: 600; }
.dir-c { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 16px; overflow-wrap: anywhere; }
.job-list { grid-template-columns: repeat(2, 1fr); }
.job-close { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 16px; }

/* Request forms */
.req { max-width: 1280px; }
.req-form { display: flex; flex-direction: column; gap: 16px; }
.rf { display: flex; flex-direction: column; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0; }
.rf label, .rf legend { font-weight: 600; }
.rf legend { margin-bottom: 4px; padding: 0; }
.opt { font-weight: 400; color: var(--muted); }
.rc { font-weight: 400 !important; display: flex; gap: 10px; align-items: center; min-height: 34px; }
.rc input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; }
.rf-h { font-size: 15px; color: var(--muted); }
.rf-e { font-size: 15px; font-weight: 700; color: var(--orange-text); }
.rf-e:empty { display: none; }
.req-form .btn { align-self: flex-start; }
.req-done:empty { display: none; }
.req-done { background: var(--tint); border-left: 4px solid var(--teal); padding: 12px 16px; font-weight: 600; border-radius: 0 12px 12px 0; }

/* Search */
.search-page { padding-bottom: 72px; }
.search-form { max-width: 760px; margin-bottom: 16px; }
.results { max-width: 820px; }
.results li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.r-kind { font-size: 14px; font-weight: 700; color: var(--link); }
.r-t { font: 400 28px/1.15 var(--serif); margin: 2px 0 4px; }
.r-d { font-size: 17px; color: var(--muted); }

/* Footer */
.foot { background: var(--res); color: #E5F3F3; padding: 72px 0 40px; font-size: 16px; }
.foot a { color: #E5F3F3; }
.foot a:hover { color: #fff; }
.foot-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; padding-bottom: 36px; border-bottom: 1px solid var(--res-rule); }
.foot-top > * { min-width: 0; }
.foot-name { font: 400 40px/1 var(--serif); margin-bottom: 14px; color: #fff; }
.foot address { font-style: normal; line-height: 1.7; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot-cols h2 { font: 600 14px/1 var(--sans); color: var(--aqua); margin-bottom: 14px; }
.foot-cols li { padding: 4px 0; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover, .foot-cols a[aria-current="page"] { text-decoration: underline; }
.foot-fict { margin-top: 28px; font-weight: 600; }
.foot-credit { margin-top: 8px; font-size: 14px; color: var(--res-muted); }

/* Responsive */
@media (max-width: 1100px) {
  .top-in { flex-wrap: wrap; }
  .nav { margin-left: 0; flex-basis: 100%; }
  .nav ul { gap: 0 4px; }
  .nav li:first-child a { padding-left: 0; }
  .out-grid { grid-template-areas: "check" "map" "list"; }
  .hero-in, .out-grid, .q-grid, .proj-grid, .board-in, .su-in, .foot-top, .resv-grid { grid-template-columns: 1fr; gap: 40px; }
  .today-list, .today-list.n4 { grid-template-columns: repeat(3, 1fr); }
  .bill-grid { grid-template-columns: 1fr; gap: 32px; }
  .stages, .up-list, .pay-grid.cols-4, .save-grid.n4 { grid-template-columns: repeat(2, 1fr); }
  .people.n5, .dir-list, .pay-grid { grid-template-columns: repeat(2, 1fr); }
  .m-layout { grid-template-columns: 1fr; gap: 24px; }
  .m-side { position: static; }
}
@media (max-width: 900px) {
  .sec-in.two, .rate-grid, .dh-grid, .mtg-grid, .news-grid, .ct-grid, .job-list { grid-template-columns: 1fr; }
  .how-list { grid-template-columns: repeat(2, 1fr); }
  .page-head h1 { font-size: 46px; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .acct-in { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .acct ul { gap: 0 4px; }
  .acct ul a { padding: 10px 10px 10px 0; }
  .break { margin-left: 0; justify-content: center; font-size: 15px; text-align: center; }
  .drop { width: 36px; height: 45px; }
  .b1 { font-size: 27px; }
  .nav ul { display: grid; grid-template-columns: 1fr 1fr; }
  .nav a, .nav li:first-child a { padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .alert-in { flex-direction: column; gap: 8px; }
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: 44px; }
  .lede { font-size: 19px; }
  .tasks a { grid-template-columns: 1fr; gap: 4px; }
  .t-n { font-size: 28px; }
  .reservoir { padding: 22px 18px; }
  .r-body { grid-template-columns: 92px 1fr; gap: 16px; }
  .gauge { height: 260px; gap: 6px; }
  .r-pct .num { font-size: 84px; }
  .r-pct .unit { font-size: 22px; }
  .r-stats div { flex-direction: column; align-items: flex-start; gap: 0; }
  .r-rule { font-size: 19px; }
  .today-list, .today-list.n4, .today-list.n3 { grid-template-columns: 1fr 1fr; }
  .piped { padding-top: 52px; padding-bottom: 52px; }
  .ph { font-size: 36px; }
      .addr-row, .su-row { flex-direction: column; }
  .addr-row input, .su-row input { flex: none; }
  .work h3, .proj-list h3 { font-size: 26px; }
  .big-fig em { font-size: 72px; }
  .bill-sub { font-size: 19px; }
  .bill-links { grid-template-columns: 1fr; }
  .odo span { width: 32px; height: 46px; font-size: 26px; }
  .q-report { padding: 24px 20px; }
  .q-report h3 { font-size: 32px; }
  .q-lead h3 { font-size: 30px; }
  .save-grid, .save-grid.n4, .save-grid.n2 { grid-template-columns: 1fr; gap: 22px; }
  .signup h2 { font-size: 32px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .page-head h1 { font-size: 40px; }
  .ph-lede { font-size: 19px; }
  .sec-in { padding-top: 44px; }
  .sec-in h2, .sec-head h2 { font-size: 32px; }
  .how-list, .stages, .up-list, .people, .people.n5, .people.n4, .people.n2, .dir-list, .pay-grid, .pay-grid.cols-2, .pay-grid.cols-4 { grid-template-columns: 1fr; }
  .facts div, .lk-facts div { grid-template-columns: 1fr; gap: 2px; }
  .lookup-card { padding: 20px 16px; }
  .lookup-card h2, .lookup-card h3 { font-size: 29px; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td, .doc-table tbody th { display: block; }
  .doc-table tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .doc-table td, .doc-table tbody th { border: 0; padding: 4px 14px; }
  .doc-table td:not(:first-child)::before, .data-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
  .rate-table td::before { content: none; }
  .m-filter { padding: 14px; }
  .mf-field { flex: 1 1 100%; }
  .est-row .btn { width: 100%; }
}

/* Type scale for Overpass: headings bold and a little tighter, numbers tabular. */
h1, h2, h3, .b1, .t-n, .r-title, .today-head h2, .tl-v, .ph, .work h3, .big-fig, .q-report h3, .q-lead h3, .proj-list h3, .m-when, .iw-h, .signup h2, .foot-name,
.page-head h1, .sec-in h2, .sec-head h2, .pay-grid h3, .story h3, .releases h2, .mtg h3, .side-h, .up h2, .bd-head h2, .lookup-card h2, .lookup-card h3, .hist h3, .stages h3,
.people h3, .dir-list h3, .job-list h3, .r-t, .due-n, .u-day b { font-weight: 700; letter-spacing: normal; }
.b1 { font-size: 28px; }
.hero h1 { font-size: 54px; line-height: 1.08; font-weight: 700; letter-spacing: normal; }
.hero h1 em { font-weight: 400; }
.t-n { font-size: 26px; }
.r-title { font-size: 24px; }
.r-pct .num { font: italic 400 120px/0.9 var(--serif); font-variant-numeric: tabular-nums; }
.r-pct .unit { font: 600 24px/1 var(--serif); }
.r-rule { font: italic 400 19px/1.4 var(--sans); }
.today-head h2 { font-size: 24px; }
.tl-v { font-size: 19px; font-weight: 600; }
.ph { font-size: 42px; }
.work h3, .proj-list h3 { font-size: 25px; }
.big-fig { font: 600 32px/1 var(--serif); }
.big-fig em { font-style: italic; font-weight: 400; font-size: 92px; }
.s-fig { font: italic 400 56px/1 var(--serif); }
.q-report h3 { font-size: 34px; }
.q-lead h3 { font-size: 30px; }
.m-when { font: 600 22px/1.35 var(--serif); }
.m-when em { font-style: normal; }
.agenda li::before { font: 700 20px/1.2 var(--serif); }
.iw-h { font: 700 28px/1 var(--serif); }
.signup h2 { font-size: 36px; }
.foot-name { font-size: 32px; }
.page-head h1 { font-size: 48px; }
.sec-in h2, .sec-head h2 { font-size: 32px; }
.pay-grid h3, .mtg h3, .story h3, .people h3, .dir-list h3, .job-list h3 { font-size: 23px; }
.releases h2, .stages h3, .hist h3 { font-size: 26px; }
.lookup-card h2, .lookup-card h3 { font-size: 28px; }
.bd-head h2, .up h2 { font-size: 28px; }
.side-h { font-size: 22px; }
.r-t { font-size: 23px; }
.due-n { font-size: 38px; }
.u-day b { font-size: 28px; }
.odo span, .nav a, .acct ul a, .break, .eyebrow, .tl-k, .w-kind, .n-meta, .card-meta, .pp-area, .job-meta, .st-level, .r-kind, .foot-cols h2, .alert-tag, .panel-k, .due-k, .btn, .addr-row button, .su-row button { font-family: var(--serif); }
.nav a, .acct ul a { font-weight: 600; }
.odo span { font-weight: 700; }
@media (max-width: 900px) { .page-head h1 { font-size: 40px; } }
@media (max-width: 760px) {
  .b1 { font-size: 23px; }
  .hero h1 { font-size: 40px; }
  .ph { font-size: 31px; }
  .r-pct .num { font-size: 80px; }
  .big-fig em { font-size: 68px; }
  .page-head h1 { font-size: 34px; }
  .sec-in h2, .sec-head h2 { font-size: 27px; }
  .q-report h3 { font-size: 28px; }
  .signup h2 { font-size: 29px; }
}

/* Hero: two hand-set lines, never rewrapped; the size follows the column (container units). */
.hero-text { container-type: inline-size; }
.hero h1 .l1, .hero h1 em { display: block; white-space: nowrap; }
.hero h1 { font-size: min(54px, 8.2cqi); }
:lang(es) .hero h1 { font-size: min(54px, 6.6cqi); }
@media (max-width: 760px) { .hero h1 { font-size: min(44px, 8.2cqi); } :lang(es) .hero h1 { font-size: min(44px, 6.6cqi); } }
.tl-k, .w-kind, .n-meta, .card-meta, .pp-area, .job-meta, .st-level, .r-kind, .panel-k, .eyebrow, .due-k { font-size: 15px; }

/* Service-zone map: a light gray canvas basemap with zone polygons, like a utility outage map. */
.outmap { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.map-frame { position: relative; }
.zmap { width: 100%; height: auto; display: block; }
.m-land { fill: #ECECEA; }
.m-park { fill: #DCE7D3; }
.m-water { fill: #BFD3E2; }
.m-creek { fill: none; stroke: #BFD3E2; stroke-linecap: round; }
.m-bld rect { fill: #DEDCD7; }
.m-rail path { stroke: #A3A3A0; }
.m-rail .m-ties { stroke: #A3A3A0; }
.st-loc-c { stroke: #D2D1CD; stroke-width: 6; }
.st-loc { stroke: #FFFFFF; stroke-width: 4; }
.st-art-c { stroke: #C9C7C1; stroke-width: 9; }
.st-art { stroke: #FFFFFF; stroke-width: 7; }
.m-hwy-c { stroke: #CDBF94; stroke-width: 12; }
.m-hwy { stroke: #F6EDCF; stroke-width: 9; }
.st-end { fill: #FFFFFF; stroke: #D2D1CD; stroke-width: 1.5; }
.z { stroke: none; }
.z-normal, .z-repair { fill: transparent; }
.z-flushing { fill: rgba(14, 124, 134, 0.14); }
.z-hatch-bg { fill: rgba(184, 74, 14, 0.10); }
.z-hatch { stroke: rgba(184, 74, 14, 0.42); }
.z-line { stroke: #8A8A86; stroke-width: 1.5; stroke-dasharray: 6 4; }
.z-line-flushing { stroke: var(--teal); stroke-width: 2; }
.z-line-boil { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: none; }
.zmap[data-active] .z-line { opacity: 0.5; }
.zmap .z-line.on { opacity: 1; stroke: #0A3A4A; stroke-width: 4; stroke-dasharray: none; }
.m-plant rect { fill: #9AA7AD; }
.m-plant .m-plant-tank { fill: #E6EEF1; }
.m-closed { stroke: var(--orange); }
.m-closed-dash { stroke: #FFFFFF; }
.m-break-halo { fill: rgba(184, 74, 14, 0.22); }
.m-break-dot { fill: var(--orange); stroke: #FFFFFF; stroke-width: 2.5; }
.m-break-mark { stroke: #FFFFFF; }
.m-pin { fill: #0A3A4A; stroke: #FFFFFF; stroke-width: 2.5; }
.m-pin-ring { fill: rgba(10, 58, 74, 0.18); }
.m-north circle { fill: #FFFFFF; stroke: #C9C7C1; }
.m-north path { fill: #4E5B61; }
.m-scale { stroke: #4E5B61; }
.map-pop { position: absolute; left: 47.5%; top: 55.5%; width: 250px; background: #FFFFFF; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); padding: 10px 12px 11px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.map-pop.off { visibility: hidden; }
.map-pop::before { content: ""; position: absolute; left: -7px; top: 14px; border-width: 7px 7px 7px 0; border-style: solid; border-color: transparent #FFFFFF transparent transparent; }
.mp-h { font-weight: 700; font-size: 15px; color: var(--head); border-bottom: 1px solid var(--rule); padding-bottom: 5px; margin-bottom: 5px; }
.map-legend { border-top: 1px solid var(--rule); padding: 10px 14px 12px; font-size: 14px; color: var(--ink); }
.ml-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.map-legend ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.map-legend li { display: flex; align-items: center; gap: 8px; }
.k-boil { background: repeating-linear-gradient(45deg, rgba(184, 74, 14, 0.42) 0 3px, rgba(184, 74, 14, 0.10) 3px 7px); box-shadow: inset 0 0 0 2px var(--orange); }
.k-flushing { background: rgba(14, 124, 134, 0.14); box-shadow: inset 0 0 0 2px var(--teal); }
.k-repair { background: #ECECEA; box-shadow: inset 0 0 0 1.5px #8A8A86; }
.k-mark { background: var(--orange); border-radius: 50%; width: 14px; height: 14px; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(184, 74, 14, 0.25); }
.k-closed { height: 6px; background: repeating-linear-gradient(90deg, var(--orange) 0 5px, #FFFFFF 5px 8px); box-shadow: 0 0 0 1px var(--orange); }
.k-line { height: 0; border-top: 2px dashed #8A8A86; border-radius: 0; }
.k-plant { background: #9AA7AD; }
@media (max-width: 1100px) { .map-pop { left: 47.5%; top: 55.5%; } }
@media (max-width: 760px) {
  .map-pop { position: static; width: auto; box-shadow: none; border-top: 1px solid var(--rule); border-radius: 0; }
  .map-pop::before { display: none; }
}

/* Phone map view: a crop of the drawing with larger labels for main streets, and area buttons. */
.map-areas button { font: 600 15px/1.2 var(--sans); }
@media (max-width: 760px) {
  .zmap .z-line.on { stroke-width: 3; }
}

/* Map labels: one set, sized to the map's scale on screen by district.js (--k is screen pixels per
   map unit), so every label shown renders at 14px or more at any width and in every view. */
.lx { paint-order: stroke; stroke: #ECECEA; stroke-width: calc(4px / var(--k, 0.8)); stroke-linejoin: round; }
.lx.off, .lx-zone.off, .m-chrome.off { visibility: hidden; }
.lx-st { font: 600 calc(15px / var(--k, 0.8))/1 var(--sans); fill: #4E4E4A; }
.lx-hwy { font: 700 calc(15px / var(--k, 0.8))/1 var(--sans); fill: #6A5A24; }
.lx-water { font: italic 400 calc(16px / var(--k, 0.8))/1 var(--sans); fill: #3F6680; }
.lx-park { font: 400 calc(14px / var(--k, 0.8))/1 var(--sans); fill: #4E6E42; }
.lx-rail { font: 400 calc(14px / var(--k, 0.8))/1 var(--sans); fill: #66665F; }
.lx-poi { font: 600 calc(14px / var(--k, 0.8))/1 var(--sans); fill: #4E5B61; }
.lx-zname { font: 700 calc(17px / var(--k, 0.8))/1 var(--sans); fill: #22303A; }
.lx-zn { font: 400 calc(14px / var(--k, 0.8))/1 var(--sans); fill: #3E4A50; }
.lx-chrome { font: 600 calc(14px / var(--k, 0.8))/1 var(--sans); fill: #4E5B61; }
.map-areas.is-pending, .m-filter.is-pending { visibility: hidden; }
.map-areas { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--rule); }
.map-areas button { font: 600 15px/1.2 var(--sans); color: var(--head); background: var(--card); border: 1.5px solid var(--rule); border-radius: 999px; padding: 7px 12px; min-height: 36px; cursor: pointer; }
.map-areas button:hover { border-color: var(--head); }
.map-areas button[aria-pressed="true"] { background: #0A3A4A; border-color: #0A3A4A; color: #FFFFFF; }

/* Phone header (760px and narrower): one slim row with the name, Pay and Menu; the account bar,
   the desktop menu and the emergency pill move into the Menu panel. Desktop is unchanged. */
.cb-short, .m-actions, .mpanel, .al-short { display: none; }
.m-pay, .m-menu { font: 700 15px/1 var(--sans); }
@media (max-width: 760px) {
  .lfw-concept-bar { padding: 6px 12px; font-size: 14px; line-height: 1.35; }
  .cb-long { display: none; }
  .cb-short { display: block; }
  .acct, .nav, .b2 { display: none; }
  .top-in { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; min-height: 60px; }
  .brand { gap: 9px; min-width: 0; flex: 1 1 auto; }
  .drop { width: 28px; height: 35px; }
  .b1 { font-size: 18px; line-height: 1.12; font-weight: 700; }
  .m-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  .m-pay, .m-menu { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border-radius: 8px; font: 700 15px/1 var(--sans); text-decoration: none; cursor: pointer; }
  .m-pay { background: var(--teal); color: #FFFFFF; border: 2px solid var(--teal); }
  .m-pay:hover { background: var(--teal-dk); color: #FFFFFF; }
  .m-menu { background: var(--card); color: var(--head); border: 2px solid var(--head); }
  .m-menu:hover { color: var(--head); background: var(--clear); }
  .m-menu[aria-expanded="true"] { background: #0A3A4A; color: #FFFFFF; border-color: #0A3A4A; }
  .m-bars { width: 18px; height: 14px; stroke: currentColor; fill: none; }
  .mpanel:target, .mpanel.js.open { display: block; }
  .mpanel.js:target:not(.open) { display: none; }
  .mpanel { background: var(--card); border-bottom: 1px solid var(--rule); padding: 4px 0 14px; }
  .mp-main a, .mp-util a { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
  .mp-main a { font: 700 18px/1.2 var(--sans); color: var(--head); }
  .mp-main a::after, .mp-util a::after { content: ""; width: 8px; height: 8px; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg); flex: none; margin-right: 4px; }
  .mp-util { margin-top: 10px; }
  .mp-util a { font: 600 16px/1.2 var(--sans); }
  .mp-main a[aria-current="page"], .mp-util a[aria-current="page"] { color: var(--link); text-decoration: underline; }
  .mp-call { margin-top: 14px; }
  .mp-call a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 12px 14px; border: 1.5px solid var(--rule); border-left: 4px solid var(--orange); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 16px; }
  .mp-call strong { color: var(--orange-text); font-size: 17px; }
  .alert-in { padding-top: 9px; padding-bottom: 9px; }
  .alert-h { font-size: 15px; }
  .alert p { font-size: 15px; }
  .alert-m { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .al-long { display: none; }
  .al-short { display: inline; }
}