/* app.css - the mobile-app shell. Phones get header + tab bar + sheets; desktop keeps the toolbar
   and opens screens as a right-hand panel. Palette: Midnight navy, brand green, logo yellow/blue. */
:root {
  --app-navy: #0b1526;
  --app-card: #122a46;
  --app-card-border: #33496e;
  --app-yellow: #f9e243;
  --app-blue: #3848b0;
  --app-muted: #d3dcee;
  --app-muted-green: #d3f0e6;
  --tabbar-h: calc(84px + env(safe-area-inset-bottom, 0px));
  --header-h: calc(75px + env(safe-area-inset-top, 0px));
  --nextup-h: 0px;
  --peek-h: 0px;       /* height of the docked elevation strip (profile.js sets html.profile-docked) */
}

html.profile-docked { --peek-h: 48px; }

html.app-compact.app-tracking { --nextup-h: 60px; }

/* ---------- shared: screens ---------- */
.app-screens { display: contents; }

.app-screen {
  position: fixed;
  z-index: 1600;
  background: var(--app-navy);
  color: #fff;
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.app-screen[hidden] { display: none; }

/* desktop: a right-hand panel beside the map */
html:not(.app-compact) .app-screen {
  top: 66px;
  right: 10px;
  bottom: calc(10px + var(--peek-h));
  width: 420px;
  max-width: calc(100vw - 20px);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 24px var(--shadow-color);
}

/* phones: full screen above the tab bar */
html.app-compact .app-screen {
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--tabbar-h);
}

/* race day keeps the map (and the strip) in view: its card sits above the strip */
html.app-compact .app-screen--raceday { bottom: calc(var(--tabbar-h) + var(--peek-h)); }

.app-screen--overlay { background: transparent; }

/* ---------- phones only ---------- */
.app-header, .app-nextup, .app-fab, .app-tabbar, .app-layers-sheet, .app-scrim { display: none; }

html.app-compact .app-header {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-h);
  /* iPhone landscape: keep the badge and the layers button out from under the notch */
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 1400;
  background: transparent;
  color: #fff;
  font-family: var(--font-family);
  pointer-events: none;
}

/* readable on both basemaps: white text outlined black on Midnight, the reverse on the light map */
.app-title, .app-subtitle {
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #000;
  text-stroke: 3px #000;
}
body.light-map .app-title, body.light-map .app-subtitle {
  color: #000;
  -webkit-text-stroke: 3px #fff;
  text-stroke: 3px #fff;
}

.app-header > * { pointer-events: auto; }

/* A soft scrim behind the header so the badge, title and layers button sit on the map rather than
   float over it: navy fading to clear on the dark map, white fading to clear on the light map.
   It runs a little past the header's bottom edge so there is no hard line. */
html.app-compact .app-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 28px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 21, 38, 0.92) 0%, rgba(11, 21, 38, 0.7) 55%, rgba(11, 21, 38, 0) 100%);
}
body.light-map .app-header::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 55%, rgba(255, 255, 255, 0) 100%);
}

.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.app-badge {
  /* logo2027-badge.png: the 2027 emblem without the lettering, in a ring (165px: 3x screens) */
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--app-blue);
  flex: 0 0 auto;
}

