/*
 * SF Coffee Map styles. Mobile-first at 390px, verified at 360 and 430.
 * Palette: white ground, warm gray surfaces, coral pins, teal confirmed/selected,
 * amber partial, gray dashed for unknown. Calm.
 */

@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("./vendor/dm-sans.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("./vendor/instrument-serif-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("./vendor/instrument-serif-400-italic.woff2") format("woff2")}
:root{--white:#ffffff;--ground:#fbf8f5;--surface:#f3eee7;--surface-2:#ebe4da;--line:#d9d1c4;--ink:#1b1a17;--ink-soft:#4a4740;--ink-mute:#857f73;--coral:#e5695a;--coral-ink:#b84a3c;--teal:#2d8b86;--teal-ink:#1f6560;--amber:#d9942c;--amber-ink:#a56d14;--unknown:#a39a8a;--radius:14px;--radius-sm:10px;--radius-pill:999px;--shadow-sheet:0 -12px 28px rgba(27,26,23,0.12);--shadow-card:0 1px 2px rgba(27,26,23,0.06),0 2px 8px rgba(27,26,23,0.04);--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--topbar-h:56px;--controls-h:148px}
@media (prefers-color-scheme:dark){:root{--white:#1b1a17;--ground:#141210;--surface:#211e1a;--surface-2:#2a2621;--line:#3a342c;--ink:#f4efe7;--ink-soft:#c7bfb0;--ink-mute:#8e8575;--coral:#ef7a6c;--coral-ink:#ff8f82;--teal:#4ab3ad;--teal-ink:#6fd0ca;--amber:#e5a648;--amber-ink:#f5be6b;--unknown:#7c7466;--shadow-sheet:0 -12px 28px rgba(0,0,0,0.5);--shadow-card:0 1px 2px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3)}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{display:grid;grid-template-rows:auto auto 1fr;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:8px;top:8px;padding:8px 12px;background:var(--ink);color:var(--ground);border-radius:var(--radius-sm);z-index:2000}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;min-height:var(--topbar-h);background:var(--ground);border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--serif);font-size:22px;font-weight:400;margin:0;letter-spacing:0.2px;color:var(--ink);display:flex;gap:6px;align-items:baseline}
.wordmark-sf{color:var(--coral-ink)}
.wordmark-rest{font-style:italic}
.topbar-nav{display:flex;gap:8px}
.topbar-link{color:var(--ink-soft);text-decoration:none;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--radius-pill)}
.topbar-link:hover{background:var(--surface)}
.controls{padding:10px 12px;background:var(--ground);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid transparent;border-radius:var(--radius-pill);padding:0 14px;min-height:44px}
.search:focus-within{border-color:var(--teal);background:var(--white)}
.search-icon{color:var(--ink-mute);flex:0 0 auto}
.search input{flex:1 1 auto;background:transparent;border:0;outline:0;font:inherit;color:var(--ink);padding:10px 0;min-width:0}
.search input::placeholder{color:var(--ink-mute)}
.chip-row{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:2px}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font:inherit;font-size:13px;font-weight:500;color:var(--ink-soft);background:var(--surface);border:1px solid transparent;border-radius:var(--radius-pill);padding:8px 12px;min-height:36px;cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.chip[data-value="any"][aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.map-main{position:relative;min-height:0;width:100%;display:block}
.map{position:absolute;inset:0;background:var(--surface)}
.leaflet-container{width:100%;height:100%;background:var(--surface);font-family:inherit}
.leaflet-control-attribution{background:rgba(255,255,255,0.85);font-size:11px}
@media (prefers-color-scheme:dark){.leaflet-control-attribution{background:rgba(20,18,16,0.85);color:var(--ink-soft)}
.leaflet-control-attribution a{color:var(--teal-ink)}
}
.pin{width:28px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pin svg{width:28px;height:36px;filter:drop-shadow(0 2px 3px rgba(27,26,23,0.25))}
.pin .pin-body{fill:var(--coral)}
.pin .pin-dot{fill:var(--white)}
.pin[data-status="partial"] .pin-body{fill:var(--amber)}
.pin[data-status="unknown"] .pin-body{fill:transparent;stroke:var(--unknown);stroke-width:1.6;stroke-dasharray:3 2.5}
.pin[data-status="unknown"] .pin-dot{fill:var(--unknown)}
.pin.selected .pin-body{fill:var(--teal)}
.pin.selected{transform:translateY(-2px)}
.leaflet-marker-icon.pin-icon{display:flex;align-items:flex-end;justify-content:center;width:44px !important;height:44px !important;margin-left:-22px !important;margin-top:-36px !important;background:transparent;border:0}
.leaflet-marker-icon.pin-icon:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:50%}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--white);border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:var(--shadow-sheet);z-index:1000;transform:translateY(100%);transition:transform 220ms cubic-bezier(0.2,0.8,0.2,1);will-change:transform;touch-action:none;max-height:85vh;padding-bottom:env(safe-area-inset-bottom);display:flex;flex-direction:column}
.sheet[data-state="half"]{transform:translateY(calc(100% - 320px))}
.sheet[data-state="full"]{transform:translateY(10vh)}
.sheet[data-state="closed"]{transform:translateY(100%)}
.sheet-handle{background:transparent;border:0;padding:10px 0 4px 0;width:100%;display:flex;justify-content:center;cursor:grab;min-height:44px}
.sheet-handle-bar{display:block;width:44px;height:5px;border-radius:var(--radius-pill);background:var(--line)}
.sheet-body{padding:4px 20px 20px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.sheet-head{position:relative;margin-bottom:14px}
.sheet-title{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.1;margin:0 0 2px;color:var(--ink)}
.sheet-sub{margin:0;color:var(--ink-mute);font-size:14px}
.status-badge{display:inline-block;margin-top:8px;padding:4px 10px;font-size:12px;font-weight:500;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-soft)}
.status-badge[data-status="confirmed"]{background:color-mix(in srgb,var(--teal) 15%,var(--surface));color:var(--teal-ink)}
.status-badge[data-status="partial"]{background:color-mix(in srgb,var(--amber) 20%,var(--surface));color:var(--amber-ink)}
.status-badge[data-status="unknown"]{background:var(--surface);color:var(--ink-mute);border:1px dashed var(--line)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.tile{background:var(--surface);border-radius:var(--radius);padding:12px;min-height:100px;position:relative;box-shadow:var(--shadow-card)}
.tile[data-status="unknown"],.tile[data-status="error"]{background:transparent;border:1.5px dashed var(--line);box-shadow:none}
.tile-label{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:0.5px;color:var(--ink-mute);text-transform:uppercase}
.tile-value{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.tile[data-status="unknown"] .tile-value,.tile[data-status="error"] .tile-value{color:var(--ink-mute);font-weight:500}
.tile-detail{margin:0;font-size:12px;color:var(--ink-mute);overflow-wrap:anywhere}
.chip-tiny{display:inline-block;margin-top:8px;padding:2px 8px;font-size:10px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-mute)}
.chip-tiny[data-status="confirmed"]{background:color-mix(in srgb,var(--teal) 20%,var(--surface-2));color:var(--teal-ink)}
.chip-tiny[data-status="likely"]{background:color-mix(in srgb,var(--amber) 25%,var(--surface-2));color:var(--amber-ink)}
.chip-tiny[data-status="unknown"]{background:transparent;color:var(--ink-mute);border:1px dashed var(--line)}
.chip-tiny[data-status="error"]{background:transparent;color:var(--coral-ink);border:1px dashed var(--coral)}
.quadrant-wrap{margin-bottom:18px}
.section-label{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:0.5px;color:var(--ink-mute);text-transform:uppercase}
.quadrant{display:block}
.quadrant-axis{font-size:8px;fill:var(--ink-mute);font-family:var(--sans)}
.quadrant-empty{font-size:13px;color:var(--ink-mute);padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.quadrant-label{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}
.actions{display:flex;gap:8px}
.action{flex:1 1 0;text-align:center;text-decoration:none;padding:12px 14px;min-height:44px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-weight:500;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.action:hover{background:var(--surface-2)}
.action[aria-disabled="true"]{color:var(--ink-mute);pointer-events:none;background:var(--surface);opacity:0.6}
.directions-link{background:var(--teal);color:var(--white)}
.directions-link:hover{background:var(--teal-ink)}
@media (prefers-color-scheme:dark){.directions-link{color:#0b1a19}
}
.toast{position:fixed;top:calc(env(safe-area-inset-top,0)+12px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:var(--radius-pill);font-size:13px;z-index:2000;box-shadow:var(--shadow-card)}
.load-error{position:fixed;inset:0;background:var(--ground);display:flex;align-items:center;justify-content:center;z-index:3000;padding:24px}
.load-error[hidden]{display:none}
.load-error-box{max-width:320px;text-align:center}
.load-error h2{font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 8px;color:var(--ink)}
.load-error p{margin:0 0 20px;color:var(--ink-soft)}
.retry-btn{font:inherit;font-weight:500;padding:12px 20px;min-height:44px;border-radius:var(--radius-pill);background:var(--coral);color:var(--white);border:0;cursor:pointer}
.retry-btn:hover{background:var(--coral-ink)}
.about-page{overflow:auto}
.about-page body{grid-template-rows:auto 1fr}
.about-main{padding:24px 20px 48px;max-width:560px;margin:0 auto}
.about-main h2{font-family:var(--serif);font-size:32px;font-weight:400;margin:0 0 12px}
.about-main p{color:var(--ink-soft)}
.about-quadrant{display:block;margin:24px auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.about-corner{font-family:var(--serif);font-style:italic;fill:var(--ink)}
.about-axis-label{font-size:11px;fill:var(--ink-mute);font-family:var(--sans);font-weight:500}
.axis-para{margin:16px 0}
.axis-para h3{font-size:14px;margin:0 0 4px;color:var(--ink)}
.back-link{display:inline-block;margin-bottom:16px;color:var(--teal-ink);text-decoration:none;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:374px){.wordmark{font-size:20px}
.sheet-title{font-size:24px}
.tiles{gap:6px}
.tile{padding:10px;min-height:92px}
}
@media (min-width:720px){body{max-width:430px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
.sheet{max-width:430px;left:50%;transform:translate(-50%,100%)}
.sheet[data-state="half"]{transform:translate(-50%,calc(100% - 320px))}
.sheet[data-state="full"]{transform:translate(-50%,10vh)}
.sheet[data-state="closed"]{transform:translate(-50%,100%)}
}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}
}