:root { --bg:#f4f6f8; --surface:#fff; --border:#d3dbe3; --border-strong:#aebbc8; --ink:#12263a; --muted:#526477; --accent:#12263a; --soft:#e3eaf1; --route:#075985; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Verdana,Geneva,sans-serif; line-height:1.55; }
button,input,textarea,select { font:inherit; }
a { color:#075985; text-underline-offset:.16em; }
button,a,input,textarea,select,summary,[tabindex] { outline-offset:3px; }
:focus-visible { outline:3px solid #4386c4; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
.wrap { max-width:60rem; margin:auto; width:100%; }
.appbar { background:var(--accent); color:#fff; padding:.8rem 1.1rem; }
.appbar .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.7rem 1.2rem; }
.brand-row { display:flex; align-items:center; justify-content:space-between; width:100%; gap:.8rem; flex-wrap:wrap; }
.brand { text-decoration:none; color:inherit; }
.brand h1 { font-size:1.1rem; margin:0; }
.brand p { font-size:.78rem; opacity:.85; margin:.05rem 0 0; }
.install-header-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:.45rem .9rem; background:#1e3b5a; color:#fff; border:1px solid #385e85; border-radius:6px; font-weight:700; font-size:.875rem; cursor:pointer; }
.install-header-btn:hover { background:#2a5078; }
.install-header-btn:focus-visible { outline:3px solid #38bdf8; outline-offset:2px; }
nav { display:flex; flex-wrap:wrap; gap:.15rem; }
nav a { color:#e0e8f0; padding:.55rem .6rem; border-radius:5px; font-size:.85rem; font-weight:650; text-decoration:none; min-height:44px; display:flex; align-items:center; }
nav a:hover,nav a[aria-current="page"] { color:#fff; background:#ffffff26; }
main.wrap { padding:1.4rem 1.1rem 2.5rem; }
.view-head { margin:0 0 1rem; }
.view-head h2 { margin:0; font-size:1.3rem; }
.view-head p { margin:.25rem 0 0; color:var(--muted); }
h3 { font-size:1rem; margin:0 0 .45rem; }
label { display:block; font-weight:650; margin:.8rem 0 .3rem; }
form>label:first-child { margin-top:0; }
.hint,.notice,.privacy-note,.map-key { color:var(--muted); font-size:.875rem; }
.hint { margin:.25rem 0 .7rem; }
.shortcut { margin:0; }
input,textarea,select { width:100%; padding:.7rem; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); color:var(--ink); min-height:44px; }
textarea { display:block; resize:vertical; min-height:6rem; line-height:1.5; }
#q { min-height:7.25rem; }
.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:6px; font-weight:700; font-size:.92rem; padding:.65rem 1rem; }
.primary { border:1px solid var(--accent); background:var(--accent); color:#fff; }
.primary:hover:not(:disabled) { background:#1d3b58; }
.secondary { border:1px solid var(--border-strong); background:var(--surface); color:var(--accent); }
.secondary:hover:not(:disabled) { background:var(--soft); }
.actions { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin:.85rem 0 0; }
.status { color:var(--muted); font-size:.9rem; min-height:1.5em; margin:.6rem 0; }
.examples { margin-top:1rem; }
.examples h3 { font-size:.9rem; }
.starters { display:flex; flex-wrap:wrap; gap:.5rem; }
.starter { max-width:100%; padding:.55rem .8rem; min-height:44px; border:1px solid var(--border); border-radius:24px; background:var(--soft); color:var(--ink); font-size:.875rem; font-weight:600; text-align:left; }
.starter:hover { background:#d5e0eb; }
.privacy-note { margin:1rem 0 0; }
.library-topics { margin:1rem 0 .5rem; }
.card,.worksheet { border:1px solid var(--border); border-radius:8px; padding:1.15rem; background:var(--surface); margin-top:.85rem; overflow-wrap:anywhere; }
.card p { margin:.5rem 0; }
.answer-text,.passage p { white-space:pre-wrap; }
.tag { display:inline-block; font-size:.75rem; font-weight:700; color:var(--muted); margin-bottom:.4rem; }
.tag.waiting { color:#78500a; }
.sources { border-top:1px solid var(--border); padding-top:.8rem; margin-top:1rem; }
.sources h3 { font-size:.9rem; }
.sources ul { padding-left:1.25rem; }
.sources li { margin:.35rem 0; }
.source-link { background:transparent; color:#075985; border:0; padding:.2rem 0; text-align:left; font-size:.85rem; text-decoration:underline; text-underline-offset:.16em; }
.matched-question { color:var(--muted); font-size:.85rem; }
.answer-excerpts { margin-top:.7rem; }
.quick-tools,.tool-grid,.form-grid.two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.quick-tools { margin-top:1rem; }
.quick-tools button { text-align:left; justify-content:flex-start; }
.tool-grid { margin:1rem 0; }
.tool-grid .card { margin:0; }
.tool-grid p { color:var(--muted); font-size:.9rem; }
.form-grid label { margin-top:.5rem; }
.worksheet { margin-top:1.4rem; border-color:var(--border-strong); }
.notice { margin:.35rem 0 1rem; }
.ps-agreed { display:flex; align-items:flex-start; gap:.6rem; margin:1rem 0 .2rem; font-size:.9rem; }
.ps-agreed label { font-weight:600; margin:0; }
.ps-agreed input { width:1.35rem; min-height:1.35rem; flex-shrink:0; margin-top:.15rem; }
.rrecs-dispute-boxes { flex-wrap:wrap; }
.rrecs-dispute-boxes label { display:inline-flex; align-items:center; gap:.35rem; font-weight:400; margin-right:1.1rem; }
.rrecs-dispute-boxes input { width:1.1rem; min-height:1.1rem; margin-top:0; }
.hint-inline { display:block; font-weight:400; font-size:.8rem; color:var(--muted); margin:.15rem 0 .3rem; }
.ps-actions { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin:.6rem 0 0; }
.ps-actions a.buttonlike { display:inline-flex; align-items:center; min-height:44px; border-radius:6px; font-weight:700; font-size:.92rem; padding:.65rem 1rem; border:1px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; }
.ps-actions a.buttonlike:hover { background:#1d3b58; }
.ps-actions .hint { margin:0; }
.form-resources { margin-top:1.6rem; }
.forms { display:grid; gap:.65rem; }
.form-item { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:7px; }
.form-item p { color:var(--muted); font-size:.85rem; margin:.2rem 0 0; }
.form-item button { flex-shrink:0; max-width:45%; }
.passage { border-top:1px solid var(--border); padding:1rem 0; }
.passage:last-child { padding-bottom:0; }
.passage h3 { margin:0 0 .25rem; }
.citation { color:var(--muted); font-size:.8rem; margin:.1rem 0 .5rem; }
.historical { color:#78500a; font-weight:650; }
.coordinate-tools { margin-top:1rem; }
summary { cursor:pointer; color:#075985; padding:.3rem 0; }
#routeMap { height:430px; width:100%; background:#e6edf3; border:1px solid var(--border-strong); border-radius:8px; z-index:0; }
.route-marker { border:2px solid #fff; background:var(--route); color:#fff; width:28px; height:28px; border-radius:50%; text-align:center; font:bold 13px/24px system-ui,sans-serif; box-shadow:0 1px 4px #0005; }
.route-pin { width:34px; height:34px; position:relative; }
.route-pin svg { display:block; filter:drop-shadow(0 1px 2px #0007); }
.route-pin-mailbox { color:#15803d; }
.route-pin-park-point { color:#7c3aed; }
.route-pin-front-door { color:#eab308; }
.route-map-controls { margin:.5rem 0; }
.map-controls-below { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; align-items:end; margin:.75rem 0 .4rem; padding:.75rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-sizing:border-box; width:100%; }
.map-control-item { margin:0; }
.map-control-item label { margin:0 0 .25rem; font-size:.875rem; font-weight:650; }
.map-control-button-wrap { display:flex; align-items:flex-end; }
.map-control-button-wrap button { width:100%; min-height:44px; }
.layer-readiness-hint { margin:.2rem 0 .6rem; font-size:.85rem; color:var(--muted); line-height:1.4; }
.offline-discoverable-hint { margin:.35rem 0; font-size:.85rem; color:var(--muted); }
.route-save-explainer { margin:.25rem 0 1rem; }
.route-saved-controls { align-items:end; margin:.5rem 0 1rem; }
.route-load-actions { margin:0; }
.route-pin-legend { display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin:.5rem 0; }
.route-pin-legend span { font-size:.9rem; }
.route-pin-mini { vertical-align:-2px; margin-right:.3rem; }
/* Connect: the selected endpoint wears an outline (shape + ring, never
   color alone); rows are plain text with the same panel-box frame. */
.route-pin-connect-pick { outline:3px solid #12263a; outline-offset:2px; border-radius:8px; }
.connect-row { border-top:1px solid var(--border); padding:.6rem 0 .2rem; }
.connect-row p { margin:.2rem 0 .5rem; }
.connect-row label { margin:.4rem 0 .3rem; }
.connect-row input { max-width:12rem; }
#connectCandidates { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; }
#connectCandidates .hint { width:100%; margin:0; }
/* Advisory proximity notice: persistent inert text in its own live region,
   never the shared mapStatus line that tile errors may overwrite. */
.proximity-note { border-color:#b45309; background:#fffbeb; }
.stop-list { font-size:.9rem; padding-left:1.5rem; }
.stop-list li { margin:.3rem 0; }
.panel-box { border:1px solid var(--border-strong); border-radius:7px; padding:.85rem; background:var(--soft); margin:.5rem 0; }
.panel-box p { margin:.2rem 0 .5rem; }
#pinPanel .pin-kind-active { background:#d5e0eb; border-color:var(--accent); }
#pinPanel label { display:block; margin:.35rem 0 .6rem; }
#pinPanel input { margin-bottom:.35rem; }
/* Coarse pointers (phones, tablets): pin-panel controls keep a full
   finger-sized target, and the map keeps its shorter mobile height. */
@media (pointer:coarse) { #pinPanel .actions button { min-height:44px; } #pinPanel input { min-height:44px; } }
/* Finger-sized map pins on touch screens: a transparent 5px halo around the
   34px pin makes the effective hit target 44px. Leaflet iconSize/anchor are
   deliberately untouched, so drag, pan and glyph positioning do not move —
   only the tappable area grows. (The pin's own rotate transform makes it the
   containing block for the halo.) */
@media (pointer:coarse) { .leaflet-marker-icon .route-pin::after { content:""; position:absolute; inset:-5px; } }
footer { border-top:1px solid var(--border); padding-top:1rem; margin-top:2rem; font-size:.8125rem; color:var(--muted); }
footer a { display:block; margin-top:.5rem; width:fit-content; }
.skip-link { position:absolute; left:1rem; top:-5rem; z-index:2000; background:#fff; padding:.75rem; }
.skip-link:focus { top:.5rem; }
#veil { position:fixed; inset:0; z-index:1500; background:#12263a8c; display:flex; align-items:center; justify-content:center; padding:1rem; }
#veil .box { background:var(--surface); width:100%; max-width:32rem; max-height:calc(100dvh - 2rem); overflow:auto; border-radius:8px; padding:1.4rem; border-top:5px solid var(--accent); box-shadow:0 12px 32px #12263a47; }
#veil h2 { margin:0 0 .75rem; font-size:1.25rem; }
#veil p { color:var(--muted); }
#veil button { margin-top:.5rem; }
.dialog-open { overflow:hidden; }
#printSheet { display:none; }
.location-controls h3 { margin-top:0; }
#followLocation { background:#172554; color:#fff; border:2px solid #172554; font-weight:750; min-height:44px; padding:.65rem 1rem; border-radius:6px; }
#followLocation[aria-pressed="true"] { background:#0f172a; outline:3px solid #93c5fd; outline-offset:2px; }
#followLocation:disabled { background:#334155; border-color:#334155; color:#fff; opacity:1; cursor:default; }
#followLocation:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
#sessionStatus,#savedStorageStatus,#gpsStatus { overflow-wrap:anywhere; }
.noscript { max-width:60rem; margin:1rem auto; padding:1rem; }
@media (max-width:600px) { .appbar .wrap { align-items:flex-start; } nav { width:100%; } nav a { padding:.5rem; font-size:.82rem; } .tool-grid,.form-grid.two,.quick-tools { grid-template-columns:1fr; gap:.6rem; } .form-item { flex-direction:column; } .form-item button { max-width:none; } #routeMap { height:360px; } main.wrap { padding:1.15rem 1rem 2rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
@media print { body { background:#fff; color:#000; } body>* { display:none !important; } #printSheet { display:block !important; font:11pt/1.45 sans-serif; } #printSheet h1 { font-size:17pt; margin:0 0 8pt; } #printSheet h2 { font-size:12pt; margin:14pt 0 4pt; break-after:avoid; } #printSheet p { white-space:pre-wrap; overflow-wrap:anywhere; margin:4pt 0 10pt; } #printSheet .print-meta { display:grid; grid-template-columns:1fr 1fr; gap:8pt 16pt; } #printSheet .print-meta p { break-inside:avoid; } #printSheet li { margin-bottom:5pt; } #printSheet svg { width:100%; height:240px; } }