@charset "UTF-8";
/* Shared light components and driver terminal. Palette and brand: theme.css. */
:root { font: 13px/1.5 "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
svg.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 27px; font-weight: 600; letter-spacing: -.7px; line-height: 1.25; } h2 { font-size: 16px; font-weight: 600; } h3 { font-size: 14px; font-weight: 600; } p { color: var(--muted); line-height: 1.65; }
::selection { background: var(--brand-accent-soft); color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 10px 14px; min-height: 39px; font-size: 12px; font-weight: 500; line-height: 1.35; }
.button:hover { background: var(--surface2); border-color: var(--brand-accent); }
.button.primary { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-on-accent); }.button.primary:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); }
.button.subtle { background: transparent; }.button.subtle:hover { background: var(--brand-accent-soft); }.wide { width: 100%; }
.text-button { display: inline-flex; align-items: center; gap: 9px; background: transparent; padding: 7px 0; color: var(--brand-accent); font-size: 12px; }.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.icon-button { display: inline-grid; place-items: center; background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; font-size: 25px; line-height: 1; flex-shrink: 0; }.icon-button:hover { color: var(--text); background: var(--surface2); }
.eyebrow, .section-label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .045em; margin-bottom: 12px; }
.small-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }.small-dot.lime { background: var(--lime); }.small-dot.orange { background: var(--orange); }.small-dot.blue { background: var(--blue); }.small-dot.purple { background: var(--purple); }
.live-dot { display: inline-block; margin-left: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); vertical-align: middle; }
.error { color: var(--red); min-height: 18px; font-size: 12px; overflow-wrap: anywhere; }.empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 9px 10px; color: var(--muted); }.search .icon { width: 16px; height: 16px; }.search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 12px; }.search input::placeholder { color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; margin-bottom: 18px; min-width: 0; }
.field input, .field select, .field textarea, dialog textarea { width: 100%; min-width: 0; padding: 12px; min-height: 44px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }.field input[readonly], .field textarea[readonly] { background: var(--bg); }.field small { color: var(--muted); font-size: 11px; line-height: 1.6; }.field textarea { resize: vertical; overflow-wrap: anywhere; }
.field-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; }
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 25px; width: min(460px,calc(100vw - 28px)); max-height: calc(100dvh - 36px); overflow: auto; box-shadow: var(--dialog-shadow); }
dialog::backdrop { background: #34423c50; backdrop-filter: blur(3px); }.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.dialog-top .eyebrow { margin: 0; }
dialog h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.5px; margin: 12px 0; }dialog h3 { margin: 16px 0 10px; }dialog p { font-size: 12px; margin-bottom: 18px; overflow-wrap: anywhere; }dialog .button + .button { margin-top: 9px; }dialog details { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 14px; }summary { cursor: pointer; color: var(--brand-accent); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 30px); padding: 13px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--dialog-shadow); z-index: 20; font-size: 13px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1.65; margin: 10px 0 22px; }.notice .icon { margin-top: 2px; color: var(--brand-accent); }
.status-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-accent-soft); color: var(--brand-accent); padding: 4px 7px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; line-height: 1.35; white-space: nowrap; }.status-tag.LOADING { background: var(--orange-soft); color: var(--orange); }.status-tag.UNLOADING { background: var(--blue-soft); color: var(--blue); }.status-tag.SLEEP { background: var(--purple-soft); color: var(--purple); }.status-tag.STOP { background: var(--surface2); color: var(--muted); }
.work-status-badge { --work-color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--work-color); white-space: nowrap; font-size: 11px; line-height: 1.4; }.work-status-badge > i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }.work-status-badge.IN_TRANSIT { --work-color: var(--lime); }.work-status-badge.LOADING { --work-color: var(--orange); }.work-status-badge.UNLOADING { --work-color: var(--blue); }.work-status-badge.SLEEP { --work-color: var(--purple); }
.gps-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); max-width: 100%; line-height: 1.5; }.gps-indicator i, .map-gps-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }.gps-indicator.fresh i, .map-gps-dot.fresh { background: var(--brand-accent); }.gps-indicator.delayed { color: var(--orange); }.gps-indicator.delayed i, .map-gps-dot.delayed { background: var(--orange); }.gps-indicator.lost { color: var(--red); }.gps-indicator.lost i, .map-gps-dot.lost { background: var(--red); }
.route-fields { border: 1px solid var(--line); border-radius: 12px; padding: 19px 15px 0; margin: 4px 0 22px; }.route-fields legend { padding: 0 7px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.route-place { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; margin-top: 4px; }.stepper { list-style: none; margin: 0; padding: 0; }.stepper li { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 0 0 20px; font-size: 12px; color: var(--muted); }.stepper li:last-child { padding-bottom: 0; }.stepper li:not(:last-child)::before { content: ""; position: absolute; top: 24px; left: 10px; bottom: 3px; width: 1px; background: var(--line); }
.step-num { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 11px; flex-shrink: 0; z-index: 1; }.stepper li.current { color: var(--brand-accent); }.stepper li.current .step-num { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-on-accent); }.stepper li.done .step-num { background: var(--brand-accent-soft); border-color: var(--brand-accent-soft); color: var(--brand-accent); }.stepper li small { font-size: 10px; color: var(--muted); }.route-step-content { min-width: 0; }.route-step-label { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: baseline; }
.driver-body { min-height: 100dvh; background: var(--bg); }.driver-header { max-width: 980px; margin: auto; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }.wordmark { font-size: 16px; font-weight: 600; letter-spacing: -.35px; white-space: nowrap; }.edition { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .02em; margin-left: 10px; }
.mode-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }.mode-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-accent); }
.driver-shell { max-width: 490px; margin: 28px auto 0; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }.driver-shell h1 { font-size: 29px; }.driver-intro { margin: 10px 0 27px; font-size: 13px; }.driver-footer { max-width: 435px; margin: 22px auto 0; padding: 20px 0 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); }.driver-footer a { color: var(--brand-accent); }
.start-button { justify-content: space-between; min-height: 49px; font-size: 14px; }.driver-trip-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.driver-trip-heading h1 { font-size: 25px; }.driver-trip-heading p { margin-top: 5px; font-size: 13px; }.trip-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 20px; color: var(--brand-accent); font-size: 11px; }.trip-extra { margin-top: 13px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.driver-sensors { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 15px 0 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }.driver-sensors span { display: flex; align-items: center; gap: 5px; line-height: 1.6; }.driver-stage { background: var(--bg); border: 1px solid var(--line); border-radius: 17px; padding: 21px; margin-bottom: 25px; }.driver-stage .eyebrow { display: flex; justify-content: space-between; gap: 10px; }.driver-stage h2 { font-size: 22px; font-weight: 500; }#stage-place { color: var(--muted); font-size: 13px; margin-top: 8px; overflow-wrap: anywhere; }
.stage-track { display: flex; gap: 6px; margin: 19px 0 12px; }.stage-track span { flex: 1; height: 3px; background: var(--line); border-radius: 3px; }.stage-track span.passed { background: var(--brand-accent); }.driver-stage .text-button { display: flex; justify-content: space-between; width: 100%; }
.route-summary { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 10px; font-size: 12px; }.route-summary ol { list-style: none; padding: 0; margin: 17px 0 0; display: grid; gap: 15px; }.route-summary li { display: grid; gap: 4px; }.route-summary small { color: var(--muted); font-size: 11px; }.route-summary span { color: var(--text); overflow-wrap: anywhere; }
.driver-shell .section-label { display: flex; justify-content: space-between; gap: 10px; }#status-saved { font-size: 11px; letter-spacing: 0; font-weight: 400; color: var(--brand-accent); }
.status-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 11px; }.status-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-height: 125px; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 17px; color: var(--text); background: var(--surface); }.status-choice > .icon { width: 23px; height: 23px; color: var(--muted); margin-bottom: 4px; }.status-choice strong { font-weight: 500; font-size: 15px; }.status-choice > span:not([data-icon]) { font-size: 11px; color: var(--muted); }
.status-choice i { display: none; position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-accent); color: var(--brand-on-accent); text-align: center; line-height: 18px; font-size: 11px; font-style: normal; }.status-choice.selected { background: var(--brand-accent-soft); border-color: var(--brand-accent); }.status-choice.selected i { display: block; }.status-choice.selected > .icon { color: var(--brand-accent); }.status-choice[data-status=LOADING].selected { background: var(--orange-soft); border-color: var(--orange); }.status-choice[data-status=UNLOADING].selected { background: var(--blue-soft); border-color: var(--blue); }.status-choice[data-status=SLEEP].selected { background: var(--purple-soft); border-color: var(--purple); }.status-choice[data-status=STOP].selected { background: var(--surface2); border-color: var(--muted); }
.driver-demo-note { color: var(--muted); font-size: 11px; text-align: center; margin: 17px 0 21px; }.driver-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }.driver-bottom .text-button { font-size: 12px; }
@media (max-width:600px) { .driver-header { padding: 20px; margin: 0 12px; }.driver-header .wordmark { font-size: 14px; }.driver-shell { margin: 19px 12px 0; padding: 24px 19px; }.driver-shell h1 { font-size: 26px; }.driver-trip-heading h1 { font-size: 22px; }.driver-footer { margin: 22px 24px 0; }.field-pair { gap: 11px; }.route-fields { padding: 18px 12px 0; }.status-choice { padding: 14px; }dialog { padding: 21px; }.driver-stage { padding: 18px; }.driver-sensors { gap: 8px; } }
@media (max-width:360px) { .driver-header { padding: 17px 12px; }.field-pair { grid-template-columns: minmax(0,1fr); gap: 0; }.status-grid { gap: 8px; }.status-choice { padding: 12px; }.status-choice strong { font-size: 14px; }.driver-footer { flex-wrap: wrap; } }
@media (pointer:coarse) { button, .button, .text-button, summary { min-height: 44px; }input, select, textarea, .search input, .field input, .field select, .field textarea { font-size: 16px; } }
@media (prefers-reduced-motion:no-preference) { .button, .status-choice { transition: background .15s,border-color .15s; } }

