/* Bid packet: a print document. Deliberately a single light look so it prints the same for everyone.
   Letter pages; each .page starts on a new sheet. */
:root {
  --ink: #1b2620; --muted: #56645b; --line: #cfd8d1; --paper: #ffffff; --wash: #f1f5f1; --accent: #1d6a86;
  --review: #c25e08; --out: #98a0a5;
  --z0: #2f6fd6; --z1: #d1497b; --z2: #1f9e89; --z3: #b7791f; --z4: #7a52c7; --z5: #c2410c; --z6: #4d7c0f; --z7: #0e7490;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #e7ece8; }
body { margin: 0; font: 13px/1.45 var(--body); color: var(--ink); }
.toolbar { position: sticky; top: 0; z-index: 1000; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--paper);
  border-bottom: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-left, 0px)); }
.toolbar a { color: var(--accent); font-weight: 600; text-decoration: none; }
.toolbar #status { color: var(--muted); flex: 1; min-width: 12em; }
.toolbar button { font: inherit; font-weight: 600; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; cursor: pointer; }
.toolbar button:disabled { opacity: .5; cursor: default; }
main { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 12px 40px; }
.page { background: var(--paper); width: 8.5in; max-width: 100%; min-height: 11in; padding: 0.6in 0.6in 0.5in; box-shadow: 0 1px 6px rgb(0 0 0 / .12); display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font: 600 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
h1 { font: 800 30px/1.05 var(--display); font-stretch: 80%; margin: 2px 0 0; text-wrap: balance; }
h2 { font: 700 16px var(--display); font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase; margin: 6px 0 0; }
h3 { font: 700 20px var(--display); font-stretch: 82%; margin: 0; }
p { margin: 0; max-width: 72ch; }
.muted { color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fact { background: var(--wash); border-radius: 6px; padding: 8px 10px; }
.fact b { display: block; font: 800 22px var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.fact span { font-size: 11.5px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--ink); padding: 4px 6px 4px 0; }
td { border-bottom: 1px solid var(--line); padding: 4px 6px 4px 0; vertical-align: top; }
td.r, th.r { text-align: right; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sw, .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.map { width: 100%; height: 5.4in; border: 1px solid var(--line); border-radius: 4px; }
.map.tall { height: 7.2in; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; }
.method p { font-size: 11.5px; }
/* Outside the imagery the tiles are padded with neutral gray; match it so the edge reads as one border. */
.leaflet-container { background: #c8c8c8; font-family: var(--body); }
.leaflet-control-attribution { font-size: 9px; }
.st-label span { position: absolute; transform-origin: 0 0; white-space: nowrap; font: 600 10px var(--display); color: #fff; text-shadow: 0 0 2px #10201a, 0 0 3px #10201a; }
@media (max-width: 700px) { .page { min-height: 0; padding: 20px 16px; } .facts { grid-template-columns: repeat(2, 1fr); } .map { height: 60vw; } }
@page { size: letter; margin: 0; }
@media print {
  html, body { background: #fff; }
  .toolbar { display: none; }
  main { padding: 0; gap: 0; }
  .page { box-shadow: none; width: 8.5in; min-height: 0; padding: 0.5in 0.55in; break-after: page; }
  thead { display: table-header-group; }
  .page:last-child { break-after: auto; }
  tr { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}