.app-brand-text {
  display: flex; flex-direction: column; line-height: 1.05; min-width: 0;
  /* Overpass draws its capitals high in the line box: nudge the two lines down so their letters,
     not their boxes, centre on the badge and the layers button (no layout change) */
  position: relative; top: 2px;
}
.app-title { font-weight: bold; font-size: 18px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-subtitle { font-size: 12px; color: #fff; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-header-actions { display: flex; gap: 8px; align-items: center; }

.app-layers-button, .app-steps-button, html.app-compact .sim-button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-color);
  border: 2px solid var(--border-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px var(--shadow-color);
  cursor: pointer;
}

html.app-compact .sim-button { width: auto; padding: 0 10px; font-family: var(--font-family); font-size: 13px; }
/* ?sim on RACE DAY: the same button, just under the race-day header on the left (the zoom buttons
   are on the right); in landscape, beside the race-day column */
html.app-compact .sim-button.rd-sim { position: fixed; z-index: 1610; top: calc(var(--rd-header-h, 0px) + 10px); left: max(12px, env(safe-area-inset-left, 0px)); }
@media (max-height: 499px) {
  html.app-compact .sim-button.rd-sim { top: 10px; left: calc(min(46%, 360px) + 12px); }
}
.app-layers-button svg, .app-steps-button svg { width: 22px; height: 22px; }
/* STEPS: under the layers button (both 12px in from the right), 8px below it: the corner starts at
   the header's bottom edge, 15px under the layers button. On RACE DAY it sits under the race-day
   header, beside the SIM / VIEW COURSE spot on the left. */
.app-steps-button { display: none; }
html.app-compact .app-steps-button { display: flex; margin: -7px 12px 0 0; }
html.app-compact.app-screen-raceday .app-steps-button { margin-top: 0; margin-right: 14px; }   /* under the race-day layers button */
/* NEXT UP showing: the corner starts under the strip, not the header */
html.app-compact.app-tracking .app-steps-button { margin-top: 8px; }
.app-layers-button[aria-expanded="true"] { background: var(--app-yellow); color: var(--app-navy); }

/* NEXT UP strip under the header */
html.app-compact .app-nextup {
  display: flex;
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  top: var(--header-h);
  height: 52px;
  z-index: 1400;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  box-sizing: border-box;
  background: rgba(0, 109, 79, 0.94);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}

html.app-compact .app-nextup[hidden] { display: none; }
.app-nextup-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.app-nextup-label { font-size: 10px; letter-spacing: 0.14em; color: var(--app-muted-green); }
.app-nextup-name { font-weight: bold; font-size: 17px; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nextup-dist { font-weight: bold; font-size: 20px; color: var(--app-yellow); white-space: nowrap; }
.app-nextup.off .app-nextup-dist { font-size: 14px; }

/* locate FAB */
html.app-compact .app-fab {
  display: flex;
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--peek-h) + 34px);   /* clears the strip and a two-line credit */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--app-blue);
  border: 3px solid var(--border-color);
  color: #fff;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1400;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.app-fab svg { width: 28px; height: 28px; fill: currentColor; }
.app-fab.active { background: #ff4444; }

/* tab bar */
html.app-compact .app-tabbar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tabbar-h);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  background: var(--primary-color);
  border-top: 2px solid var(--border-color);
  z-index: 1700;
  align-items: stretch;          /* each tab is a quarter of the bar, edge to edge, full height */
}

.app-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-family);
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
}

/* subtle divider between tabs, inset from the top and bottom */
.app-tab + .app-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.app-tab svg { width: 26px; height: 26px; }
.app-tab.active { color: var(--app-yellow); }
.app-tab:focus-visible { outline: var(--focus-outline); outline-offset: -3px; }

/* layers sheet */
html.app-compact .app-scrim {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 25, 0.5);
  z-index: 1660;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

html.app-compact .app-scrim.open { opacity: 1; pointer-events: auto; }

html.app-compact .app-layers-sheet {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--tabbar-h);
  max-height: calc(100vh - var(--header-h) - var(--tabbar-h));
  max-height: calc(100dvh - var(--header-h) - var(--tabbar-h));
  z-index: 1670;
  background: var(--primary-color);
  border: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(105%);
  visibility: hidden;   /* closed: not focusable or exposed (app.js also sets inert) */
  transition: transform 0.22s ease, visibility 0s linear 0.22s;   /* hidden only once it has slid away */
  font-family: var(--font-family);
  color: #fff;
}

html.app-compact .app-layers-sheet.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.22s ease, visibility 0s;
}

.app-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; }
.app-sheet-title { font-weight: bold; font-size: 16px; letter-spacing: 0.06em; }
.app-sheet-close { width: 44px; height: 44px; background: transparent; border: none; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.app-sheet-close svg { width: 22px; height: 22px; }
.app-layers-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }

/* the Leaflet layer box inside the sheet: borderless, full width, no collapse header */
html.app-compact .app-layers-body .leaflet-control-layers {
  position: static !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px !important;
}

html.app-compact .app-layers-body .layers-toggle { display: none !important; }
html.app-compact .app-layers-body .layers-body { display: block !important; max-height: none; overflow: visible; }
html.app-compact .app-layers-body .leaflet-control-layers .leaflet-control-layers-list label > span,
html.app-compact .app-layers-body .leaflet-control-layers .history-title,
html.app-compact .app-layers-body .leaflet-control-layers .theme-title { min-height: 52px; }

/* things the shell replaces on phones */
html.app-compact .logo,
html.app-compact .button-container,
html.app-compact .mobile-controls-container,
html.app-compact .tracker-panel { display: none !important; }

/* move Leaflet's own bits clear of the header and tab bar */
html.app-compact .leaflet-top.leaflet-right {
  top: calc(var(--header-h) + var(--nextup-h));
  z-index: 1450;   /* the STEPS button above the header's gradient (1400), below screens (1600) */
}
/* zoom buttons (34px wide) centred under the 44px layers button, which sits 12px from the edge */
html.app-compact .leaflet-container .leaflet-control-attribution { bottom: calc(var(--tabbar-h) + var(--peek-h)) !important; }
/* the credit line's band carries on under the elevation sheet, so the map never shows through
   behind the sheet's rounded top corners */
