/* Layout: a highway-sign header with tabs; driver app is one phone-width column (chat, stops, store sheet); dashboard is lanes → route board | queue | detail. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f2f2;
  --fg: #1e1b1c;
  --muted: #675f61;
  --line: #e2dbdc;
  --brand: #e2142d;        /* Lily red, sampled from the official logo */
  --brand-fg: #ffffff;
  --accent: #b80f24;
  --p1: #c8102e; --p1-bg: #fde7ea;
  --p2: #a65c00; --p2-bg: #fff1dc;
  --p3: #2e6b47; --p3-bg: #e3f3ea;
  --note: #2c5d8a; --note-bg: #e7eef6; --on-p1: #ffffff;
  --bubble-me: #e2142d; --bubble-me-fg: #ffffff;
  --bubble-agent: #ffffff;
  --bubble-rob: #fdeef0;
  --chat-bg: #faf7f7;
  --online: #1fa463;
  --shadow: 0 1px 2px rgba(30,20,22,.06), 0 10px 28px -14px rgba(30,20,22,.22);
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141213; --surface: #1e1b1c; --surface-2: #2a2627; --fg: #f2eeee; --muted: #b0a7a8; --line: #3a3435;
  --brand: #e2142d; --brand-fg: #ffffff; --accent: #ff5a6e;
  --p1: #ff6b7d; --p1-bg: #3d1419; --p2: #f0b35a; --p2-bg: #382712; --p3: #74c995; --p3-bg: #15301f; --note: #8cbbe8; --note-bg: #16263a; --on-p1: #2a0a0f;
  --bubble-me: #c4112a; --bubble-me-fg: #ffffff; --bubble-agent: #2a2627; --bubble-rob: #3a1d22;
  --chat-bg: #171415; --online: #3ccf84; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #141213; --surface: #1e1b1c; --surface-2: #2a2627; --fg: #f2eeee; --muted: #b0a7a8; --line: #3a3435;
  --brand: #e2142d; --brand-fg: #ffffff; --accent: #ff5a6e;
  --p1: #ff6b7d; --p1-bg: #3d1419; --p2: #f0b35a; --p2-bg: #382712; --p3: #74c995; --p3-bg: #15301f; --note: #8cbbe8; --note-bg: #16263a; --on-p1: #2a0a0f;
  --bubble-me: #c4112a; --bubble-me-fg: #ffffff; --bubble-agent: #2a2627; --bubble-rob: #3a1d22;
  --chat-bg: #171415; --online: #3ccf84; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100% }
body { margin: 0 }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.45 }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--brand) }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums }

header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--brand); color: var(--brand-fg);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 10px;
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; box-shadow: 0 2px 12px -6px rgba(120,0,15,.5) }
.wordmark { display: flex; align-items: center; gap: 10px; margin-right: auto }
.wordmark .logo { height: 30px; width: auto; display: block }
.wordmark span { font-family: var(--font-display); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; opacity: .95; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.45) }
.tabs { display: flex; gap: 2px; background: rgba(0,0,0,.16); border-radius: 999px; padding: 3px }
.tabs a { color: var(--brand-fg); text-decoration: none; padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 14px }
.tabs a[aria-current="page"] { background: var(--brand-fg); color: var(--brand) }
.demo-strip { color: var(--muted); font-size: 13px; padding-block: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.demo-strip label { display: inline-flex; gap: 6px; align-items: center }
.demo-strip select { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); max-width: 100% }

main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 16px }
.notice { background: var(--p2-bg); color: var(--fg); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px }

.pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 3px 9px 3px 8px; border-radius: 999px; white-space: nowrap }
.pill::before { content: ""; width: 8px; height: 8px; flex: none; background: currentColor }
.pill.P1 { background: var(--p1-bg); color: var(--p1) } .pill.P1::before { clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.pill.P2 { background: var(--p2-bg); color: var(--p2) } .pill.P2::before { width: 7px; height: 7px; transform: rotate(45deg) }
.pill.P3 { background: var(--p3-bg); color: var(--p3) } .pill.P3::before { border-radius: 50% }
.pill.N { background: var(--note-bg); color: var(--note) } .pill.N::before { border-radius: 2px }
.status { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 9px; white-space: nowrap }
.status.needs { color: var(--p1); background: var(--p1-bg); font-weight: 600 }

/* ---------- Driver: messaging app ---------- */
.driver-col { max-width: 560px; margin: 0 auto; display: grid; gap: 14px }
.app { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden;
  height: calc(100dvh - 150px); min-height: 480px }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line) }
.who-wrap { position: relative; flex: none }
.chat-head .avatar { width: 46px; height: 46px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand) }
.online { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--online); border: 2px solid var(--surface) }
.head-text { min-width: 0; flex: 1 }
.head-text b { display: block; font-size: 17px; line-height: 1.2 }
.head-text small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sos { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em;
  padding: 9px 14px; border-radius: 999px; box-shadow: 0 6px 16px -8px var(--brand) }
