/* PreXion Route · shared styles
   Layout: full-bleed phone app on obsidian. Fixed HUD on top, live map or AR in the
   middle, a glass card sheet at the bottom. One accent (Elite blue) carries the route;
   the hot/cold scale is semantic and only appears where an approach is measured. */
:root {
  --obsidian: #050505;
  --ink: #0A0B0C;
  --card: #0F1113;
  --card-2: #15181B;
  --line: #1E2226;
  --line-2: #2A2F35;
  --elite: #0091D2;
  --elite-hi: #3FB8F0;
  --champagne: #83C3D6;
  --silver: #D1D1D1;
  --muted: #8B939A;
  --white: #F4F7F9;
  --cold: #83C3D6;
  --warm: #F2C14E;
  --hot: #FF7A2F;
  --fire: #FF3B5C;
  --ok: #3DDC97;
  --glass: rgba(10, 12, 14, .78);
  --font-display: 'Montserrat', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --r: 4px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--obsidian); color: var(--silver); }
body { font: 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
[hidden] { display: none !important; }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--champagne); }
:focus-visible { outline: 2px solid var(--elite-hi); outline-offset: 2px; }

/* ---------- type */
.eyebrow { font: 600 11px/1.2 var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: var(--champagne); margin: 0; }
.display { font: 800 clamp(30px, 9vw, 44px)/1.02 var(--font-display); letter-spacing: -.02em; color: var(--white); margin: 0; text-wrap: balance; }
.display em { font-style: normal; background: linear-gradient(100deg, var(--elite), var(--champagne) 60%, var(--elite)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--muted); margin: 0; max-width: 36ch; }
.num { font-variant-numeric: tabular-nums; }
.label { font: 600 10.5px/1.2 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--r);
  font: 700 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-position .5s ease, transform .15s ease, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn-gold { color: #fff; background: linear-gradient(135deg, var(--elite), var(--champagne), var(--elite)); background-size: 200% 100%; box-shadow: 0 10px 30px -12px rgba(0, 145, 210, .8); }
.btn-gold:hover { background-position: 100% 0; }
.btn-line { color: var(--elite-hi); background: transparent; border: 1px solid rgba(0, 145, 210, .6); }
.btn-quiet { color: var(--silver); background: var(--card-2); border: 1px solid var(--line-2); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 11px; letter-spacing: .12em; }
.btn-block { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--silver); font: 600 13px/1.1 var(--font-body); }
.chip[aria-pressed="true"], .chip.on { border-color: var(--elite); background: rgba(0, 145, 210, .14); color: var(--white); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.seg button { border: 0; background: transparent; color: var(--muted); min-height: 34px; padding: 0 14px; border-radius: 999px; font: 700 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.seg button[aria-pressed="true"] { background: var(--elite); color: #fff; }

/* ---------- form */
.field { display: grid; gap: 6px; }
.field label { font: 600 10.5px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--ink); color: var(--white); font-size: 16px; }
.input:focus { border-color: var(--elite); outline: none; box-shadow: 0 0 0 3px rgba(0, 145, 210, .25); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--elite); flex: none; }
.err { color: var(--fire); font-size: 13px; min-height: 1em; margin: 0; }

/* ---------- floor plan (SVG, map units) */
.fl-hall { fill: #08090A; stroke: #23282D; stroke-width: .14; }
.fl-gridline { fill: none; stroke: rgba(0, 145, 210, .07); stroke-width: .03; }
.fl-concourse { fill: #040405; stroke: #23282D; stroke-width: .1; stroke-dasharray: .5 .35; }
.fl-core { fill: #0F1113; stroke: #23282D; stroke-width: .08; }
.fl-zone { font: 700 1.1px var(--font-display); letter-spacing: .5px; fill: #262B30; text-anchor: middle; }
.fl-area { fill: #0E1012; stroke: #1F2327; stroke-width: .06; }
.fl-area-t { font: 700 .55px var(--font-display); letter-spacing: .08px; fill: #4F575E; text-anchor: middle; dominant-baseline: central; }
.fl-booth { fill: #131518; stroke: #262A2F; stroke-width: .05; }
.fl-open { fill: #0B0C0E; stroke: #1B1E22; }
.fl-num { font: 600 .4px var(--font-body); fill: #4B535A; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fl-prx { fill: var(--elite); stroke: var(--champagne); stroke-width: .1; }
.fl-prx-glow { animation: prxGlow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fl-prx-t { font: 800 .36px var(--font-display); fill: #fff; text-anchor: middle; dominant-baseline: central; letter-spacing: .02px; }
.fl-prx-n { font: 700 .5px var(--font-display); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.fl-door rect { fill: rgba(0, 145, 210, .25); stroke: var(--elite); stroke-width: .08; }
.fl-door text { font: 800 .62px var(--font-display); fill: var(--white); text-anchor: middle; dominant-baseline: central; }
.fl-door.here rect { fill: var(--elite); }
@keyframes prxGlow { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

.rt-glow { fill: none; stroke: var(--elite); stroke-width: 1.1; stroke-opacity: .22; stroke-linecap: round; stroke-linejoin: round; }
.rt-line { fill: none; stroke: var(--elite-hi); stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; }
.rt-flow { fill: none; stroke: #fff; stroke-width: .13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .2 1.1; animation: flow 1.1s linear infinite; }
.rt-done { fill: none; stroke: #39414A; stroke-width: .3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .3 .35; }
@keyframes flow { to { stroke-dashoffset: -1.3; } }
.me-halo { fill: rgba(63, 184, 240, .16); stroke: rgba(63, 184, 240, .45); stroke-width: .05; animation: halo 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.me-dot { fill: #fff; stroke: var(--elite); stroke-width: .2; }
.me-cone { fill: url(#pxCone); }
.pin-ring { fill: none; stroke: #fff; stroke-width: .12; stroke-dasharray: .3 .25; }
@keyframes halo { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}