html.app-compact .leaflet-container .leaflet-control-attribution::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  background: inherit;
}
html.app-compact .profile-sheet { bottom: var(--tabbar-h) !important; padding-bottom: 14px; }

/* Phones held upright: the credit line runs down the left edge instead of across the bottom,
   turned 90 degrees clockwise (reads top to bottom) and pushed to the bottom end, just above the
   elevation strip. Capped to the space between the header and the strip; if it ever gets
   longer than that it wraps into a second column rather than running off the top. */
@media (orientation: portrait) {
  html.app-compact .leaflet-container .leaflet-control-attribution {
    writing-mode: vertical-rl;
    text-align: right !important;   /* the end of a vertical line is its bottom */
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    top: auto !important;
    bottom: calc(var(--tabbar-h) + var(--peek-h) + 8px) !important;
    max-height: calc(100vh - var(--header-h) - var(--nextup-h) - var(--tabbar-h) - var(--peek-h) - 36px);
    max-height: calc(100dvh - var(--header-h) - var(--nextup-h) - var(--tabbar-h) - var(--peek-h) - 36px);
    padding: 6px 5px 6px calc(5px + env(safe-area-inset-left, 0px)) !important;
    border-radius: 0 6px 6px 0;
  }
  /* no band to carry on under the elevation sheet from a vertical line */
  html.app-compact .leaflet-container .leaflet-control-attribution::after { display: none; }
}

/* The (i) that opens and closes the credit (app.js setupCreditToggle): only on maps under 640px
   wide held upright, where the credit is allowed to fold away. It sits at the credit's bottom end
   and the credit stands on it, so the two read as one tab on the left edge. */
.app-credit-toggle { display: none; }
@media (orientation: portrait) and (max-width: 639px) {
  html.app-compact .app-credit-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: calc(var(--tabbar-h) + var(--peek-h) + 8px);
    z-index: 1000;
    width: calc(22px + env(safe-area-inset-left, 0px));
    height: 24px;
    padding: 0 0 0 env(safe-area-inset-left, 0px);
    border: none;
    border-radius: 0 6px 6px 0;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
  }
  html.app-compact .app-credit-toggle svg { width: 15px; height: 15px; fill: currentColor; }
  body.light-map .app-credit-toggle { background: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.7); }
  /* open: the credit stands on the (i); collapsed: only the (i) */
  html.app-compact .leaflet-container .leaflet-control-attribution {
    bottom: calc(var(--tabbar-h) + var(--peek-h) + 8px + 24px) !important;
    border-radius: 0 6px 0 0;
  }
  html.app-compact.credit-collapsed .leaflet-container .leaflet-control-attribution { display: none !important; }
  /* screens that cover the map (STEPS, the tour...) hide the (i) with the map's own controls */
  html.app-compact.app-screen-steps .app-credit-toggle,
  html.app-compact.app-screen-tour .app-credit-toggle { display: none; }
}

/* the elevation sheet sits on the tab bar, above every screen (race day included); desktop
   stacks it on the credit line. Every slide-in panel shares the layers sheet's look: no border,
   18px top corners, soft shadow */
.profile-sheet {
  z-index: 1650;                 /* above screens (1600), below the tab bar (1700) */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  height: 200px;
  border: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}
/* desktop: the sheet sits on the very bottom edge (its hidden part must never paint over the
   credit line); the credit line and the layer box move up to clear the strip (styles.css pins
   the box 40px up in landscape windows) */
html:not(.app-compact) .profile-sheet { bottom: 0; border-radius: 0; }   /* square on desktop */
html:not(.app-compact) .leaflet-container .leaflet-control-attribution { bottom: var(--peek-h) !important; }
html:not(.app-compact) .leaflet-bottom.leaflet-left { bottom: calc(var(--peek-h) + 25px); }
html:not(.app-compact) .leaflet-bottom .leaflet-control-layers { bottom: calc(var(--peek-h) + 40px) !important; }
/* full height on phones: keep the header clear of the camera cutout and the last line clear of
   the home bar (viewport-fit=cover hands those areas to the page) */