.sos .short { display: none }
.sos svg { width: 16px; height: 16px }
.chat { background: var(--chat-bg); flex: 1; min-height: 0; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; white-space: pre-wrap; word-wrap: break-word; min-width: 0; line-height: 1.4 }
.msg.driver { align-self: flex-end; background: var(--bubble-me); color: var(--bubble-me-fg); border-bottom-right-radius: 6px }
.msg.agent { align-self: flex-start; background: var(--bubble-agent); box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid var(--line); border-bottom-left-radius: 6px }
.msg.rob { align-self: flex-start; background: var(--bubble-rob); border: 1px solid var(--brand); border-bottom-left-radius: 6px }
.msg.safety { background: var(--p1-bg); border-color: var(--p1) }
.msg .who { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin-bottom: 3px }
.msg .who img { width: 18px; height: 18px; border-radius: 50% }
.msg time { display: block; font-size: 11px; opacity: .65; margin-top: 4px; font-family: var(--font-mono); text-align: right }
.media { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.media img, .media video { width: 150px; max-width: 100%; height: 112px; object-fit: cover; border-radius: 12px; background: rgba(0,0,0,.2) }
.chat .empty { color: var(--muted); font-size: 14px; text-align: center; margin: auto; max-width: 34ch; display: grid; gap: 10px; justify-items: center }
.chat .empty img { width: 72px; height: 72px; border-radius: 50% }
.typing { font-size: 13px; color: var(--muted); padding: 0 16px 6px; background: var(--chat-bg) }
.composer { display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--surface) }
.store-pick { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 999px; padding: 4px 6px 4px 12px; color: var(--muted); font-size: 13px; min-width: 0 }
.store-pick svg { width: 16px; height: 16px; color: var(--brand); flex: none }
.store-pick label { white-space: nowrap }
.store-pick select { flex: 1; min-width: 0; border: 0; background: var(--surface-2); color: var(--fg); font-weight: 600; padding: 6px 4px; max-width: 100% }
/* the open list of a native dropdown doesn't inherit a transparent background; give it real colors in both themes */
select, option, optgroup { background-color: var(--surface); color: var(--fg) }
.composer-row { display: flex; gap: 8px; align-items: flex-end }
.composer textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 22px; padding: 11px 16px; background: var(--surface); min-height: 44px; max-height: 140px }
.attach, .send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0 }
.attach { background: var(--surface-2); color: var(--fg) }
.send { background: var(--brand); color: var(--brand-fg) }
.attach svg, .send svg { width: 20px; height: 20px }
.send:disabled { opacity: .45 }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chips:empty { display: none }
.chip { font-size: 13px; background: var(--surface-2); border-radius: 999px; padding: 3px 4px 3px 12px; display: inline-flex; gap: 4px; align-items: center; max-width: 100% }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px }
.chip button { border: 0; background: none; padding: 0 6px; font-size: 16px; line-height: 1 }
@media (max-width: 600px) { .app { border-radius: 16px; height: calc(100dvh - 140px) } .sos .long { display: none } .sos .short { display: inline } }
footer.about { color: var(--muted); font-size: 12px; text-align: center; padding-block: 8px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* ---------- Dashboard ----------
   Exception-first, alarm-management layout: a neutral base where color only marks problems,
   and priority is carried by shape + label + color together.
   Lanes (what needs doing) → route board | work queue | detail. */
.dash-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; justify-content: space-between }
.dash-head h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.05; letter-spacing: .01em; text-wrap: balance }
.dash-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online) }
.live.off::before { background: var(--muted) }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap }
#manager { display: grid; gap: 14px; max-width: 1440px; margin: 0 auto }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px }
.btn:hover { border-color: var(--muted) }
.btn.primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand) }
.btn.sm { padding: 5px 12px; font-size: 13px }
.btn.ack { background: var(--p1); color: var(--on-p1); border-color: var(--p1) }

/* Lanes: the four kinds of work, each a filter */
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
@media (max-width: 760px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.lane { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px }
.lane:hover { border-color: var(--muted) }
.lane .lbl { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; min-width: 0 }
.lane .lbl::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--muted) }
.lane.P1 .lbl::before { background: var(--p1); clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.lane.P2 .lbl::before { background: var(--p2); width: 8px; height: 8px; transform: rotate(45deg) }
.lane.N .lbl::before { background: var(--note); border-radius: 2px }
.lane.P3 .lbl::before { background: var(--p3); border-radius: 50% }
.lane b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums }
.lane small { grid-column: 1; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lane.zero b { color: var(--muted) }
.lane[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
.lane.hot { background: var(--p1); border-color: var(--p1); color: var(--on-p1) }
.lane.hot small { color: var(--on-p1); opacity: .9 }
.lane.hot .lbl::before { background: var(--on-p1) }

/* Workspace */
.workspace { display: grid; grid-template-columns: 236px minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start }
.sec-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px }
.board { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 70px); min-width: 0 }
.routes { display: grid; gap: 6px }
.route { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 9px; align-items: center; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px }
.route:hover { border-color: var(--muted) }
.route .dot { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line) }
.route.ok .dot { border: 0; background: var(--p3) }
.route.p2 .dot { border: 0; background: var(--p2); width: 9px; height: 9px; border-radius: 0; transform: rotate(45deg) }
.route.p1 .dot { border: 0; background: var(--p1); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; height: 11px }
.route .nm { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.route .st { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.route.p1 { border-color: var(--p1); background: var(--p1-bg) }
.route.p1 .st { color: var(--p1); font-weight: 600 }
.route[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) }
  .board { grid-column: 1 / -1; position: static }
  .routes { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity }
  .route { flex: 0 0 210px; scroll-snap-align: start }
}
@media (max-width: 860px) { .workspace { grid-template-columns: minmax(0, 1fr) } }

