/*
 * The Bypass: UDOT's Heber Valley Corridor. The palette follows the portal: sage, slate, and sand.
 * Route A is violet and Route B is orange in every map and chart. The pair passes the color-blindness check
 * of the dataviz validator. Each route color also comes with its name, so color is never the only signal.
 * The core rules come from the SB 258 section, so the two sections look the same.
 */

@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f6f2ea;
  --card: #ffffff;
  --ink: #1f2b30;
  --muted: #56656a;
  --line: #ddd5c6;
  --sage: #4f7a5c;
  --sage-dark: #36593f;
  --sage-tint: #e3ede5;
  --slate: #3c5566;
  --slate-tint: #e3eaf0;
  --sand: #eadfc9;
  --sand-tint: #f4ecdc;
  --amber: #a86a12;
  --amber-ink: #7a4e0c;
  --amber-tint: #fbebcc;
  --red: #a63b26;
  --red-tint: #f8e1da;
  --grey: #6d777b;
  --grey-tint: #e8eaea;
  --link: #2f5d74;
  --focus: #1f2b30;
  --radius: 16px;
  --display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* A link to an anchor stops the target below the sticky nav. This rule is on the targets, not on html, so a focus move into the stuck nav does not scroll the page. */
main, main [id] { scroll-margin-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.55 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0; }
h2 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.01em; margin-bottom: 8px; }
h3 { font-size: 20px; margin-bottom: 6px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; }
button { font: inherit; }
/* A dark ring with a light halo shows on the paper, on the cards, and on the green buttons. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
/* The same content width as the portal landing page. */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 2000; background: #fff; padding: 12px 16px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.cite { font-size: 14px; color: var(--muted); }
.cite a { color: var(--muted); }
.news { display: inline-block; font-size: 12px; font-weight: 700; color: var(--amber-ink); background: var(--amber-tint); border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: 1px; }

