/* Stadium Smart Map — The Hunt: black ground, silver ink, white for the one
   thing that matters, Panthers Blue for action. Square corners throughout. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--car-ground-050);
  color: var(--car-ink-primary);
  font-family: var(--car-font-body);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }

.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- layout */
#app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 84px 380px 1fr;
}
#app.panel-closed { grid-template-columns: 84px 0 1fr; }

#rail {
  background: var(--car-black);
  border-right: 1px solid var(--car-rule-color);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 12px 0; gap: 2px; z-index: 3;
}
.rail-mark { display: flex; justify-content: center; padding: 6px 0 14px; }
.rail-mark img { width: 56px; height: auto; }
.venue-mark { display: none; font-family: var(--car-font-body); font-weight: 700; font-size: 11px; line-height: 1.15;
  letter-spacing: var(--car-track-section); text-transform: uppercase; text-align: center; color: var(--car-white); }
.event-mls .rail-mark img, .event-mls .splash-mark { display: none; }
.event-mls .venue-mark { display: block; }
.rail-btn {
  background: none; border: 0; border-left: 3px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; color: var(--car-ink-secondary);
  font-family: var(--car-font-body); font-weight: 700; font-size: 11px;
  letter-spacing: var(--car-track-section); text-transform: uppercase;
}
.rail-btn:hover { color: var(--car-white); }
.rail-btn.on { color: var(--car-white); border-left-color: var(--car-blue); background: var(--car-ground-100); }
.rail-spacer { flex: 1; }

#panel {
  position: relative; overflow: hidden;
  background: var(--car-ground-100);
  border-right: 1px solid var(--car-rule-color);
  z-index: 2;
}
#panel-body { height: 100%; overflow-y: auto; padding: 22px 22px 40px; }
#panel-close { position: absolute; top: 14px; right: 12px; z-index: 1; }
.sheet-handle { display: none; }

#stage { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--car-ground-050); }

/* ---------------------------------------------------------------- controls */
.icon-btn {
  background: none; border: 1px solid transparent; padding: 6px; display: inline-flex;
  color: var(--car-ink-secondary); border-radius: var(--car-radius-1);
}
.icon-btn:hover { color: var(--car-white); border-color: var(--car-ground-300); }

#topbar { position: absolute; top: 14px; left: 14px; z-index: 2; }
.segmented { display: flex; background: var(--car-black); border: 1px solid var(--car-rule-color); }
.segmented button {
  background: none; border: 0; padding: 9px 14px;
  font-family: var(--car-font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: var(--car-track-section); text-transform: uppercase; color: var(--car-ink-secondary);
}
.segmented button.on { background: var(--car-ground-200); color: var(--car-white); box-shadow: inset 0 -3px 0 var(--car-blue); }

#tools { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.tool, #levels button {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--car-black); border: 1px solid var(--car-rule-color); color: var(--car-ink-secondary);
  font-family: var(--car-font-condensed); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
}
.tool:hover, #levels button:hover { color: var(--car-white); border-color: var(--car-silver-400); }
.tool.on { color: var(--car-white); border-color: var(--car-blue); }

#levels { position: absolute; right: 14px; bottom: 44px; display: flex; flex-direction: column; gap: 0; z-index: 2; }
#levels button { margin-top: -1px; }
#levels button.on { background: var(--car-ground-200); border-color: var(--car-blue); color: var(--car-white); box-shadow: inset 3px 0 0 var(--car-blue); position: relative; z-index: 1; }
#levels button.closed { color: var(--car-ink-quiet); text-decoration: line-through; }

#level-caption {
  position: absolute; left: 14px; bottom: 32px; z-index: 2;
  font-family: var(--car-font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: var(--car-track-eyebrow); text-transform: uppercase;
  background: var(--car-black); border: 1px solid var(--car-rule-color); padding: 8px 12px;
  color: var(--car-ink-secondary);
}
#level-caption b { color: var(--car-white); font-weight: 700; }

#chrome {
  position: absolute; left: 14px; bottom: 10px; z-index: 1; pointer-events: none;
  font-family: var(--car-font-condensed); font-weight: 700; font-size: 10px;
  letter-spacing: var(--car-track-eyebrow); text-transform: uppercase; color: var(--car-ink-tertiary);
  text-shadow: 0 0 6px var(--car-black);
}

#toast {
  position: absolute; left: 50%; top: 66px; transform: translate(-50%, -12px);
  background: var(--car-black); border: 1px solid var(--car-blue); color: var(--car-white);
  padding: 10px 14px; max-width: min(460px, 86vw); font-size: 14px;
  opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity var(--car-dur-base) var(--car-ease-hunt), transform var(--car-dur-base) var(--car-ease-hunt);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- panel content */
