.street-search { position:absolute; z-index:800; top:16px; left:16px; width:min(420px, calc(100% - 90px)); background:var(--surface, #fff); color:var(--text, #152536); padding:10px; border-radius:12px; box-shadow:0 2px 12px #0003; }
.street-search form { display:flex; gap:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.street-search input { min-width:0; flex:1; }
.street-search small { font-size:11px; }
.street-search p:empty { display:none; }
.street-result { display:block; width:100%; text-align:left; min-height:44px; padding:8px; border:0; background:transparent; color:inherit; }
.street-result:hover { background:#80808022; }
.shared-pin-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 0; }
.shared-pin-row .text-button { flex:1; text-align:left; overflow-wrap:anywhere; }
:root {
  color-scheme: light dark;
  --bg: #edf1f5;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-subtle: #f4f6f8;
  --text: #101820;
  --secondary: #5c6670;
  --hairline: rgba(16, 24, 32, 0.12);
  --blue: #0878d1;
  --blue-dark: #075da0;
  --orange: #e66a00;
  --red: #c9282d;
  --green: #1f8c54;
  --amber: #b96800;
  --shadow: 0 16px 48px rgba(22, 35, 48, 0.13);
  --radius-large: 24px;
  --radius-medium: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

#participant-role { width:100%; min-height:48px; margin:8px 0 16px; padding:10px; font:inherit; color:var(--text); background:var(--surface-solid); border:1px solid var(--hairline); border-radius:10px; }
#web-location-consent input { width:20px; height:20px; vertical-align:middle; }
.web-location-panel { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--hairline); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080c10;
    --surface: rgba(22, 27, 33, 0.96);
    --surface-solid: #171c22;
    --surface-subtle: #20262d;
    --text: #f4f7f9;
    --secondary: #a9b3bc;
    --hairline: rgba(255, 255, 255, 0.13);
    --blue: #4aa8f2;
    --blue-dark: #2388d6;
    --orange: #ff963b;
    --red: #ff5d62;
    --green: #51c887;
    --amber: #ffb457;
    --shadow: 0 18px 56px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
#map:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 65%, transparent);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-solid);
  color: var(--blue);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  height: 72px;
  padding: env(safe-area-inset-top) 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: saturate(160%) blur(18px);
  position: relative;
  z-index: 1000;
}

.brand-lockup,
.header-status,
.connection-pill,
.section-heading-row,
.button-row,
.dialog-actions {
  display: flex;
  align-items: center;
}

.brand-lockup { gap: 12px; }
.brand-lockup strong { display: block; font-size: 1.08rem; letter-spacing: -0.01em; }
.brand-lockup small { display: block; color: var(--secondary); font-size: 0.78rem; }

.brand-mark {
  width: 38px;
  height: 38px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  border-radius: 11px;
  background: linear-gradient(145deg, #0878d1, #07518b);
  box-shadow: 0 5px 14px rgba(8, 120, 209, 0.28);
}

.brand-mark span { background: #fff; border-radius: 2px; opacity: 0.95; }

.header-status { gap: 10px; }

.prototype-badge,
.mode-badge,
.freshness-badge,
.search-status {
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
  font-weight: 750;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.connection-pill {
  gap: 7px;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--secondary);
  font-size: 0.78rem;
  font-weight: 650;
}

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.connection-pill.is-live { color: var(--green); }
.connection-pill.is-connecting { color: var(--amber); }
.connection-pill.is-error { color: var(--red); }

.join-view {
  min-height: calc(100vh - 72px);
  padding: 56px 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(8, 120, 209, 0.15), transparent 32rem),
    radial-gradient(circle at 85% 85%, rgba(230, 106, 0, 0.12), transparent 30rem),
    var(--bg);
}

.join-card {
  width: min(100%, 570px);
  padding: clamp(26px, 5vw, 44px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow);
}

.eyebrow,
.card-kicker,
.banner-kicker,
.pursuit-label {
  margin: 0 0 7px;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.join-card h1,
.operation-panel h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.lede { margin: 14px 0 24px; color: var(--secondary); font-size: 1.03rem; }

.safety-notice,
.warning-card,
.observer-note {
  padding: 14px 16px;
  border-radius: 14px;
}

.safety-notice {
  margin-bottom: 26px;
  display: grid;
  gap: 3px;
  background: color-mix(in srgb, var(--orange) 10%, var(--surface-solid));
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
}

.safety-notice strong { color: var(--orange); }
.safety-notice span { color: var(--secondary); font-size: 0.9rem; }

#join-form { display: grid; }
#join-form > label:not(.acknowledgement) { margin: 14px 0 7px; font-weight: 700; }

input[type="text"], textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  resize: vertical;
}

input[type="text"]:focus, textarea:focus { border-color: var(--blue); }
.field-help { margin: 6px 2px 0; color: var(--secondary); font-size: 0.8rem; }

.acknowledgement {
  margin: 22px 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
}

.acknowledgement input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--blue); }
.form-error { margin: 0 0 12px; color: var(--red); font-weight: 650; }

.primary-button,
.secondary-button,
.danger-button,
.small-button,
.icon-button,
.text-button,
.banner-close {
  border: 0;
  cursor: pointer;
  font-weight: 700;
}

.primary-button,
.danger-button {
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 13px;
  color: #fff;
}

.primary-button { background: var(--blue); }
.primary-button:hover { background: var(--blue-dark); }
.primary-button:disabled { opacity: 0.55; cursor: wait; }
.danger-button { background: var(--red); }

.secondary-button,
.small-button {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 10px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-subtle));
}