.queue-col { display: grid; gap: 12px; min-width: 0 }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.toolbar input[type=search] { flex: 1 1 220px; min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) }
.toolbar select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); max-width: 100% }
.toolbar label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; padding: 0 4px }
.linkbtn { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px }
.queue { display: grid; gap: 18px; min-width: 0 }
.group { display: grid; gap: 8px; min-width: 0 }
.g-head { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.g-head .cnt { font-family: var(--font-mono); letter-spacing: 0 }
details.group > summary { cursor: pointer; list-style: none; padding: 6px 0; border-top: 1px solid var(--line) }
details.group > summary::-webkit-details-marker { display: none }
details.group > summary .cnt::after { content: " · show"; font-family: var(--font-body); letter-spacing: .06em }
details.group[open] > summary .cnt::after { content: " · hide" }
.g-empty { color: var(--muted); font-size: 14px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px }

.item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; min-width: 0 }
.item.g-now { border-color: var(--p1) }
.item[aria-current="true"] { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg) }
.item-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; text-align: left; border: 0; background: none; padding: 11px 14px; width: 100% }
.item-open:hover { background: var(--surface-2) }
.item-body { display: grid; gap: 4px; min-width: 0 }
.item .sum { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.item .meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 10px }
.item .lily { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.item .lily b { color: var(--fg); font-weight: 600 }
.item .when { display: grid; gap: 2px; justify-items: end; font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap }
.item .thumbs { display: flex; gap: 6px; margin-top: 2px }
.item .thumbs img, .item .thumbs .vid { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted) }
.noted { font-size: 13px; background: var(--note-bg); border-radius: 8px; padding: 6px 9px; display: grid; gap: 2px }
.noted .cf { font-weight: 600; color: var(--note) }
.noted .cf.wait { color: var(--p2) }
.alarm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--p1); color: var(--on-p1); padding: 7px 14px; font-size: 13px; font-weight: 600 }
.alarm .grow { flex: 1; min-width: 0 }
.alarm .btn { background: var(--on-p1); color: var(--p1); border-color: var(--on-p1) }
.alarm.acked { background: var(--p1-bg); color: var(--p1) }
@media (prefers-reduced-motion: no-preference) {
  .alarm:not(.acked)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-p1); animation: blink 1.2s steps(2, start) infinite }
  @keyframes blink { to { visibility: hidden } }
}

/* Detail */
.detail { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 70px); box-shadow: var(--shadow); min-width: 0 }
.detail .empty { padding: 40px 16px; color: var(--muted); text-align: center }
.detail h4 { margin: 0; font-size: 20px; line-height: 1.25; text-wrap: balance }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 14px; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: 0 }
.kv dt { color: var(--muted) } .kv dd { margin: 0; min-width: 0 }
.callout { border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; font-size: 14px; background: var(--note-bg) }
.callout h5 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--note) }
.callout .kv { background: none; padding: 0 }
.callout.alarm-c { background: var(--p1-bg) }
.callout.alarm-c h5 { color: var(--p1) }
.detail .chat { max-height: 46vh; min-height: 120px; border-radius: 14px; flex: none }
.detail .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.detail .controls select { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2) }
.detail textarea, .detail input[type=text] { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface) }
.detail form.controls input[type=text] { flex: 1; width: auto; min-width: 0; border-radius: 999px }
.report { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; font-size: 14px; box-shadow: var(--shadow) }
.close-detail { display: none }
@media (max-width: 860px) {
  .detail { position: fixed; inset: 0; z-index: 20; border-radius: 0; overflow-y: auto; align-content: start; border: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
  .close-detail { display: inline-block }
  .detail:not(.open) { display: none }
}
@media (prefers-reduced-motion: no-preference) { .msg { animation: pop .18s ease-out } @keyframes pop { from { transform: translateY(4px); opacity: .6 } } }

/* ---------- Driver: My stops + store sheet ---------- */
.muted { color: var(--muted) }
.msg.pending { opacity: .7 }
.stops-head h2, .store-hero h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.05; text-wrap: balance }
.stops-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px }
#cover-pick { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 8px }
#cover-pick[hidden] { display: none }
#cover-pick select { width: 100%; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); font-size: 16px }
#cover-pick .af { display: grid; gap: 6px } #cover-pick .af span { font-size: 13px; font-weight: 700; color: var(--muted) }
.cover-badge { margin: 0 !important; color: var(--fg) !important } .cover-badge b { color: var(--brand) }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.stop-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none }
.stop-card:hover { border-color: var(--muted) }
.stop-card .seq { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 14px }
.stop-main { display: grid; gap: 3px; min-width: 0 }
.stop-main b { font-size: 16px }
.stop-main .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tags { display: flex; flex-wrap: wrap; gap: 6px }
.tag { font-size: 12px; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 2px 9px }
.tag.core { background: var(--p2-bg); color: var(--p2); font-weight: 600 }
.tag.tip { background: var(--note-bg); color: var(--note); font-weight: 600 }
.chev { font-size: 26px; color: var(--muted); line-height: 1 }
.back { color: var(--accent); font-weight: 600; text-decoration: none; justify-self: start; padding: 4px 0 }
.store-hero { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow) }
.store-hero p { margin: 0 }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand) }
.big-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px }
.big-actions .btn { padding: 11px 18px; font-size: 15px; text-decoration: none; text-align: center; flex: 1 1 180px }
.fields { margin: 0; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
.field { display: grid; gap: 2px; padding: 11px 16px; border-top: 1px solid var(--line) }
.field:first-child { border-top: 0 }
.field dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.field dd { margin: 0; font-size: 15px; min-width: 0 }
.photos { display: grid; gap: 10px }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.photo-grid figure { margin: 0; display: grid; gap: 4px; min-width: 0 }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface-2); display: block }
.photo-grid figcaption { font-size: 13px; line-height: 1.3 }
.add-photo { display: grid; gap: 8px }
.add-photo input[type=text], .admin input[type=text], .admin select, .admin textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); max-width: 100% }
.add-photo .btn { text-align: center; cursor: pointer }
.notice a { color: inherit }