.eyebrow {
  font-family: var(--car-font-body); font-weight: 700; font-size: 12px;
  letter-spacing: var(--car-track-eyebrow); text-transform: uppercase; color: var(--car-ink-secondary);
}
.panel-title {
  font-family: var(--car-font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--car-track-display); font-size: 34px; line-height: 0.95; margin: 8px 40px 6px 0;
}
.panel-title .accent { font-family: var(--car-font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--car-blue); }
.section-head {
  font-family: var(--car-font-body); font-weight: 700; font-size: 12px; letter-spacing: var(--car-track-section);
  text-transform: uppercase; color: var(--car-ink-secondary);
  border-top: 1px solid var(--car-rule-color); padding-top: 14px; margin: 20px 0 10px;
}
.muted { color: var(--car-ink-secondary); }
.quiet { color: var(--car-ink-tertiary); font-size: 13px; }

.field-input {
  width: 100%; background: var(--car-black); border: 1px solid var(--car-rule-color); color: var(--car-white);
  padding: 12px 12px 12px 40px; font-size: 16px; border-radius: 0; outline: none;
}
.field-input:focus { border-color: var(--car-blue); }
.input-wrap { position: relative; }
.input-wrap .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--car-ink-secondary); }
.input-wrap .tag {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--car-font-condensed); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--car-ink-secondary);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  background: none; border: 1px solid var(--car-rule-color); color: var(--car-ink-secondary);
  padding: 7px 10px; font-family: var(--car-font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
}
.chip .ico { width: 15px; height: 15px; }
.chip:hover, .chip.on { color: var(--car-white); border-color: var(--car-blue); }

.list { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--car-rule-color-quiet); padding: 11px 2px;
}
.row:hover { background: var(--car-ground-200); }
.row .badge-icon {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  background: var(--car-black); border: 1px solid var(--car-rule-color); color: var(--car-white);
}
.row .badge-icon .ico { width: 17px; height: 17px; }
.row .badge-icon.tone-blue { border-color: var(--car-blue); }
.row .badge-icon.tone-silver { border-color: var(--car-silver-400); }
.row .badge-icon.tone-white { border-color: var(--car-white); }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-weight: 700; color: var(--car-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t span { font-size: 13px; color: var(--car-ink-secondary); }
.row .r { font-family: var(--car-font-condensed); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--car-ink-secondary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--car-silver-400); background: none; color: var(--car-white);
  padding: 11px 14px; font-family: var(--car-font-body); font-weight: 700; font-size: 13px;
  letter-spacing: var(--car-track-section); text-transform: uppercase; text-decoration: none; border-radius: 0;
}
.btn .ico { width: 17px; height: 17px; }
.btn:hover { border-color: var(--car-white); }
.btn.primary { background: var(--car-blue); border-color: var(--car-blue); }
.btn.primary:hover { background: var(--car-blue-500); border-color: var(--car-blue-500); }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.btn-row .btn { flex: 1 1 auto; }

.facts { display: grid; gap: 8px; margin-top: 12px; }
.fact { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--car-ink-secondary); }
.fact .ico { width: 17px; height: 17px; margin-top: 1px; color: var(--car-white); }
.pill {
  display: inline-block; font-family: var(--car-font-condensed); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 6px; font-size: 11px; border: 1px solid var(--car-rule-color);
  color: var(--car-ink-secondary); margin-right: 6px; vertical-align: middle;
}
.pill.blue { border-color: var(--car-blue); color: var(--car-white); }
.pill.white { border-color: var(--car-white); color: var(--car-white); }

.nearby { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nearby button {
  background: var(--car-black); border: 1px solid var(--car-rule-color); padding: 10px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.nearby button:hover { border-color: var(--car-blue); }
.nearby b { font-size: 13px; }
.nearby span { font-size: 12px; color: var(--car-ink-secondary); }

/* directions */
.dir-form { display: grid; gap: 8px; }
.trip-line { display: none; }
.picker { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--car-ground-200);
  border: 1px solid var(--car-rule-color); border-top: 0; max-height: 300px; overflow-y: auto;
}
.suggest .row { padding: 9px 10px; }
.toggle { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--car-ink-secondary); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 34px; height: 18px; border: 1px solid var(--car-silver-400); background: var(--car-black); position: relative; margin: 0; cursor: pointer; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--car-silver-400); transition: transform var(--car-dur-fast) var(--car-ease-hunt); }
.toggle input:checked { border-color: var(--car-blue); }
.toggle input:checked::after { transform: translateX(16px); background: var(--car-blue); }

