/* ============================================================
   Southwest Chief tracker — Philmont trip (LAP <-> RAT)
   Styled to the Scouting America Brand Guidelines (2024)
   Palette: SA Dark Blue / Dark Gray foundation, SA Red action
            accent, tan hairlines, white text.
   Type:  Montserrat (approved Google alternate for Proxima Nova
          Extra Bold) for display; Arial for body/data.
   Note:  Per brand rules, Scouting America Red (#CE1126) is used
          only at full strength as an accent/action color and is
          never tinted or screened.
   ============================================================ */

:root{
  /* --- Scouting America primary palette --- */
  --sa-red:        #CE1126;
  --sa-blue:       #003F87;
  --sa-tan:        #D6CEBD;
  --sa-gray:       #515354;
  --sa-white:      #FFFFFF;

  /* --- Scouting America secondary palette --- */
  --sa-pale-blue:  #9AB3D5;
  --sa-dark-blue:  #003366;
  --sa-light-tan:  #E9E9E4;
  --sa-dark-tan:   #AD9D7B;
  --sa-pale-gray:  #858787;
  --sa-dark-gray:  #232528;

  /* --- Semantic assignments --- */
  --bg-deep:    #1b1d20;              /* just below SA Dark Gray, map letterbox */
  --panel:      var(--sa-dark-blue);  /* header + sidebar */
  --raised:     var(--sa-blue);       /* countdown, emphasis blocks */
  --line:       rgba(214, 206, 189, 0.22); /* tan hairline */
  --line-strong:rgba(214, 206, 189, 0.4);

  --text:       var(--sa-white);
  --text-muted: var(--sa-pale-blue);
  --text-dim:   var(--sa-dark-tan);

  --action:     var(--sa-red);        /* accent / action / focus of attention */

  /* --- New Mexico proximity palette (Zia sun + approach theming) --- */
  --nm-yellow:    #F7C948;
  --nm-red:       #C8102E;
  --nm-turquoise: #3AAFA9;
  --nm-mix:       0;                   /* 0 far from Raton, 1 at Raton (set by JS) */

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body{ overflow: hidden; }

/* tabular figures for any numeric data, replacing the old mono font */
.mono{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible{
  outline: 2px solid var(--sa-tan);
  outline-offset: 2px;
}

.deck{
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 12% -12%, rgba(0, 63, 135, 0.45), transparent 60%),
    var(--bg-deep);
}

/* New Mexico proximity glow — screen-blended warm wash over the dashboard */
.nm-glow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  background:
    radial-gradient(120% 80% at 85% 12%, rgba(247,201,72,0.55), transparent 55%),
    radial-gradient(120% 90% at 12% 92%, rgba(58,175,169,0.5), transparent 55%),
    linear-gradient(120deg, rgba(247,201,72,0.26), rgba(200,16,46,0.30) 50%, rgba(58,175,169,0.32));
  mix-blend-mode: screen;
  transition: opacity 1.5s ease;
}

/* New Mexico Zia sun (rises/brightens toward Raton) */
.ziasun{
  position: absolute;
  top: 14px;
  right: 16px;
  width: 66px;
  height: 66px;
  z-index: 450;
  opacity: 0.22;
  transform: scale(0.82);
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(247,201,72,0.75));
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.ziasun svg{ width: 100%; height: 100%; display: block; }
.ziasun__rays{ fill: var(--nm-red); }   /* NM flag: red Zia on gold */
.ziasun__disc{ fill: var(--nm-red); }

/* Approach-to-Philmont meter */
.approach{ margin-top: 12px; }
.approach__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.approach__label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-tan);
}
.approach__peak{ color: var(--sa-dark-tan); margin-right: 3px; }
.approach__dist{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--sa-white);
  font-variant-numeric: tabular-nums;
}
.approach__track{
  height: 8px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.approach__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nm-yellow), var(--nm-red) 55%, var(--nm-turquoise));
  transition: width 1.2s ease;
}

/* ===== Header ===== */
.bridge{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--sa-red);
  flex-wrap: wrap;
}

.bridge__id{
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-display);
}

