@import url('../shared/brand-tokens.css');
/* Font itself is loaded by index.html's <link> to Google Fonts — this file
   only names the family (via --pcv-font-sans), not redundantly re-fetch it. */

:root {
  /* CoachMate core brand — from brand-tokens.css */
  --cm-cyan:      var(--pcv-color-primary-action);
  --cm-charcoal:  var(--pcv-color-ink);
  --cm-font:      var(--pcv-font-sans);

  /* Dark surface tokens */
  --bg:           #1B2428;
  --surface:      var(--cm-charcoal);
  --text:         #ffffff;
  --text-muted:   #8BA4B0;
  --on-time:      #10B981;
  --late:         #EF4444;
  --early:        #F59E0B;
  --border:       rgba(255, 255, 255, 0.09);
  --progress-bg:  rgba(255, 255, 255, 0.08);
  --brand-cyan:   var(--cm-cyan);
  --brand-charcoal: var(--cm-charcoal);
}

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

[hidden] { display: none !important; }

html,
body {
  height: 100%;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--cm-font);
  font-size: 1rem;
  line-height: 1.4;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  margin: 0 auto;
}

/* ── App brand mark ───────────────────────────── */
/* App name (BusOps Driver — this product, one of several under the BusOps
   suite) over a smaller CoachMate attribution (the platform all BusOps
   products run on; same wordmark as the ops dashboard's sidebar footer,
   dashboard/src/index.css .sidebar-coachmate, where CoachMate alone is
   shown with no BusOps line since the dashboard *is* CoachMate).
   Fixed to the viewport corner so it's visible on every screen without
   scrolling — including #duty-card, which reserves a full min-height:100vh
   whether or not its content fills that, so an in-flow mark would land
   off-screen there.

   #tracker is bounded and scrolls internally (below) rather than the page
   scrolling past this mark — a page-level scroll only clears the mark at
   the final scroll position (the bug fixed in 47b0f80), and #stop-list's
   own rows kept passing underneath it at every position in between, since
   they occupy far more vertical space than fits in one screen. Bounding
   #tracker's own height to stop short of this mark means no descendant,
   however tall, can ever be scrolled underneath it. */

#app-brand {
  position: fixed;
  left: 1rem;
  bottom: 0.75rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Bounded to the viewport minus the brand mark's own footprint (1rem body
   top padding + 4.5rem for the mark itself) so #tracker scrolls internally
   and none of its content — including #stop-list — can ever land under
   the fixed mark above. dvh falls back to vh where unsupported. */
#tracker {
  max-height: calc(100vh - 5.5rem);
  max-height: calc(100dvh - 5.5rem);
  overflow-y: auto;
  padding-bottom: 1rem;
}

.bo-wordmark {
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.bo-app {
  color: var(--late);
}

.cm-attribution {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
  opacity: 0.55;
}

.cm-powered-by {
  font-family: var(--cm-font);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cm-wordmark {
  font-family: var(--cm-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-cyan);
}

/* ── Wake-lock warning ───────────────────────── */

#wakelock-warning {
  background: #b71c1c;
  color: #fff;
  padding: 0.6rem 1rem;
  text-align: center;
  font-family: var(--cm-font);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border-radius: 6px;
}

/* ── Top toggle bars ──────────────────────────── */
/* Shared slim collapsed-bar look for the three top-of-screen toggles:
   Report Incident, Diversion Alert, and Announcements. Each reveals its
   own content below it on tap rather than acting immediately (except
   Report Incident, whose "content" is the existing incident modal). */
.top-toggle-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--cm-font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.top-toggle-btn--incident {
  color: var(--early);
  border-color: var(--early);
}

.top-toggle-btn--diversion {
  color: var(--late);
  border-color: var(--late);
}

.top-toggle-btn--diversion.active {
  background: var(--late);
  color: #fff;
}

#diversion-panel {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#diversion-panel button {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  font-family: var(--cm-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

#diversion-confirm-btn {
  background: var(--late);
  color: #fff;
  border: none;
}