.summary { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 4px; }
.summary .big { font-family: var(--car-font-display); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: var(--car-track-display); }
.summary .unit { font-family: var(--car-font-condensed); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--car-ink-secondary); font-size: 13px; }
.steps { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: s; }
.steps li { border-left: 1px solid var(--car-rule-color); margin-left: 15px; padding: 0 0 14px 22px; position: relative; cursor: pointer; }
.steps li:last-child { border-left-color: transparent; }
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: -15px; top: -2px; width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--car-black); border: 1px solid var(--car-silver-400);
  font-family: var(--car-font-condensed); font-weight: 700; font-size: 13px;
}
.steps li.vertical::before { border-color: var(--car-blue); background: var(--car-blue); }
.steps li.done::before { border-color: var(--car-white); background: var(--car-white); color: var(--car-black); }
.steps li .lvl { font-family: var(--car-font-condensed); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--car-ink-tertiary); text-transform: uppercase; }
.steps li:hover .txt { color: var(--car-white); }
.steps li .txt { color: var(--car-ink-secondary); font-size: 14px; padding-top: 4px; display: block; }
.steps li.active .txt { color: var(--car-white); }
.steps li.warn .txt { color: var(--car-white); }
.steps li.warn::before { border-color: var(--car-white); }
.notice { border: 1px solid var(--car-blue); padding: 10px 12px; font-size: 14px; color: var(--car-white); margin-top: 14px; }
.notice.warn { border-color: var(--car-silver-400); color: var(--car-ink-secondary); }

/* ---------------------------------------------------------------- splash & modal */
#splash {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(0, 133, 207, 0.28), transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(0, 99, 152, 0.22), transparent 70%),
    var(--car-ground-000);
  transition: opacity var(--car-dur-slow) var(--car-ease-hunt);
}
#splash.gone { opacity: 0; pointer-events: none; }
.splash-inner { max-width: 520px; text-align: left; }
.splash-mark { width: 120px; height: auto; margin-bottom: 26px; }
#splash h1 { margin: 10px 0 14px; line-height: 0.9; }
#splash h1 .display {
  font-family: var(--car-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--car-track-display);
  font-size: clamp(48px, 11vw, 92px); display: block;
}
#splash h1 .accent {
  font-family: var(--car-font-accent); font-style: italic; font-weight: 400; color: var(--car-blue);
  font-size: clamp(56px, 13vw, 108px); text-transform: uppercase;
}
#splash p { color: var(--car-ink-secondary); font-size: 17px; margin: 0 0 26px; max-width: 420px; }
.splash-chrome {
  margin-top: 34px; font-family: var(--car-font-condensed); font-weight: 700; font-size: 10px;
  letter-spacing: var(--car-track-eyebrow); text-transform: uppercase; color: var(--car-ink-tertiary);
}

#modal { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.7); display: grid; place-items: center; padding: 16px; }
#modal[hidden] { display: none; }
.modal-card { background: var(--car-ground-100); border: 1px solid var(--car-rule-color); padding: 24px; width: min(380px, 100%); position: relative; }
.modal-close { position: absolute; top: 10px; right: 10px; }
.qr { background: var(--car-white); padding: 14px; display: grid; place-items: center; margin: 14px 0; }
.qr svg { width: 220px; height: 220px; }
.qr-url { font-size: 12px; color: var(--car-ink-secondary); word-break: break-all; }

