/* testdrive.css — 🚗 Test Drive mode (2026-10-23).
   Same chambers/brass language as keys.css: warm charcoal panels, ivory
   text, brass rules. Scoped entirely under #testDriveOverlay. No
   backdrop-filter (app-wide rule). Phone-first: full-screen at phone
   widths, one-handed 44px+ targets, and a help button that cannot be
   missed or fat-fingered past. */

#testDriveOverlay {
  --td-brass: #c9a53f;
  --td-brass-dim: #8a7134;
  --td-line: #453d2e;
  --td-ivory: #f4efe1;
  --td-muted: #ada189;
  --td-panel: #211d16;
  --td-panel2: #2a251c;
  --td-red: #e5484d;
  --td-red-dark: #b02a2e;
  --td-amber: #e8a33d;
  --td-green: #57ab5a;
  --td-blue: #4a8fd6;
}
#testDriveOverlay .td-box {
  background: linear-gradient(165deg, #26211a 0%, #1b1813 55%, #14120e 100%);
  color: var(--td-ivory);
  border: 1px solid var(--td-line);
  border-radius: 14px;
  width: 720px;
  max-width: 94vw;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 18px 18px 22px;
}
.td-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 3px double var(--td-brass-dim);
  padding-bottom: 10px; margin-bottom: 12px;
}
.td-nameplate {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; letter-spacing: 0.22em; font-size: 13px; color: var(--td-brass);
}
.td-subtitle { font-size: 19px; font-weight: 700; margin-top: 3px; }
.td-close { min-width: 44px; min-height: 44px; font-size: 16px; }
.td-msg {
  background: var(--td-panel2); border: 1px solid var(--td-line);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; font-size: 14px;
}
.td-loading, .td-empty { color: var(--td-muted); padding: 22px 6px; text-align: center; font-size: 15px; }
.td-note {
  background: var(--td-panel); border: 1px solid var(--td-line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.45;
}
.td-note.warn { border-color: var(--td-amber); }
.td-note.dim, .td-row.dim, .dim { color: var(--td-muted); }
.td-jobhead { font-size: 17px; margin-bottom: 10px; }
.td-label { display: block; font-size: 13px; color: var(--td-muted); margin: 12px 0 5px; }
.td-input {
  width: 100%; box-sizing: border-box; min-height: 48px;
  background: var(--td-panel); color: var(--td-ivory);
  border: 1px solid var(--td-line); border-radius: 9px;
  padding: 10px 12px; font-size: 16px;
}
.td-input:focus { outline: 2px solid var(--td-brass); outline-offset: 1px; }

.td-card {
  background: var(--td-panel); border: 1px solid var(--td-line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.td-card.sos { border: 2px solid var(--td-red); }
.td-card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.td-driver { font-size: 17px; font-weight: 800; }
.td-elapsed { font-size: 17px; font-weight: 800; color: var(--td-brass); font-variant-numeric: tabular-nums; }
.td-row { font-size: 14px; line-height: 1.5; }
.td-row a { color: var(--td-blue); font-weight: 700; }
.td-help {
  border-radius: 9px; padding: 9px 11px; margin-top: 9px;
  font-weight: 800; font-size: 15px;
}
.td-help.open { background: rgba(229,72,77,0.20); color: #ff9d9f; }
.td-help.acked { background: rgba(87,171,90,0.18); color: #93d195; }
.td-ack-btn, .td-open-btn {
  width: 100%; min-height: 48px; margin-top: 10px;
  font-size: 15px; font-weight: 700;
}
.td-locline { font-size: 14px; line-height: 1.5; margin: 4px 0 12px; }
.td-loc { font-weight: 800; }
.td-loc.on { color: var(--td-green); }
.td-loc.stale { color: var(--td-amber); }
.td-loc.bad { color: #ff9d9f; }

.td-sos {
  display: block; width: 100%; min-height: 92px;
  background: linear-gradient(180deg, #e5484d, var(--td-red-dark));
  color: #fff; border: 2px solid #ff7a7e; border-radius: 14px;
  font-size: 21px; font-weight: 900; letter-spacing: 0.02em;
  cursor: pointer; margin: 6px 0 8px;
}
.td-sos:active { transform: scale(0.99); }
.td-sos[disabled] {
  background: var(--td-panel2); color: #ff9d9f; border-color: var(--td-red);
  cursor: default;
}
.td-start, .td-end, .td-primary {
  width: 100%; min-height: 56px; margin-top: 14px;
  font-size: 17px; font-weight: 800;
}
.td-endbox {
  border-top: 1px solid var(--td-line);
  margin-top: 16px; padding-top: 6px;
}
.td-endtitle { font-size: 15px; font-weight: 800; margin-top: 8px; }

@media (max-width: 700px) {
  #testDriveOverlay .td-box {
    width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh;
    border-radius: 0; border: none;
  }
  .td-sos { min-height: 104px; font-size: 23px; }
}

/* Permission pre-prompt */
.td-permrow {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--td-line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--td-panel);
}
.td-permico { font-size: 24px; line-height: 1.1; }
.td-permmain { flex: 1; font-size: 14px; line-height: 1.45; }
.td-perm { font-size: 12px; font-weight: 700; color: var(--td-muted); }
.td-perm.ok { color: #7ddb8a; }
.td-perm.bad { color: #ff9a92; }
.td-skip {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  background: none; border: 0; color: var(--td-muted);
  font-size: 13px; text-decoration: underline; cursor: pointer;
}

/* Walkie-talkie */
.td-voice {
  border: 1px solid var(--td-line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px; background: var(--td-panel);
}
.td-voicetitle { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.td-voice-btn { width: 100%; min-height: 50px; font-size: 16px; }
.td-talk-btn { width: 100%; min-height: 46px; margin-top: 8px; }
.td-voice-state { font-size: 14px; margin-bottom: 10px; min-height: 20px; }
.td-voice-state.bad { color: #ff9a92; font-weight: 700; }
.td-voice-state.live { color: #ff8f86; font-weight: 700; }
.td-ptt {
  width: 100%; min-height: 84px; border-radius: 14px;
  border: 2px solid var(--td-line);
  background: #2e6b34; color: #fff;
  font-size: 19px; font-weight: 800; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.td-ptt.talking { background: var(--td-red-dark); border-color: #ff8f86; }
.td-warn-t { color: #ffb3ac; }

/* CARD-UX-20261023: Test Drives is a full PAGE (routed, .page-mode — see
   staff.js ROUTES '#/test-drives'), not a floating pop-up. The generic
   page-mode rules in staff.css already stretch the box; these rules make
   the td surface fill that page and cap the reading column sensibly. */
#testDriveOverlay.page-mode { background: var(--bg, #101418); }
#testDriveOverlay.page-mode .td-box {
  width: 100% !important; max-width: 100% !important;
  height: 100dvh !important; max-height: 100dvh !important;
  border: none; border-radius: 0;
}
#testDriveOverlay.page-mode #tdBody { max-width: 860px; margin: 0 auto; }
#testDriveOverlay.page-mode .td-head { max-width: 860px; margin-left: auto; margin-right: auto; }
.td-viewtoggle { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.td-view-btn { min-height: 44px; font-weight: 700; }
.td-view-btn.is-active { outline: 2px solid var(--td-brass); outline-offset: 1px; }
.td-helpbanner { margin-bottom: 12px; }

/* ===== TD-FAB (2026-10-23) — floating Test Drive button + quick-start sheet.
   Donny: "a floating button for test drives — a tech taps it, taps an RO,
   and it automatically tracks location digitally from that point."
   Same medallion family and left-edge column as #chatFab / #walkieFab.
   Slot logic: the button takes the walkie-talkie slot when Talk is hidden
   (techs never see Talk — it's manager-tier), and stacks one slot above
   it when Talk is visible, so the column is always chat / (talk) / drive
   with 12px gaps and never overlaps. z-index 120 like #walkieFab: above
   dialogs (100) so it works from any screen, below the emergency
   takeovers (99999). It hides while its own surface (the Test Drives
   page/overlay or the quick-start sheet) is open.
   The Clock In quick button (#tcQuickBtn) is phone-only and lives on the
   RIGHT edge — this column never meets it. ===== */
#tdFab[hidden] { display: none; }
#tdFab {
  position: fixed; left: 14px; bottom: 124px; z-index: 120;
  height: 56px; min-width: 56px; padding: 0 16px 0 12px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(180deg, #342e22, #211d16);
  border: 1px solid var(--rich-brass, #c9a53f); color: var(--paper, #fff);
  box-shadow: inset 0 1px 0 rgba(232, 205, 122, 0.16), 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(201, 165, 63, 0.12);
  cursor: pointer; font-weight: 800;
  font-size: calc(14px * var(--font-scale, 1));
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
body:has(#walkieFab:not([hidden])) #tdFab { bottom: 192px; }
body:has(#testDriveOverlay.open) #tdFab,
body.tdfab-sheet-open #tdFab { display: none; }
#tdFab:active { transform: scale(0.94); }
.tdfab-ico { font-size: 22px; line-height: 1; }
.tdfab-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
#tdFab.on-drive {
  border-color: #4a8fd6;
  box-shadow: inset 0 1px 0 rgba(232, 205, 122, 0.16), 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(74, 143, 214, 0.35);
}
#tdFab.sos {
  background: #b91c1c; border-color: #b91c1c; color: #fff;
  animation: tdfabPulse 1.2s ease-in-out infinite;
}
@keyframes tdfabPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
@media (max-width: 820px) {
  /* Phone stack: chatFab bottom 70px, walkie slot 138px, drive 206px
     (each 56px tall + 12px gaps, all above the phone tab bar). */
  #tdFab { left: 12px; bottom: calc(138px + env(safe-area-inset-bottom, 0px)); }
  body:has(#walkieFab:not([hidden])) #tdFab { bottom: calc(206px + env(safe-area-inset-bottom, 0px)); }
  body:has(.menu-dropdown.open) #tdFab { display: none; }
}

/* Quick-start sheet: bottom sheet on phones, centered card on desktop.
   Palette mirrors the td chambers vars (they are scoped to
   #testDriveOverlay, so the values are restated here). */
#tdFabSheet[hidden] { display: none; }
#tdFabSheet {
  position: fixed; inset: 0; z-index: 1300;
  --tdfab-brass: #c9a53f; --tdfab-line: #453d2e; --tdfab-ivory: #f4efe1;
  --tdfab-muted: #ada189; --tdfab-panel: #211d16;
}
.tdfab-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 8, 0.62); }
.tdfab-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px; max-width: 94vw; max-height: 88dvh; overflow-y: auto;
  background: linear-gradient(165deg, #26211a 0%, #1b1813 55%, #14120e 100%);
  color: var(--tdfab-ivory); border: 1px solid var(--tdfab-line); border-radius: 14px;
  padding: 16px 16px 18px; box-sizing: border-box;
}
.tdfab-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px double #8a7134; padding-bottom: 9px; margin-bottom: 12px;
}
.tdfab-title { font-size: 18px; font-weight: 800; }
.tdfab-x {
  min-width: 44px; min-height: 44px; border-radius: 9px; font-size: 16px;
  background: var(--tdfab-panel); color: var(--tdfab-ivory);
  border: 1px solid var(--tdfab-line); cursor: pointer;
}
.tdfab-loading, .tdfab-empty { color: var(--tdfab-muted); padding: 20px 6px; text-align: center; font-size: 15px; }
.tdfab-search {
  width: 100%; box-sizing: border-box; min-height: 48px; margin-bottom: 10px;
  background: var(--tdfab-panel); color: var(--tdfab-ivory);
  border: 1px solid var(--tdfab-line); border-radius: 9px;
  padding: 10px 12px; font-size: 16px;
}
.tdfab-search:focus { outline: 2px solid var(--tdfab-brass); outline-offset: 1px; }
.tdfab-list { display: flex; flex-direction: column; gap: 8px; }
.tdfab-job {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 54px; padding: 10px 12px; box-sizing: border-box;
  background: var(--tdfab-panel); color: var(--tdfab-ivory); text-align: left;
  border: 1px solid var(--tdfab-line); border-radius: 10px;
  font-size: 15px; cursor: pointer;
}
.tdfab-job:active { border-color: var(--tdfab-brass); }
.tdfab-job-main { min-width: 0; line-height: 1.35; }
.tdfab-out {
  flex: none; font-size: 12px; font-weight: 800; color: #8fc4ff;
  background: rgba(74, 143, 214, 0.22); border-radius: 999px; padding: 4px 9px;
}
.tdfab-card {
  background: var(--tdfab-panel); border: 1px solid var(--tdfab-line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 6px;
}
.tdfab-card-ro { font-size: 17px; margin-bottom: 2px; }
.tdfab-row { font-size: 14px; line-height: 1.5; }
.tdfab-row.dim, .tdfab-note.dim, .tdfab-dim { color: var(--tdfab-muted); }
.tdfab-label { display: block; font-size: 13px; color: var(--tdfab-muted); margin: 12px 0 5px; }
.tdfab-input {
  width: 100%; box-sizing: border-box; min-height: 48px;
  background: var(--tdfab-panel); color: var(--tdfab-ivory);
  border: 1px solid var(--tdfab-line); border-radius: 9px;
  padding: 10px 12px; font-size: 16px;
}
.tdfab-input:focus { outline: 2px solid var(--tdfab-brass); outline-offset: 1px; }
.tdfab-note {
  background: var(--tdfab-panel); border: 1px solid var(--tdfab-line); border-radius: 10px;
  padding: 10px 12px; margin: 12px 0; font-size: 14px; line-height: 1.45;
}
.tdfab-start, .tdfab-primary, .tdfab-retry {
  width: 100%; min-height: 56px; margin-top: 6px;
  font-size: 17px; font-weight: 800;
}
.tdfab-back {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  background: none; border: 0; color: var(--tdfab-muted);
  font-size: 14px; text-decoration: underline; cursor: pointer;
}
@media (max-width: 700px) {
  .tdfab-panel {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: auto; max-width: none; max-height: 88dvh;
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
}
/* ===== END TD-FAB ===== */