.danger-text { color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--surface-subtle)); }
.privacy-summary, .external-note { margin: 20px 0 0; color: var(--secondary); font-size: 0.8rem; }
a { color: var(--blue); }

.console-view {
  height: calc(100vh - 72px);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  overflow: hidden;
}

.console-view:has(.web-location-panel:not([hidden])) { grid-template-rows:auto minmax(0, 1fr); }
.map-panel { position: relative; min-width: 0; background: #cbd5dc; }
#map { width: 100%; height: 100%; z-index: 0; }

.map-tools {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 500;
  display: grid;
  gap: 9px;
}

.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  box-shadow: 0 5px 18px rgba(22, 35, 48, 0.16);
  font-size: 1.2rem;
}

.icon-button.is-active { color: var(--red); }

.map-empty-state {
  pointer-events: none;
  position: absolute;
  z-index: 450;
  top: 50%;
  left: 50%;
  width: min(80%, 340px);
  transform: translate(-50%, -50%);
  padding: 17px 20px;
  display: grid;
  gap: 4px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.map-empty-state span { color: var(--secondary); font-size: 0.84rem; }

.map-banner {
  position: absolute;
  z-index: 500;
  left: 50%;
  bottom: 22px;
  width: min(calc(100% - 36px), 680px);
  transform: translateX(-50%);
  padding: 14px 48px 14px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 6px solid var(--blue);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.map-banner.is-pursuit { border-left-color: var(--red); }
.map-banner.is-pursuit .banner-kicker { color: var(--red); }
.map-banner strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.12rem; }
.banner-metrics { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.banner-metrics span { padding: 5px 8px; background: var(--surface-subtle); border-radius: 8px; font-size: 0.8rem; font-weight: 700; }
.banner-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; background: transparent; color: var(--secondary); font-size: 1.5rem; }

.operation-panel {
  overflow-y: auto;
  padding: 24px;
  background: var(--surface-solid);
  border-left: 1px solid var(--hairline);
}

.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.operation-panel h1 { font-size: 1.72rem; }
.operation-panel h2 { margin: 0; font-size: 1rem; line-height: 1.2; }

.warning-card { margin-bottom: 14px; color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface-subtle)); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); font-size: 0.88rem; font-weight: 650; }

.summary-card,
.pursuit-card,
.units-section,
.observer-note {
  margin-top: 13px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-medium);
  background: var(--surface-subtle);
}

.section-heading-row { justify-content: space-between; gap: 12px; align-items: flex-start; }
.card-kicker { margin-bottom: 4px; color: var(--secondary); font-size: 0.65rem; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 0; }
.summary-grid div, .detail-list div { min-width: 0; }
dt { color: var(--secondary); font-size: 0.72rem; }
dd { margin: 2px 0 0; font-weight: 720; font-variant-numeric: tabular-nums; }