/* map chrome: the engine's stylesheet loads after this one, so these lead with #map */
.maplibregl-ctrl-attrib, .mapboxgl-ctrl-attrib { font-size: 10px; }
#map .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--car-black); color: var(--car-ink-secondary); border-radius: 0; }
#map .maplibregl-ctrl-attrib.maplibregl-compact a { color: var(--car-ink-secondary); }
#map .maplibregl-ctrl-attrib-button { filter: invert(1); }
/* Mapbox's logo sits bottom-left and may not be restyled, so our UI moves up */
.engine-mapbox #chrome { bottom: 44px; }
.engine-mapbox #level-caption { bottom: 66px; }
.here-marker {
  width: 18px; height: 18px; background: var(--car-blue); border: 3px solid var(--car-white);
  box-shadow: 0 0 0 6px rgba(0, 133, 207, 0.35);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 760px) {
  #app, #app.panel-closed { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 64px; }
  #stage { grid-row: 1; grid-column: 1; }
  #rail {
    grid-row: 2; flex-direction: row; padding: 0 4px; border-right: 0; border-top: 1px solid var(--car-rule-color);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 6; /* the sheet slides in and out behind the tab bar */
  }
  .rail-mark, .rail-spacer { display: none; }
  .rail-btn { flex: 1 1 auto; min-width: 0; border-left: 0; border-top: 3px solid transparent; padding: 8px 2px; font-size: 11px; letter-spacing: 0.04em; }
  .rail-btn span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-btn.on { border-top-color: var(--car-blue); border-left-color: transparent; }
  /* The sheet sits above every map overlay. app.js sets its height to one of three
     stops (peek, half, full) and follows the finger in between. */
  #panel {
    position: fixed; left: 0; right: 0; bottom: 64px; height: 50%; z-index: 5;
    display: flex; flex-direction: column;
    border-right: 0; border-top: 1px solid var(--car-rule-color);
    transform: translateY(0); visibility: visible;
    transition: transform var(--car-dur-base) var(--car-ease-hunt), height var(--car-dur-base) var(--car-ease-hunt), visibility 0s;
  }
  /* closed: clear of the tab bar whatever its height, and hidden once it has slid away */
  #app.panel-closed #panel {
    transform: translateY(calc(100% + 64px)); visibility: hidden; pointer-events: none;
    transition: transform var(--car-dur-base) var(--car-ease-hunt), height var(--car-dur-base) var(--car-ease-hunt),
      visibility 0s linear var(--car-dur-base);
  }
  #app.sheet-dragging #panel { transition: none; }
  #panel-body { flex: 1; min-height: 0; padding: 6px 16px calc(24px + var(--kb, 0px)); overscroll-behavior: contain; }
  #panel-close { top: 6px; right: 8px; }
  .sheet-handle {
    display: block; flex: none; width: 100%; height: 24px; padding: 0; margin: 0;
    background: none; border: 0; touch-action: none; cursor: grab;
  }
  .sheet-handle span { display: block; width: 40px; height: 3px; margin: 10px auto 0; background: var(--car-silver-400); }
  .sheet-handle:focus-visible { outline: 1px solid var(--car-blue); outline-offset: -1px; }
  #app.sheet-dragging .sheet-handle { cursor: grabbing; }
  .panel-title { font-size: 28px; }
  #topbar { top: calc(10px + env(safe-area-inset-top)); left: 16px; transform: none; }
  .segmented button { padding: 9px 9px; font-size: 12px; }
  #tools { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
  .tool, #levels button { width: 42px; height: 42px; }
  #levels { right: 10px; bottom: 30px; }
  #level-caption { top: auto; bottom: 30px; left: 16px; }
  #chrome { display: none; }
  /* with the sheet open: levels become a row just above it, the caption steps aside */
  #app:not(.panel-closed) #levels { flex-direction: row; bottom: calc(var(--sheet-h, 0px) + 10px); }
  #app:not(.panel-closed) #levels button { margin-top: 0; margin-left: -1px; }
  #app:not(.panel-closed) #level-caption { display: none; }
  /* attribution sits at the left, above the sheet. app.js folds it to its (i) on open;
     MapLibre unfolds it once the basemap credits arrive, so it wraps left of the levels */
  #app:not(.panel-closed) .maplibregl-ctrl-bottom-right,
  #app:not(.panel-closed) .mapboxgl-ctrl-bottom-right { bottom: calc(var(--sheet-h, 0px) + 6px); right: auto; left: 0; }
  #app:not(.panel-closed) #map .maplibregl-ctrl-attrib { box-sizing: border-box; max-width: calc(100vw - 196px); }
  #app:not(.panel-closed) .mapboxgl-ctrl-bottom-left { bottom: var(--sheet-h, 0px); }
  /* a tall sheet leaves no room for them between the tools and its top edge */
  #app.sheet-tall #levels { visibility: hidden; }
  #app.sheet-tall .maplibregl-ctrl-bottom-right, #app.sheet-tall .mapboxgl-ctrl-bottom-right,
  #app.sheet-tall .mapboxgl-ctrl-bottom-left { display: none; }
  .tool.under-sheet { visibility: hidden; }
  #toast { top: calc(60px + env(safe-area-inset-top)); z-index: 6; }
  /* with a route, the trip collapses to one line so the time and steps lead */
  .trip-line {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; text-align: left;
    background: var(--car-black); border: 1px solid var(--car-rule-color); padding: 10px 12px;
  }
  .trip-line .ico { width: 17px; height: 17px; color: var(--car-ink-secondary); }
  .trip-line .t { flex: 1; min-width: 0; font-size: 14px; color: var(--car-ink-secondary); }
  .trip-line .t b { color: var(--car-white); font-weight: 700; }
  .trip-line .r {
    font-family: var(--car-font-condensed); font-weight: 700; font-size: 12px; letter-spacing: var(--car-track-section);
    text-transform: uppercase; color: var(--car-white);
  }
  .dir-form.collapsed { display: none; }
}
/* six tab labels don't fit 320px phones in the regular cut */
@media (max-width: 360px) {
  .rail-btn { font-family: var(--car-font-condensed); letter-spacing: 0.02em; }
}
/* short landscape screens: columns of tools and levels would stack onto each other */
@media (max-width: 760px) and (max-height: 480px) {
  #tools { flex-direction: row; }
  #levels { flex-direction: row; }
  #levels button { margin-top: 0; margin-left: -1px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #app #panel, #app.panel-closed #panel { transition: none; }
}