#diversion-cancel-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── PSVAIR announcement banner ──────────────── */
/* Live next-stop / destination announcement for PSVAIR-in-scope local bus
   services — audio via Web Speech API (announcements.js), visual here. */

#psvair-banner {
  background: var(--brand-cyan);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
}

#psvair-text {
  font-family: var(--cm-font);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

#psvair-voice-btn,
#psvair-mute-btn {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  font-size: 1.1rem;
  cursor: pointer;
}

#psvair-voice-panel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}

#psvair-voice-panel .select-wrap {
  flex: 1;
  min-width: 0;
}

#psvair-voice-select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 2.25rem 0.6rem 0.85rem;
  font-size: 0.95rem;
  width: 100%;
  appearance: none;
}

#psvair-voice-select:focus {
  outline: none;
  border-color: var(--brand-cyan);
}

#psvair-voice-test-btn {
  flex: none;
  background: transparent;
  color: var(--brand-cyan);
  border: 1px solid var(--brand-cyan);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-family: var(--cm-font);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Early wait banner ───────────────────────── */

#early-wait-banner {
  background: var(--early);
  color: #000;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  animation: ewb-flash 1s ease-in-out infinite;
}

.ewb-title {
  font-family: var(--cm-font);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ewb-msg {
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.2rem;
}

@keyframes ewb-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Route header ────────────────────────────── */

#route-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 2px solid var(--brand-cyan);
}

#header-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  background: var(--surface);
  padding: 0.25rem 0.7rem 0.25rem 0;
  border-radius: 4px;
  flex-shrink: 0;
}

#header-service-code {
  color: #ffffff;
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

#route-lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#header-line1 {
  font-family: var(--cm-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* ── No duty card screen ─────────────────────── */

#no-duty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem;
  text-align: center;
}

.ndc-brand {
  font-family: var(--cm-font);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

.ndc-icon {
  font-size: 3rem;
  line-height: 1;
}

.ndc-title {
  font-family: var(--cm-font);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.ndc-body {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 300px;
  line-height: 1.6;
}

.ndc-secondary-btn {
  background: transparent;
  color: var(--brand-cyan);
  border: 1px solid var(--brand-cyan);
  border-radius: 10px;
  padding: 0.85rem 1.5rem;
  font-family: var(--cm-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0.5rem;
}

.ndc-secondary-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Picker screen ───────────────────────────── */

#picker,
#manual-picker,
#vehicle-setup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  min-height: 100vh;
  padding: 2rem;
}

.picker-brand {
  font-family: var(--cm-font);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  text-align: center;
  line-height: 1.1;
}

.picker-subtitle {
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.25rem;
}

.picker-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.picker-field label {
  font-family: var(--cm-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  pointer-events: none;
}

.picker-field select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1.1rem;
  width: 100%;
  appearance: none;
}

.picker-field select:focus {
  outline: none;
  border-color: var(--brand-cyan);
}

.testing-time-field {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  gap: 0.5rem;
}

.testing-departure-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.picker-field label.testing-time-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

#start-btn,
#manual-start-btn,
#vehicle-setup-btn {
  background: var(--brand-cyan);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 1rem;
  font-family: var(--cm-font);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  margin-top: 0.5rem;
}

#start-btn:active,
#manual-start-btn:active,
#vehicle-setup-btn:active {
  background: #3da038;
}

/* ── Status card ─────────────────────────────── */

#status-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.status-on-time    { border-color: var(--on-time); }
.status-late       { border-color: var(--late); }
.status-early      { border-color: var(--early); }
.status-at-stop    { border-color: var(--surface); }
.status-approaching { border-color: var(--brand-cyan); }

