/* ===========================================================================
   Driver Route Planner — shared foundation.

   Design direction: a cab instrument, not a dashboard. The trade's own visual
   language is hi-vis amber on dark workwear, so amber is the single accent and
   everything else is neutral. Status colour is reserved STRICTLY for schedule
   meaning (waiting / too late / done) so a red thing on screen always means
   the same thing whether you are at a desk or at the kerb.

   Both themes are first class and neither is an afterthought: the planner is
   used at a desk, and the phone is used in a sunlit cab where a washed-out
   dark theme is unreadable. Light is the default; dark follows the OS.
   =========================================================================== */

:root {
  /* --- surfaces, light ---------------------------------------------------- */
  --bg:          #f4f5f7;
  --surface:     #ffffff;
  --surface-2:   #eceef1;
  --surface-3:   #e1e4e9;
  --line:        #d3d7de;
  --line-strong: #b4bac4;

  /* --- text -------------------------------------------------------------- */
  --ink:         #14181f;
  --ink-2:       #4a5260;
  --ink-3:       #6f7889;
  --ink-invert:  #ffffff;

  /* --- accent: hi-vis amber ---------------------------------------------- */
  --accent:      #b45309;
  --accent-ink:  #ffffff;
  --accent-soft: #fef3c7;
  --accent-line: #f59e0b;

  /* --- schedule semantics. Never reuse these for decoration. ------------- */
  --ok:          #157f4a;   /* dropped, on time */
  --ok-soft:     #d8f3e3;
  --wait:        #a16207;   /* sitting on the handbrake */
  --wait-soft:   #fef6d9;
  --late:        #b4232a;   /* window missed — must be loud */
  --late-soft:   #fde2e3;
  --info:        #1d4e89;
  --info-soft:   #dce9f9;

  /* --- geometry ---------------------------------------------------------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --shadow:    0 1px 2px rgba(16,20,28,.08), 0 2px 8px rgba(16,20,28,.06);
  --shadow-lg: 0 8px 28px rgba(16,20,28,.16);

  /* Driver-sized hit targets. 56px is a gloved thumb on a bumpy road; the
     44px minimum everyone quotes is for a phone held still at a desk. */
  --tap:     56px;
  --tap-min: 44px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Times, distances and ETAs are compared down a column, so they are tabular. */
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0e1218;
    --surface:     #161c25;
    --surface-2:   #1e2630;
    --surface-3:   #273040;
    --line:        #2d3745;
    --line-strong: #3f4b5c;

    --ink:         #eef1f6;
    --ink-2:       #a8b2c1;
    --ink-3:       #7b8699;
    --ink-invert:  #0e1218;

    --accent:      #f59e0b;
    --accent-ink:  #1a1203;
    --accent-soft: #3a2a07;
    --accent-line: #fbbf24;

    --ok:          #34d399;
    --ok-soft:     #0d2e22;
    --wait:        #fbbf24;
    --wait-soft:   #332507;
    --late:        #f87171;
    --late-soft:   #3a1215;
    --info:        #7cb0ea;
    --info-soft:   #10263d;

    --shadow:    0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 34px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:#0e1218; --surface:#161c25; --surface-2:#1e2630; --surface-3:#273040;
  --line:#2d3745; --line-strong:#3f4b5c;
  --ink:#eef1f6; --ink-2:#a8b2c1; --ink-3:#7b8699; --ink-invert:#0e1218;
  --accent:#f59e0b; --accent-ink:#1a1203; --accent-soft:#3a2a07; --accent-line:#fbbf24;
  --ok:#34d399; --ok-soft:#0d2e22; --wait:#fbbf24; --wait-soft:#332507;
  --late:#f87171; --late-soft:#3a1215; --info:#7cb0ea; --info-soft:#10263d;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 10px 34px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
   The UA rule is `[hidden] { display: none }`, which ANY author rule setting
   `display` outranks -- so a `.panel { display: flex }` with `hidden` on the
   element stays on screen. Eight elements across the planner and the in-cab
   screen were permanently visible because of this, including the planner's
   "needs a Mapbox token" card and the phone's "not synced" strip. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .6em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- numerals -------------------------------------------------------------
   Any time, mileage or duration carries .num so columns of them line up and
   an ETA never shifts width as the minutes tick over. */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --- controls ------------------------------------------------------------ */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 38px;
  padding: .45em 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 550;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }

.btn-danger { color: var(--late); border-color: color-mix(in srgb, var(--late) 40%, var(--line)); }
.btn-ghost  { background: transparent; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }

/* Field-sized button for the phone. */
.btn-tap { min-height: var(--tap); font-size: 1.05rem; font-weight: 650; border-radius: var(--r); }

input[type="text"], input[type="password"], input[type="search"],
input[type="time"], input[type="date"], input[type="number"],
select, textarea {
  width: 100%;
  min-height: 38px;
  padding: .4em .6em;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
}
/* Mobile Safari zooms the page when a focused input is under 16px. */
@media (max-width: 880px) {
  input, select, textarea { font-size: 16px; }
}

label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25em; }

/* --- status pills --------------------------------------------------------
   The schedule vocabulary, in one place, so the planner and the phone cannot
   disagree about what amber means. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .15em .55em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
  white-space: nowrap;
}
.pill-ok   { background: var(--ok-soft);   color: var(--ok); }
.pill-wait { background: var(--wait-soft); color: var(--wait); }
.pill-late { background: var(--late-soft); color: var(--late); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-plain{ background: var(--surface-3); color: var(--ink-2); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* --- numbered stop marker ----------------------------------------------- */
.seq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: .8rem;
  font-weight: 700;
}
.seq-late { background: var(--late); color: #fff; }
.seq-done { background: var(--ok);   color: #fff; }

/* --- utility ------------------------------------------------------------ */
.row    { display: flex; align-items: center; gap: .5rem; }
.row-sb { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.col    { display: flex; flex-direction: column; gap: .5rem; }
.grow   { flex: 1 1 auto; min-width: 0; }
.muted  { color: var(--ink-2); }
.dim    { color: var(--ink-3); }
.small  { font-size: .82rem; }
.tiny   { font-size: .74rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

.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;
}

/* --- toast -------------------------------------------------------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(140%);
  z-index: 9999;
  max-width: min(92vw, 30rem);
  padding: .7em 1.1em;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--bg);
  font-weight: 550;
  box-shadow: var(--shadow-lg);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.bad  { background: var(--late); color: #fff; }

/* --- Mapbox overrides --------------------------------------------------- */
.mapboxgl-ctrl-logo { opacity: .55; }
.mapboxgl-popup-content {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: .7em .85em;
}
.mapboxgl-popup-close-button { color: var(--ink-2); font-size: 1.1rem; padding: 0 .3em; }
.mapboxgl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}