.pursuit-card {
  background: color-mix(in srgb, var(--red) 9%, var(--surface-subtle));
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

.pursuit-label { color: var(--red); }
.pursuit-card p:not(.pursuit-label) { margin: 7px 0 12px; color: var(--secondary); font-size: 0.84rem; }

.progress-row { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.progress-row strong { color: var(--red); font-size: 1.45rem; }
.progress-row span { color: var(--secondary); font-size: 0.77rem; text-align: right; }
.progress-track { height: 8px; margin: 9px 0 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--secondary) 18%, transparent); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--red); border-radius: inherit; transition: width 220ms ease; }
.muted-text, .caution-text { margin: 8px 0 0; color: var(--secondary); font-size: 0.8rem; }
.caution-text { padding-top: 9px; border-top: 1px solid var(--hairline); }

.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 15px 0; }
.freshness-badge.is-live { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.freshness-badge.is-stationary { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.freshness-badge.is-delayed { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.freshness-badge.is-stale { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.freshness-badge.is-offline { color: var(--secondary); background: color-mix(in srgb, var(--secondary) 12%, transparent); }
.button-row { gap: 9px; align-items: stretch; }
.button-row > * { flex: 1; text-align: center; }
.link-button { display: inline-grid; place-items: center; text-decoration: none; }
.external-note { margin-top: 10px; }

.unit-list { margin-top: 12px; display: grid; gap: 8px; }
.unit-row {
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
}

.unit-row:hover, .unit-row.is-selected { border-color: color-mix(in srgb, var(--blue) 65%, transparent); }
.unit-row.is-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); }
.unit-row.is-pursuit { border-color: color-mix(in srgb, var(--red) 48%, transparent); }
.unit-row-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 0.9rem; }
.unit-row.is-pursuit .unit-row-icon { background: var(--red); }
.unit-row-title, .unit-row-detail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-row-title { font-weight: 730; }
.unit-row-detail { color: var(--secondary); font-size: 0.73rem; }
.unit-row-speed { font-size: 0.78rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.empty-list { margin: 8px 0 0; color: var(--secondary); font-size: 0.84rem; }
.text-button { min-height: 30px; padding: 2px 5px; background: transparent; color: var(--blue); font-size: 0.77rem; }

.observer-note { color: var(--secondary); font-size: 0.82rem; }
.observer-note strong { color: var(--text); }
.observer-note p { margin: 4px 0 0; }

.panel-footer { padding: 18px 3px 4px; display: flex; gap: 13px; flex-wrap: wrap; color: var(--secondary); font-size: 0.72rem; }

dialog {
  width: min(calc(100% - 32px), 430px);
  padding: 0;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

dialog::backdrop { background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(4px); }
dialog form { padding: 24px; }
dialog h2 { margin: 0; font-size: 1.4rem; }
dialog p:not(.eyebrow) { color: var(--secondary); }
.dialog-actions { margin-top: 22px; justify-content: flex-end; gap: 10px; }

.leaflet-control-attribution { font-size: 9px !important; }
.leaflet-control-zoom a { color: #111 !important; }
.leaflet-div-icon { background: transparent; border: 0; }

.unit-map-marker { position: relative; width: 94px; height: 60px; transform: translate(-35px, -25px); }
.unit-map-arrow {
  position: absolute;
  left: 35px;
  top: 25px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 12%;
  transform-origin: center;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
}

.unit-map-arrow::before { content: "▲"; font-size: 12px; transform: translateY(-1px); }
.unit-map-label { position: absolute; left: 48px; top: 0; max-width: 110px; padding: 4px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 7px; color: #fff; background: #26333f; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24); font-size: 11px; font-weight: 750; }
.unit-map-marker.is-label-hidden .unit-map-label { visibility: hidden; }
.unit-map-marker.is-selected .unit-map-arrow { box-shadow: 0 0 0 4px rgba(8, 120, 209, 0.35), 0 3px 9px rgba(0, 0, 0, 0.3); }
.unit-map-marker.is-stationary .unit-map-arrow { background: var(--green); }
.unit-map-marker.is-delayed .unit-map-arrow { background: var(--amber); }
.unit-map-marker.is-stale .unit-map-arrow { background: var(--red); }
.unit-map-marker.is-offline .unit-map-arrow { background: var(--secondary); }
.unit-map-marker.is-stale,
.unit-map-marker.is-offline { opacity: 0.7; }
.unit-map-marker.is-pursuit .unit-map-arrow,
.unit-map-marker.is-pursuit .unit-map-label { background: var(--red); }

@media (prefers-reduced-motion: no-preference) {
  .unit-map-marker.is-pursuit .unit-map-arrow,
  .unit-map-marker.is-pursuit .unit-map-label { animation: pursuit-flash 1.6s steps(1, end) infinite; }
  @keyframes pursuit-flash { 50% { background: #26333f; } }
}

.noscript-message { position: fixed; inset: auto 20px 20px; z-index: 9999; padding: 15px; color: #fff; background: var(--red); border-radius: 12px; text-align: center; }

@media (max-width: 820px) {
  .prototype-badge { display: none; }
  .site-header { height: 64px; padding-left: 14px; padding-right: 14px; }
  .console-view { height: auto; min-height: calc(100vh - 64px); grid-template-columns: 1fr; overflow: visible; }
  .map-panel { height: min(62vh, 560px); min-height: 390px; }
  .operation-panel { overflow: visible; padding: 18px; border-left: 0; border-top: 1px solid var(--hairline); }
  .map-banner { bottom: 14px; grid-template-columns: 1fr; gap: 7px; }
  .banner-metrics { justify-content: flex-start; }
}

@media (max-width: 470px) {
  .brand-lockup small { display: none; }
  .connection-pill { padding: 5px 8px; }
  .join-view { padding: 24px 12px; }
  .join-card { padding: 24px 19px; border-radius: 20px; }
  .summary-grid, .detail-list { grid-template-columns: 1fr 1fr; }
  .button-row { flex-direction: column; }
}

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

/* Public candidate only. The beta observer assets remain untouched. */
:root { --blue:#087e88; --blue-dark:#08636b; --radius-large:28px; }
.brand-mark { background:linear-gradient(145deg,#0a8994,#134659); box-shadow:none; }
.prototype-badge { background:#087e8818; color:var(--blue); }
.eyebrow { color:var(--blue); }
.join-view { grid-template-columns:minmax(0,1fr) minmax(360px,520px); gap:clamp(32px,6vw,90px); padding:52px max(24px,calc((100vw - 1180px)/2)); background:radial-gradient(ellipse at 10% 10%,#138e9020,transparent 65%),var(--bg); align-items:center; }
.preview-intro { width:100%; max-width:560px; }
.preview-intro h1 { font-size:clamp(2.8rem,5vw,4.6rem); line-height:1.02; letter-spacing:-.055em; margin:20px 0; }
.preview-intro > p:not(.eyebrow) { color:var(--secondary); }
.preview-intro > p:nth-of-type(2) { font-size:1.25rem; }
.preview-features { margin:36px 0; display:grid; gap:22px; }
.preview-features section { padding-left:18px; border-left:3px solid #15999c; }
.preview-features h2 { font-size:1rem; margin:0 0 5px; }
.preview-features p { color:var(--secondary); margin:0; max-width:420px; }
.preview-note { font-size:.8rem; max-width:470px; }
.join-card { max-width:520px; padding:30px; }
.join-card h2 { margin:0; font-size:2rem; letter-spacing:-.03em; }
.join-card .lede { font-size:.95rem; }
.safety-notice { font-size:.85rem; }
.primary-button { background:var(--blue); }
.operation-panel { background:var(--surface); }
.unit-card { border-radius:18px; }
@media(prefers-color-scheme:dark) { :root { --blue:#58d2d3; --blue-dark:#38b6bd; --bg:#091820; --surface:#122733; --surface-solid:#122733; --surface-subtle:#1b3441; --text:#eef7fa; --secondary:#adc0ca; } .primary-button { background:#168b94; color:#fff; } }
@media(max-width:800px) { .join-view { grid-template-columns:1fr; padding:30px 18px; gap:24px; } .preview-intro { max-width:520px; } .preview-intro h1 { font-size:2.7rem; margin:12px 0; } .preview-features { display:none; } .preview-note { margin-bottom:0; } .join-card { padding:24px; } .site-header { padding-inline:14px; gap:8px; } .header-status { gap:5px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; } }

/* Free browser access; retired search and Pro creation controls are unavailable. */
.street-search,#drop-pin-button,#toggle-trails-button,#search-card{display:none!important}