/* ---------- Dashboard: top bar extras + admin ---------- */
.top .signout { color: var(--brand-fg); font-size: 14px; font-weight: 600; text-decoration: none; opacity: .9 }
.admin { display: grid; gap: 18px; max-width: 1240px; margin: 0 auto }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start }
@media (max-width: 900px) { .admin-grid { grid-template-columns: minmax(0, 1fr) } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; min-width: 0 }
.card h3 { margin: 0; font-size: 17px }
.card p { margin: 0 }
.status-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px }
.status-list li { display: flex; gap: 8px; align-items: baseline }
.status-list .ok { color: var(--p3); font-weight: 700 } .status-list .off { color: var(--p2); font-weight: 700 }
.tbl-wrap { overflow-x: auto }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px }
.tbl th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line) }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle }
.tbl tr.inactive td { color: var(--muted) }
.linkbox { display: flex; gap: 6px; align-items: center; min-width: 0 }
.linkbox code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border-radius: 8px; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.inline-form input[type=text] { flex: 1 1 180px; width: auto }
.inline-form select { width: auto }
.store-list { display: grid; gap: 6px; max-height: 520px; overflow-y: auto }
.store-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); width: 100% }
.store-row[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
.store-row small { color: var(--muted) }
.edit-grid { display: grid; gap: 10px }
.edit-grid label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600 }
.photo-grid .del { font-size: 12px; padding: 3px 10px; justify-self: start }
a.btn { text-decoration: none; color: var(--fg); display: inline-block; text-align: center }
a.btn.primary { color: var(--brand-fg) }
.toolbar-search { width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) }

/* driver-editable delivery info */
.fields-card { display: grid; gap: 8px }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.fc-head .sec-title { margin: 0 }
.field.core-on { background: var(--p2-bg) }
.core-tonight { font-weight: 600 }
.field.core-on .core-tonight { color: var(--p2) }
.small { font-size: 13px; margin: 0 }
.fields-card .edit-grid { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px }
.edit-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); font-weight: 400; color: var(--fg) }
.days-set { border: 0; padding: 0; margin: 0; display: grid; gap: 6px }
.days-set legend { font-size: 13px; color: var(--muted); font-weight: 600; padding: 0; margin-bottom: 6px }
.days { display: flex; flex-wrap: wrap; gap: 6px }
.day { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: 14px; color: var(--fg); cursor: pointer }
.day:has(input:checked) { background: var(--p2-bg); border-color: var(--p2); color: var(--p2) }
.day input { margin: 0 }
.edits { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px }
.edits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px }
.edits li.undone { opacity: .6 }
.edits .chg { grid-column: 1; color: var(--muted); overflow-wrap: anywhere }
.tag.edited { background: var(--note-bg); color: var(--note); font-weight: 600 }
.code-reminder { margin: 0; font-size: 13px; font-weight: 600; background: var(--p2-bg); color: var(--fg); border-radius: 10px; padding: 8px 10px }
.edit-grid label > input, .edit-grid label > textarea { font-weight: 400; color: var(--fg) }

/* emergency sheet: 911 first, then the emergency contact */
.sos-sheet { border: 0; border-radius: 20px; padding: 20px; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--fg); box-shadow: var(--shadow) }
.sos-sheet::backdrop { background: rgba(10, 5, 6, .55) }
.sos-sheet h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 30px; color: var(--p1) }
.sos-lead { margin: 0 0 14px; font-size: 16px; line-height: 1.4 }
.sos-actions { display: grid; gap: 8px }
.sos-actions .btn { padding: 14px 18px; font-size: 17px; font-weight: 700 }
.sos-actions .sos-911 { background: var(--p1); border-color: var(--p1); color: var(--on-p1); font-size: 20px; padding: 16px 18px }
.sos-actions .sos-call { background: var(--brand); border-color: var(--brand); color: var(--brand-fg) }
.sos-actions.compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 8px }
.sos-actions.compact .btn { padding: 9px 10px; font-size: 14px }
.sos-actions.compact .sos-911 { font-size: 15px; padding: 9px 10px }
.sos-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.sos-foot .btn { flex: 1 1 160px }
.sos-sheet .small { margin-top: 10px }

.breakdown { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.breakdown h3 { margin: 0; font-size: 18px }
.breakdown .small { margin: 0 }
.sos-actions .sos-ryder { background: var(--surface-2); border-color: var(--line); color: var(--fg) }
.btn.danger { color: var(--p1) }
.btn.danger.armed { background: var(--p1); border-color: var(--p1); color: var(--on-p1) }

/* class pickups */
.pk-banner { display: flex; align-items: center; gap: 10px; background: var(--note-bg); border: 1px solid color-mix(in srgb, var(--note) 35%, transparent); border-radius: 14px; padding: 10px 12px; font-size: 14px }
.pk-banner .pk-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pk-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--note); flex: none }
.pk-sheet h2 { color: var(--fg) }
.pk-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px }
.pk-list li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) }
.pk-list a { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; justify-self: start; padding-top: 4px }
.pk-card { display: grid; gap: 8px; background: var(--note-bg); border: 1.5px solid var(--note); border-radius: 16px; padding: 14px 16px }
.pk-card .eyebrow { color: var(--note); margin: 0 }
.pk-card .pk-what { font-size: 17px }
.pk-card input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface) }
.tag.pk { background: var(--note-bg); color: var(--note); font-weight: 700 }

.pk-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px }
.pk-panel .sec-title { margin: 0 }
.pk-form { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px }
.pk-form input { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); min-width: 0 }
@media (max-width: 560px) { .pk-form { grid-template-columns: minmax(0, 1fr) } }
.pk-panel .small { margin: 0 }
.pk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto }
.pk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px }
.pk-main { display: grid; gap: 1px; min-width: 0 }
.pk-state { display: grid; gap: 4px; justify-items: end; text-align: right; font-size: 13px }
.pk-chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--surface-2); color: var(--muted); white-space: nowrap }
.st-open .pk-chip { background: var(--p2-bg); color: var(--p2) }
.st-seen .pk-chip { background: var(--note-bg); color: var(--note) }
.st-picked_up .pk-chip { background: var(--p3-bg); color: var(--p3) }
.st-not_picked_up { border-color: var(--p1) } .st-not_picked_up .pk-chip { background: var(--p1-bg); color: var(--p1) }
.st-cancelled, .st-picked_up { opacity: .75 }