.bridge__title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--sa-white);
}
.bridge__sub{
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Boarding-station selector */
.fromsel{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fromsel__label{
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.depsel .fromsel__select{ min-width: 190px; }
.fromsel__select{
  appearance: none;
  background: rgba(0,0,0,0.28);
  color: var(--sa-white);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23D6CEBD' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.fromsel__select:hover{ border-color: var(--sa-tan); }
.fromsel__select option{ background: var(--sa-dark-blue); color: var(--sa-white); }
.fromsel__select optgroup{ background: var(--sa-dark-blue); color: var(--sa-tan); font-style: normal; font-weight: 700; }

/* Philmont note on the Raton waypoint */
.philmont-note{
  margin: 8px 0 0;
  padding: 5px 9px;
  background: rgba(0,0,0,0.22);
  border-left: 3px solid var(--sa-dark-tan);
  border-radius: 0 4px 4px 0;
  font-size: 0.74rem;
  color: var(--sa-tan);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.philmont-note__peak{ color: var(--sa-dark-tan); margin-right: 4px; }

/* Footer mountain ridge silhouette */
.ridge{
  display: block;
  width: 100%;
  height: 26px;
  margin-bottom: 8px;
}
.ridge path{ fill: var(--sa-dark-tan); opacity: 0.4; }
.bridge__num{
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--sa-red);
}

/* ===== Leg toggle switch ===== */
.legswitch{
  display: flex;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.legswitch__btn{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-family: var(--font-body);
  transition: background 0.15s ease, color 0.15s ease;
}
.legswitch__btn:hover{ color: var(--text); }
.legswitch__btn-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.legswitch__btn-sub{
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: inherit;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.legswitch__btn[aria-pressed="true"]{
  background: var(--sa-red);
  color: var(--sa-white);
}
.legswitch__btn[aria-pressed="true"] .legswitch__btn-sub{ color: var(--sa-white); opacity: 0.9; }

.bridge__state{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.state-lamp{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sa-pale-gray);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.state-lamp[data-state="active"]{ background: var(--sa-pale-blue); box-shadow: 0 0 10px 1px var(--sa-pale-blue); }
.state-lamp[data-state="disrupted"]{ background: var(--sa-red); box-shadow: 0 0 10px 1px var(--sa-red); }
.state-lamp[data-state="loading"]{ background: var(--sa-pale-gray); }
.bridge__state-text{ font-size: 0.9rem; color: var(--text-muted); }

.bridge__updated{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.bridge__updated-label{
  color: var(--text-muted);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bridge__updated-time{ color: var(--sa-tan); font-weight: 600; }
.bridge__updated-src{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-pale-blue);
}

/* ===== Main split ===== */
.hull{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;
}

.chart{
  position: relative;
  min-height: 0;
  background: var(--bg-deep);
}
#map{ position: absolute; inset: 0; }

/* Leaflet dark chart tint */
.leaflet-container{ background: #14161a; }
.leaflet-tile-pane{ filter: saturate(0.55) brightness(0.9); }

/* Light map mode: normal tiles + pale backdrop (dashboard chrome unchanged) */
.chart.map-light .leaflet-container{ background: #e9e9e4; }
.chart.map-light .leaflet-tile-pane{ filter: none; }
/* The tan rail line washes out on the terrain map — darken it there. Note: no
   stroke-opacity override, so the hidden straight-line fallback (opacity 0 when
   real geometry is present) stays hidden and we don't get a double line. */
.chart.map-light .rail-line{ stroke: #6b4a21; stroke-width: 3; }
/* The green ranch boundary is low-contrast on terrain — use SA dark blue. */
.chart.map-light .philmont-boundary{ stroke: #003F87; stroke-width: 2.5; }

/* Map light/dark toggle button (bottom-left of the map) */
.maptoggle{
  position: absolute;
  left: 12px;
  bottom: 16px;
  z-index: 450;
  appearance: none;
  background: rgba(35,37,40,0.9);
  color: var(--sa-tan);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 7px 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: background 0.15s ease, color 0.15s ease;
}
.maptoggle:hover{ background: var(--sa-dark-blue); color: var(--sa-white); }

/* Recenter button — appears when the user has panned away from follow mode */
.recenter{
  position: absolute;
  left: 12px;
  bottom: 58px;
  z-index: 450;
  appearance: none;
  background: var(--sa-red);
  color: var(--sa-white);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 7px 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: filter 0.15s ease;
}
.recenter:hover{ filter: brightness(1.12); }
.recenter[hidden]{ display: none; }
.leaflet-control-attribution{
  background: rgba(27,29,32,0.8) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body);
  font-size: 10px;
}
.leaflet-control-attribution a{ color: var(--sa-tan) !important; }
.leaflet-control-zoom a{
  background: var(--sa-dark-blue) !important;
  color: var(--sa-white) !important;
  border-color: var(--line) !important;
}

.train-marker{
  display: block;
  filter: drop-shadow(0 0 5px rgba(206,17,38,0.95));
}

/* Station markers — styled as labeled pills (matching the label look) */
.stn-pill{
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--sa-dark-blue);
  color: var(--sa-white);
  border: 1px solid var(--sa-dark-tan);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.stn-pill--board{ border-color: var(--sa-red); }
.stn-pill--mid{
  background: rgba(0,51,102,0.82);
  border-color: var(--sa-dark-tan);
  color: var(--sa-tan);
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  padding: 2px 5px;
}

/* Philmont basecamp — station-sized pill at the end of the drive route */
.stn-pill--philmont{
  background: #243E2C;
  border-color: #7CA05A;
  color: #E7F0DC;
}

.leaflet-popup-content-wrapper{
  background: var(--sa-dark-blue);
  color: var(--sa-white);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--font-body);
}
.leaflet-popup-tip{ background: var(--sa-dark-blue); }
.leaflet-popup-content{ font-size: 0.85rem; margin: 10px 12px; }
.leaflet-popup-content strong{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--sa-tan); }

/* ===== Heading + speed readout (lower right) ===== */
.readout{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 400;
  display: flex;
  align-items: stretch;
  background: rgba(35,37,40,0.9);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 4px;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.readout__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 14px;
  min-width: 64px;
}
.readout__label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.readout__value{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--sa-white);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.readout__unit{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-left: 3px;
  letter-spacing: 0;
}
.readout__divider{
  width: 1px;
  background: var(--line);
  align-self: stretch;
}

/* ===== Log (sidebar) ===== */
.log{
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.log__title{
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-tan);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.waypoint{
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.waypoint + .waypoint{ border-top: 1px dashed var(--line); }

.waypoint__flag{
  flex: none;
  width: 30px; height: 30px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  background: rgba(0,0,0,0.25);
  color: var(--sa-tan);
  border: 1px solid var(--line);
}
.waypoint--board .waypoint__flag{ background: var(--sa-red); color: var(--sa-white); border-color: var(--sa-red); }
.waypoint--disembark .waypoint__flag{ background: transparent; color: var(--sa-white); border-color: var(--sa-pale-blue); }

.waypoint__name{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.waypoint__code{
  font-family: var(--font-body);
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0.06em;
}
.waypoint__role{
  margin: 0 0 6px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.waypoint__times{ margin: 0; display: grid; gap: 3px; }
.waypoint__times div{ display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; }
.waypoint__times dt{ color: var(--text-muted); font-weight: 400; }
.waypoint__times dd{ margin: 0; font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--text); }

.countdown{
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sa-red);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.countdown__label{
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sa-pale-blue);
  font-weight: 700;
}
.countdown__value{
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--sa-white);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fix{ margin: 0; display: grid; gap: 8px; }
.fix div{ display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; }
.fix dt{ color: var(--text-muted); }
.fix dd{ margin: 0; text-align: right; color: var(--text); }

.alertMsg{
  margin: 12px 0 0;
  padding: 10px 12px 10px 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sa-red);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
}

.route-log{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  max-height: 260px;
  overflow-y: auto;
}
.route-log li{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--line);
}
.route-log li:last-child{ border-bottom: none; }
.route-log .rl-name{ color: var(--text); }
.route-log .rl-time{ font-variant-numeric: tabular-nums; color: var(--text-muted); }
.route-log li.is-current .rl-name{ color: var(--sa-red); font-weight: 700; }
.route-log li.is-current{ border-left: 3px solid var(--sa-red); padding-left: 6px; }
.route-log li.is-leg .rl-name{ color: var(--sa-tan); font-weight: 700; }
.route-log li.is-near{ background: rgba(91,141,239,0.14); }
.route-log li.is-near .rl-name{ color: var(--sa-white); font-weight: 700; }

/* ===== Connection / staleness / alert banner ===== */
.banner{
  padding: 8px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--sa-white);
  text-align: center;
}
.banner[data-kind="offline"]{ background: var(--sa-red); }
.banner[data-kind="stale"]{ background: #B8860B; color: #1b1d20; }   /* amber */
.banner[data-kind="alert"]{ background: var(--nm-turquoise); color: #04201d; }

/* ===== Trip summary + service tag ===== */
.trip-summary{
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
}
.service-tag{
  margin: 0 0 10px;
  font-size: 0.74rem;
  color: var(--sa-dark-tan);
  font-weight: 600;
}

/* ===== Delay trend ===== */
.delaytrend{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.delaytrend__label{
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.delaytrend__value{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--sa-tan);
}
.delaytrend__value[data-trend="worse"]{ color: #E8663B; }
.delaytrend__value[data-trend="better"]{ color: var(--nm-turquoise); }

/* ===== Arrival alerts button ===== */
.alertbtn{
  margin-top: 12px;
  width: 100%;
  appearance: none;
  border: 1px solid var(--sa-tan);
  background: transparent;
  color: var(--sa-tan);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.alertbtn:hover{ background: var(--sa-tan); color: var(--sa-dark-blue); }
.alertbtn[data-on="true"]{
  background: var(--nm-turquoise);
  border-color: var(--nm-turquoise);
  color: #04201d;
  cursor: pointer;
}

/* ===== Device location (you-are-here) ===== */
.user-dot{
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #5B8DEF;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 10px 2px rgba(91,141,239,0.9);
  animation: userpulse 2s ease-in-out infinite;
}
.user-dot--aboard{
  background: var(--nm-turquoise);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 12px 3px rgba(58,175,169,0.95);
}
@keyframes userpulse{
  0%,100%{ box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 6px 1px rgba(91,141,239,0.6); }
  50%    { box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 15px 4px rgba(91,141,239,1); }
}

.locbtn, .aboardtoggle{
  width: 100%;
  appearance: none;
  border: 1px solid var(--sa-pale-blue);
  background: transparent;
  color: var(--sa-pale-blue);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.locbtn:hover, .aboardtoggle:hover:not(:disabled){ background: var(--sa-pale-blue); color: var(--sa-dark-blue); }
.locbtn[data-on="true"]{ background: #5B8DEF; border-color: #5B8DEF; color: #04122b; }
.aboardtoggle{ margin-top: 12px; }
.aboardtoggle:disabled{ opacity: 0.4; cursor: not-allowed; }
.aboardtoggle[data-on="true"]{
  background: var(--nm-turquoise); border-color: var(--nm-turquoise); color: #04201d; cursor: pointer;
}
.loc-readout{ margin-top: 12px; }
.loc-status{
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--sa-tan);
}
.loc-privacy{
  margin: 10px 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--sa-dark-tan);
}

/* Buy me a coffee — full panel width to match the "Show my location" button */
.bmc{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.bmc__lead{ margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--text-muted); }
.bmc a{ display: block; width: 100%; line-height: 0; }
.bmc img{ width: 100%; height: auto; border-radius: 8px; }

/* ===== Footer ===== */
.keel{
  padding: 10px 24px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.keel p{
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== Responsive ===== */
@media (max-width: 880px){
  /* On mobile the app scrolls as a normal page instead of a fixed shell,
     so the data sidebar and footer are reachable below the map. */
  body{ overflow: auto; }
  .deck{ height: auto; min-height: 100dvh; overflow: visible; }
  .hull{ grid-template-columns: 1fr; grid-template-rows: 50vh auto; }
  .chart{ min-height: 0; }
  .log{ overflow: visible; height: auto; }
  .log{ border-left: none; border-top: 1px solid var(--line); }

  /* Declutter the header on mobile: title + subline on top, then status,
     boarding selectors, leg toggle, and last-fix each full-width.
     (All scoped to the mobile breakpoint; desktop layout is unchanged.) */
  .bridge{ gap: 8px 10px; padding: 12px 16px; }
  .bridge__id{ order: 2; flex: 1 1 auto; min-width: 0; }
  .bridge__title{ font-size: 1.3rem; }
  .bridge__sub{ font-size: 0.85rem; }
  .bridge__state{ order: 3; width: 100%; margin-left: 0; }
  .fromsel{ order: 4; width: 100%; }
  .fromsel__select{ width: 100%; }
  .legswitch{ order: 5; width: 100%; }
  .legswitch__btn{ flex: 1; align-items: center; }
  .bridge__updated{
    order: 6; width: 100%;
    flex-direction: row; align-items: baseline; gap: 8px;
  }
}