/* ---------- Hero and section nav ---------- */
.hero { background: linear-gradient(180deg, #e4ecee 0%, var(--paper) 100%); }
.hero .wrap { padding-top: 34px; padding-bottom: 26px; }
.eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }
.eyebrow a { color: var(--muted); text-decoration: none; display: inline-block; padding: 12px 0; }
.eyebrow a:hover { text-decoration: underline; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pill-draft { background: var(--amber-tint); color: var(--amber-ink); }
.pill-live { background: var(--sage-tint); color: #2c5a3a; }
.hero h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -0.025em; margin: 0 0 12px; }
/* Text spans the full content width of the page (Erik, 2026-10-26). */
.lead { font-size: clamp(19px, 2.2vw, 22px); color: #2f3f45; }
.secnav { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.secnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.secnav a { display: block; padding: 13px 14px 11px; color: var(--link); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.secnav a:hover { color: var(--ink); }
.secnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sage); }
/* On a phone the four links wrap into two rows, so each one stays in view. */
@media (max-width: 520px) { .secnav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: visible; } .secnav a { min-height: 44px; padding: 10px 8px; text-align: center; } main, main [id] { scroll-margin-top: 124px; } }

/* ---------- Bands and cards ---------- */
.band { padding-top: 40px; padding-bottom: 8px; }
.sub-h { margin: 22px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

/* Big numbers in the hero */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.stat b { display: block; font: 700 clamp(30px, 4vw, 40px)/1 var(--display); margin-bottom: 6px; }
.stat span { font-size: 16px; color: var(--muted); line-height: 1.3; display: block; }
@media (max-width: 560px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* Numbered steps */
.steps { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: step; display: grid; gap: 12px; }
.steps > li { counter-increment: step; position: relative; padding: 16px 18px 14px 66px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.steps > li::before { content: counter(step); position: absolute; left: 16px; top: 15px; width: 34px; height: 34px; border-radius: 50%; background: var(--slate); color: #fff; font: 700 17px/34px var(--display); text-align: center; }
.steps h3 { font-size: 19px; }
.steps p { margin-bottom: 4px; }

/* Data tables */
table.data { width: 100%; border-collapse: collapse; background: var(--card); font-size: 16px; }
table.data caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
/* The empty header cell over the bar column is a td (the bars are hidden from screen readers), so it needs the same tint. */
table.data thead th, table.data thead td { background: var(--sand-tint); font-size: 14px; }
table.data tbody th { font-weight: 700; }
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.scroll table.data { border-radius: 14px; }

/* On a phone, a table with the class "stack" shows each row as a card. Each cell names its column with data-label. */
@media (max-width: 640px) {
  .scroll { overflow: visible; border: 0; border-radius: 0; }
  table.stack, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack { background: transparent; }
  table.stack tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin-bottom: 10px; }
  table.stack th, table.stack td { border: 0; padding: 4px 0; }
  table.stack tbody th { font-size: 18px; }
  /* The empty alternative text keeps the label on screen but out of the cell name. The first line is a fallback. */
  table.stack td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
  table.stack td[colspan] { display: block; }
}

/* The fairness box */
.fair { background: var(--sage-tint); border: 1px solid #c4d6c8; border-radius: var(--radius); padding: 20px 22px; }
.fair ul { columns: 2; column-gap: 28px; padding-left: 20px; margin-bottom: 0; }
.fair li { break-inside: avoid; margin-bottom: 6px; }
@media (max-width: 640px) { .fair ul { columns: 1; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; background: var(--sage); color: #fff; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: var(--sage-dark); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--sand-tint); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* History: the timeline */
.timeline { list-style: none; margin: 18px 0 0; padding: 0 0 0 26px; border-left: 3px solid var(--line); }
.timeline li { position: relative; padding: 0 0 18px 12px; }
.timeline li::before { content: ""; position: absolute; left: -35px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--slate); border: 3px solid var(--paper); }
.timeline li.future::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--slate); }
.timeline time { display: block; font-weight: 700; font-size: 15px; }
.timeline .kind { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.timeline li.future { color: #3d4c52; }

.reslist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.reslist li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.reslist b { font-size: 17px; }
.reslist a { display: inline-block; padding: 10px 0; }

/* ---------- Pictures and chapters ---------- */

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.kicker { font-size: 14px; font-weight: 700; color: var(--slate); margin: 0 0 4px; }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 14px; margin-bottom: 18px; }
@media (max-width: 860px) { .chapter { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The Bypass ---------- */
:root { --a: #6250d6; --b: #eb6834; --both: #1f2b30; --bar-now: #87949a; --bar-none: #56656a; }

/* The UDOT sentence near the top of pages 1 and 2. */
.status-strip { background: var(--slate-tint); border-radius: 12px; padding: 10px 14px; font-size: 16px; margin: 18px 0 0; }
.status-strip .kicker { display: block; margin: 0 0 2px; }

/* Maps. The SVG has no style attributes, so these rules style it. */
.mapfig { margin: 0; }
.map { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); background: #f4f0e6; }
.map text { font-family: "Source Sans 3", system-ui, sans-serif; }
.map .mt { stroke: #f4f0e6; stroke-width: 3.2px; stroke-linejoin: round; paint-order: stroke; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 10px 0 4px; font-size: 15px; }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.ln { width: 24px; height: 4px; border-radius: 2px; display: inline-block; }
.ln-a { background: var(--a); }
.ln-b { background: var(--b); }
.ln-both { background: var(--both); }
.sw { width: 15px; height: 15px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.12); }
/* The key uses the fill colors of tools/maps.py (COL). Change both together. */
.sw-farm { background: #b8d49a; }
.sw-wet { background: repeating-linear-gradient(45deg, #5e9d90 0 1.2px, #a9d3c9 1.2px 5px); }
.sw-dev { background: #efe5d3; }
.sw-water { background: #a9cde6; }
/* The key keeps its colors in print and in forced colors mode. */
.ln, .sw { forced-color-adjust: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* In forced colors mode, a ring keeps the dark key visible on a dark background. */
@media (forced-colors: active) { .ln, .sw { outline: 1px solid CanvasText; outline-offset: 1px; } }
.mapnote { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.hero-map { max-width: 640px; }

/* Bar charts */
.chart { width: 100%; height: auto; display: block; max-width: 620px; }
.hbars { display: grid; gap: 8px; container-type: inline-size; }
.hb-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 6em; align-items: center; column-gap: 10px; font-size: 16px; font-weight: 600; }
.hb-l { text-align: right; }
.hb-bar { display: block; width: 100%; height: 18px; }
/* A narrow chart puts the label and the value on one line and the bar under them, so the bar stays wide.
   The media query is for a browser with no container queries, such as iOS 15. */
@media (max-width: 480px) {
  .hb-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-l { text-align: left; }
  .hb-bar { grid-row: 2; grid-column: 1 / -1; margin-top: 2px; }
}
@container (max-width: 460px) {
  .hb-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-l { text-align: left; }
  .hb-bar { grid-row: 2; grid-column: 1 / -1; margin-top: 2px; }
}
.bar-now { fill: var(--bar-now); }
.bar-none { fill: var(--bar-none); }
.bar-a { fill: var(--a); }
.bar-b { fill: var(--b); }
.pair { width: 220px; height: 30px; display: block; }
.barcell { min-width: 236px; }
.burdens .rnote { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.less { display: inline-block; font-size: 12px; font-weight: 700; color: #2c5a3a; background: var(--sage-tint); border-radius: 999px; padding: 0 8px; margin-left: 4px; }
table.data tr.grp th { background: var(--slate-tint); font-family: var(--display); font-size: 16px; }
@media (max-width: 780px) { .barcell { min-width: 0; } }
/* Between the phone cards and the full table, the bars get narrower so that the table fits. */
@media (min-width: 641px) and (max-width: 700px) { .pair { width: 100px; } }
@media (min-width: 701px) and (max-width: 780px) { .pair { width: 150px; } }
@media (max-width: 640px) {
  table.stack tr.grp { background: transparent; border: 0; padding: 12px 0 0; }
  table.stack tr.grp th { padding: 6px 12px; border-radius: 8px; }
  /* A card shows the Route A and Route B values side by side, so that a phone reader can compare them. */
  table.stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  table.stack tbody th, table.stack td.barcell, table.stack td:nth-child(2):last-child, table.stack td[data-label="Source"] { grid-column: 1 / -1; }
}

/* The screening funnel */
.funnel { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.funnel li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.f-n { font: 700 30px/1 var(--display); color: var(--slate); text-align: center; }

/* UDOT's case, in UDOT's words */
.udot-case { padding-left: 20px; margin: 8px 0 0; }
.udot-case li { margin-bottom: 8px; }

/* Where the decision stands */
.steps-line { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.steps-line li { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--slate); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.steps-line li b { display: block; }
.steps-line li span { color: var(--muted); }
.steps-line .st-now { border-top-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.steps-line .st-tag { display: inline-block; margin: 6px 0 0 6px; font: 700 13px/1.6 var(--display); font-style: normal; color: var(--amber-ink); background: var(--amber-tint); border-radius: 999px; padding: 0 8px; }
.steps-line .st-next { border-top-color: var(--line); border-style: dashed; border-top-style: solid; }
@media (max-width: 760px) { .steps-line { grid-template-columns: minmax(0, 1fr); } }

/* Page 2: UDOT's reasons and the other facts */
.reason { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 14px; }
.reason h3 { margin-bottom: 8px; }
.reason .udot { border-left: 4px solid var(--b); background: #fdf0ea; padding: 8px 12px; border-radius: 0 10px 10px 0; margin: 0 0 10px; }
.reason .facts { border-left: 4px solid var(--a); background: #efedfb; padding: 8px 12px 2px; border-radius: 0 10px 10px 0; margin: 0; }
.reason .lab { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.reason ul { padding-left: 20px; margin: 0 0 8px; }
/* The one-line conclusion under each answer. */
.verdict { font-weight: 700; margin: 6px 0 4px; }
.laws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.law dl { margin: 0 0 8px; }
.law dt { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 8px; }
.law dd { margin: 0; }
@media (max-width: 760px) { .laws { grid-template-columns: minmax(0, 1fr); } }
.ask { background: var(--sand-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.ask ol { margin: 6px 0 0; padding-left: 22px; }
.ask li { margin-bottom: 6px; }
.quote { border-left: 4px solid var(--slate); background: var(--slate-tint); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 10px 0; }

/* History: how the schedule changed */
.expected { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.expected li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ex-when span { display: block; font-size: 14px; }
.ex-when b { display: block; font: 700 21px/1.2 var(--display); }
@media (max-width: 560px) { .expected li { grid-template-columns: minmax(0, 1fr); } }
.timeline li.k-plan::before { background: var(--sage); }
.timeline li.k-public::before { background: var(--amber); }
/* A study gets a square marker, so it differs from the round marker of a future step. */
.timeline li.k-study::before { background: #fff; box-shadow: inset 0 0 0 2px var(--slate); border-radius: 3px; }

/* The record */
.counts-line { font-size: 17px; }
.counts-line b { font: 700 26px var(--display); margin-right: 4px; }
.newslist { list-style: none; padding: 0; margin: 12px 0 0; }
.newslist li { padding: 8px 0; border-top: 1px solid var(--line); }
.newslist time { font-weight: 700; margin-right: 6px; }
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 0 40px; font-size: 15px; color: var(--muted); }
.h2-small { font-size: 24px; }
.stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stats4 { grid-template-columns: minmax(0, 1fr); } }

/* A screen of 640 pixels or less gets the narrow map, drawn for a 340-pixel screen. */
.map-n { display: none; }
@media (max-width: 640px) { .map-w { display: none; } .map-n { display: block; max-width: 440px; } }
.hero-grid-map { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); align-items: start; }
.chapter-map { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); }
/* Two columns need 1100 pixels, so that the text column next to the 640-pixel map stays 385 pixels or wider. */
@media (max-width: 1100px) { .hero-grid-map, .chapter-map { grid-template-columns: minmax(0, 1fr); } .chapter-map .mapfig { max-width: 760px; } }

/* A link that gets focus stops below the sticky nav. */
.hero a, main a, .foot a { scroll-margin-top: 72px; }
@media (max-width: 520px) { .hero a, main a, .foot a { scroll-margin-top: 124px; } }

/* The record: the main request and the request groups */
.main-req { margin-top: 14px; border-left: 5px solid var(--b); }
.mr-text { font: 700 20px/1.3 var(--display); }
.reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.req-group { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.req-group h3 { font-size: 18px; margin-bottom: 6px; }
.req-group ul { padding-left: 18px; margin: 0; }
.req-group li { margin-bottom: 6px; font-size: 16px; }
@media (max-width: 760px) { .reqs { grid-template-columns: minmax(0, 1fr); } }

/* Map zoom (assets/js/zoom.js). A click zooms in. A zoomed map moves with a drag, so the page does not scroll under the finger. */
.zmap { cursor: zoom-in; touch-action: manipulation; -webkit-user-select: none; user-select: none; scroll-margin-top: 72px; }
@media (max-width: 520px) { .zmap { scroll-margin-top: 124px; } }
.zmap.is-zoomed { cursor: grab; touch-action: none; }
.zmap.is-dragging { cursor: grabbing; }
/* A tap or a click focuses the map. Only the keyboard shows the focus ring. */
.zmap:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.zoombar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 4px; }
.zb { min-height: 44px; padding: 6px 14px; border: 1px solid #b9b2a3; border-radius: 10px; background: var(--card); color: var(--ink); font: 700 15px/1.2 "Source Sans 3", system-ui, sans-serif; cursor: pointer; }
.zb:hover:not([aria-disabled="true"]) { background: var(--slate-tint); }
.zb[aria-disabled="true"] { color: #6d777b; border-color: var(--line); cursor: default; }
/* While a map is zoomed, its buttons stay at the bottom of the window. */
.zoombar { padding: 6px 0; }
.zoombar.is-active { position: sticky; bottom: 0; z-index: 20; background: var(--paper); box-shadow: 0 -1px 0 var(--line); }
.zoombar.is-active .zhint { display: none; }
.zhint { font-size: 14px; color: var(--muted); }

/* A phone gets less padding inside the cards, so that the text column stays wide. */
@media (max-width: 560px) {
  .card { padding: 16px; }
  .reason { padding: 14px; }
  .reason .udot, .reason .facts { padding-left: 10px; padding-right: 10px; }
  .reason ul { padding-left: 16px; }
}

@media print {
  .secnav, #wg-bar, .actions, .skip, .zoombar { display: none !important; }
  body { background: #fff; }
  .card, .stat, .req-group, .chart, .map { break-inside: avoid; }
}

/* A page reference does not break at its hyphen. */
.cite a { white-space: nowrap; }

/* History: the county record, and what it does not say */
.record td[data-label="When"] { white-space: nowrap; }
.limits { margin-top: 14px; }
.limits h3 { font-size: 18px; margin-bottom: 6px; }
.limits ul { margin: 0; padding-left: 20px; }

/* Pictures, added on 2026-10-26 after Erik picked 1A, 2B, 3A, 4B, and 5B in mockups/visuals/. */
.fig-h { font-weight: 700; margin: 0 0 6px; }
.ln-county { background: repeating-linear-gradient(90deg, #0b6e69 0 8px, transparent 8px 13px); }

/* Acre squares: one square is one acre. Each grid is 30 squares wide, and both columns have the same width,
   so a square is the same size in every grid. */
.acres { margin: 12px 0 18px; max-width: 760px; }
.acre-h { font-weight: 700; margin: 14px 0 4px; }
.acre-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-items: start; }
.acre-l { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; margin: 2px 0 6px; }
.acre-sq { width: 100%; height: auto; display: block; }
.sq-a { fill: var(--a); }
.sq-same { fill: #f3b08f; }
.sq-more { fill: var(--b); }
.acres figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
@media (max-width: 560px) { .acre-pair { grid-template-columns: minmax(0, 1fr); } }

/* Route B's right-of-way across an example field, from above. */
.fieldfig { margin: 16px 0; max-width: 420px; }
.field-svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.fl-field { fill: #b8d49a; }
.fl-rows line { stroke: #a4c487; stroke-width: 1; }
.fl-row { fill: #f6d2bd; }
.fl-paved { fill: #3a4448; }
.fl-trail { fill: #c9a87c; }
.fl-edge { fill: none; stroke: var(--b); stroke-width: 2; }
.fl-foot { fill: #ffffff; stroke: var(--ink); stroke-width: 1; }
.sw-row { background: #f6d2bd; border-color: var(--b); }
.sw-paved { background: #3a4448; }
.sw-trail { background: #c9a87c; }
.sw-foot { background: #ffffff; border-color: var(--ink); }
.fieldfig figcaption { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* A pair of bars under each of UDOT's reasons. */
.pairfig { margin: 0 0 12px; max-width: 620px; }
.pairfig .hb-row { grid-template-columns: 5.5em minmax(0, 1fr) 6.5em; }

/* The county documents as cards. */
.dcards { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dcard { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.dthumb img { display: block; width: 132px; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #ffffff; }
.dw { display: block; font-size: 14px; color: var(--muted); }
.dcard .dt { font-size: 19px; margin: 2px 0 4px; }
.dq { margin: 0 0 4px; }
.dn { font-size: 15px; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .dcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .dcard { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; } .dthumb img { width: 88px; } }

/* The full county record opens on request. */
details.more { margin: 12px 0; }
details.more > summary { display: inline-block; cursor: pointer; font-weight: 700; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
details.more[open] > summary { margin-bottom: 10px; }
.county-map { max-width: 640px; margin: 14px 0 18px; }
/* On a narrow screen, a pair chart puts the label and the value on one line and the bar under them.
   These rules come after .pairfig .hb-row, so they win at the same specificity. */
@media (max-width: 480px) { .pairfig .hb-row { grid-template-columns: minmax(0, 1fr) auto; } }
@container (max-width: 460px) { .pairfig .hb-row { grid-template-columns: minmax(0, 1fr) auto; } }
/* On a phone, the words of each county record use the full width of the card. */
@media (max-width: 640px) { table.record td[data-label="What it says"] { grid-column: 1 / -1; } }
@media print { details.more > summary { display: none; } .dcard { break-inside: avoid; } }