/* Tap Water Quality Report — mobile-first, brand-themed via CSS variables. */
:root { --brand:#0b5cab; --accent:#0a7d4b; --ink:#1f2430; --muted:#5a6270; --line:#e3e7ee; --bg:#f6f8fb; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-text-size-adjust: 100%; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; background: #fff; }
@media (min-width: 760px) { .wrap { margin: 24px auto; border-radius: 14px; box-shadow: 0 2px 18px rgba(20,30,60,.08); } }

.site-head { display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:3px solid var(--brand); margin-bottom:16px; }
.site-head .logo { max-height:52px; width:auto; }
.logo-text { font-weight:800; font-size:1.25rem; color: var(--brand); }
.site-foot { margin-top:24px; padding-top:12px; border-top:1px solid var(--line); }
.fineprint { font-size:.78rem; color: var(--muted); }

h1 { font-size:1.5rem; margin:.2em 0; }
h2 { font-size:1.2rem; margin:1.2em 0 .4em; color: var(--brand); }
h3 { font-size:1.02rem; margin:1em 0 .3em; }
p { margin:.5em 0; }
.lede { font-size:1.05rem; color: var(--muted); }

.card { border:1px solid var(--line); border-radius:12px; padding:16px; margin:14px 0; background:#fff; }
.kv { width:100%; border-collapse:collapse; }
.kv td { padding:6px 4px; border-bottom:1px solid var(--line); vertical-align:top; }
.kv td:first-child { color: var(--muted); width:42%; }

.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge.ok { background:#e6f6ee; color:#0a7d4b; }
.badge.warn { background:#fdecea; color:#b3261e; }
.badge.info { background:#eaf1fb; color:#0b5cab; }

.clean-banner { background:#e6f6ee; border:1px solid #bfe6cf; color:#0a5c38; padding:14px; border-radius:10px; }
.viol-list { list-style:none; padding:0; margin:0; }
.viol-list li { padding:10px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; }
.viol-list .meta { font-size:.85rem; color: var(--muted); }

.notmeasure li { margin-bottom:10px; }
.cta { background: color-mix(in srgb, var(--brand) 8%, #fff); border:1px solid color-mix(in srgb, var(--brand) 25%, #fff);
  border-radius:12px; padding:18px; margin:18px 0; }
.cta h2 { margin-top:0; color: var(--brand); }

.disclaimer { background:#fff8e6; border:1px solid #f1e0a8; border-radius:10px; padding:12px; font-size:.9rem; margin:14px 0; }

form.lead-form, form.zip-form { margin:0; }
.field { margin:10px 0; }
label { display:block; font-weight:600; margin-bottom:4px; }
input[type=text], input[type=email], input[type=tel], select {
  width:100%; padding:12px; font-size:1rem; border:1px solid #c5ccd8; border-radius:9px; background:#fff; }
input:focus, select:focus { outline:3px solid color-mix(in srgb, var(--brand) 30%, #fff); border-color: var(--brand); }
.row2 { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px){ .row2 { grid-template-columns:1fr 1fr; } }
.btn { display:inline-block; width:100%; padding:14px; font-size:1.05rem; font-weight:700; color:#fff;
  background: var(--brand); border:none; border-radius:10px; cursor:pointer; }
.btn:hover { filter:brightness(.95); }
.btn.accent { background: var(--accent); }
.btn-link { display:inline-block; padding:12px 16px; background: var(--brand); color:#fff; border-radius:10px; text-decoration:none; font-weight:700; }
.err { color:#b3261e; font-size:.85rem; margin-top:4px; }
.field.has-err input { border-color:#b3261e; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.picker a { display:block; padding:14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
  text-decoration:none; color: var(--ink); }
.picker a:hover { border-color: var(--brand); background:#f8faff; }
.picker .pop { color: var(--muted); font-size:.9rem; }

.notice { background:#eaf1fb; border:1px solid #c7daf1; border-radius:10px; padding:14px; }
.success { text-align:center; padding:24px 10px; }
.success .big { font-size:2.4rem; }

/* Admin */
.admin-nav { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.admin-nav a { color: var(--brand); text-decoration:none; font-weight:600; }
table.grid { width:100%; border-collapse:collapse; font-size:.9rem; }
table.grid th, table.grid td { padding:8px; border-bottom:1px solid var(--line); text-align:left; }
.muted { color: var(--muted); }
.warnbox { background:#fdecea; border:1px solid #f3c0ba; border-radius:8px; padding:10px; margin:10px 0; }
.okbox { background:#e6f6ee; border:1px solid #bfe6cf; border-radius:8px; padding:10px; margin:10px 0; }
code.snippet { display:block; white-space:pre-wrap; background:#0f1b2d; color:#d6e2f5; padding:12px; border-radius:8px; font-size:.82rem; overflow:auto; }

/* Admin: service-area picker + field hints */
.hint { display:block; color: var(--muted); font-size:.85rem; margin-top:4px; }
.radio-row { display:block; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  margin-bottom:8px; cursor:pointer; }
.radio-row:hover { border-color: var(--brand); background:#f8faff; }
.radio-row input { margin-right:6px; }
.radio-row .hint { margin-left:22px; }