@font-face { font-family: Fraunces; src: url(fonts/fraunces-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap }
:root {
  --bg: #0b0b14; --ink: #ece9e4; --dim: #8a8ab0; --cyan: #63e6d3; --purple: #b39dfb; --amber: #e6b17e; --green: #7fd88f;
  --rule: rgba(236, 233, 228, .14); --pane: rgba(11, 11, 20, .88); --soft: rgba(236, 233, 228, .07);
  --serif: Fraunces, Georgia, 'Times New Roman', serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sheet-h: 110px
}
:root[data-theme=light] { --bg: #f6f4ef; --ink: #1a1a24; --dim: #6b6b85; --cyan: #0f9a88; --purple: #6b4fd4; --amber: #b5751c; --green: #2e9644; --rule: rgba(26, 26, 36, .14); --pane: rgba(246, 244, 239, .92); --soft: rgba(26, 26, 36, .06) }
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.35 var(--sans); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100% }
button { font: inherit; color: inherit; cursor: pointer }
a { color: var(--cyan) }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px }
.dim { color: var(--dim) }
.name { font-family: var(--serif); font-weight: 500 }
[hidden] { display: none !important }

#map { position: fixed; inset: 0; background: var(--bg) }
.maplibregl-ctrl-top-left { top: calc(62px + var(--sat)) }
.maplibregl-ctrl-attrib { background: none !important; font: 10px var(--mono); color: var(--dim) }
.maplibregl-ctrl-attrib a { color: var(--dim) }
.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--pane) !important; border-radius: 12px }
.maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 2px 28px 2px 8px; font-size: 10px }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 24px }
.maplibregl-ctrl-attrib-button { filter: invert(.6) }
:root[data-theme=light] .maplibregl-ctrl-attrib-button { filter: none; opacity: .6 }

/* --- top bar */
.top { position: fixed; top: calc(8px + var(--sat)); left: 10px; right: 10px; z-index: 5; display: flex; align-items: center; height: 48px; padding: 0 2px; background: var(--pane); border: 1px solid var(--rule); border-radius: 24px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.top input { flex: 1; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 17px var(--sans); outline: none }
.top input::placeholder { color: var(--dim) }
.top input::-webkit-search-cancel-button { display: none }
.ib { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--ink) }
.ib svg { width: 22px; height: 22px }
.lens { color: var(--dim); width: 40px }
body[data-view=idle] .lens { display: grid } body:not([data-view=idle]) .lens { display: none }

/* --- floating buttons */
.fabs { position: fixed; right: 12px; bottom: calc(var(--sheet-h) + 14px + var(--sab)); z-index: 5; display: flex; flex-direction: column; gap: 10px; transition: bottom .25s cubic-bezier(.2, .8, .2, 1) }
.fab { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--pane); color: var(--ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0, 0, 0, .25) }
.fab svg { width: 22px; height: 22px }
.fab.on { color: var(--cyan) }
#compass svg { transition: transform .1s linear }
.recenter { position: fixed; left: 50%; bottom: calc(118px + var(--sab)); z-index: 8; transform: translateX(-50%); padding: 10px 18px; border: 1px solid var(--rule); border-radius: 22px; background: var(--pane); color: var(--cyan); font-weight: 600; backdrop-filter: blur(12px) }

/* --- bottom sheet */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; height: 44vh; display: flex; flex-direction: column; padding-bottom: var(--sab); background: var(--pane); border-top: 1px solid var(--rule); border-radius: 18px 18px 0 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: height .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -4px 24px rgba(0, 0, 0, .2) }
.sheet.drag { transition: none }
.handle { flex: none; height: 26px; display: grid; place-items: center; touch-action: none; cursor: grab }
.handle i { width: 36px; height: 4px; border-radius: 2px; background: var(--dim); opacity: .5 }
.body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.body h3 { margin: 14px 0 2px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim) }
.hint { margin: 8px 0; color: var(--dim); font-size: 14px }
.hint b { color: var(--ink); font-weight: 500 }
.chips { display: flex; gap: 8px; padding: 2px 0 8px; overflow-x: auto; scrollbar-width: none }
.chips::-webkit-scrollbar { display: none }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 18px; background: none; font-size: 14px }
.chip svg { width: 18px; height: 18px; color: var(--dim) }
.chip.amber svg { color: var(--amber) }

.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left }
.row > svg { width: 22px; height: 22px; flex: none; color: var(--dim) }
.row.local > svg { color: var(--cyan) }
.row > div { flex: 1; min-width: 0; display: flex; flex-direction: column }
.row .name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row .label { font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row .right { flex: none; display: flex; flex-direction: column; align-items: flex-end; color: var(--dim) }
.row .right .open { color: var(--green) }
.row .right .closed { color: var(--amber) }
.cathead { display: flex; justify-content: space-between; padding: 8px 0 2px; border-bottom: 1px solid var(--rule) }
.seg { display: inline-flex; margin: 0 10px 0 4px; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; vertical-align: middle }
.seg button { padding: 5px 9px; border: 0; background: none; color: var(--dim); font: 12px var(--mono) }
.seg button.on { color: var(--ink); background: var(--soft) }
.settings { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); line-height: 2.4; white-space: nowrap; overflow-x: auto; scrollbar-width: none }
.settings .mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase }
.nokey { padding: 10px 0; color: var(--amber) }

