* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1f2328;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 1rem;
  background: #101418;
  color: #e6e8ea;
}
nav .brand { font-weight: 700; margin-right: 0.5rem; opacity: 1; }
nav a { color: #e6e8ea; text-decoration: none; opacity: 0.85; }
nav a:hover { opacity: 1; }
nav form { margin-left: auto; }
button.link {
  background: none; border: none; color: #9ca3af; cursor: pointer;
  font-size: 0.9rem; padding: 0;
}
button.link:hover { color: #e6e8ea; }

.muted { color: #6b7280; }
.error { color: #c1121f; }

/* login */
main.login {
  max-width: 22rem; margin: 15vh auto; padding: 0 1rem; text-align: center;
}
main.login form { display: flex; flex-direction: column; gap: 0.75rem; }
main.login input[type=password] {
  padding: 0.6rem 0.8rem; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 1rem;
}
main.login button[type=submit] {
  padding: 0.6rem; border: none; border-radius: 8px; font-size: 1rem;
  background: #1a7f37; color: white; cursor: pointer;
}

/* landing page */
main.landing {
  max-width: 38rem; margin: 0 auto; padding: 10vh 1.5rem 3rem;
}
main.landing .hero h1 { font-size: 2rem; margin: 0 0 0.25rem; }
main.landing .tagline { font-size: 1.15rem; color: #374151; margin-top: 0; }
main.landing p { line-height: 1.55; }
/* Official store badges (Apple / Google artwork, served verbatim). Both
   render at the same visible height: Google's PNG ships with a 41 px
   transparent margin on every side of a 646x250 canvas (visible 564x168),
   so it is scaled to 250/168 of the Apple badge height and the margin is
   cancelled with negative margins. */
.badges { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.badge { display: inline-block; line-height: 0; }
.badge img { height: 44px; width: auto; }
.badge.google img { height: 65.5px; margin: -10.75px; }
.cta {
  display: inline-block; padding: 0.7rem 1.4rem;
  border-radius: 10px; background: #1a7f37; color: white;
  text-decoration: none; font-weight: 600;
}
.cta.disabled { background: #f4f4f5; color: #6b7280; font-weight: 500; cursor: default; }
main.landing .goals { margin-top: 3rem; }
main.landing .goals h2 { font-size: 1.3rem; }
main.landing .goals figure { margin: 1.25rem 0; }
main.landing .goals img {
  max-width: 100%; border: 1px solid #e5e7eb; border-radius: 10px;
  background: white;
}
main.landing .goals figcaption { font-size: 0.8rem; color: #6b7280; margin-top: 0.35rem; }
main.landing .goals figcaption a { color: #6b7280; }
main.landing footer { margin-top: 4rem; font-size: 0.85rem; }
main.landing footer a { color: #9ca3af; text-decoration: none; }
main.landing footer a:hover { color: #374151; }

/* map page */
.map-layout { flex: 1; display: flex; min-height: 0; }
#map { flex: 1; min-width: 0; position: relative; }
.slider-row input[type="range"] { vertical-align: middle; width: 9rem; }
.controls button { margin-top: 0.3rem; }
.attribution { font-size: 0.75rem; margin-top: 1rem; }
#sidebar {
  width: 22rem; overflow-y: auto; padding: 1rem;
  background: white; border-right: 1px solid #e5e7eb; font-size: 0.9rem;
}
#sidebar h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
#sidebar h3 { margin: 1rem 0 0.25rem; font-size: 0.95rem; }
#sidebar dl { margin: 0.25rem 0; }
#sidebar dt { color: #6b7280; float: left; clear: left; width: 9rem; }
#sidebar dd { margin: 0 0 0.15rem 9.5rem; font-variant-numeric: tabular-nums; }
.route-row { display: flex; align-items: center; gap: 0.35rem; }
.route-row .swatch {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px;
  flex: none;
}
.route-row code { font-size: 0.8rem; }
/* Estimator-version comparison disclosure under each open recording. */
.route-versions { margin: 0.1rem 0 0.4rem 1.3rem; font-size: 0.85rem; }
.route-versions summary { cursor: pointer; }
.route-versions .route-row { margin-top: 0.2rem; }
.notice {
  margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: #fef3c7; color: #92400e;
}
.controls label { display: block; margin: 0.2rem 0; }
.export-links a { display: block; color: #0969da; text-decoration: none; margin: 0.15rem 0; }

/* sessions page */
main.sessions { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.run-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
#run-pipeline {
  padding: 0.45rem 0.9rem; border: none; border-radius: 8px;
  background: #1a7f37; color: white; font-size: 0.9rem; cursor: pointer;
}
#run-pipeline:disabled { background: #9ca3af; cursor: default; }
.tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.tile {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 0.7rem 1rem; min-width: 9rem;
}
.tile .value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .label { color: #6b7280; font-size: 0.8rem; }
.cards { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.card {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 0.7rem 1rem; font-size: 0.85rem; min-width: 16rem;
}
.card h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.table-wrap { overflow-x: auto; background: white; border: 1px solid #e5e7eb; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid #f0f0f1; white-space: nowrap; }
th { color: #6b7280; font-weight: 600; }
td { font-variant-numeric: tabular-nums; }
.status { padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.75rem; }
.status.passed { background: #e7f5eb; color: #1a7f37; }
.status.failed { background: #fde8e8; color: #c1121f; }
.status.missing { background: #f4f4f5; color: #6b7280; }
.status.pending { background: #fef3e2; color: #b45309; }
td button { background: none; border: none; color: #0969da; cursor: pointer; padding: 0; }

#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 26rem; max-width: 90vw;
  background: white; border-left: 1px solid #e5e7eb; padding: 1rem;
  overflow-y: auto; box-shadow: -4px 0 12px rgba(0,0,0,0.08); z-index: 20;
  font-size: 0.85rem;
}
#drawer h2 { margin-top: 0; font-size: 1rem; word-break: break-all; }
#drawer .check { padding: 0.25rem 0; border-bottom: 1px solid #f0f0f1; }
#drawer .check.failed { color: #c1121f; }
#drawer pre { background: #f4f4f5; padding: 0.5rem; border-radius: 8px; overflow-x: auto; }

/* ---- mobile (issue #15) ----
   Everything below applies only on narrow or touch screens; desktop
   rendering above is untouched. */
.sidebar-toggle { display: none; }

@media (max-width: 720px) {
  nav { flex-wrap: wrap; gap: 0.5rem 1rem; }
  nav a, nav button.link { padding: 0.4rem 0; }

  /* Map: the map fills the viewport; the controls sidebar becomes a
     bottom sheet behind the floating toggle. */
  .map-layout { position: relative; }
  .sidebar-toggle {
    display: block; position: absolute; top: 0.6rem; left: 0.6rem; z-index: 11;
    padding: 0.55rem 0.9rem; border: 1px solid #d1d5db; border-radius: 8px;
    background: white; font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  #sidebar {
    display: none; position: absolute; left: 0; right: 0; bottom: 0;
    width: auto; max-height: 65%; z-index: 10;
    border-right: none; border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  }
  #sidebar.open { display: block; }
  /* The floated label/value list collapses badly at narrow widths. */
  #sidebar dt { float: none; width: auto; clear: none; }
  #sidebar dd { margin-left: 0; }
  .slider-row input[type="range"] { width: 100%; }

  /* Sessions: tap-sized row actions, full-width cards, and a table that
     scrolls both ways under a sticky header. */
  main.sessions { padding: 1rem; }
  .tile { min-width: 7rem; flex: 1; }
  .card { min-width: 0; flex-basis: 100%; }
  .table-wrap { max-height: 70vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  th { position: sticky; top: 0; background: white; }
  td button { padding: 0.4rem 0; }
  #drawer { width: 100%; max-width: 100%; }

  /* Public pages: less vertical dead space on short screens. */
  main.login { margin: 8vh auto; }
  main.landing { padding: 4vh 1rem 3rem; }
}

/* The free-fly camera needs WASD keys; on touch-primary devices offer
   only orbit (the default), which deck.gl drives fully by gestures.
   (.controls prefix: outranks the `.controls label` display rule.) */
@media (pointer: coarse) {
  .controls .free-fly-row { display: none; }
}