.tag.truck { background: var(--p2-bg); color: var(--p2); font-weight: 700 }
.callout.truck-c { background: var(--p2-bg) }
.callout.truck-c h5 { color: var(--p2) }

/* phones: keep the header on one line */
@media (max-width: 480px) { .top .wordmark span { display: none } .top .signout { font-size: 13px } .tabs a { padding: 6px 12px } }

/* accounts */
.acct-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
#acct-pick { font: inherit; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) }
.acct-list { display: grid; gap: 12px }
.acct { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px }
.acct-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
@media (max-width: 700px) { .acct-grid { grid-template-columns: minmax(0, 1fr) } }
.acct-grid label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600 }
.acct-grid input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); color: var(--fg); font-weight: 400 }
#route-accts select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) }

/* ---------- hazmat check-in ---------- */
.hz-pill { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 700 12px/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase;
  padding: 8px 10px; border-radius: 999px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 34px }
.hz-pill.todo { border-color: var(--p2); color: var(--p2); background: var(--p2-bg) }
.hz-pill.on { border-color: var(--fg); }
.sos-sheet.hz-sheet h2, .sos-sheet.rp-sheet h2 { color: var(--fg) }
.hz-sheet { max-height: calc(100dvh - 32px); overflow: auto }
.hz-sheet .eyebrow { margin: 0 0 2px }
.btn.big { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; margin: 8px 0 4px }
.hz-lines { display: grid; gap: 10px; margin: 10px 0 }
.hz-line { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px }
.hz-line select, .rp-form select, .rp-form input[type=text], .rp-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--fg); font: inherit }
.hz-w { display: flex; align-items: center; gap: 6px }
.hz-w input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--fg); font: inherit }
.hz-w span { color: var(--muted); font-size: 13px }
.hz-lq { display: flex; align-items: center; gap: 6px; font-size: 14px }
.hz-line .linkbtn { justify-self: end }
.placards { display: flex; flex-wrap: wrap; gap: 22px; padding: 18px 8px 10px; justify-content: center }
.placard { width: 92px; height: 92px; transform: rotate(45deg); display: grid; place-items: center; border: 3px solid #fff; outline: 2px solid #1e1b1c; border-radius: 6px; flex: none; margin: 10px }
.placard span { transform: rotate(-45deg); font: 700 11px/1.05 var(--font-body); text-align: center; max-width: 82px; letter-spacing: .02em; word-break: break-word }
.pl-flam { background: #d7261e; color: #fff }
.pl-nfg { background: #1a8a3f; color: #fff }
.pl-corr { background: linear-gradient(135deg, #fff 50%, #111 50%); color: #111 }
.pl-corr span { background: rgba(255,255,255,.92); padding: 2px 3px; border-radius: 3px }
.pl-oxi { background: #f4c20d; color: #111 }
.pl-perox { background: linear-gradient(135deg, #d7261e 50%, #f4c20d 50%); color: #111 }
.pl-perox span, .pl-spon span, .pl-fsol span, .pl-nine span, .pl-rad span { background: rgba(255,255,255,.92); padding: 2px 3px; border-radius: 3px }
.pl-pois { background: #fff; color: #111 }
.pl-wet { background: #1d5fbf; color: #fff }
.pl-expl { background: #f28c1b; color: #111 }
.pl-spon { background: linear-gradient(135deg, #fff 50%, #d7261e 50%); color: #111 }
.pl-fsol { background: repeating-linear-gradient(90deg, #d7261e 0 8px, #fff 8px 16px); color: #111 }
.pl-nine { background: linear-gradient(135deg, repeating-linear-gradient(90deg, #111 0 6px, #fff 6px 12px) 0 0/100% 50% no-repeat, #fff); color: #111 }
.pl-rad { background: linear-gradient(135deg, #f4c20d 50%, #fff 50%); color: #111 }
.pl-dang { background: linear-gradient(135deg, #d7261e 22%, #fff 22% 78%, #d7261e 78%); color: #111 }
.hz-or { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; color: var(--muted); font-weight: 600 }
.hz-or .placard { width: 70px; height: 70px } .hz-or .placard span { font-size: 9px; max-width: 64px }
.hz-notes { margin: 12px 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px }

/* ---------- missing / damaged report ---------- */
.quick-row { display: flex; gap: 8px; padding: 8px 12px 0; overflow-x: auto }
.quick-row .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.quick-row svg { width: 16px; height: 16px }
.rp-form { display: grid; gap: 6px }
.rp-form > label, .rp-form .lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 6px }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.seg button { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); font: 600 15px var(--font-body) }
.seg button[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.rp-tip { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--note-bg); color: var(--fg); font-size: 14px }
.rp-photos { display: grid; gap: 6px; margin-top: 8px }
.rp-photos .btn { justify-content: center }
.route .hz-st { grid-column: 2; font-size: 12px; color: var(--muted) }
.route .hz-st.on { color: var(--fg); font-weight: 600 }
.route .hz-st.todo { color: var(--p2) }
.callout.rp-c { border-left-color: var(--p2) }
.store-pick .store-hint { flex: none; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--p3); background: var(--p3-bg); border-radius: 999px; padding: 3px 8px }
.status-list .ok, .status-list .off, .status-list .info { flex: none; min-width: 48px }
.status-list .info { color: var(--note); font-weight: 700 }
.status-list a { color: var(--accent); font-weight: 600 }
a.store-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px }
a.store-link:hover { color: var(--accent); text-decoration-color: currentColor }
#store-edit { scroll-margin-top: 72px }
/* store map preview */
.map-preview { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 16 / 10; max-height: 320px; width: 100% }
.map-frame { display: block; width: 100%; height: 100%; border: 0 }
.map-toggle { position: absolute; top: 8px; right: 8px; display: flex; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); padding: 3px }
.map-toggle button { border: 0; background: none; color: var(--fg); font: 600 13px var(--font-body); padding: 6px 12px; border-radius: 999px; min-height: 32px }
.map-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg) }
.store-hero .map-preview { margin-top: 4px }

/* ---------- driver: store chooser ---------- */
.store-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); border-radius: 14px; padding: 6px 12px; font: 600 15px var(--font-body); text-align: left }
.store-btn > svg { width: 18px; height: 18px; color: var(--brand); flex: none }
.store-btn .sb-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.store-btn .sb-chg { flex: none; font-size: 13px; color: var(--accent) }
.store-btn.unset { border-style: dashed; color: var(--muted) }
.store-btn.unset .sb-chg { display: none }
.st-seq { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--fg); color: var(--bg); font: 600 14px var(--font-mono) }
.st-seq.none { background: var(--surface-2); color: var(--muted) }
.store-btn .st-seq { min-width: 24px; height: 24px; font-size: 12px; border-radius: 7px }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.sheet-head h2 { margin: 0 !important }
.sheet-head .x { border: 0; background: var(--surface-2); color: var(--fg); width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; flex: none }
.store-sheet { max-height: calc(100dvh - 32px); flex-direction: column }
.store-sheet[open] { display: flex }
.sos-sheet.store-sheet h2, .sos-sheet.rp-sheet h2 { color: var(--fg); font-size: 26px }
.st-list { display: grid; gap: 8px; overflow: auto; padding: 2px; margin: 0 -2px }
.st-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 14px; padding: 10px 12px; text-align: left; font: inherit }
.st-opt[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand) }
.st-txt { flex: 1; min-width: 0; display: grid; gap: 2px }
.st-txt b { font-size: 16px }
.st-txt small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.st-opt .chg { flex: none; color: var(--accent); font-weight: 600; font-size: 14px }
.st-opt.unset { border-style: dashed }

/* ---------- driver: missing / damaged form ---------- */
.rp-sheet { max-height: calc(100dvh - 32px); overflow: auto; padding-bottom: 0 }
.rp-form { display: grid; gap: 8px }
.rp-form .lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px }
.rp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.rp-types button { display: grid; justify-items: center; gap: 6px; min-height: 84px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--fg); font: 600 15px var(--font-body) }
.rp-types svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--brand) }
.rp-types button[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.rp-types button[aria-checked="true"] svg { color: var(--bg) }
.rp-rest { display: grid; gap: 8px }
.rp-rest[hidden] { display: none }
.rp-form input[type=text], .rp-form textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); color: var(--fg); font: 16px var(--font-body) }
.rp-photo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.rp-photo-btns .btn { justify-content: center; display: flex; align-items: center; gap: 6px; min-height: 48px }
.rp-photo-btns svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.rp-foot { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; margin-top: 6px; border-top: 1px solid var(--line) }
.rp-foot .btn { justify-content: center; min-height: 52px; font-size: 17px }
.rp-msg { margin: 0; color: var(--p1); font-weight: 600; font-size: 14px }
.rp-msg:empty { display: none }

/* photo thumbnails (chat and form) */
.thumbs, #att-chips { display: flex; flex-wrap: wrap; gap: 8px }
.thumbs:empty { display: none }
.thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--surface-2); flex: none }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.thumb-vid { display: grid; place-items: center; width: 100%; height: 100%; font-size: 12px; font-weight: 700; color: var(--muted) }
.thumb button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 1; padding: 0 }

.quick-row .hz-pill { margin-left: auto }

/* ---------- driver: accident report ---------- */
.acc-chip { color: var(--p1); border-color: color-mix(in srgb, var(--p1) 40%, var(--line)) }
.btn.acc-big { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; border: 2px solid var(--p1); color: var(--p1); background: var(--surface); margin-top: 10px }
.btn.acc-inline { margin-top: 6px }
.acc-sheet { width: min(520px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 18px 18px 0; display: none; flex-direction: column }
.acc-sheet[open] { display: flex }
.sos-sheet.acc-sheet h2 { color: var(--fg); font-size: 26px; margin: 0 }
.acc-sheet .eyebrow { margin: 0 0 2px; color: var(--p1) }
.ac-prog { display: flex; gap: 4px; margin: 4px 0 12px } .ac-prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--line) } .ac-prog i.on { background: var(--p1) }
.ac-body { overflow: auto; display: grid; gap: 12px; padding: 2px 2px 12px; margin: 0 -2px }
.af { display: grid; gap: 6px } .af > span, .ac-body .lbl { font-size: 13px; font-weight: 700; color: var(--muted) }
.af input, .af textarea, .af select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); color: var(--fg); font: 16px var(--font-body) }
.ac-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ac-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.ac-seg button, .ac-types button { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); font: 600 15px var(--font-body); padding: 6px }
.ac-seg button[aria-checked="true"], .ac-types button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.ac-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.ac-count { display: flex; align-items: center; gap: 14px } .ac-count button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 24px } .ac-count b { font-size: 24px; min-width: 32px; text-align: center }
.ac-alert { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--p1-bg); color: var(--fg); margin: 0 } .ac-alert .btn { justify-content: center; min-height: 52px }
.ac-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px }
.ac-map { width: 100%; height: 220px; border: 1px solid var(--line); border-radius: 12px }
.ac-canvas { width: 100%; height: auto; aspect-ratio: 3 / 2; border: 1px dashed var(--muted); border-radius: 12px; touch-action: none; background: #fff }
.ac-party { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px } .ac-ph { display: flex; justify-content: space-between; align-items: center }
.ac-shots { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; color: var(--muted) }
.ac-review { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 15px } .ac-review dt { color: var(--muted); font-weight: 600 } .ac-review dd { margin: 0 }
.ac-cert { display: flex; gap: 10px; align-items: flex-start; font-size: 15px } .ac-cert input { width: 22px; height: 22px; margin-top: 2px; flex: none }
.ac-nav { display: flex; gap: 8px } .ac-nav .btn { flex: 1; justify-content: center; min-height: 52px; font-size: 17px }
.ac-done { display: grid; gap: 12px; padding-bottom: 20px } .ac-done .btn { justify-content: center; min-height: 50px }
.callout.acc-c { border-left-color: var(--p1); background: var(--p1-bg) }
.callout.acc-c .acc-test b, .callout.acc-c b { color: var(--fg) }

/* ---------- dashboard sky: day/night and live weather ---------- */
main { position: relative; z-index: 1 }
.sky { position: absolute; left: 0; right: 0; top: 0; height: 430px; z-index: 0; overflow: hidden; pointer-events: none; display: none;
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); transition: background 1.5s }
.sky[data-phase] { display: block } .sky.off { display: none }
.sky[data-phase="day"] { background: linear-gradient(180deg, #3b82d6 0%, #79b2ea 55%, #cfe5f8 100%) }
.sky[data-phase="dawn"] { background: linear-gradient(180deg, #28345f 0%, #8b6b96 48%, #f3a77a 100%) }
.sky[data-phase="dusk"] { background: linear-gradient(180deg, #1d2550 0%, #7a4b78 50%, #e9895f 100%) }
.sky[data-phase="night"] { background: linear-gradient(180deg, #060c1f 0%, #0f1d40 60%, #1f3160 100%) }
.sky::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background 1.5s }
.sky:is([data-wx="cloudy"], [data-wx="rain"], [data-wx="drizzle"], [data-wx="snow"], [data-wx="fog"])::before { background: rgba(126, 138, 154, .55) }
.sky[data-phase="night"]:is([data-wx="cloudy"], [data-wx="rain"], [data-wx="drizzle"], [data-wx="snow"], [data-wx="fog"])::before { background: rgba(40, 46, 60, .55) }
.sky[data-wx="storm"]::before { background: rgba(22, 26, 36, .62) }
.sky > div { position: absolute; display: none }
/* sun and moon */
.sky .sun { right: 11%; top: 70px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0 38%, rgba(255, 220, 140, .55) 40%, rgba(255, 210, 120, 0) 70%); filter: blur(.3px) }
.sky[data-phase="dawn"] .sun, .sky[data-phase="dusk"] .sun { top: 190px; background: radial-gradient(circle, #ffe0b0 0 34%, rgba(255, 170, 110, .55) 40%, rgba(255, 150, 90, 0) 72%) }
.sky .moon { right: 12%; top: 60px; width: 64px; height: 64px; border-radius: 50%; background: #f1ecd8; box-shadow: inset -16px -6px 0 0 #c9c2a6, 0 0 40px rgba(241, 236, 216, .35) }
.sky:not([data-phase="night"]):is([data-wx="clear"], [data-wx="partly"]) .sun { display: block }
.sky[data-phase="night"]:is([data-wx="clear"], [data-wx="partly"]) :is(.moon, .stars) { display: block }
.sky .stars { inset: 0 0 40% 0; background-image: radial-gradient(1.5px 1.5px at 8% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 18% 55%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 27% 12%, #fff 50%, transparent),
  radial-gradient(1px 1px at 36% 38%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 47% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 55% 60%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 63% 30%, #fff 50%, transparent),
  radial-gradient(1px 1px at 72% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 79% 48%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 92% 26%, #fff 50%, transparent), radial-gradient(1px 1px at 4% 70%, #fff 50%, transparent), radial-gradient(1px 1px at 42% 76%, #fff 50%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate }
@keyframes twinkle { from { opacity: .55 } to { opacity: 1 } }
/* clouds drift across */
.sky .cloud { width: 340px; height: 90px; border-radius: 60px; background: rgba(255, 255, 255, .85); filter: blur(10px); animation: drift 90s linear infinite }
.sky .cloud::before, .sky .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit }
.sky .cloud::before { width: 160px; height: 120px; left: 50px; top: -55px } .sky .cloud::after { width: 120px; height: 100px; left: 170px; top: -40px }
.sky .c1 { top: 70px; left: -10%; animation-duration: 110s } .sky .c2 { top: 150px; left: 30%; transform: scale(.75); animation-duration: 140s; animation-delay: -60s } .sky .c3 { top: 40px; left: 65%; transform: scale(.6); animation-duration: 160s; animation-delay: -30s }
@keyframes drift { from { translate: -30vw 0 } to { translate: 110vw 0 } }
.sky[data-wx="partly"] :is(.c1, .c3) { display: block; opacity: .8 }
.sky:is([data-wx="cloudy"], [data-wx="rain"], [data-wx="drizzle"], [data-wx="snow"], [data-wx="storm"]) .cloud { display: block; background: rgba(214, 220, 228, .8) }
.sky[data-phase="night"] .cloud, .sky[data-wx="storm"] .cloud { background: rgba(90, 100, 118, .75) !important }
/* rain, snow, fog, lightning */
.sky .rain { inset: 0; background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(220, 232, 255, .45) 22px 23px, transparent 23px 46px); background-size: 120px 120px; animation: rain .45s linear infinite }
.sky:is([data-wx="rain"], [data-wx="storm"]) .rain { display: block } .sky[data-wx="drizzle"] .rain { display: block; opacity: .45 }
@keyframes rain { to { background-position: -30px 120px } }
.sky .snow { inset: 0; background-image: radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent), radial-gradient(2px 2px at 80px 70px, #fff 50%, transparent), radial-gradient(3px 3px at 140px 20px, #fff 50%, transparent), radial-gradient(2px 2px at 50px 110px, #fff 50%, transparent);
  background-size: 160px 140px; animation: snow 6s linear infinite }
.sky[data-wx="snow"] .snow { display: block }
@keyframes snow { to { background-position: 40px 140px } }
.sky .fog { inset: 30% -10% 0; background: linear-gradient(180deg, transparent, rgba(235, 238, 242, .7) 40%, rgba(235, 238, 242, .5)); filter: blur(12px); animation: fog 20s ease-in-out infinite alternate }
.sky[data-wx="fog"] .fog { display: block }
@keyframes fog { to { transform: translateX(6%) } }
.sky .flash { inset: 0; background: #fff; opacity: 0; animation: flash 9s infinite }
.sky[data-wx="storm"] .flash { display: block }
@keyframes flash { 0%, 92%, 96%, 100% { opacity: 0 } 93% { opacity: .5 } 94.5% { opacity: .15 } 95% { opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .sky * { animation: none !important } }
/* text over a dark sky */
body.sky-dark #manager > .dash-head :is(h2, p, .live) { color: #fff }
body.sky-dark #manager > .dash-head .live { opacity: .85 }
.wx { margin-left: 12px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px) }
body:not(.sky-dark) .wx { background: rgba(255, 255, 255, .55) }
#cap-notice { position: relative; z-index: 1 }
body.sky-dark #manager .board > .sec-title { color: rgba(255, 255, 255, .85) }
.cover-cell { display: grid; gap: 6px } .cover-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap } .cover-check input { width: 16px; height: 16px; accent-color: var(--brand) }
/* signed-in person, senior-team-only controls, logins */
.top .me { margin-left: auto; color: rgba(255,255,255,.85); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw }
.top .tabx { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; padding: 6px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; white-space: nowrap }
.top .tabx[hidden] { display: none }
body:not(.is-admin) :is(#add-acct, #breakdown-form, label[for="csv-file"], .acct-del, .route-acct-pick, #backup-link) { display: none !important }
.team-form { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: center; margin-top: 12px }
.team-form .nu-accts, .nu-accts { display: flex; flex-wrap: wrap; gap: 6px 14px; grid-column: 1 / -1 }
.nu-accts[hidden] { display: none }
#team-card[hidden] { display: none }
.admin input[type=email], #pw-sheet input[type=password] { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); max-width: 100% }
#pw-sheet { max-width: 440px } #pw-sheet .edit-grid { display: grid; gap: 10px } #pw-sheet label { display: grid; gap: 6px; font-weight: 600; font-size: 14px }
/* ---------- Manage page: tabs, compact rows, pop-up forms ---------- */
.adm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.adm-head h2 { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1 }
.subtabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; max-width: 100%; scrollbar-width: none }
.subtabs::-webkit-scrollbar { display: none }
.subtabs button { border: 0; background: none; color: var(--muted); font: 600 14px var(--font-body); padding: 8px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer }
.subtabs button[aria-selected="true"] { background: var(--fg); color: var(--bg) }
body:not(.is-admin) .admin-only { display: none !important }
#admin .pane { display: none; gap: 14px } #admin .pane.on { display: grid }
.pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px }
.pane-head p { margin: 0; color: var(--muted); font-size: 15px }
.rows { display: grid; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line) }
.row:first-child { border-top: 0 }
.row-main { display: grid; gap: 2px; min-width: 0 } .row-main .muted { font-size: 13px }
.ok-chip, .warn-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.ok-chip { background: color-mix(in srgb, #1f9d62 13%, transparent) } .ok-chip::before { content: "✓ "; color: #1f9d62 }
.warn-chip { background: color-mix(in srgb, #d98a00 16%, transparent) } .warn-chip::before { content: "● "; color: #d98a00 }
@media (max-width: 600px) { .row { grid-template-columns: minmax(0, 1fr) auto } .row .ok-chip, .row .warn-chip { grid-column: 1; justify-self: start } .row .btn { grid-row: 1; grid-column: 2 } }
details.more { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px 14px }
details.more summary { cursor: pointer; font-weight: 600; font-size: 14px }
details.more[open] summary { margin-bottom: 10px }
.tbl td .sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400 }
.form-sheet { width: min(520px, calc(100vw - 32px)) }
.form-sheet h2 { color: var(--fg) !important; font-size: 26px !important; grid-column: 1 / -1; margin: 0 0 4px !important }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px }
.form-grid label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted) }
.form-grid .full, .form-grid .rp-msg { grid-column: 1 / -1 }
.form-grid input, .form-grid select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); color: var(--fg); font: 400 16px var(--font-body) }
.form-grid .group-label { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.form-grid .rp-msg:empty { display: none }
.sheet-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px } .sheet-actions .grow { flex: 1 }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr } }
#setup-status { margin: 0 }
.form-grid .nu-accts { display: flex; flex-wrap: wrap; gap: 8px } .form-grid .nu-accts label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--fg); cursor: pointer }
.form-grid .nu-accts label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent) }
.form-grid .nu-accts input { width: 16px; height: 16px; padding: 0; accent-color: var(--brand) }
.sheet-actions { justify-content: flex-end }
#admin, #admin .pane, .adm-head, .adm-head > * { min-width: 0 }
@media (max-width: 700px) { .adm-head .subtabs { flex: 1 1 100% } .top .me { display: none } }
.ac-alert.hz { background: color-mix(in srgb, #f2a12a 16%, var(--surface)); border-color: #d98a00 }
.ac-hz-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #f2a12a 14%, var(--surface)); font-size: 14px; font-weight: 600 }