/* --- place */
.place h1 { margin: 2px 0 0; font: 500 26px/1.15 var(--serif); letter-spacing: -.01em }
.place .label { color: var(--dim); margin-top: 2px }
.place .meta { margin-top: 8px }
.facts { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px }
.facts .f { display: flex; gap: 10px; align-items: baseline }
.facts .f .k { flex: none; width: 64px; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim) }
.facts a { text-decoration: none }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font: 12px var(--mono); color: var(--bg); background: var(--amber) }
.tag.green { background: var(--green) }
.actions { display: flex; gap: 8px; margin: 16px 0 8px }
.actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border: 1px solid var(--rule); border-radius: 21px; background: none; font-size: 15px }
.actions button svg { width: 18px; height: 18px }
.actions .primary, .start { border-color: transparent; background: var(--hue, var(--cyan)); color: var(--bg); font-weight: 600 }
.more { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; color: var(--dim) }
.more button, .more a { padding: 4px 0; border: 0; background: none; color: var(--dim); font: inherit; text-decoration: none }
.more button:active { color: var(--ink) }

/* --- directions */
.od { position: relative; padding-right: 48px }
.odrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; font-size: 15px }
.odrow .ic { width: 22px; height: 22px; flex: none; color: var(--dim) }
.odrow .ic svg { width: 22px; height: 22px }
.odrow .ic.amber { color: var(--amber) }
.odrow span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.od .swap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--dim) }
.modes { display: flex; margin: 6px 0 10px; border-bottom: 1px solid var(--rule) }
.mode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--dim) }
.mode svg { width: 22px; height: 22px }
.mode b { font-weight: 500 }
.mode.on { color: var(--hue); border-bottom-color: var(--hue) }
.sum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.sum .big { font-size: 30px; font-weight: 600; line-height: 1; color: var(--hue) }
.via { color: var(--dim); margin-top: 2px }
.flags { display: flex; gap: 6px; margin-top: 6px }
.flags span { padding: 1px 8px; border: 1px solid var(--rule); border-radius: 10px; font: 12px var(--mono); color: var(--amber) }
.start { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin: 14px 0 6px; border: 0; border-radius: 23px; font-size: 16px }
.start svg { width: 18px; height: 18px }
.alt { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left }
.alt b { font-weight: 500 }
.toggle { display: block; padding: 10px 0 4px; border: 0; background: none; text-align: left }
.steps { list-style: none; margin: 4px 0 0; padding: 0 }
.steps li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule) }
.steps svg { width: 22px; height: 22px; flex: none; color: var(--dim) }
.steps li > div { display: flex; flex-direction: column }
.steps .ins { font-family: var(--serif); font-size: 15px }
.err { color: var(--amber); padding: 8px 0 }

/* --- navigation */
.navtop { position: fixed; top: calc(10px + var(--sat)); left: 10px; right: 10px; z-index: 7; padding: 12px 14px; background: var(--pane); border: 1px solid var(--rule); border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.nx { display: flex; gap: 14px; align-items: center }
.nx .big { width: 58px; height: 58px; flex: none; color: var(--hue, var(--cyan)) }
.nxd { display: flex; flex-direction: column; min-width: 0 }
.nxd .dist { font-size: 32px; font-weight: 600; line-height: 1 }
.nxd .ins { margin-top: 5px; font: 500 19px/1.2 var(--serif) }
.then { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--dim) }
.then svg { width: 18px; height: 18px; flex: none }
.arrived { display: flex; flex-direction: column }
.arrived .name { font-size: 26px; color: var(--green) }
.navbot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; padding: 6px 16px calc(10px + var(--sab)); background: var(--pane); border-top: 1px solid var(--rule); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.strip { display: block; width: 100%; height: 18px; margin-bottom: 4px }
.nb { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.nb .eta { display: block; font-size: 26px; font-weight: 600; line-height: 1.1 }
.nbb { display: flex }
.nbb .ib { color: var(--dim) }
.nbb .ib.on { color: var(--cyan) }

/* --- markers */
.me { width: 24px; height: 24px; position: relative }
.me .dot { position: absolute; inset: 5px; border-radius: 50%; background: #63e6d3; box-shadow: 0 0 0 2.5px #fff, 0 0 12px rgba(99, 230, 211, .9) }
.me .cone { position: absolute; left: 50%; bottom: 50%; width: 54px; height: 60px; transform: translateX(-50%); background: linear-gradient(to top, rgba(99, 230, 211, .5), rgba(99, 230, 211, 0)); clip-path: polygon(50% 100%, 0 0, 100% 0); opacity: 0; transition: opacity .3s }
.me.hd .cone { opacity: 1 }
.pin { color: var(--amber); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) }
.pin svg { width: 36px; height: 36px; display: block }
.pin.origin { color: var(--cyan) } .pin.origin svg { width: 26px; height: 26px }
.rm { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); cursor: pointer }
.rm.local { background: var(--cyan) }
.rm.on { transform: scale(1.4) }

#toast { position: fixed; left: 50%; top: calc(66px + var(--sat)); z-index: 20; transform: translateX(-50%); max-width: 90vw; padding: 8px 14px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s }
#toast.show { opacity: 1 }
@media (min-width: 720px) {
  .top { right: auto; width: 420px }
  .sheet { left: 10px; right: auto; width: 420px; bottom: 10px; border-radius: 18px; border: 1px solid var(--rule) }
  .fabs { bottom: 24px }
  .navtop { right: auto; width: 420px }
  .navbot { right: auto; width: 440px; left: 10px; bottom: 10px; border-radius: 16px; border: 1px solid var(--rule) }
  .recenter { left: 230px }
}