#status-label {
  font-family: var(--cm-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.status-on-time    #status-label { color: var(--on-time); }
.status-late       #status-label { color: var(--late); }
.status-early      #status-label { color: var(--early); }
.status-at-stop    #status-label { color: var(--surface); }
.status-approaching #status-label { color: var(--brand-cyan); }

#next-stop {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Time row ─────────────────────────────────── */

.time-row {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}

.time-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.time-label {
  font-family: var(--cm-font);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.time-value {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#delta {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  align-self: center;
}

.status-on-time    #delta { color: var(--on-time); }
.status-late       #delta { color: var(--late); }
.status-early      #delta { color: var(--early); }
.status-at-stop    #delta { color: var(--surface); }
.status-approaching #delta { color: var(--brand-cyan); }

/* ── Metrics row ──────────────────────────────── */

.metrics-row {
  display: flex;
  gap: 1.5rem;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.metric-label {
  font-family: var(--cm-font);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-value {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Progress section ─────────────────────────── */

.progress-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stop-labels {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stop-label-prefix {
  font-size: 0.7rem;
  font-family: var(--cm-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#next-stop-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.progress-track {
  background: var(--progress-bg);
  border-radius: 4px;
  height: 8px;
  width: 100%;
  overflow: hidden;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: var(--brand-cyan);
  border-radius: 4px;
  transition: width 1s linear;
}

/* ── View toggle ──────────────────────────────── */

.view-toggle {
  display: flex;
  gap: 4px;
}

.toggle-btn {
  flex: 1;
  padding: 0.5rem;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--cm-font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.toggle-btn.toggle-active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--surface);
}

/* ── Map view ─────────────────────────────────── */

#map-view {
  height: 40vh;
  min-height: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ── Stop list ────────────────────────────────── */

#stop-list {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 40vh;
}

.stop-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}

.stop-row:last-child {
  border-bottom: none;
}

.sl-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-sched,
.sl-actual {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sl-sched {
  color: var(--text-muted);
}

.stop-past {
  opacity: 0.45;
}

.stop-past .sl-actual {
  opacity: 1;
}

.sl-ontime { color: var(--on-time); }
.sl-early  { color: var(--early); }
.sl-late   { color: var(--late); }

.stop-past .sl-missed {
  color: var(--early);
}

.stop-current {
  background: var(--surface);
  font-weight: 700;
}

.stop-current .sl-actual {
  color: var(--text-muted);
}

.stop-approaching {
  border-left: 3px solid var(--brand-cyan);
}

.sl-jump {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  line-height: 1;
}

.sl-jump:active {
  color: var(--brand-cyan);
  border-color: var(--brand-cyan);
}

/* ── Directions view ──────────────────────────── */

#directions-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 40vh;
}

.dir-select-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}

.dir-select-label {
  font-family: var(--cm-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dir-from-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  flex: 1;
  min-width: 0;
  appearance: none;
}

.dir-from-select:focus {
  outline: none;
  border-color: var(--brand-cyan);
}

.dir-destination {
  padding: 0.75rem 1rem;
  font-family: var(--cm-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.dir-destination strong {
  color: var(--text);
}

.dir-steps {
  display: flex;
  flex-direction: column;
}

.dir-step {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.dir-step:last-child {
  border-bottom: none;
}

.dir-icon {
  font-size: 1.15rem;
  text-align: center;
  color: var(--brand-cyan);
}

.dir-road {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-dist {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dir-empty,
.dir-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── Log view ─────────────────────────────────── */

#log-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 40vh;
  font-family: monospace;
  font-size: 0.75rem;
}

.log-empty {
  padding: 1rem;
  color: var(--text-muted);
  text-align: center;
}

.log-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.log-row:last-child { border-bottom: none; }

.log-time {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.log-gps    .log-msg { color: var(--text-muted); }
.log-arrive .log-msg { color: var(--on-time); }
.log-miss   .log-msg { color: var(--early); }
.log-error  .log-msg { color: var(--late); }
.log-info   .log-msg { color: var(--text); }

/* ── Duty card ────────────────────────────────── */

#duty-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem 0 4.5rem;
}

.dc-header {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--brand-cyan);
}

.dc-greeting {
  font-family: var(--cm-font);
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

#dc-driver-name {
  color: var(--text);
  font-weight: 600;
}

.dc-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

#dc-routes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dc-route-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dc-route-in_progress {
  border-color: var(--brand-cyan);
}

.dc-route-completed {
  opacity: 0.55;
}

.dc-route-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dc-service-badge {
  background: var(--surface);
  color: #fff;
  font-family: var(--cm-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dc-route-label {
  font-family: var(--cm-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.dc-route-stops {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-route-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dc-route-notes {
  font-size: 0.8rem;
  color: var(--text);
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--brand-cyan);
  border-radius: 0 4px 4px 0;
}

.dc-action-btn {
  background: var(--brand-cyan);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 0.25rem;
}

.dc-action-btn:active { background: #3da038; }

.dc-resume-btn { background: var(--surface); }
.dc-resume-btn:active { background: #162d55; }

.dc-done-badge {
  font-family: var(--cm-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-cyan);
  text-align: center;
  padding: 0.4rem;
}

/* ── Incident overlay ─────────────────────────── */

#incident-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  padding: 0 1rem 1rem;
}

#incident-modal {
  background: var(--surface);
  border: 1px solid var(--early);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.incident-title {
  font-family: var(--cm-font);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--early);
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.incident-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.incident-label {
  font-family: var(--cm-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.incident-optional {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.incident-select,
.incident-textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  width: 100%;
  font-family: system-ui, sans-serif;
  appearance: none;
}

.incident-select:focus,
.incident-textarea:focus {
  outline: none;
  border-color: var(--early);
}

.incident-textarea {
  resize: none;
  line-height: 1.4;
}

.incident-footer {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
}

.incident-btn-cancel,
.incident-btn-submit {
  flex: 1;
  padding: 0.8rem;
  border-radius: 6px;
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.incident-btn-cancel {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.incident-btn-cancel:active {
  color: var(--text);
}

.incident-btn-submit {
  background: var(--early);
  color: #000;
}

.incident-btn-submit:active {
  opacity: 0.85;
}

/* Back button shown in picker when launched from duty card */
#picker-back-btn,
#manual-back-btn,
#vehicle-setup-back-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--cm-font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  align-self: flex-start;
}

#picker-back-btn:active,
#manual-back-btn:active,
#vehicle-setup-back-btn:active {
  color: var(--text);
  border-color: var(--text);
}

/* Vehicle line + "Change" link on the no-duty-card screen */
.ndc-vehicle-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

.ndc-vehicle-info #ndc-vehicle-label {
  color: var(--text);
  font-weight: 600;
}

.ndc-link-btn {
  background: none;
  border: none;
  color: var(--brand-cyan);
  font-size: 0.85rem;
  font-family: var(--cm-font);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 0.5rem;
  padding: 0;
}

/* ── Manual trip-complete fallback ─────────────── */
/* Doubles as the only way to leave a trip once tracking has started, so it
   needs to read as a real, tappable button — not just a GPS-failure
   fallback — even though completing automatically on arrival is still the
   normal path. The confirm() prompt in main.js is the safety net against
   accidental taps, not understated styling. */
.manual-complete-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--cm-font);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* ── Trip-complete overlay ─────────────────────── */

#trip-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#trip-complete-modal {
  background: var(--surface);
  border: 1px solid var(--brand-cyan);
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}

.tc-icon {
  font-size: 2.5rem;
  color: var(--brand-cyan);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.tc-title {
  font-family: var(--cm-font);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
}

.tc-body {
  font-family: var(--cm-font);
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.tc-ok-btn {
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.8rem;
  background: var(--brand-cyan);
  color: #000;
  border: none;
  border-radius: 6px;
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.tc-ok-btn:active {
  opacity: 0.85;
}