/* Shared two-way chat: dispatcher and driver use the same history and composer. */
.chat-dialog[open] { display:flex; flex-direction:column; width:min(680px,calc(100vw - 28px)); height:min(900px,calc(100dvh - 36px)); max-height:calc(100dvh - 36px); padding:0; overflow:hidden; }
.chat-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 24px 12px; flex-shrink:0; }
.chat-header .eyebrow { margin-bottom:5px; font-size:10px; }.chat-header h2 { font-size:21px; letter-spacing:-.4px; margin:0; }.chat-header .recipient { font-size:12px; margin:5px 0 0; overflow-wrap:anywhere; }.chat-header .icon-button { margin-top:-3px; }
.chat-notice { margin:0; font-size:11px; line-height:1.55; padding:0 24px 15px; border-bottom:1px solid var(--line); flex-shrink:0; }
.chat-older { flex-shrink:0; align-self:center; font-size:12px; padding:8px 12px; margin:3px 0; }
.chat-history { flex:1; min-height:150px; overflow-y:auto; overscroll-behavior:contain; padding:20px 22px; background:var(--bg); display:flex; flex-direction:column; align-items:flex-start; gap:13px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.chat-empty { text-align:center; align-self:center; margin:auto 0; padding:30px 16px; font-size:13px; }
.chat-message { max-width:86%; border:1px solid var(--line); background:var(--surface); border-radius:13px 13px 13px 3px; padding:11px 13px; color:var(--text); flex-shrink:0; min-width:125px; }
.chat-message.outgoing { align-self:flex-end; background:var(--brand-accent-soft); border-color:color-mix(in srgb,var(--brand-accent) 16%,var(--line)); border-radius:13px 13px 3px 13px; }
.chat-sender { display:block; color:var(--brand-accent); font-size:10px; font-weight:600; margin-bottom:5px; }.chat-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.55; }
.chat-receipt { display:block; font-size:10px; line-height:1.5; color:var(--muted); margin-top:7px; overflow-wrap:anywhere; }
.chat-audio-body { display:flex; flex-direction:column; gap:8px; min-width:205px; max-width:100%; }.chat-audio-label { font-size:12px; font-weight:500; }.chat-play { align-self:flex-start; min-height:34px; padding:7px 12px; border-radius:20px; font-size:12px; }.chat-audio-body audio { max-width:100%; width:280px; height:40px; }
.chat-sync-status { margin:0; font-size:10px; line-height:1.4; min-height:25px; padding:6px 22px; color:var(--muted); background:var(--bg); flex-shrink:0; }
.chat-composer { padding:14px 22px 18px; border-top:1px solid var(--line); flex-shrink:0; background:var(--surface); }.chat-text-label { margin:0 0 9px; font-size:11px; gap:5px; }.chat-text-label textarea { min-height:62px; max-height:110px; resize:vertical; padding:9px 11px; font-size:13px; }.chat-text-label textarea:disabled { opacity:.55; background:var(--bg); }
.chat-record-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }.chat-record-tools .button { min-height:34px; padding:7px 11px; font-size:12px; }.chat-record-tools .text-button { font-size:11px; }.chat-record-clock { font-size:12px; color:var(--red); font-variant-numeric:tabular-nums; }
.chat-draft { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:11px 12px; margin-top:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }.chat-draft > div { grid-column:1/-1; font-size:12px; }.chat-draft-length { color:var(--muted); font-size:11px; }.chat-draft audio { width:100%; height:36px; }.chat-draft .text-button { font-size:11px; }
.chat-error { min-height:0; margin:8px 0 0; font-size:11px; line-height:1.5; }.chat-error:empty { margin:0; }.chat-send-row { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:10px; }.chat-counter { color:var(--muted); font-size:11px; margin-right:auto; }.chat-send-row .text-button { font-size:11px; }.chat-send { min-width:115px; }
.driver-chat-entry { margin-top:24px; padding:17px; border:1px solid var(--line); background:var(--surface); border-radius:13px; }.driver-chat-entry p { font-size:11px; margin:8px 0 0; text-align:center; }
@media (max-width:520px) { .chat-dialog[open] { width:calc(100vw - 16px); height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); border-radius:14px; }.chat-header { padding:17px 16px 10px; }.chat-header h2 { font-size:19px; }.chat-notice { padding:0 16px 11px; font-size:10px; }.chat-history { padding:15px 12px; gap:11px; }.chat-message { max-width:91%; padding:10px 11px; }.chat-text { font-size:13px; }.chat-composer { padding:11px 13px 13px; }.chat-text-label textarea { font-size:16px; min-height:60px; max-height:90px; }.chat-sync-status { padding:5px 14px; min-height:24px; }.chat-audio-body { min-width:170px; }.chat-audio-body audio { width:240px; }.chat-draft { grid-template-columns:minmax(0,1fr); }.chat-draft > div { grid-column:auto; }.chat-draft .text-button { justify-self:end; }.chat-record-tools .button { min-height:40px; }.chat-send { min-height:41px; }.driver-chat-entry { padding:13px; } }
@media (max-height:620px) { .chat-dialog[open] { height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }.chat-header { padding-top:12px; }.chat-notice { padding-bottom:8px; }.chat-history { min-height:80px; }.chat-composer { padding-top:8px; padding-bottom:10px; }.chat-text-label textarea { min-height:48px; max-height:65px; } }