html.app-compact .drawer { border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
html.app-compact .drawer-content { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
html:not(.app-compact) .app-screen { border: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
html.app-compact .profile-sheet { height: 184px; }

/* RE-CENTER: shown while location is on and the runner has dragged the map away from the dot.
   Desktop: a toolbar button just left of the location button. Phones: a pill left of the FAB. */
.app-recenter { display: none; }
.app-recenter.open { display: flex; }

.button-container .app-recenter {
  background: var(--app-blue);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 1.1em;
  box-shadow: 0 2px 8px var(--shadow-color);
  line-height: 1;
  white-space: nowrap;
  height: 42px;
  align-items: center;
  box-sizing: border-box;
}

html.app-compact .app-recenter {
  position: fixed;
  z-index: 1400;
  right: calc(16px + 56px + 10px);
  bottom: calc(var(--tabbar-h) + var(--peek-h) + 34px + 6px);
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--app-blue);
  border: 2px solid var(--border-color);
  color: #fff;
  font-family: var(--font-family);
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* in race-day mode the pill sits under the header, top-left (landscape: beside the stats column) */
html.app-compact.app-screen-raceday .app-recenter {
  right: auto;
  bottom: auto;
  left: 12px;
  top: calc(var(--rd-header-h, 0px) + 10px);
}
@media (max-height: 499px) {
  html.app-compact.app-screen-raceday .app-recenter { left: calc(min(46%, 360px) + 10px); top: 10px; }
}
html.app-compact .drawer { z-index: 2100; }

/* RACE DAY has its own readout; hide the tracker's floating panel while it is open */
html.app-screen-raceday .tracker-panel { display: none !important; }
html.app-compact.app-screen-raceday .leaflet-top.leaflet-right { top: calc(var(--rd-header-h, 0px) + 10px); }
@media (max-height: 499px) {
  html.app-compact.app-screen-raceday .leaflet-top.leaflet-right { top: 10px; }
}
html.app-compact.app-screen-raceday .app-header,
html.app-compact.app-screen-raceday .app-nextup,
html.app-compact.app-screen-raceday .app-fab { display: none !important; }

/* race-day RE-CENTER uses the shared location symbol */
.app-screen--raceday .rd-icon { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* ---------- landscape phones (short screens): slimmer chrome, side-by-side race day ---------- */
@media (max-height: 499px) {
  html.app-compact {
    --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
    --header-h: calc(56px + env(safe-area-inset-top, 0px));
  }
  html.app-compact.app-tracking { --nextup-h: 44px; }
  html.app-compact .app-header { padding: calc(env(safe-area-inset-top, 0px) + 6px) max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); }
  html.app-compact .app-badge { width: 44px; height: 44px; }
  .app-title { font-size: 16px; }
  .app-subtitle { font-size: 11px; }
  html.app-compact .app-nextup { height: 40px; padding: 4px 12px; }
  .app-nextup-name { font-size: 15px; }
  .app-nextup-dist { font-size: 17px; }
  .app-tab { flex-direction: row; gap: 6px; font-size: 11px; }
  .app-tab svg { width: 20px; height: 20px; }
  html.app-compact .app-fab { width: 48px; height: 48px; bottom: calc(var(--tabbar-h) + var(--peek-h) + 26px); }  /* clears the credit line */
  .app-fab svg { width: 24px; height: 24px; }
  html.app-compact .app-recenter { right: calc(16px + 48px + 10px); bottom: calc(var(--tabbar-h) + var(--peek-h) + 26px + 2px); }
  html.app-compact .profile-sheet { height: 160px; }
}

/* ---------- narrow phones ---------- */
@media (max-width: 360px) {
  .app-title { font-size: 16px; }
  .app-subtitle { font-size: 11px; }
  .app-tab { font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
  .app-tab svg { width: 24px; height: 24px; }
}

/* toast */
/* A short message in the site's panel style (green, white edge, the windows' corners). As wide as
   its text needs, up to the screen less the side margins, so a sentence reads in a line or two. */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--peek-h) + 24px);
  transform: translate(-50%, 20px);
  box-sizing: border-box;
  width: max-content;
  max-width: min(520px, calc(100vw - 24px));
  background: var(--primary-color);
  color: #fff;
  border: 2px solid var(--border-color);
  font-family: var(--font-family);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2500;
}

.app-toast.open { opacity: 1; transform: translate(-50%, 0); }

/* desktop toolbar: active state for the screen buttons */
.steps-button.active, .raceday-button.active { background: var(--app-yellow); color: var(--app-navy); }

/* reduced motion: sheets and the toast appear without sliding, the map follows without gliding
   (app.js reads the same setting for its pans) */
@media (prefers-reduced-motion: reduce) {
  html.app-compact .app-layers-sheet,
  html.app-compact .app-layers-sheet.open,
  html.app-compact .app-scrim,
  .app-toast { transition: none; }
}