/* Barlow, self-hosted: the four .ttf files from Google Fonts go in assets/fonts (see README). System fonts are used until they're there. */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Barlow-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Barlow-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype"); }

/* ---------- Tokens (Amazon blue + squid ink) ---------- */
:root {
  color-scheme: light;
  --bg: #EEF2F6;
  --surface: #FFFFFF;
  --border: #D9E1E8;
  --route: #C9D4DE;
  --hub: #A3B3C2;
  --packet: #146EB4;
  --ink: #232F3E;
  --muted: #56677A;
  --line: #8FA2B2;
  --accent: #146EB4;
  --accent-soft: #E3EEF8;
  --btn-ink: #FFFFFF;
  --error: #B3261E;
  --up: #1B7A43;
  --up-soft: #E2F3E8;
  --down: #B3261E;
  --down-soft: #FBE6E3;
  --warn: #9A5B00;
  --warn-soft: #FCEBD3;
  --font: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #161E29;
    --surface: #232F3E;
    --border: #33445A;
    --route: #26364A;
    --hub: #3A5068;
    --packet: #00A8E1;
    --ink: #E8EEF3;
    --muted: #93A4B5;
    --line: #4B6077;
    --accent: #00A8E1;
    --accent-soft: #1C3347;
    --btn-ink: #0F1720;
    --error: #FF8A7A;
    --up: #4CC38A;
    --up-soft: #173A2B;
    --down: #FF8A7A;
    --down-soft: #44211E;
    --warn: #F0A64A;
    --warn-soft: #3D2A12;
  }
}

/* ---------- Base (mobile first) ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.on-login { overflow-x: hidden; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Login ---------- */
#routes { position: fixed; inset: 0; display: block; }
.veil {
  position: fixed; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.login {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.5rem calc(4rem + env(safe-area-inset-bottom, 0px));
}
#login-view { height: 100%; }
.signin { width: 100%; max-width: 28rem; margin: 0 auto; }
.signin h1, .signin .lede { text-align: center; }

.login h1 {
  font: 600 clamp(2.4rem, 11vw, 3.6rem)/1.02 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.lede { color: var(--muted); margin: 0 0 2.5rem; }

.field { position: relative; margin-bottom: 1.5rem; }
.field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  padding: 0.65rem 0;
  font: 500 1.15rem/1.4 var(--font);   /* ≥16px stops iOS zoom-on-focus */
  color: var(--ink);
  outline: none;
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.field:focus-within::after { transform: scaleX(1); }
.invalid .field input { border-bottom-color: var(--error); }

.field.has-toggle input { padding-right: 3.5rem; }
.toggle {
  position: absolute; right: 0; bottom: 0.45rem;
  background: none; border: 0; padding: 0.35rem 0.25rem;
  font-size: 0.9rem; font-weight: 500; color: var(--muted);
}
.toggle:hover { color: var(--accent); }

.message { min-height: 1.5rem; margin: -0.5rem 0 0; font-size: 0.9rem; color: var(--error); }

.primary {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.9rem 1.75rem;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: var(--btn-ink);
  font-weight: 600;
  transition: filter 0.15s;
}
.primary:hover { filter: brightness(1.08); }

.login footer a { color: inherit; }
.login footer {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- App shell ---------- */
.app { min-height: 100%; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.5rem;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0.75rem 0.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.icon-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0; border-radius: 3px;
}
.icon-btn:hover { background: var(--accent-soft); }
.brand {
  display: none;
  font: 600 1.35rem/1 var(--font-display);
  white-space: nowrap;
}
/* The page you're on sits beside the company name, so pages don't spend a row on a heading */
.page-title {
  flex: 1; min-width: 0; margin: 0;
  font: 600 1.25rem/1.2 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-title:focus { outline: none; }
.page-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 768px) {
  .brand { display: block; }
  .page-title { padding-left: 0.9rem; margin-left: 0.15rem; border-left: 1px solid var(--border); color: var(--muted); font-weight: 500; }
}
.logout {
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  background: none;
  color: var(--accent);
  font-weight: 600;
}
.logout:hover { background: var(--accent); color: var(--btn-ink); }

.scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(15, 23, 32, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.scrim.show { opacity: 1; pointer-events: auto; }

.sidenav {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: min(18rem, 82vw);
  display: flex; flex-direction: column;
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 0.75rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;   /* long menus (owner) scroll on phones */
}
.sidenav.open { transform: none; visibility: visible; }
.nav-user { padding: 0 0.75rem 1.25rem; color: var(--muted); font-size: 0.9rem; }
.nav-user strong { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.role-badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 3px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.sidenav a svg { flex: none; color: var(--muted); }
.sidenav a:hover { background: var(--accent-soft); }
.sidenav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidenav a[aria-current="page"] svg { color: var(--accent); }

.content {
  padding: 1rem 0.85rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  max-width: 64rem;
}
.content h2 {
  font: 600 2rem/1.1 var(--font-display);
  margin: 0 0 0.25rem;
}
.content .sub { color: var(--muted); margin: 0 0 1rem; }
.placeholder {
  padding: 2rem 1.25rem;
  border: 1.5px dashed var(--border);
  border-radius: 3px;
  color: var(--muted);
  text-align: center;
}

.nav-badge {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--btn-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
}
.nav-badge.alert { background: var(--down); }

/* ---------- Fleet sheet ---------- */
.fleet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
#fleet-search {
  flex: 1 1 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--ink);
  font: 400 1rem/1.4 var(--font);
}
#fleet-search::placeholder { color: var(--muted); }
#fleet-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.folders button span { font-variant-numeric: tabular-nums; opacity: 0.8; }
.add-vehicle { margin-left: auto; }
.readonly-note { margin: -0.25rem 0 1rem; font-size: 0.9rem; color: var(--muted); }

.status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: 0; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status.up { background: var(--up-soft); color: var(--up); }
.status.down { background: var(--down-soft); color: var(--down); }
button.status:hover { box-shadow: inset 0 0 0 1.5px currentColor; }

/* Phones: one card per vehicle */
.fleet-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.vcard {
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px;
}
.vcard.is-down { box-shadow: inset 3px 0 0 var(--down); }
.vcard-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vcard-head strong { font-size: 1.1rem; font-weight: 600; }
.vcard dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.75rem 0 0; font-size: 0.95rem; }
.vcard dt { color: var(--muted); }
.vcard-l4 { margin-left: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.vcard dd { margin: 0; overflow-wrap: anywhere; }
.vcard .text-btn { margin-top: 0.5rem; padding-left: 0; color: var(--accent); font-weight: 600; }

/* Tablet and up: the spreadsheet */
.sheet-wrap { display: none; }
.sheet { width: 100%; min-width: 104rem; border-collapse: collapse; font-size: 0.95rem; }
.sheet th {
  position: sticky; top: 0; z-index: 1;
  padding: 0;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line);
  text-align: left;
}
.sheet th button {
  display: flex; align-items: center; gap: 0.35rem;
  width: 100%; padding: 0.65rem 0.75rem;
  background: none; border: 0;
  color: var(--muted); font-weight: 600; text-align: left;
}
.sheet th[aria-sort] button { color: var(--ink); }
.sheet th[aria-sort="ascending"] button::after { content: "▲"; font-size: 0.6rem; }
.sheet th[aria-sort="descending"] button::after { content: "▼"; font-size: 0.6rem; }
.col-name { width: 5.5rem; } .col-last4 { width: 5.5rem; } .col-vin { width: 14rem; } .col-make { width: 7rem; }
.col-model { width: 7rem; } .col-load { width: 7.5rem; } .col-status { width: 6rem; } .col-actions { width: 3rem; }
.col-gps { width: 8.5rem; }
.gps-none { color: var(--muted); }
.col-shopWork { min-width: 12rem; } .col-problems { min-width: 15rem; }
.sheet .last4, .last4.cell-text { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
/* Keep the vehicle number in view while scrolling sideways */
.sheet th:first-child, .sheet td:first-child { position: sticky; left: 0; background: var(--surface); }
.sheet th:first-child { z-index: 2; background: var(--bg); }
.sheet td:first-child { z-index: 1; box-shadow: inset -1px 0 0 var(--border); }
.sheet td:first-child .cell { font-weight: 700; }
.sheet td.col-shop .cell-text, .sheet td.col-make .cell-text, .sheet td.col-model .cell-text { white-space: nowrap; }
.has-text-work { color: var(--accent) !important; font-weight: 600; }
.has-text-problem { color: var(--down) !important; font-weight: 600; }
.sheet td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
}
.sheet td:last-child { border-right: 0; }
.sheet tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.sheet tr.is-down td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.sheet td.col-status { padding: 0 0.6rem; }
.cell, .cell-text {
  display: block; width: 100%;
  padding: 0.65rem 0.75rem;
  border: 0; background: transparent;
  font: inherit; color: var(--ink);
}
.cell { outline: none; }
.cell::placeholder { color: var(--muted); opacity: 0.7; }
.cell:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.vin, .cell-text.vin { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
select.cell { cursor: pointer; appearance: auto; }
select.cell option { background: var(--surface); color: var(--ink); }
.c-row select {
  flex: 1; min-width: 0;
  padding: 0.85rem 0;
  border: 0; background: transparent; outline: none;
  font: 500 1rem/1.4 var(--font); color: var(--ink);
}
.cell.invalid { box-shadow: inset 0 -2px 0 var(--error); }
.row-del {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin: 0 auto;
  background: none; border: 0; border-radius: 3px; color: var(--muted);
}
.row-del:hover { color: var(--error); background: var(--down-soft); }

/* Vehicle editor extras */
.row-label { flex: none; width: 3.75rem; color: var(--muted); }
.seg-group { display: flex; gap: 0.5rem; padding: 0.6rem 0; }
.seg {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: none; color: var(--muted); font-weight: 600;
}
.seg.up[aria-pressed="true"] { background: var(--up-soft); color: var(--up); border-color: var(--up); }
.seg.down[aria-pressed="true"] { background: var(--down-soft); color: var(--down); border-color: var(--down); }
.composer .veh-msg:empty { display: none; }
.composer .veh-msg { padding-top: 0.75rem; }
.text-btn.danger { align-self: flex-start; margin: 0 1rem 1rem; color: var(--error); }

/* ---------- Training ---------- */
.train-summary {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px;
}
.train-total { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; color: var(--muted); }
.train-total strong { color: var(--ink); font-size: 1.15rem; }
#train-pct { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.bar { height: 0.55rem; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 0.4s ease; }
.train-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.train-bar .push-right { margin-left: auto; }
.thumb.has-image { background-size: cover; background-position: center; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Dashboard training card */
.card-progress { padding: 0 1.25rem 1rem; }
.dyn-body { display: grid; gap: 0.6rem; padding: 0 1.25rem 0.25rem; }
.dyn-line strong { display: block; font-weight: 600; }
.dyn-line span { display: block; font-size: 0.9rem; color: var(--muted); }
.dyn-line.big strong { font: 600 1.3rem/1.25 var(--font-display); }
.dyn-line.dim strong { font-weight: 500; color: var(--muted); }
.dyn-line.warn strong { color: var(--warn); }
.dyn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.dyn-facts div { padding: 0.45rem; background: var(--bg); border-radius: 3px; text-align: center; }
.dyn-facts strong { display: block; font: 600 1.4rem/1.1 var(--font-display); }
.dyn-facts span { font-size: 0.75rem; color: var(--muted); }
.dyn-approve { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.dyn-approve:last-child { border-bottom: 0; }
.dyn-btns { display: flex; gap: 0.4rem; }
.dyn-btns .compose-btn, .dyn-btns .secondary { margin: 0; padding: 0.35rem 0.8rem; }
.cov { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.cov-day { padding: 0.4rem 0.2rem; background: var(--bg); border-radius: 3px; text-align: center; }
.cov-day span, .cov-day em { display: block; font-size: 0.7rem; font-style: normal; color: var(--muted); }
.cov-day strong { font: 600 1.2rem/1.2 var(--font-display); }
.cov-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cov-day.has-open em { color: var(--warn); font-weight: 600; }
.dyn-room { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: 3px; background: var(--bg); font-weight: 600; text-align: left; }
.dyn-room:hover { background: var(--accent-soft); }
.card.dyn .card-empty { margin: 0; padding: 0; border: 0; color: var(--muted); }
.card.dyn .dyn-body { padding-bottom: 0.5rem; }
.card .card-action { margin-top: auto; }
.card > .card-list, .card > .dyn-body { margin-bottom: 1rem; }
.dash { align-items: start; }
@media (min-width: 1280px) { .content .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.7rem 1.25rem; font-size: 0.88rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.card-facts strong { color: var(--ink); }
.updown { display: flex; height: 0.55rem; border-radius: 999px; overflow: hidden; background: var(--border); }
.updown .u { background: var(--up); }
.updown .d { background: var(--down); }
.card-list .card-unit { grid-template-columns: auto 1fr; align-items: baseline; gap: 0.1rem 0.75rem; }
.card-unit .status { grid-row: span 2; align-self: center; }
.card-unit .unit-name { font-weight: 600; }
.card-unit .unit-note { grid-column: 2; color: var(--muted); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-empty.all-up { color: var(--up); font-weight: 500; }

/* ---------- My truck ---------- */
.truck-wrap { display: grid; gap: 1rem; }
.truck .text-btn.add-link { color: var(--accent); font-weight: 600; }
.truck-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .truck-grid { grid-template-columns: 3fr 2fr; } }
.truck-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.truck-title h3 { margin: 0; font: 600 1.6rem/1.2 var(--font-display); }
.truck-l4 { margin-left: 0.6rem; font-family: var(--font); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.veh-wrap { margin: 0.75rem 0; }
.veh-svg { display: block; width: 100%; max-width: 44rem; height: auto; margin: 0 auto; }
.veh-body { fill: var(--surface); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.veh-glass { fill: var(--accent-soft); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.veh-line { fill: none; stroke: var(--line); stroke-width: 2; }
.veh-trim { fill: var(--line); }
.veh-light { fill: #F2C14E; }
.veh-wheel { fill: var(--ink); }
.veh-hub { fill: var(--line); }
.zone { cursor: pointer; outline: none; }
.zone rect { fill: transparent; stroke: transparent; stroke-width: 2.5; stroke-dasharray: 6 5; }
.zone:hover rect, .zone:focus-visible rect { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); }
.zone-mark { pointer-events: none; }
.zone-mark circle { fill: var(--down); stroke: var(--surface); stroke-width: 3; }
.zone-mark text { fill: #fff; font: 700 15px var(--font); }
.veh-hint { margin: 0.4rem 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }
.truck-facts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.truck-facts div { padding: 0.55rem 0.7rem; background: var(--bg); border-radius: 3px; }
.truck-facts span { display: block; font-size: 0.78rem; color: var(--muted); }
.truck-facts strong { font-weight: 600; }
.truck-down { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--down); background: var(--down-soft); color: var(--down); font-weight: 600; }
.field-label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.92rem; }
.truck-form .seg-group { flex-wrap: wrap; padding: 0; }
.truck-form .seg[aria-pressed="true"]:not(.up):not(.down) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.truck-form .chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.truck-form .chip[aria-checked="true"] strong::before { content: "✓ "; }
.truck-form textarea { min-height: 5.5rem; resize: vertical; }
.photo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.tf-thumb { display: block; max-width: 9rem; max-height: 7rem; border-radius: 4px; border: 1px solid var(--border); object-fit: cover; }
.acct-list dd.bad { color: var(--down); font-weight: 600; }
.acct-list dd.muted { color: var(--muted); }
.truck-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.truck-reports li { padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 3px; }
.truck-reports li.unsafe { border-left-color: var(--down); }
.truck-reports p { margin: 0.3rem 0 0; }
.tr-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; }
.tr-state { font-size: 0.8rem; font-weight: 700; color: var(--warn); }
.tr-state.fixed { color: var(--up); }
.truck-none select { margin-top: 0.5rem; max-width: 100%; }

/* ---------- Video inspections ---------- */
.insp-slots { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .insp-slots { grid-template-columns: 1fr 1fr; } }
.insp-slot { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; border: 1.5px dashed var(--line); border-radius: 4px; }
.insp-slot.done { border-style: solid; border-color: var(--border); }
.insp-slot.st-redo { border-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 50%, var(--surface)); }
.insp-slot.busy { opacity: 0.6; pointer-events: none; }
.slot-head strong { display: block; font-weight: 600; }
.slot-sub, .slot-empty { font-size: 0.88rem; color: var(--muted); }
.slot-empty { margin: 0; }
.insp-slot .file-pick { align-self: flex-start; margin: 0; }
.slot-body { display: flex; gap: 0.85rem; align-items: flex-start; }
.slot-thumb { flex: none; width: 9rem; padding: 0; border: 0; background: none; }
.slot-info { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.92rem; }
.slot-note { color: var(--warn); font-weight: 600; }
.it-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--bg) center / cover no-repeat; border: 1px solid var(--border); }
.it-thumb svg { width: 80%; height: auto; }
.it-dur { position: absolute; right: 0.3rem; bottom: 0.3rem; padding: 0 0.3rem; border-radius: 2px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.72rem; font-weight: 600; }
.it-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.9rem; }
.insp-state { font-weight: 600; font-size: 0.85rem; }
.insp-state.st-new { color: var(--accent); } .insp-state.st-ok { color: var(--up); }
.insp-state.st-flagged { color: var(--down); } .insp-state.st-redo { color: var(--warn); }
.insp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.insp-top .seg-group { padding: 0; }
.insp-top .seg.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.insp-filter { flex-wrap: wrap; margin-bottom: 1rem; }
.insp-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.insp-card { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding: 0.5rem 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); text-align: left; }
.insp-card:hover { border-color: var(--accent); }
.insp-card.st-new { box-shadow: inset 0 3px 0 var(--accent); }
.insp-card.st-flagged { box-shadow: inset 0 3px 0 var(--down); }
.insp-card.st-redo { box-shadow: inset 0 3px 0 var(--warn); }
.insp-card .it-thumb { margin-bottom: 0.3rem; }
.ic-name { font-weight: 600; }
.ic-meta { font-size: 0.85rem; color: var(--muted); }
.miss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.miss-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 3px; }
.miss-list strong, .miss-list span { display: block; }
.miss-list span { font-size: 0.88rem; color: var(--muted); }
.iv-pos { color: var(--muted); font-size: 0.9rem; min-width: 4rem; text-align: right; }
.iv-body { flex: 1; overflow-y: auto; display: grid; gap: 1rem; padding: 1rem; }
.iv-video { width: 100%; max-height: 60vh; border-radius: 4px; background: #000; }
.iv-none { text-align: center; color: var(--muted); }
.iv-none .it-thumb { max-width: 32rem; margin: 0 auto 0.5rem; }
.insp-viewer .iv-side textarea { flex: none; width: 100%; min-height: 4.5rem; margin-top: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); resize: vertical; }
.iv-side .message:empty { display: none; }
.iv-buttons, .iv-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.iv-buttons .compose-btn { margin: 0; }
.iv-nav { justify-content: space-between; margin-top: 1rem; }
@media (min-width: 768px) {
  .composer.insp-viewer { box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.45), 0 18px 50px rgba(15, 23, 32, 0.3); inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(60rem, 94vw); height: min(42rem, 92vh); display: flex; flex-direction: column; }
  .insp-viewer .iv-body { grid-template-columns: 3fr 2fr; align-items: start; }
}
.insp-viewer:not([hidden]) { display: flex; flex-direction: column; }

/* ---------- Onboarding ---------- */
.onboard { margin-top: 0.75rem; }
.ob-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ob-head .tix-h { margin-bottom: 0.4rem; }
.ob-ready { color: var(--up); font-weight: 700; }
.onboard .bar { margin-bottom: 0.75rem; }
.ob-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.4rem; }
.ob-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 3px; }
.ob-list li.done { background: color-mix(in srgb, var(--up-soft) 55%, var(--surface)); }
.ob-mark { flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--line); border-radius: 50%; color: #fff; font-size: 0.8rem; font-weight: 700; }
.ob-list li.done .ob-mark { background: var(--up); border-color: var(--up); }
.ob-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-text span { font-size: 0.85rem; color: var(--muted); }
.ob-acts { flex: none; display: flex; align-items: center; gap: 0.5rem; }
.ob-acts .secondary { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.ob-acts .add-link { color: var(--accent); font-weight: 600; }

/* ---------- Directory and contact info ---------- */
.ue-emerg { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.lic-grid { display: grid; gap: 0.5rem; grid-template-columns: 1.6fr 0.6fr 1.3fr; }
.ue-docs input { width: 100%; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--ink); font: 400 1rem var(--font); }
.cert-label { margin-top: 0.75rem; }
.cert-row { display: grid; grid-template-columns: 1.6fr 1.2fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.cert-row > span { grid-column: 1 / -1; font-size: 0.85rem; }
.ue-docs .add-link { padding-left: 0; color: var(--accent); font-weight: 600; }
.exp-expired { color: var(--down) !important; font-weight: 600; }
.exp-soon { color: var(--warn) !important; font-weight: 600; }
.ue-emerg .row-label { display: block; width: auto; margin-bottom: 0.4rem; font-size: 0.9rem; }
.emerg-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .emerg-grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.ue-emerg input { width: 100%; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--ink); font: 400 1rem var(--font); }
.dir-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.dir-card { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.dir-lines { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.92rem; }
.dir-link { color: var(--accent); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dir-link:hover { text-decoration: underline; }
.dir-lines .muted, .dir-em.muted { color: var(--muted); }
.dir-em { color: var(--ink); }
.dir-msg { position: absolute; top: 0.8rem; right: 0.9rem; padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.cand-q .dir-link { display: block; margin-top: 0.15rem; }

/* ---------- Driver application and candidates ---------- */
.apply-cta { margin: 1.25rem 0 0; text-align: center; color: var(--muted); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.apply { padding: 2rem 0; }
.apply h1 { margin-bottom: 0.25rem; }
.apply .lede { margin-bottom: 1.5rem; }
.apply-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 0.4rem; border-bottom: 1.5px solid var(--line); }
.ap-row label { color: var(--muted); font-size: 1.05rem; }
.ap-row input, .ap-row select { border: 0; background: transparent; color: var(--ink); font: 500 1.05rem var(--font); text-align: right; }
.ap-row:focus-within { border-bottom-color: var(--accent); }
.ap-row input:focus, .ap-row select:focus { outline: none; }
.ap-q { margin: 0 0 1.1rem; padding: 0; border: 0; }
.ap-q legend { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.4; }
.ap-yn { display: flex; gap: 0.6rem; }
.ap-yn label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600; cursor: pointer; }
.ap-yn label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ap-yn label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-yn input { accent-color: var(--accent); }
.ap-q textarea { width: 100%; margin-top: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--ink); font: 400 1rem var(--font); resize: vertical; }
.apply .message { margin: 0 0 0.25rem; }
.apply-done .lede { margin-bottom: 1.5rem; }
.cand-flags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cand-flag { padding: 0.05rem 0.45rem; border-radius: 3px; font-size: 0.75rem; font-weight: 600; }
.cand-flag.ok { background: var(--up-soft); color: var(--up); }
.cand-flag.bad { background: var(--down-soft); color: var(--down); }
.cand-q { padding: 0.7rem 0; border-top: 1px solid var(--border); }
.cand-q > span { display: block; font-size: 0.92rem; color: var(--muted); }
.cand-q strong { font-size: 1.05rem; }
.cand-q strong.ok { color: var(--up); } .cand-q strong.bad { color: var(--down); }
.cand-q p { margin: 0.25rem 0 0; }
.tix-detail textarea.binput { margin-bottom: 0.5rem; }
.cand-done { margin: 0.75rem 0 0.5rem; padding: 0.6rem 0.8rem; border-radius: 3px; background: var(--bg); }
.cand-done.ok { background: var(--up-soft); color: var(--up); font-weight: 600; }

/* ---------- 🐞 button and tickets ---------- */
.bug-fab, .bug-top { display: none; }
.bug-fab {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 45;
  align-items: center; gap: 0.4rem;
  height: 2.6rem; min-width: 2.6rem; padding: 0 0.7rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 3px 12px rgba(15, 23, 32, 0.15);
  font-size: 1.15rem; opacity: 0.7;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.bug-tip { display: none; font-size: 0.85rem; font-weight: 600; }
.bug-fab:hover, .bug-fab:focus-visible { opacity: 1; box-shadow: 0 6px 18px rgba(15, 23, 32, 0.22); }
.bug-fab:hover .bug-tip, .bug-fab:focus-visible .bug-tip { display: inline; }
@media (min-width: 1024px) { body:not(.on-login) .bug-fab { display: inline-flex; } }
@media (max-width: 1023px) { .bug-top { display: grid; font-size: 1.15rem; } }
.bug-text { min-height: 7rem !important; flex: 0 0 auto !important; }
.bug-shot { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; }
.bug-context { padding: 0 1rem; }
.tix-panes { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .tix-panes { grid-template-columns: minmax(18rem, 26rem) 1fr; } .tix-back { display: none; } }
@media (max-width: 1023px) { .tix-panes.reading .tix-list { display: none; } .tix-panes:not(.reading) .tix-detail { display: none; } }
.tix-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tix-row { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); text-align: left; }
.tix-row:hover { border-color: var(--accent); }
.tix-row.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tix-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.tix-title { font-weight: 600; }
.tix-meta { font-size: 0.85rem; color: var(--muted); }
.tix-status { padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.tix-status.st-new { background: var(--down-soft); color: var(--down); }
.tix-status.st-working { background: var(--accent-soft); color: var(--accent); }
.tix-status.st-waiting { background: var(--warn-soft); color: var(--warn); }
.tix-status.st-resolved { background: var(--up-soft); color: var(--up); }
.tix-kind { padding: 0.08rem 0.5rem; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); font-size: 0.75rem; font-weight: 700; }
.tix-sev { font-size: 0.75rem; font-weight: 700; color: var(--down); }
.tix-detail { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.tix-detail.empty { color: var(--muted); text-align: center; padding: 3rem 1rem; }
.tix-detail h3 { margin: 0 0 0.4rem; font: 600 1.35rem/1.25 var(--font-display); }
.tix-text { white-space: pre-wrap; margin: 0.75rem 0; }
.tix-shot { display: block; max-width: 100%; max-height: 16rem; margin: 0.5rem 0; border: 1px solid var(--border); border-radius: 4px; }
.tix-facts { margin: 0.75rem 0; font-size: 0.92rem; }
.tix-facts dd { white-space: pre-wrap; }
.tix-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tix-h { margin: 1rem 0 0.5rem; font: 600 1.1rem var(--font-display); }
.tix-comments { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.tix-comments li { padding: 0.6rem 0.75rem; background: var(--bg); border-radius: 3px; }
.tix-comments li.internal { background: var(--warn-soft); }
.tix-comments p { margin: 0.25rem 0 0; white-space: pre-wrap; }
.tix-c-head { display: flex; gap: 0.5rem; align-items: baseline; }
.tix-c-head span { font-size: 0.8rem; color: var(--muted); }
.tix-detail textarea { width: 100%; resize: vertical; }
.my-tix { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.my-tix li { padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 3px; }
.my-tix .tix-meta { display: block; margin-top: 0.2rem; }
.tix-reply { margin: 0.4rem 0 0; padding: 0.45rem 0.6rem; background: var(--accent-soft); border-radius: 3px; font-size: 0.92rem; }

/* ---------- Reports ---------- */
.rep-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.rep-card {
  display: flex; flex-direction: column; gap: 0.4rem; width: 100%; height: 100%;
  padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); text-align: left;
}
.rep-card strong { font: 600 1.3rem/1.2 var(--font-display); }
.rep-card span { color: var(--muted); }
.rep-card em { margin-top: auto; padding-top: 0.5rem; font-style: normal; font-weight: 600; color: var(--accent); }
.rep-card:not(.soon):hover { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.rep-card.soon { opacity: 0.6; cursor: default; }
.rep-card.soon em { color: var(--muted); }
.rep-range { margin: 0 0 0.75rem; color: var(--muted); }
.rep-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.rep-ctl span { display: block; margin-bottom: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.rep-select, .rep-num { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--ink); font: 500 1rem var(--font); }
.rep-num { width: 5rem; }
.rep-print { margin-left: auto; }
.rep-sample { margin: 0 0 1rem; padding: 0.6rem 0.85rem; border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: 0.9rem; }
.rep-tile span { display: block; font-size: 0.8rem; color: var(--muted); }
.rep-tile strong { font: 600 1.6rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.weak-grid { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.weak-card { padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--down); border-radius: 3px; }
.weak-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.weak-n { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); }
.reasons { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; }
.reasons li + li { margin-top: 0.2rem; }
.reasons.big { font-size: 1rem; }
.score { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-bar { display: inline-block; width: 3.5rem; height: 0.4rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.score-bar span { display: block; height: 100%; }
.score.ok { color: var(--up); } .score.ok .score-bar span { background: var(--up); }
.score.mid { color: var(--warn); } .score.mid .score-bar span { background: var(--warn); }
.score.low { color: var(--down); } .score.low .score-bar span { background: var(--down); }
.rep-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.rep-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 0.92rem; }
.rep-table th, .rep-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.rep-table thead th { background: var(--bg); color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.rep-table tbody th { font-weight: 500; }
.rep-table tr.is-weak > th, .rep-table tr.is-weak > td { background: color-mix(in srgb, var(--down-soft) 45%, var(--surface)); }
.rep-table .bad { color: var(--down); font-weight: 600; }
.rep-table td { white-space: nowrap; }
.rep-table td:last-child { white-space: normal; min-width: 12rem; }
.rep-name { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-align: left; }
.rep-name:hover { color: var(--accent); }
.caret { width: 0.8rem; color: var(--muted); }
.rep-detail-row > td { padding: 0 0.75rem 0.75rem; background: var(--bg); }
.rep-detail-wrap { overflow-x: auto; }
.rep-detail { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rep-detail th, .rep-detail td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.rep-detail th { color: var(--muted); font-weight: 600; }
.freq-n { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.weak-card.amber { border-left-color: var(--warn); }
.van-name { font: 600 1.2rem var(--font-display); letter-spacing: 0.02em; }
.rep-table.narrow { min-width: 32rem; }
.rep-table .muted { color: var(--muted); }
.timeline { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.tl-item { padding: 0.65rem 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.tl-item span { display: block; font-size: 0.8rem; color: var(--muted); }
.tl-item strong { font-weight: 600; }
.went-wrong { margin: 0; padding: 0.75rem 1rem 0.75rem 2rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--down); border-radius: 3px; }
.went-wrong li + li { margin-top: 0.35rem; }
.shift-lists { display: grid; gap: 0.75rem; margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.shift-lists .bcard p { margin: 0; }
.shift-lists .pre { white-space: pre-wrap; }
.rep .day-nav .day-label strong { font-size: 1.15rem; }
.mini-bar { display: inline-flex; align-items: center; gap: 0.4rem; }
.mb-track { display: inline-block; width: 4rem; height: 0.4rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.mb-fill { display: block; height: 100%; }
.mini-bar.ok .mb-fill { background: var(--up); } .mini-bar.mid .mb-fill { background: var(--warn); } .mini-bar.low .mb-fill { background: var(--down); }
.mini-bar em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-bar.ok em { color: var(--up); } .mini-bar.mid em { color: var(--warn); } .mini-bar.low em { color: var(--down); }
.warn-text { color: var(--warn); font-weight: 700; }
.went-wrong.amber { border-left-color: var(--warn); }
.rep-how { margin-top: 1.25rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.rep-how summary { cursor: pointer; font-weight: 600; }
.rep-how p { margin: 0.6rem 0 0; color: var(--muted); max-width: 70ch; }
@media print {
  .topbar, .sidenav, .scrim, .scope-note, .back-link, .rep-controls, .toast, .rep-how summary { display: none !important; }
  .app { display: block !important; }
  .content { max-width: none !important; padding: 0 !important; }
  body { background: #fff; }
  .rep-how { border: 0; } .rep-how p { display: block; }
}

/* ---------- Settings ---------- */
.avatar.has-photo { background-size: cover !important; background-position: center !important; color: transparent; }
.nav-user { display: flex; align-items: center; gap: 0.75rem; }
.nav-user > div { min-width: 0; }
.nav-signed { display: block; }
.avatar.nav-avatar { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #fff; font-size: 0.85rem; font-weight: 600; }
.settings { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .settings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings > .set-card:last-child { grid-column: 1 / -1; } }
.set-card { padding: 1.1rem 1.25rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.set-card h3 { margin: 0 0 0.9rem; font: 600 1.3rem/1.2 var(--font-display); }
.photo-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.avatar.set-avatar { flex: none; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; color: #fff; font-size: 1.6rem; font-weight: 600; }
.photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.file-pick { display: inline-block; cursor: pointer; }
.file-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.set-field { margin-bottom: 0.9rem; }
.set-field label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.set-card .message { margin: 0 0 0.75rem; min-height: 0; }
.set-card .message:empty { display: none; }
.message.ok { color: var(--up); }
.set-card .compose-btn { margin: 0; }
.acct-list { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0 0 0.75rem; }
.acct-list dt { color: var(--muted); }
.acct-list dd { margin: 0; overflow-wrap: anywhere; }
.shop-pto { margin: 0; font-size: 0.92rem; color: var(--muted); }
.pto-row { flex-wrap: wrap; gap: 0.4rem 0.6rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.c-row.pto-row input { width: 3.75rem; flex: none; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--ink); font: 500 1rem var(--font); }
.c-row.pto-row span:not(.row-label) { color: var(--muted); font-size: 0.92rem; }

/* ---------- Schedule ---------- */
.sched-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.sched-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.sched-tabs button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 0.9rem; margin-bottom: -1px;
  border: 0; border-bottom: 2.5px solid transparent; background: none;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.sched-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { min-width: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--down); color: #fff; font-size: 0.72rem; line-height: 1.35rem; text-align: center; }
.sched-h { margin: 1.25rem 0 0.6rem; font: 600 1.25rem/1.2 var(--font-display); }
.sched-h:first-child { margin-top: 0; }
.muted-line { color: var(--muted); margin: 0 0 0.5rem; }
.sched-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem;
  margin-bottom: 1rem; padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
}
.sched-summary span { display: block; font-size: 0.8rem; color: var(--muted); }
.sched-summary strong { font: 600 1.2rem/1.2 var(--font-display); }
.sum-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.shift-chip {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.2rem 0.55rem; border-radius: 4px;
  font-weight: 600; font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.shift-chip small { font-weight: 500; font-size: 0.72rem; opacity: 0.85; }
.pos-route { background: var(--accent-soft); color: var(--accent); }
.pos-sweeper { background: var(--up-soft); color: var(--up); }
.pos-dispatch, .pos-office { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.pos-shop { background: var(--warn-soft); color: var(--warn); }
.shift-chip.draft { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, currentColor 10%, transparent) 6px 12px); outline: 1px dashed color-mix(in srgb, currentColor 45%, transparent); }
.shift-chip.offered { outline: 2px dotted var(--warn); }
.off-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--down-soft); color: var(--down); font-weight: 700; font-size: 0.85rem; }
.off-chip small { font-weight: 500; font-size: 0.72rem; }
.off-chip.pending { background: transparent; box-shadow: inset 0 0 0 1px var(--down); opacity: 0.8; }

.my-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.my-day { display: flex; gap: 1rem; align-items: flex-start; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.my-day.is-today { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.my-day.is-past { opacity: 0.6; }
.my-date { flex: none; width: 2.75rem; text-align: center; }
.my-date strong { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; }
.my-date span { font: 600 1.5rem/1.1 var(--font-display); }
.my-items { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; padding-top: 0.2rem; }
.my-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.my-shift .shift-chip { font-size: 0.95rem; padding: 0.3rem 0.65rem; }
.my-state { font-size: 0.88rem; color: var(--muted); }
.sched .text-btn.add-link { color: var(--accent); font-weight: 600; }
.my-free { color: var(--muted); }
.open-list, .req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.open-card { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.open-date { flex: none; width: 2.75rem; text-align: center; }
.open-date strong { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; }
.open-date span { font: 600 1.5rem/1.1 var(--font-display); }
.open-info { flex: 1; min-width: 0; }
.open-info strong { display: block; }
.open-info span { display: block; font-size: 0.9rem; color: var(--muted); }
.open-info .draft-note { color: var(--warn); }
.open-act { display: flex; align-items: center; gap: 0.5rem; }
.open-card .compose-btn, .req-actions .compose-btn { margin: 0; padding: 0.5rem 1rem; }
.req-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.25rem; }
.req-head .sched-h { margin: 0; }
.req-head + .req-list, .req-head + .muted-line { margin-top: 0.6rem; }
.req-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.req-main { flex: 1 1 18rem; min-width: 0; }
.req-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.req-kind { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.req-kind.kind-pto, .req-kind.kind-timeoff { background: var(--down-soft); color: var(--down); }
.req-kind.kind-trade { background: var(--warn-soft); color: var(--warn); }
.req-status { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.req-status.st-approved { color: var(--up); } .req-status.st-denied { color: var(--down); } .req-status.st-pending, .req-status.st-open { color: var(--warn); }
.req-detail { margin: 0.3rem 0 0; }
.req-note { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--muted); }
.req-actions { display: flex; gap: 0.5rem; }

.publish-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.9rem; padding: 0.75rem 1rem; border: 1px solid var(--up); border-radius: 3px; background: var(--up-soft); }
.publish-bar.draft { border-color: var(--warn); background: var(--warn-soft); }
.publish-bar .compose-btn { margin: 0; }
.team-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.75rem; }
.team-search { flex: 1 1 14rem; max-width: 20rem; padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--ink); font: 400 1rem var(--font); }
.team-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tgrid-wrap { overflow: auto; max-height: calc(100vh - 14rem); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.tgrid { width: 100%; min-width: 62rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tgrid th, .tgrid td { padding: 0.4rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; }
.tgrid thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); text-align: center; font-weight: 600; }
.tgrid thead th span { display: block; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
.tgrid thead th strong { font: 600 1.15rem/1.1 var(--font-display); }
.tgrid .is-today { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.tgrid thead th.is-today { background: var(--accent-soft); color: var(--accent); }
.tgrid .tg-person { position: sticky; left: 0; z-index: 1; width: 13rem; background: var(--surface); text-align: left; font-weight: 400; }
.tgrid thead .tg-person { z-index: 3; background: var(--bg); vertical-align: middle; }
.tgrid .tg-hours { width: 4.25rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.tgrid .tg-hours.over { color: var(--down); }
.tgrid td { min-height: 3rem; }
.tgrid td > * + * { margin-top: 0.25rem; }
.tg-who .avatar { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #fff; font-size: 0.7rem; font-weight: 600; line-height: 1; }
.tg-who { align-items: center; }
.tg-who strong { display: block; font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-who span { display: block; font-size: 0.75rem; color: var(--muted); }
.tg-who > div { min-width: 0; }
.tg-open th strong { display: block; }
.tg-open th span { display: block; font-size: 0.75rem; color: var(--muted); }
.tg-open td, .tg-open th { background: color-mix(in srgb, var(--warn-soft) 45%, var(--surface)); }
.chip-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.chip-btn .shift-chip, .tgrid .shift-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; white-space: normal; line-height: 1.25; }
.chip-btn:hover .shift-chip { filter: brightness(0.95); box-shadow: inset 0 0 0 1.5px currentColor; }
.ask-dot { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.2rem; border-radius: 999px; background: var(--down); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.tg-add { display: block; width: 100%; padding: 0.1rem 0; border: 1px dashed transparent; border-radius: 4px; background: none; color: transparent; font-size: 1rem; line-height: 1.2; }
.tgrid td:hover .tg-add, .tg-add:focus-visible { border-color: var(--line); color: var(--muted); }
.tg-add:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
@media (hover: none) { .tg-add { border-color: var(--border); color: var(--muted); } }
.tg-foot th, .tg-foot td { position: sticky; bottom: 0; background: var(--bg); font-size: 0.85rem; vertical-align: middle; }
.tg-foot td strong { font: 600 1.05rem var(--font-display); }
.tg-foot td span { color: var(--muted); font-size: 0.75rem; }
.to-balance { flex: none; font-size: 0.85rem; color: var(--muted); }
.to-shifts { padding: 0.6rem 1rem 0; }
.c-select { flex: 1; min-width: 0; padding: 0.85rem 0; border: 0; background: transparent; color: var(--ink); font: 500 1rem/1.4 var(--font); outline: none; }
#sh-pos .chip[aria-checked="true"], .kind-seg[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#sh-pos .chip[aria-checked="true"] strong::before { content: "✓ "; }

/* ---------- Chat ---------- */
.chat {
  --side-bg: #232F3E; --side-ink: #C5D0DB; --side-strong: #FFFFFF; --side-hover: #2D3B4C;
  display: grid; grid-template-columns: 1fr; height: 70vh; min-height: 380px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.chat.in-room .chat-side { display: none; }
.chat:not(.in-room) .chat-main { display: none; }
.chat-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--side-bg); color: var(--side-ink); padding-bottom: 1rem; }
.chat-side-head { padding: 1rem 1rem 0.5rem; }
.chat-side-head strong { display: block; color: var(--side-strong); font: 600 1.15rem/1.2 var(--font-display); }
.chat-side-head span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.room-list { list-style: none; margin: 0.25rem 0 0; padding: 0 0.5rem; }
.room {
  display: flex; align-items: center; gap: 0.35rem;
  width: 100%; padding: 0.55rem 0.6rem;
  border: 0; border-radius: 4px; background: none; color: var(--side-ink);
  font-size: 1rem; text-align: left;
}
.room:hover { background: var(--side-hover); }
.room .hash { opacity: 0.6; }
.room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room.unread { color: var(--side-strong); font-weight: 700; }
.room[aria-current="page"] { background: #146EB4; color: #fff; }
.room-count { min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: #3A5068; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
.room-count.mention { background: #D13212; }
.room-count.alert { background: var(--down); color: #fff; font-size: 0.75rem; }
.room-add-btn { margin: 0.5rem 1rem 0; padding: 0.4rem 0; border: 0; background: none; color: var(--side-ink); text-align: left; font-size: 0.95rem; }
.room-add-btn:hover { color: var(--side-strong); }
.room-add { display: flex; gap: 0.4rem; margin: 0.5rem 0.75rem 0; }
.room-add input { flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid #3A5068; border-radius: 3px; background: #1B2633; color: #fff; font: 400 0.95rem var(--font); }
.room-add-go { padding: 0.4rem 0.7rem; border: 0; border-radius: 3px; background: #146EB4; color: #fff; font-weight: 600; }
.chat-side :focus-visible { outline-color: #00A8E1; }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.chat-title { flex: 1; min-width: 0; }
.chat-head h3 { margin: 0; font: 700 1.1rem/1.2 var(--font); }
.chat-head p { margin: 0; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .secondary { flex: none; padding: 0.45rem 0.85rem; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 0 0.75rem; }
.chat-log:focus-visible { outline-offset: -2px; }
.chat-empty { display: flex; flex-direction: column; gap: 0.25rem; padding: 2rem 1.25rem; color: var(--muted); }
.chat-empty strong { color: var(--ink); font-size: 1.1rem; }
.day-sep, .new-sep { display: flex; align-items: center; gap: 0.75rem; margin: 0.9rem 1rem 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.day-sep::before, .day-sep::after, .new-sep::before, .new-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.new-sep { color: #D13212; margin-top: 0.4rem; }
.new-sep::before, .new-sep::after { background: #D13212; opacity: 0.6; }
.msg { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0 0.7rem; padding: 0.4rem 1rem; }
.msg.compact { padding-top: 0.1rem; padding-bottom: 0.1rem; }
.msg:hover, .msg:focus-within { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.msg.mentioned { background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface)); box-shadow: inset 3px 0 0 var(--warn); }
.chat-avatar { width: 2.25rem; height: 2.25rem; border-radius: 6px; font-size: 0.8rem; }
.msg-side-time { align-self: center; font-size: 0.7rem; color: var(--muted); text-align: right; visibility: hidden; font-variant-numeric: tabular-nums; }
.msg:hover .msg-side-time { visibility: visible; }
.msg-main { min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.msg-head strong { font-weight: 700; }
.msg-role { font-size: 0.75rem; color: var(--muted); }
.msg-time { font-size: 0.78rem; color: var(--muted); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.mention { padding: 0 0.2rem; border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mention.me { background: var(--warn-soft); color: var(--warn); }
.reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.react { padding: 0.05rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 0.85rem; color: var(--ink); }
.react.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.msg-tools {
  position: absolute; right: 1rem; top: -0.8rem; z-index: 2;
  display: none; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(15, 23, 32, 0.12);
}
.msg:hover .msg-tools, .msg:focus-within .msg-tools { display: flex; }
.msg-tools button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; font-size: 1rem; color: var(--muted); }
.msg-tools button:hover { background: var(--accent-soft); }
.msg-tools .msg-del:hover { color: var(--error); background: var(--down-soft); }
/* Phones: tap a message to show its reaction bar */
@media (hover: none) { .msg .msg-tools { display: none; } .msg.tools-open .msg-tools { display: flex; } }

.to-card { max-width: 30rem; margin-top: 0.25rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 4px; background: var(--bg); }
.to-card.approved { border-left-color: var(--up); }
.to-card.denied { border-left-color: var(--down); }
.to-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; }
.to-status { font-size: 0.8rem; font-weight: 700; }
.to-status.pending { color: var(--warn); } .to-status.approved { color: var(--up); } .to-status.denied { color: var(--down); }
.to-dates { margin: 0.35rem 0 0; font-weight: 600; }
.to-note, .to-by { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.92rem; }
.to-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.to-actions .compose-btn { margin: 0; padding: 0.45rem 1rem; }
.to-actions .secondary { padding: 0.45rem 1rem; }

.chat-compose {
  position: relative; display: flex; align-items: flex-end; gap: 0.5rem;
  margin: 0 1rem 0.4rem; padding: 0.4rem 0.4rem 0.4rem 0.75rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.chat-compose:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#chat-input {
  flex: 1; min-width: 0; max-height: 10rem; padding: 0.4rem 0;
  border: 0; outline: none; resize: none; background: transparent; color: var(--ink);
  font: 400 1rem/1.45 var(--font);
}
#chat-input::placeholder { color: var(--muted); }
.chat-send { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; border-radius: 6px; }
.chat-hint { margin: 0 1rem 0.6rem; font-size: 0.75rem; color: var(--muted); }
@media (hover: none) { .chat-hint { display: none; } .chat-compose { margin-bottom: 0.75rem; } }
.mention-pop {
  position: absolute; left: 0; bottom: calc(100% + 0.35rem); z-index: 5;
  width: min(21rem, 100%); padding: 0.3rem 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(15, 23, 32, 0.18);
}
.mention-pop button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.4rem 0.75rem; border: 0; background: none; text-align: left; }
.mention-pop button span span { display: block; }
.mention-pop .chat-avatar { width: 1.8rem; height: 1.8rem; font-size: 0.7rem; }
.mention-pop [aria-selected="true"], .mention-pop button:hover { background: var(--accent-soft); }

@media (min-width: 768px) {
  .chat { grid-template-columns: 15rem minmax(0, 1fr); }
  .chat.in-room .chat-side, .chat .chat-side { display: flex; }
  .chat:not(.in-room) .chat-main, .chat .chat-main { display: flex; }
  .chat-back { display: none; }
}

.chat-pop {
  position: absolute; left: 0.5rem; right: 0.5rem; top: 2.9rem; z-index: 6;
  padding: 0.6rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 32, 0.2);
}
.chat-pop input { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--ink); font: 400 1rem var(--font); }
.chat-pop input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dm-list { margin-top: 0.4rem; max-height: 18rem; overflow-y: auto; }
.dm-list button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.4rem 0.5rem; border: 0; border-radius: 4px; background: none; text-align: left; }
.dm-list button:hover, .dm-list button:focus-visible { background: var(--accent-soft); }
.dm-list .chat-avatar { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; color: #fff; font-size: 0.7rem; }
.dm-list span span { display: block; }
.dm-empty { margin: 0.5rem; color: var(--muted); }
.room-add label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; }
.room-add-row { display: flex; gap: 0.4rem; }
.room-add-row .compose-btn { margin: 0; padding: 0.45rem 0.9rem; }
.chat-avatar { display: grid; place-items: center; color: #fff; }

/* ---------- Shops ---------- */
.scope-box { margin: -0.5rem 0.75rem 1.25rem; }
.scope-box label { display: block; margin-bottom: 0.25rem; font-size: 0.8rem; color: var(--muted); }
#scope-select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--ink);
  font: 600 0.95rem var(--font);
}
.scope-fixed { margin: 0; font-weight: 600; }
.scope-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
  margin: -1rem 0 1.25rem;
  color: var(--muted); font-size: 0.92rem;
}
.scope-note strong { color: var(--ink); }
.scope-pin { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.scope-note .text-btn { padding: 0.25rem 0; color: var(--accent); font-weight: 600; }
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.shop-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px;
}
.shop-card.is-current { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.shop-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; }
.shop-top h3 { margin: 0; font: 600 1.5rem/1.1 var(--font-display); }
.shop-code { font-weight: 600; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.04em; }
.shop-tag { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 600; }
.shop-contact { margin: 0; color: var(--muted); font-size: 0.92rem; }
.shop-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.shop-stats div { padding: 0.5rem 0.6rem; background: var(--bg); border-radius: 3px; }
.shop-stats dt { font-size: 0.75rem; color: var(--muted); }
.shop-stats dd { margin: 0; font: 600 1.35rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.shop-stats .is-down dd { color: var(--down); }
.shop-manager { margin: 0; font-size: 0.92rem; }
.shop-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.shop-actions .text-btn { color: var(--accent); font-weight: 600; margin-left: auto; }
.se-hint { padding: 0.5rem 1rem 0; }
#v-shop, #v-gps {
  flex: 1; min-width: 0; padding: 0.85rem 0;
  border: 0; background: transparent; color: var(--ink); outline: none;
  font: 500 1rem/1.4 var(--font);
}
#ue-clear .chip[aria-pressed="true"] { border-color: var(--up); background: var(--up-soft); color: var(--up); }
#ue-clear .chip[aria-pressed="true"] strong::before { content: "✓ "; }
#ue-shops .chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#ue-shops .chip[aria-checked="true"] strong::before { content: "✓ "; }
#ue-shops .chip:disabled { opacity: 0.45; cursor: not-allowed; }
.col-shop { width: 8.5rem; }
.shop-insp { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.92rem; font-weight: 500; }
.shop-insp input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.insp-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); }
.insp-dot.on { background: var(--up); }
.se-check { padding: 0.25rem 1rem 0; margin-top: 0.75rem; }
.btable td.col-check, .btable th.col-check { text-align: center; }
.insp { width: 1.15rem; height: 1.15rem; accent-color: var(--up); vertical-align: middle; }
.rfield.rcheck { display: flex; align-items: center; gap: 0.5rem; }
.rfield.rcheck label { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }

/* ---------- shift log ---------- */
.bible-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.day-nav { display: flex; align-items: center; gap: 0.25rem; }
.day-label { min-width: 0; padding: 0 0.25rem; }
.day-label strong { display: block; font: 600 1.25rem/1.2 var(--font-display); }
.day-label span { font-size: 0.85rem; color: var(--muted); }
.today-btn { margin-left: 0.25rem; color: var(--accent); font-weight: 600; }
.bible-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#cycle-select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--ink);
  font: 500 0.95rem var(--font);
}
.dropzone {
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 0.75rem; padding: 0.85rem 1rem;
  border: 1.5px dashed var(--line); border-radius: 3px;
  background: var(--surface); color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone svg { flex: none; color: var(--accent); }
.dz-text strong { display: block; color: var(--ink); font-weight: 600; }
.dz-sub { font-size: 0.9rem; }
.dropzone:hover, .dropzone.dragging { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.dragging { border-style: solid; }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.dropzone.busy { opacity: 0.6; pointer-events: none; }
.dz-touch { display: none !important; }
@media (hover: none) {
  .dz-mouse { display: none !important; }
  .dz-touch { display: block !important; }
}

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; }
.tile {
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px;
}
.tile:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tile label { display: block; font-size: 0.8rem; color: var(--muted); }
.tile input {
  width: 100%; padding: 0;
  border: 0; background: transparent; outline: none;
  font: 600 1.6rem/1.2 var(--font-display); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tile input::placeholder { color: var(--line); }

.bpanel { margin-bottom: 1.75rem; }
.bpanel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.75rem; }
.bpanel-head h3 { margin: 0 auto 0 0; font: 600 1.4rem/1.2 var(--font-display); }
.route-summary { order: 9; flex-basis: 100%; margin-top: -0.25rem; color: var(--muted); font-size: 0.9rem; }
.route-summary:empty { display: none; }
#route-search {
  flex: 1 1 100%; order: 5;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--ink);
  font: 400 1rem/1.4 var(--font);
}
#route-search::placeholder { color: var(--muted); }
#route-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.van-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem; padding: 0.85rem 1rem;
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--accent-soft);
}
.van-banner.needs { border-color: var(--warn); background: var(--warn-soft); }
.vb-text { flex: 1 1 22rem; font-size: 0.95rem; }
.vb-text strong { font-weight: 600; }
.vb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vb-actions .compose-btn { margin: 0; }
.btable select.cell { width: 100%; padding: 0.5rem 0.4rem; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.van-sel.no-van, .btable select.van-sel.no-van { color: var(--warn); font-weight: 600; }
.van-sel.van-problem, .btable select.van-sel.van-problem { color: var(--down); font-weight: 600; }
.van-sel.van-uncleared, .btable select.van-sel.van-uncleared { color: var(--warn); font-weight: 600; text-decoration: underline wavy; text-underline-offset: 3px; }
.board-empty {
  margin: 0; padding: 2rem 1rem;
  border: 1.5px dashed var(--border); border-radius: 3px;
  text-align: center; color: var(--muted);
}

/* Route status */
.sdot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.sdot.station { background: var(--line); }
.sdot.out { background: var(--accent); }
.sdot.back { background: var(--up); }
.rstatus { padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.rstatus.station { background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.rstatus.out { background: var(--accent-soft); color: var(--accent); }
.rstatus.back { background: var(--up-soft); color: var(--up); }
.rstatus.pulled { background: var(--warn-soft); color: var(--warn); }
.sdot.pulled { background: var(--warn); }
.time-wrap { position: relative; display: flex; align-items: center; }
.time-wrap input { flex: 1; min-width: 0; }
.now-btn {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--surface); color: var(--accent);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.now-btn:hover { background: var(--accent); color: var(--btn-ink); }
.time-wrap input:focus + .now-btn { display: none; }
.pull-btn, .pull-chip {
  padding: 0.25rem 0.65rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.pull-btn { border: 1px dashed var(--line); background: transparent; color: var(--muted); font-weight: 500; }
.btable tbody tr:not(:hover):not(:focus-within) .pull-btn { border-color: var(--border); color: color-mix(in srgb, var(--muted) 75%, transparent); }
.pull-btn:hover { border-color: var(--warn); color: var(--warn); }
.pull-chip { border: 0; background: var(--warn-soft); color: var(--warn); }
.btable td.col-pulled, .btable th.col-pulled { padding: 0 0.45rem; text-align: center; }
.btable th.col-pulled { padding: 0.45rem 0.6rem; }
.rcard .now-btn { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.rcard .pull-btn, .rcard .pull-chip { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.rpull { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.25rem; }
.rpull-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
#pull-note { flex: 0 0 auto; min-height: 6.5rem; }
.pull-who { margin: 0; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; }
.pull-options { padding: 0 1rem; }
.pull-options .check-row { margin-top: 0.6rem; }
#pull-reasons .chip[aria-checked="true"] { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
#pull-reasons .chip[aria-checked="true"] strong::before { content: "✓ "; }
.late { color: var(--down) !important; font-weight: 600; }

/* Phones and tablets: one card per route */
.rcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rcard { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.rcard.is-rescued { box-shadow: inset 3px 0 0 var(--down); }
.rcard-head {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.2rem 0.6rem;
  width: 100%; padding: 0.8rem 1rem;
  background: none; border: 0; text-align: left;
}
.rname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcx { font-weight: 600; color: var(--accent); }
.rsum { grid-column: 1 / -1; color: var(--muted); font-size: 0.88rem; }
.rcard-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border); }
.rmeta { margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--muted); }
.rfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.9rem; margin-top: 0.75rem; }
.rfield-da { grid-column: 1 / -1; }
.rfield label { display: block; margin-bottom: 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.rinput, .binput {
  width: 100%; min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--ink);
  font: 500 1rem/1.4 var(--font);
}
.rinput:focus, .binput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rinput.invalid, .cell.invalid-time { box-shadow: inset 0 0 0 1.5px var(--error); }
.time { font-variant-numeric: tabular-nums; }
.check-row { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.9rem; font-weight: 500; }
.check-row input, .resq { width: 1.15rem; height: 1.15rem; accent-color: var(--down); }
.rcard-foot { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.text-btn.danger-inline { color: var(--error); }

/* Desktop: the board */
.board-wrap {
  overflow: auto; max-height: calc(100vh - 10rem);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px;
}
.btable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.btable th {
  position: sticky; z-index: 2;
  padding: 0.45rem 0.6rem;
  background: var(--bg); color: var(--muted);
  font-size: 0.78rem; font-weight: 600; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.btable .grp-row th { top: 0; height: 1.9rem; text-align: center; color: var(--ink); border-right: 1px solid var(--border); }
.btable .grp-row th:last-child { border-right: 0; }
.btable .col-row th { top: 1.9rem; border-bottom: 1.5px solid var(--line); }
.btable td {
  padding: 0;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  vertical-align: middle;
}
.btable td:last-child { border-right: 0; }
.btable tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.btable tr.is-rescued td.col-da { box-shadow: inset 3px 0 0 var(--down); }
.btable .col-da { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.btable th.col-da { z-index: 3; background: var(--bg); }
.btable .grp-row th.col-da { z-index: 3; }
.da-cell { display: flex; align-items: center; gap: 0.1rem; padding-left: 0.65rem; }
.btable .cell { padding: 0.55rem 0.6rem; }
.btable td.col-resq, .btable th.col-resq { text-align: center; }
.btable .cell { text-overflow: ellipsis; }
.cell.cx { font-weight: 600; text-transform: uppercase; }

.bgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.bcard { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.bcard h4 { margin: 0 0 0.6rem; font: 600 1.15rem/1.2 var(--font-display); }
.bcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bhint { margin: -0.45rem 0 0.6rem; font-size: 0.85rem; color: var(--muted); }
.add-link { color: var(--accent); font-weight: 600; }
.bcard textarea {
  width: 100%; min-height: 7rem; resize: vertical;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--ink);
  font: 400 1rem/1.5 var(--font);
}
.bcard textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tag-list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-list:empty { display: none; }
.tag {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.2rem 0.2rem 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--ink);
  font-size: 0.92rem; font-weight: 500;
}
.tag button {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
}
.tag button:hover { color: var(--error); background: var(--down-soft); }
.tag-add { display: flex; gap: 0.5rem; }
.tag-add .secondary { padding: 0.45rem 0.9rem; }
.rescue-list { list-style: none; margin: 0; padding: 0; }
.rescue-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border);
}
.rescue-row:first-child { padding-top: 0; }
.rescue-row .wide-field { grid-column: 1 / -1; }
.rescue-row label { display: block; margin-bottom: 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.rescue-row .row-del { align-self: end; margin: 0; }

/* ---------- Users ---------- */
.avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  color: #fff; font-size: 0.85rem; font-weight: 600;
}
.who { display: flex; align-items: center; gap: 0.75rem; }
.who strong { font-weight: 600; }
.who-email { display: block; font-size: 0.85rem; color: var(--muted); }
.folders button { white-space: nowrap; }
#user-filter { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
#user-search {
  flex: 1 1 100%; order: -1;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--ink);
  font: 400 1rem/1.4 var(--font);
}
#user-search::placeholder { color: var(--muted); }
#user-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#user-filter::-webkit-scrollbar { display: none; }
.utable td, .utable th { white-space: nowrap; }
.content { min-width: 0; }
.you { margin-left: 0.4rem; color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.state { font-weight: 500; font-size: 0.9rem; }
.state.on { color: var(--up); }
.state.off { color: var(--down); }
tr.is-off .who, .ucard.is-off .who { opacity: 0.55; }
.utable-wrap { display: none; }
.user-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ucard {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
}
.ucard .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; color: var(--muted); }
.ucard .text-btn, .utable .text-btn { color: var(--accent); font-weight: 600; }
.utable { width: 100%; border-collapse: collapse; }
.utable th {
  padding: 0.65rem 1rem; text-align: left;
  background: var(--bg); color: var(--muted); font-weight: 600; font-size: 0.9rem;
  border-bottom: 1.5px solid var(--line);
}
.utable td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.utable tbody tr:last-child td { border-bottom: 0; }
.utable td:last-child { text-align: right; }
.ue-username, .ue-pass { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.ue-username .row-label, .ue-pass .row-label { display: block; width: auto; margin-bottom: 0.2rem; font-size: 0.9rem; }
#ue-username { display: block; font-weight: 600; overflow-wrap: anywhere; }
#ue-username.empty { font-weight: 400; color: var(--muted); }
.ue-hint { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--muted); }
.ue-hint:empty { display: none; }
.pass-line { display: flex; align-items: center; gap: 0.5rem; }
.pass-line input {
  flex: 1; min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--ink);
  font: 600 1rem/1.4 var(--font); letter-spacing: 0.02em;
}
.pass-line input:focus { outline: none; border-color: var(--accent); }
.pass-line .text-btn { color: var(--accent); font-weight: 600; }
.temp-pass { font-weight: 600; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.reset-pw { align-self: flex-start; margin: 0.5rem 1rem 1rem; color: var(--accent); font-weight: 600; }
#ue-roles .chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#ue-roles .chip[aria-checked="true"] strong::before { content: "✓ "; }
#ue-roles .chip:disabled { opacity: 0.45; cursor: not-allowed; }
#ue-username:read-only { color: var(--muted); }
.card-list .card-video { grid-template-columns: 5.5rem 1fr; align-items: center; gap: 0 0.85rem; }
.card-video .thumb { width: 5.5rem; border-radius: 3px; }
.card-video .thumb .ticon { width: 36%; }
.card-video .dur, .card-video .done-check, .card-video .watched { display: none; }
.card-video .vtitle { font-size: 0.95rem; }

/* Add-video dialog */
.file-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.file-preview {
  flex: none; display: grid; place-items: center;
  width: 6.5rem; aspect-ratio: 16 / 9; border-radius: 3px;
  background: var(--bg) center / cover no-repeat;
  border: 1px dashed var(--border);
  color: var(--muted);
}
.file-preview.has-image { border-style: solid; }
.file-btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--accent); border-radius: 3px;
  color: var(--accent); font-weight: 600; cursor: pointer;
}
.file-btn:hover { background: var(--accent); color: var(--btn-ink); }
.file-row:focus-within .file-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
.file-name { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }

.track { margin-bottom: 2.25rem; }
.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.track-head h3 { margin: 0; font: 600 1.4rem/1.2 var(--font-display); }
.track-head span { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.vgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem 1rem;
}
.video {
  display: flex; flex-direction: column; gap: 0.6rem;
  width: 100%; padding: 0;
  background: none; border: 0; border-radius: 4px;
  text-align: left;
}
.video:hover .thumb { filter: brightness(1.12); }

.thumb {
  position: relative;
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  color: #fff;
  transition: filter 0.15s;
}
.thumb .ticon { width: 28%; height: auto; opacity: 0.9; }
.dur {
  position: absolute; right: 0.4rem; bottom: 0.45rem;
  padding: 0.05rem 0.35rem; border-radius: 2px;
  background: rgba(0, 0, 0, 0.78); color: #fff;
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.done-check {
  position: absolute; top: 0.45rem; right: 0.45rem;
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: #1B9E5A; color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.watched { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #00A8E1; }
.vtitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; line-height: 1.3;
}
.vsub { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.875rem; }
.vsub.is-done { color: var(--up); font-weight: 500; }
.train-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* Player */
.back-link { margin-bottom: 0.75rem; padding-left: 0; }
.player-layout { display: grid; gap: 2rem; }
.player {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  color: #fff;
}
.player-art svg { width: 22vmin; max-width: 12rem; height: auto; opacity: 0.35; }
.play-btn {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, 0.55); color: #fff;
  transition: background 0.15s;
}
.play-btn:hover { background: rgba(0, 0, 0, 0.75); }
.player.playing .play-btn { opacity: 0.35; }
.player.playing:hover .play-btn { opacity: 1; }
.player-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.5rem 0.9rem 0.6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}
.player-progress { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.player-progress span { display: block; height: 100%; width: 0; background: #00A8E1; }
.player-time { font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-note { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }
.pl-title { margin: 0.75rem 0 0; font: 600 1.6rem/1.2 var(--font-display); }
.pl-desc { max-width: 65ch; margin: 0.75rem 0 1.25rem; }

.upnext h4 { margin: 0 0 0.75rem; font: 600 1.15rem/1.2 var(--font-display); }
.upnext ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.upnext .video { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.upnext .thumb { flex: none; width: 9rem; }
.upnext .thumb .ticon { width: 34%; }
.upnext .vtitle { font-size: 0.95rem; }
.upnext-empty { color: var(--muted); }

/* ---------- Dashboard cards ---------- */
.dash { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
}
.card-head h3 { margin: 0; font: 600 1.35rem/1.2 var(--font-display); }
.card-count { font-size: 0.9rem; color: var(--muted); }
.card-count.has-unread { color: var(--accent); font-weight: 600; }
.card-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.card-list button {
  display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  text-align: left;
}
.card-list button:hover { background: var(--accent-soft); }
.card-list .card-empty { padding: 1.5rem 1.25rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.card-action { align-self: flex-start; margin: 1rem 1.25rem 1.25rem; }

/* ---------- Webmail ---------- */
.mail-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.folders { display: flex; gap: 0.25rem; }
.folders button {
  background: none; border: 0; border-radius: 3px;
  padding: 0.5rem 0.85rem;
  font-weight: 500; color: var(--muted);
}
.folders button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.compose-btn { width: auto; margin: 0; padding: 0.6rem 1.1rem; }

.mail-panes {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.msg-list { list-style: none; margin: 0; padding: 0; }
.msg-list button {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  text-align: left;
}
.msg-list li:last-child button { border-bottom: 0; }
.msg-list button:hover { background: var(--accent-soft); }
.msg-list button[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.msg-who, .msg-subject, .msg-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-who { font-weight: 500; }
.msg-date { color: var(--muted); font-size: 0.85rem; }
.msg-subject, .msg-snippet { grid-column: 1 / -1; }
.msg-snippet { color: var(--muted); font-size: 0.9rem; }
.unread .msg-who, .unread .msg-subject { font-weight: 600; }
.unread .msg-who::before {
  content: ""; display: inline-block;
  width: 0.5rem; height: 0.5rem; margin-right: 0.5rem;
  border-radius: 50%; background: var(--accent); vertical-align: middle;
}
.mail-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

.reader { display: none; padding: 1.25rem; }
.mail.reading .msg-list { display: none; }
.mail.reading .reader { display: block; }
.reader-empty { margin: 0; padding: 3rem 1rem; text-align: center; color: var(--muted); }
.reader h3 { font: 600 1.5rem/1.2 var(--font-display); margin: 0.5rem 0 1rem; }
.reader-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
  font-size: 0.9rem; color: var(--muted);
}
.reader-meta strong { color: var(--ink); font-size: 1rem; }
.reader-body { white-space: pre-wrap; padding: 1.25rem 0 1.5rem; max-width: 65ch; }

.text-btn { background: none; border: 0; padding: 0.5rem 0.25rem; color: var(--muted); font-weight: 500; }
.text-btn:hover { color: var(--accent); }
.secondary {
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--accent); border-radius: 3px;
  background: none; color: var(--accent); font-weight: 600;
}
.secondary:hover { background: var(--accent); color: var(--btn-ink); }

/* Compose: full screen on phones */
.composer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--surface);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.composer form { height: 100%; display: flex; flex-direction: column; }
.composer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.composer-head h3 { margin: 0; font: 600 1.2rem/1 var(--font-display); }
.send-btn { width: auto; margin: 0; padding: 0.55rem 1.2rem; }
.composer-body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.c-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
}
.c-row label { flex: none; width: 3.75rem; color: var(--muted); }
.c-row input {
  flex: 1; min-width: 0;
  padding: 0.85rem 0;
  border: 0; background: transparent; outline: none;
  font: 500 1rem/1.4 var(--font); color: var(--ink);
}
.c-row:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.suggest { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.suggest p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg);
  text-align: left; line-height: 1.3;
}
.chip strong { font-weight: 600; }
.chip span { font-size: 0.78rem; color: var(--muted); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#vf-roles .chip[aria-pressed="true"] strong::before { content: "✓ "; }
.composer textarea {
  flex: 1; min-height: 12rem;
  padding: 1rem;
  border: 0; resize: none; outline: none;
  background: transparent; color: var(--ink);
  font: 400 1rem/1.5 var(--font);
}
.composer textarea::placeholder { color: var(--muted); }
.composer .message { margin: 0; padding: 0 1rem 0.75rem; }

.toast {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0; padding: 0.7rem 1.25rem;
  border-radius: 3px;
  background: var(--ink); color: var(--bg);
  font-weight: 500;
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .signin h1 { margin-left: -6rem; margin-right: -6rem; }   /* room to stay on one line */
  .veil {   /* clear the routes behind the centered panel, let them show at the edges */
    background: radial-gradient(ellipse 34rem 26rem at center, var(--bg) 35%, color-mix(in srgb, var(--bg) 70%, transparent) 65%, transparent 100%);
  }
  .topbar { padding-left: 1.25rem; padding-right: 1.25rem; }
  .content { padding: 1.5rem 1.75rem 2rem; }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fleet-search { flex: 1 1 18rem; }
  .user-cards { display: none; }
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #route-search { flex: 0 1 15rem; order: 0; }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcard.wide { grid-column: 1 / -1; }
  .rescue-row { grid-template-columns: 2fr 1fr 0.8fr 3fr auto; align-items: end; }
  .rescue-row .wide-field { grid-column: auto; }
  .rfields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #user-filter { flex: 0 1 auto; }
  #user-search { flex: 0 1 16rem; order: 0; }
  .utable-wrap {
    display: block; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  }
  .content.content-wide { max-width: none; }
  .fleet-cards { display: none; }
  .sheet-wrap {
    display: block;
    overflow-x: auto;
    min-height: 16rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 3px;
  }
  .composer {
    inset: auto 1.5rem 1.5rem auto;
    width: 34rem; height: min(36rem, calc(100vh - 3rem));
    padding: 0;
    border: 1px solid var(--border); border-radius: 3px;
    box-shadow: 0 18px 50px rgba(15, 23, 32, 0.28);
  }
}

@media (min-width: 1024px) {
  .bgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bgrid .bcard { grid-column: span 2; }
  .bgrid .bcard.wide { grid-column: 1 / -1; }
  .bgrid .bcard.half { grid-column: span 3; }
}

/* ---------- Desktop: persistent sidebar ---------- */
@media (min-width: 1024px) {
  .app {
    display: grid;
    grid-template-columns: 16rem 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  .topbar { grid-column: 1 / -1; }
  .menu-btn, .scrim { display: none; }
  .sidenav {
    position: sticky; top: 3.8rem; z-index: 1;
    height: calc(100vh - 3.8rem);
    width: auto;
    transform: none; visibility: visible;
    padding-top: 1.5rem;
  }
  .mail-panes { display: grid; grid-template-columns: minmax(17rem, 22rem) 1fr; min-height: 30rem; }
  .msg-list { border-right: 1px solid var(--border); }
  .mail.reading .msg-list { display: block; }
  .player-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .reader { display: block; padding: 1.5rem 2rem; }
  .back-btn { display: none; }
}


/* ---------- Pop-up editors added for steps 3–12 ---------- */
.dlg-body { padding: 0.9rem 1rem 1rem; gap: 0.15rem; }
.composer .dlg-body textarea.binput { flex: none; min-height: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--border); background: var(--bg); resize: vertical; }
.composer .dlg-body .message { padding: 0.5rem 0 0; }
.dlg-spacer { width: 4rem; }
.dlg-field { margin-bottom: 0.8rem; }
.dlg-field > label, .dlg-field > .field-label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.dlg-field .seg-group { flex-wrap: wrap; padding: 0; }
.dlg-sub { margin: 0 0 0.5rem; font: 600 1.05rem/1.3 var(--font-display); }
.dlg-facts { margin-bottom: 0.75rem; padding: 0.55rem 0.75rem; border-radius: 3px; background: var(--bg); font-size: 0.92rem; }
.dlg-facts p { margin: 0; }
@media (min-width: 768px) {
  .composer.dlg-wide { width: min(46rem, calc(100vw - 3rem)); height: min(48rem, calc(100vh - 3rem)); }
}

.dyn-line.bad strong { color: var(--down); }

/* ---------- Time clock ---------- */
.time-wrap { display: grid; gap: 1rem; max-width: 64rem; }
.clock-card { display: grid; gap: 1rem; align-items: center; border-left: 4px solid var(--line); }
.clock-card.st-in { border-left-color: var(--up); }
.clock-card.st-break { border-left-color: var(--warn); }
.clock-face { display: flex; flex-direction: column; }
.clock-now { font: 600 2.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.clock-date { color: var(--muted); }
.clock-state h3 { margin: 0 0 0.2rem; }
.clock-card.st-in .clock-state h3 { color: var(--up); }
.clock-card.st-break .clock-state h3 { color: var(--warn); }
.clock-sub { margin: 0; font-weight: 500; }
.clock-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.clock-btns .compose-btn, .clock-btns .secondary { margin: 0; min-width: 9rem; padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 1.05rem; }
@media (min-width: 768px) { .clock-card { grid-template-columns: auto 1fr auto; gap: 2rem; } .clock-face { padding-right: 2rem; border-right: 1px solid var(--border); } }
.week-nav { margin: 0.25rem 0 0; }
.time-tiles { margin-bottom: 0; }
@media (min-width: 768px) { .time-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.time-table tr.is-today th, .time-table tr.is-today td { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.time-table tfoot th, .time-table tfoot td { font-weight: 700; background: var(--bg); }
.time-table td.muted { white-space: normal; }
.time-export { margin-left: auto; }
.ts-grid td { text-align: center; vertical-align: middle; }
.ts-cell { width: 100%; min-height: 2.2rem; padding: 0.3rem 0.2rem; border: 1px solid transparent; border-radius: 4px; background: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-cell:hover { border-color: var(--accent); color: var(--accent); }
.ts-cell.empty { color: transparent; }
.ts-cell.empty:hover, .ts-cell.empty:focus-visible { color: var(--muted); border-style: dashed; }
.ts-cell.bad { background: var(--down-soft); color: var(--down); }
.ts-cell.warn { color: var(--warn); font-weight: 500; }
.ts-cell.live { background: var(--up-soft); color: var(--up); }
.ts-edited { margin-left: 0.2rem; font-size: 0.75rem; color: var(--muted); }
.punch-rows { display: grid; gap: 0.5rem; margin-bottom: 0.25rem; }
.punch-row { display: grid; grid-template-columns: 1fr 1fr 6rem auto; gap: 0.5rem; align-items: end; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.punch-row .dlg-field { margin: 0; }
.punch-row > .text-btn { padding-bottom: 0.6rem; }
.punch-row.removed { display: flex; justify-content: space-between; align-items: center; color: var(--muted); text-decoration: line-through; }
.punch-row.removed .text-btn { text-decoration: none; }
@media (max-width: 420px) { .punch-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Shift log close-out ---------- */
.closed-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: 3px; background: var(--up-soft); color: var(--up); }
.closed-banner span { color: var(--ink); }
.closed-banner strong { color: var(--up); }
.bible.is-closed > .tiles, .bible.is-closed > .bpanel, .bible.is-closed > .bgrid { opacity: 0.78; }
.closeout { margin-top: 1.25rem; max-width: 46rem; }
.closeout .ob-list { margin-bottom: 1rem; }
.closeout textarea.binput { resize: vertical; }
.close-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.close-acts .compose-btn { margin: 0; }
.close-acts .ue-hint { margin: 0; }
.close-hist { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.88rem; }

/* ---------- Coaching ---------- */
.coach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 52rem; }
.coach-card { padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 3px; }
.coach-card.k-verbal { border-left-color: var(--warn); }
.coach-card.k-written, .coach-card.k-final { border-left-color: var(--down); }
.coach-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.4rem; }
.coach-top .tg-who { margin-right: auto; }
.coach-kind { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.coach-kind.k-verbal { background: var(--warn-soft); color: var(--warn); }
.coach-kind.k-written, .coach-kind.k-final { background: var(--down-soft); color: var(--down); }
.coach-kind.k-final { box-shadow: inset 0 0 0 1.5px var(--down); }
.coach-date { color: var(--muted); font-size: 0.9rem; }
.coach-card h4 { margin: 0 0 0.3rem; font: 600 1.15rem/1.25 var(--font-display); }
.coach-text { margin: 0 0 0.45rem; max-width: 70ch; }
.coach-ack { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; justify-items: start; }
.coach-ack p { margin: 0; }
.coach-ack textarea { width: 100%; resize: vertical; }
.ack-ok { color: var(--up); font-weight: 600; }
.ack-bad { color: var(--down); font-weight: 600; }
.ack-wait { color: var(--warn); font-weight: 600; }
.ack-comment { margin: 0; padding: 0.4rem 0.75rem; border-left: 3px solid var(--border); color: var(--muted); font-style: italic; }
.coach-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.9rem; padding: 0.6rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.coach-focus > span { color: var(--muted); }
.coach-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.6rem; }
.coach-links .secondary { padding: 0.35rem 0.85rem; }
.coach-links .add-link, .rep-table .add-link { color: var(--accent); font-weight: 600; }

/* ---------- Fleet: due column, details ---------- */
.col-due { min-width: 13rem; } .col-odo { min-width: 6.5rem; }
.sheet td.col-due { padding: 0 0.4rem; }
.odo { font-variant-numeric: tabular-nums; }
.due-btn { display: flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0.35rem 0.25rem; border: 0; background: none; text-align: left; }
.due-btn:hover .due-none { color: var(--accent); text-decoration: underline; }
.due-chip { padding: 0.12rem 0.5rem; border-radius: 4px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.due-chip.expired { background: var(--down-soft); color: var(--down); }
.due-chip.soon { background: var(--warn-soft); color: var(--warn); }
.due-more { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.due-none { color: var(--muted); font-size: 0.9rem; }
.vcard-acts { display: flex; gap: 1rem; }
.vcard-acts .text-btn { color: var(--accent); font-weight: 600; }
.vd { display: grid; gap: 1.1rem; }
.vd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--muted); }
.vd-due { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.vd-due li { padding: 0.45rem 0.7rem; border-radius: 3px; font-size: 0.93rem; }
.vd-due li.expired { background: var(--down-soft); } .vd-due li.expired strong { color: var(--down); }
.vd-due li.soon { background: var(--warn-soft); } .vd-due li.soon strong { color: var(--warn); }
.vd-sec h4 { margin: 0 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); font: 600 1.1rem/1.2 var(--font-display); }
.vd-sec > p { margin: 0 0 0.4rem; }
.vd-list { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.5rem; }
.vd-list > li { padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 3px; }
.vd-list .ue-hint { margin-top: 0.15rem; }
.vd-line { display: flex; justify-content: space-between; gap: 1rem; }
.vd-rep.unsafe { border-color: var(--down); }
.vd-rep p { margin: 0.25rem 0; }
.vd-rep > .secondary { margin-top: 0.4rem; padding: 0.35rem 0.9rem; }
.fix-form { margin-top: 0.6rem; padding: 0.7rem; border-radius: 3px; background: var(--bg); }
.fix-form .dlg-field { margin-bottom: 0.6rem; }
.fix-form .check-row { margin: 0 0 0.6rem; }
.fix-form .message:empty { display: none; }
.vd-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.svc-state { font-size: 0.84rem; font-weight: 700; }
.svc-state.expired { color: var(--down); } .svc-state.soon { color: var(--warn); } .svc-state.ok { color: var(--up); } .svc-state.unknown { color: var(--muted); }
.vd-svc.expired { border-color: var(--down); }
.vd-svc .add-link { color: var(--accent); font-weight: 600; padding-left: 0; }
.vd-paper { display: grid; grid-template-columns: 9.5rem minmax(0, 11rem) 1fr; gap: 0.5rem 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.vd-paper:last-of-type { border-bottom: 0; }
.vd-plabel { font-weight: 600; font-size: 0.92rem; }
.vd-paper .muted { color: var(--muted); }
@media (max-width: 560px) { .vd-paper { grid-template-columns: 1fr 1fr; } .vd-paper > span:last-child { grid-column: 1 / -1; } }
.odo-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.odo-form .binput { flex: 0 1 11rem; }
.odo-form .secondary { padding: 0.5rem 1rem; }
.odo-form .message { flex-basis: 100%; margin: 0; }
.odo-form .message:empty { display: none; }

/* ---------- Email: outside addresses ---------- */
.ext-note { margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--warn-soft); color: var(--warn); font-size: 0.88rem; font-weight: 600; }
.chip.chip-ext { border-style: dashed; }

/* ---------- Schedule check, incidents, sign-ins ---------- */
.sched-check { flex-direction: column; align-items: stretch; }
.sc-group h4 { margin: 0.6rem 0 0.3rem; font-size: 0.85rem; }
.sc-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sc-group li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; padding: 0.3rem 0.5rem; border-radius: 3px; background: var(--surface); }
.inc-urgent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.8rem 1rem; border-radius: 3px; background: var(--down-soft); border-left: 4px solid var(--down); }
.inc-urgent strong { color: var(--down); }
.inc-urgent .compose-btn { margin: 0 0 0 auto; }
.inc-truck { margin-bottom: 1rem; }
.inc-911 { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 3px; background: var(--down-soft); color: var(--down); font-weight: 600; }
.inc-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.inc-thumbs img { max-height: 6rem; }
.inc-steps { font-size: 0.85rem; color: var(--muted); font-family: var(--font); }
.signin-hist { margin-top: 0.6rem; }
.set-card .signin-hist summary, .set-card .nt-recent summary { color: var(--accent); }

/* ---------- Two-step sign-in ---------- */
.signin-help { display: block; margin: 0.75rem auto 0; }
.mfa-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem; background: rgba(15, 25, 35, 0.45); }
.mfa-card { width: min(28rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.25rem 1.4rem; background: var(--surface); color: var(--ink); border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.mfa-card h3 { margin: 0 0 0.5rem; font: 600 1.3rem/1.2 var(--font-display); }
.mfa-card p { margin: 0 0 0.6rem; }
.mfa-setup { width: min(34rem, 100%); }
.mfa-code { font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.mfa-app { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.mfa-qr { padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; line-height: 0; }
.mfa-secret { display: inline-block; padding: 0.35rem 0.6rem; border-radius: 3px; background: var(--bg); font: 600 1rem/1.3 ui-monospace, monospace; letter-spacing: 0.08em; }
.mfa-codes { columns: 2; margin: 0 0 0.75rem; padding-left: 1.6rem; }
.mfa-codes code { font: 600 0.95rem ui-monospace, monospace; }
.mfa-card .check-row { margin: 0.4rem 0 0.75rem; }
#set-mfa .acct-list .add-link { color: var(--accent); font-weight: 600; }

/* ---------- Notifications ---------- */
.nt-group { display: grid; gap: 0.15rem; }
.nt-cols { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.nt-row { align-items: flex-start !important; margin: 0; padding: 0.3rem 0; }
.nt-row input { margin-top: 0.2rem; }
.nt-row em { font-style: normal; font-size: 0.82rem; color: var(--muted); }
.nt-row.locked { color: var(--ink); }
.nt-devices { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.nt-devices li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; font-size: 0.92rem; }
.nt-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.nt-quiet .check-row { margin: 0; }
.nt-time { width: 8rem; }
.nt-recent ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.nt-recent li { display: flex; flex-direction: column; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.nt-recent li span { font-size: 0.9rem; }
.nt-recent li em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
#set-notify .close-acts { margin: 0.4rem 0; }
.nt-recent summary { color: var(--accent); }
.push-banner { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 0.75rem); left: 50%; z-index: 60; transform: translateX(-50%); width: min(26rem, calc(100vw - 1.5rem));
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); border: 1px solid var(--border); }
.push-banner strong { font-size: 0.92rem; }
.push-banner span { font-size: 0.88rem; color: var(--muted); }
.push-banner.show { animation: push-in 0.25s ease-out; }
@keyframes push-in { from { transform: translate(-50%, -1.5rem); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .push-banner.show { animation: none; } }

/* ---------- I-9 ---------- */
.i9-status { display: grid; gap: 0.25rem; margin: 0.3rem 0 0.5rem; }
.i9-status .check-row { margin: 0; }
.i9-attest { align-items: flex-start !important; margin: 0.5rem 0 0.75rem; font-size: 0.9rem; }
.i9-attest input { margin-top: 0.2rem; }
.i9-s1 { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 3px; background: var(--bg); font-size: 0.92rem; }
.i9-doc { margin: 0.6rem 0; padding: 0.5rem 0.75rem 0.1rem; border: 1px solid var(--border); border-radius: 3px; }
.i9-doc legend { padding: 0 0.3rem; font-weight: 700; font-size: 0.85rem; color: var(--muted); }
.i9-records { margin-top: 1rem; max-width: 52rem; }
.i9-row2 { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; }
@media (max-width: 600px) { .i9-row2 { grid-template-columns: 1fr; } }

/* ---------- Change log ---------- */
.log-list { list-style: none; margin: 0; padding: 0; max-width: 64rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.log-day { padding: 0.45rem 0.9rem; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 0.8rem; font-weight: 700; color: var(--muted); position: sticky; top: 0; }
.log-row { display: grid; grid-template-columns: 4.75rem 6.5rem 1fr auto; gap: 0.75rem; align-items: start; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); }
.log-row time { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-area { justify-self: start; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--bg); color: var(--muted); }
.log-area.a-payroll { background: var(--up-soft); color: var(--up); }
.log-area.a-time { background: var(--accent-soft); color: var(--accent); }
.log-area.a-people, .log-area.a-onboarding { background: color-mix(in srgb, #9A3B5C 14%, transparent); color: #9A3B5C; }
.log-area.a-coaching, .log-area.a-shiftlog { background: var(--warn-soft); color: var(--warn); }
.log-area.a-fleet, .log-area.a-geofences { background: color-mix(in srgb, #1F6F5C 14%, transparent); color: #1F6F5C; }
.log-text { display: flex; flex-direction: column; min-width: 0; }
.log-text span { font-size: 0.86rem; color: var(--muted); overflow-wrap: anywhere; }
.log-who { font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 640px) { .log-row { grid-template-columns: 4rem 1fr; } .log-area { grid-column: 2; grid-row: 1; } .log-text { grid-column: 1 / -1; } .log-who { grid-column: 1 / -1; color: var(--muted); } }

/* ---------- Payroll, more ---------- */
.fund-line { margin: 0; padding: 0.6rem 0.8rem; border-radius: 3px; background: var(--bg); font-size: 0.92rem; }
.bad-nudge { background: var(--down-soft) !important; color: var(--down) !important; }
.pay-table tr.bounced td, .pay-table tr.bounced th { background: color-mix(in srgb, var(--down-soft) 55%, transparent); }
.pay-table th .appr-chip { margin-left: 0.4rem; }
.pay-acts-cell { white-space: nowrap; }
.pay-acts-cell .add-link { margin-right: 0.6rem; }
.vd-h { margin: 1rem 0 0.4rem; font: 600 1.05rem/1.2 var(--font-display); }
.ded-list { display: grid; gap: 0.4rem; }
.ded-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; }
.ded-row > select.binput { flex: 1 1 12rem; width: auto; }
.ded-row .plan-num .binput { width: 6.5rem; }
.ded-row .plan-num input[type=date] { width: 9.5rem; }
.ded-row > span:empty { display: none; }
.ded-note { flex-basis: 100%; margin: 0; }
.oc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.2rem 1rem; max-height: 14rem; overflow: auto; padding: 0.5rem; border: 1px solid var(--border); border-radius: 3px; }
.oc-people .check-row { margin: 0; font-size: 0.9rem; }
.stub-co { display: flex; flex-direction: column; margin-bottom: 0.6rem; }
.stub-co span { font-size: 0.85rem; color: var(--muted); }
.stub-table thead th { font-size: 0.8rem; color: var(--muted); font-weight: 600; text-align: right; }
.stub-table thead th:first-child { text-align: left; }
.stub-table .ytd { color: var(--muted); text-align: right; }
#set-pay .acct-list dd .add-link { color: var(--accent); font-weight: 600; padding: 0 0.25rem; }
@media print {
  body.printing-stub * { visibility: hidden !important; }
  body.printing-stub #stub-print, body.printing-stub #stub-print * { visibility: visible !important; }
  body.printing-stub #stub-print { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ---------- Connections: no-shows, van alerts ---------- */
.ncns-suggest:empty { display: none; }
.ncns-suggest { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.sugg-h { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--warn); }
.sugg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sugg-list li { padding: 0.4rem 0.5rem; border-radius: 3px; background: var(--warn-soft); }
.sugg-list li > div:first-child { display: flex; flex-direction: column; }
.sugg-list li span { font-size: 0.8rem; color: var(--muted); }
.sugg-btns { display: flex; flex-wrap: wrap; gap: 0 0.6rem; }
.sugg-btns .text-btn { padding: 0.25rem 0; font-size: 0.85rem; font-weight: 600; }
.sugg-btns .add-link { color: var(--accent); }
.geo-vans .geo-head { margin-bottom: 0.5rem; }
.van-alerts { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.4rem; }
.van-alerts li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 3px; background: var(--down-soft); }
.van-alerts li.k-signal { background: var(--warn-soft); }
.van-alerts li > div { display: flex; flex-direction: column; }
.van-alerts strong { color: var(--down); } .van-alerts .k-signal strong { color: var(--warn); }
.van-alerts .add-link { color: var(--accent); font-weight: 600; }
.van-where { list-style: none; margin: 0.5rem 0 0; padding: 0; columns: 2 18rem; }
.van-where li { break-inside: avoid; padding: 0.2rem 0; font-size: 0.9rem; }
.van-where strong { display: inline-block; min-width: 4.5rem; }
.van-where span { color: var(--muted); }
.vd-loc { margin: 0; }
.close-odo { margin: 0 0 1rem; }
.close-odo summary { cursor: pointer; font-weight: 600; }
.odo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 0.75rem; margin: 0.6rem 0 0.4rem; }
.odo-cell { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.odo-cell strong { color: var(--ink); }
.odo-cell em { font-style: normal; font-size: 0.75rem; color: var(--up); }
.vd-loc.bad { color: var(--down); }

/* ---------- Report knobs ---------- */
.rep-controls { flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; }
.rep-date { width: 10.5rem; }
.rep-search { width: 12rem; }
.rep-check { display: inline-flex; flex-direction: row !important; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; padding-bottom: 0.45rem; }
.rep-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.rep-counts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0; padding: 0.3rem 0.7rem 0; border: 1px solid var(--border); border-radius: 3px; }
.rep-counts legend { padding: 0 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.rep-btns { display: inline-flex; gap: 0.5rem; margin-left: auto; }
.tile-delta { display: block; margin-top: 0.15rem; font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.tile-delta.up { color: var(--up); } .tile-delta.down { color: var(--down); }
.cost-bar { display: inline-block; width: 8rem; height: 0.55rem; border-radius: 999px; background: var(--bg); overflow: hidden; vertical-align: middle; }
.cost-bar span { display: block; height: 100%; background: var(--accent); }
.topic-bars { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; max-width: 40rem; }
.topic-bars li { display: grid; grid-template-columns: 13rem 1fr 2rem; gap: 0.75rem; align-items: center; }
.topic-bars .cost-bar { width: 100%; }
.hire-line .bar { margin: 0.25rem 0; }
@media print { .rep-controls, .rep-btns { display: none !important; } }

/* ---------- Phone fixes for the newer pages ---------- */
.rep-table-wrap, .tgrid-wrap { position: relative; max-width: 100%; }
.time-wrap, .pay-wrap, .geo, .rails { grid-template-columns: minmax(0, 1fr); }
.team-tools .folders, #fleet-filter, .mail-folders { flex-wrap: wrap; }
@media (max-width: 767px) {
  .time-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-tiles .rep-tile strong { font-size: 1.2rem; overflow-wrap: anywhere; }
  .run-row { grid-template-columns: 1fr auto; }
  .run-row .run-st { grid-column: 2; }
  .run-amt { grid-column: 2; grid-row: 1; }
  .geo-set, .plan-pick, .vd-3 { grid-template-columns: 1fr; }
  .geo-center { grid-template-columns: 1fr 1fr; }
  .geo-center .add-link { grid-column: 1 / -1; justify-self: start; }
  .approve-card .close-acts { flex-direction: column; align-items: stretch; }
  .change-list li { grid-template-columns: 1fr; }
  .rep-btns { margin-left: 0; }
  .time-export { margin-left: 0; }
  .mail-folders { flex-wrap: nowrap; }
}

/* ---------- Payroll ---------- */
.pay-wrap { display: grid; gap: 1rem; max-width: 70rem; }
.run-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-width: 52rem; }
.run-row { display: grid; grid-template-columns: 1fr auto 7.5rem; gap: 1rem; align-items: center; width: 100%; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; text-align: left; color: var(--ink); }
.run-row:hover { border-color: var(--accent); }
.run-main { display: flex; flex-direction: column; min-width: 0; }
.run-main span { font-size: 0.86rem; color: var(--muted); }
.run-amt { font: 600 1.15rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.run-st { justify-self: end; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--bg); color: var(--muted); }
.run-st.st-draft { background: var(--warn-soft); color: var(--warn); }
.run-st.st-processing { background: var(--accent-soft); color: var(--accent); }
.run-st.st-paid { background: var(--up-soft); color: var(--up); }
.run-st.big { font-size: 0.95rem; padding: 0.3rem 0.85rem; }
.run-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; }
.run-head h3 { margin: 0 0 0.2rem; font: 600 1.35rem/1.2 var(--font-display); }
.pay-checks { max-width: 52rem; }
.pay-checks li:not(.done) .ob-mark { border-color: var(--warn); background: var(--warn); color: #fff; }
.pay-table td.num, .pay-table tfoot td { font-variant-numeric: tabular-nums; }
.pay-table td.strong { font-weight: 700; }
.pay-table tr.not-appr td { background: color-mix(in srgb, var(--warn-soft) 45%, transparent); }
.pay-table tfoot th, .pay-table tfoot td { font-weight: 700; background: var(--bg); }
.pay-acts { margin-top: 0.25rem; }
.extra-row { display: grid; grid-template-columns: 1fr 7rem 12rem auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
@media (max-width: 600px) { .extra-row { grid-template-columns: 1fr 1fr; } }
.stub-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.stub-table th, .stub-table td { padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
.stub-table td { text-align: right; font-variant-numeric: tabular-nums; }
.stub-table tr.sum th, .stub-table tr.sum td { font-weight: 700; border-top: 1.5px solid var(--line); }
.stub-table tr.big td, .stub-table tr.big th { font-size: 1.15rem; }
.rate-wrap { display: inline-flex; align-items: center; gap: 0.25rem; }
.rate-in { width: 6rem; }
.pay-people select.binput { width: auto; }
.approve-card .check-row { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; }
.approve-card .check-row input { width: 1.1rem; height: 1.1rem; margin: 0; }

/* ---------- Time approvals ---------- */
.approve-card { border-left: 4px solid var(--warn); }
.approve-card.is-approved { border-left-color: var(--up); }
.approve-card.is-approved h3 { color: var(--up); }
.approve-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 0.25rem 0 0.9rem; }
.approve-sum dt { grid-row: 1; font-size: 0.8rem; color: var(--muted); }
.approve-sum dd { grid-row: 2; margin: 0; font: 600 1.35rem/1.1 var(--font-display); }
.approve-issues { margin-bottom: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 3px; background: var(--down-soft); color: var(--down); }
.approve-issues ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.approve-card .check-row { margin: 0 0 0.75rem; }
.approve-card .add-link { color: var(--accent); font-weight: 600; }
.approve-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-radius: 3px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.change-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.change-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.9rem; align-items: center; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 3px; }
.approve-card .change-list li { grid-template-columns: 8rem 1fr; }
.change-list li > div { display: flex; flex-direction: column; min-width: 0; }
.change-list em { font-style: normal; font-size: 0.82rem; color: var(--muted); }
.approve-card .change-list em { grid-column: 2; }
.change-list li.st-done em { color: var(--up); } .change-list li.st-declined em { color: var(--down); }
.change-box { border-left: 4px solid var(--warn); }
.change-box h3 { margin-bottom: 0.2rem; }
@media (max-width: 600px) { .change-list li { grid-template-columns: 1fr; } .approve-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .approve-sum dt, .approve-sum dd { grid-row: auto; } }
.ts-appr-h { min-width: 7.5rem; }
.ts-appr { white-space: nowrap; text-align: left !important; }
.appr-chip { display: inline-block; margin: 0.1rem 0.3rem 0.1rem 0; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.appr-chip.ok { background: var(--up-soft); color: var(--up); }
.appr-chip.warn { background: var(--warn-soft); color: var(--warn); }
.ts-appr .add-link { padding: 0 0.2rem; color: var(--accent); font-weight: 700; font-size: 0.85rem; }
.ts-out { margin-left: 0.15rem; font-size: 0.7rem; }
.req-quote { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--warn); background: var(--warn-soft); }
.bad-line { margin: 0.3rem 0 0; color: var(--down); font-weight: 600; font-size: 0.9rem; }

/* ---------- Rails: training while waiting ---------- */
.rail-train { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.9rem 1rem; background: var(--accent-soft); border-radius: 3px; }
.rail-train h4 { margin: 0 0 0.2rem; font: 600 1.05rem/1.2 var(--font-display); }
.rail-train p { margin: 0; }
.rails-back { display: inline-block; margin-bottom: 0.75rem; color: var(--accent); font-weight: 600; }

/* ---------- Geofences ---------- */
.geo { display: grid; gap: 1rem; }
.geo-set { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
.geo-out summary { cursor: pointer; color: var(--down); font-weight: 600; }
.geo-out ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; }
.geo-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .geo-grid { grid-template-columns: 22rem 1fr; } }
.geo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.geo-head h3 { margin: 0; }
.geo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.geo-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 3px; }
.geo-dot { flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; }
.geo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.geo-text span { font-size: 0.82rem; color: var(--muted); }
.geo-text em { font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.geo-map { min-height: 24rem; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); overflow: hidden; z-index: 0; }
.geo-map.small { min-height: 16rem; margin-bottom: 0.8rem; }
.map-note { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--muted); }
.geo-center { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: center; }
.geo-center .add-link { color: var(--accent); font-weight: 600; white-space: nowrap; }
.geo-rad { display: flex; align-items: center; gap: 0.75rem; }
.geo-range { flex: 1; accent-color: var(--accent); }
.geo-rad output { min-width: 9rem; font-weight: 600; font-variant-numeric: tabular-nums; }


/* ---------- Webmail: folders, list, reader ---------- */
.mail-bar { justify-content: flex-start; flex-wrap: wrap; }
#mail-search { flex: 1 1 14rem; max-width: 26rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--ink); font: 400 1rem var(--font); }
#mail-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mail.read-only .mail-bar { display: none; }
.mail-folders { overflow-x: auto; padding: 0.4rem; border-bottom: 1px solid var(--border); }
.mail-folders button { display: flex; align-items: center; gap: 0.5rem; }
.f-count { min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--accent); color: var(--btn-ink); font-size: 0.75rem; font-weight: 700; line-height: 1.3rem; text-align: center; }
.mail.read-only .mail-folders { display: none; }
.msg-list .is-draft .msg-who { color: var(--warn); }
.star-on { color: var(--warn); }
.trash-bar { display: flex; justify-content: flex-end; padding: 0.25rem 0.75rem; border-bottom: 1px solid var(--border); }
.reader-title { display: flex; align-items: flex-start; gap: 0.5rem; }
.reader-title h3 { flex: 1; }
.mail-star { flex: none; margin-top: 0.4rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 3px; background: none; font-size: 1.4rem; color: var(--muted); }
.mail-star.on { color: var(--warn); }
.mail-star:hover { background: var(--warn-soft); }
.reader-meta > div > div { margin-top: 0.15rem; }
.ext-tag { display: inline-block; margin-left: 0.5rem; padding: 0 0.45rem; border-radius: 3px; background: var(--warn-soft); color: var(--warn); font-size: 0.75rem; font-weight: 700; }
.att-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.att { display: grid; grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; align-items: center; width: 15rem; max-width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; color: var(--ink); text-decoration: none; }
.att:hover { border-color: var(--accent); }
.att img, .att-icon { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; border-radius: 3px; object-fit: cover; }
.att-icon { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 0.65rem; font-weight: 700; }
.att-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { font-size: 0.78rem; color: var(--muted); }
.mail-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.mail-reply { padding: 0.45rem 1rem; }
.mail-act { color: var(--accent); font-weight: 600; }
.mail-composer .c-row label { width: 4.25rem; }
.cc-toggle { flex: none; font-size: 0.88rem; color: var(--accent); }
.c-atts { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 1rem; border-top: 1px solid var(--border); }
.att-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.3rem 0.2rem 0.6rem; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); font-size: 0.88rem; }
.att-x { width: 1.6rem; height: 1.6rem; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.att-x:hover { background: var(--down-soft); color: var(--down); }
.compose-foot { display: flex; align-items: center; gap: 0.25rem 1rem; padding: 0.35rem 1rem 0.6rem; border-top: 1px solid var(--border); }
.attach-btn { cursor: pointer; color: var(--accent); font-weight: 600; }
.compose-foot #c-discard { margin-left: auto; }
@media (min-width: 768px) {
  .composer.mail-composer { width: 40rem; height: min(44rem, calc(100vh - 3rem)); }
}
@media (min-width: 1024px) {
  .mail-panes { grid-template-columns: 11rem minmax(16rem, 21rem) 1fr; }
  .mail.read-only .mail-panes { grid-template-columns: minmax(17rem, 22rem) 1fr; }
  .mail-folders { flex-direction: column; overflow: visible; padding: 0.6rem 0.4rem; border-bottom: 0; border-right: 1px solid var(--border); }
  .mail-folders button { justify-content: space-between; width: 100%; text-align: left; }
}

/* ---------- New hire screens ---------- */
.on-rails .sidenav, .on-rails .menu-btn, .on-rails .scrim, .on-rails .scope-note, .on-rails #page-sub { display: none !important; }
@media (min-width: 1024px) { .on-rails .app { grid-template-columns: 1fr; } }
.rails { display: grid; gap: 1rem; max-width: 42rem; margin: 0 auto; }
.rail-intro h3 { margin: 0 0 0.3rem; font: 600 1.6rem/1.2 var(--font-display); }
.rail-intro .bar { margin-top: 0.75rem; }
.rail-count { margin: 0.4rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.rail-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rail-step { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0 0.85rem; align-items: center; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.rail-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--line); font: 600 1rem/1 var(--font-display); color: var(--muted); }
.rail-head { display: flex; flex-direction: column; min-width: 0; }
.rail-status { font-size: 0.85rem; color: var(--muted); }
.rail-step.later { opacity: 0.6; }
.rail-step.done .rail-num { background: var(--up); border-color: var(--up); color: #fff; }
.rail-step.done .rail-status { color: var(--up); font-weight: 600; }
.rail-step.done.sent .rail-status { color: var(--accent); }
.rail-step.current { border: 1.5px solid var(--accent); box-shadow: 0 6px 18px rgba(20, 110, 180, 0.12); }
.rail-step.current .rail-num { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }
.rail-step.returned { border-color: var(--down); }
.rail-step.returned .rail-num { background: var(--down); border-color: var(--down); }
.rail-body, .rail-redo { grid-column: 2; }
.rail-body > p { margin: 0.6rem 0; }
.rail-back { padding: 0.5rem 0.7rem; border-radius: 3px; background: var(--down-soft); color: var(--down); font-weight: 600; }
.rail-form .message:empty { display: none; }
.rail-form .compose-btn { margin-top: 0.4rem; }
.rail-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0.75rem; }
.rail-upload .tf-thumb { max-height: 7rem; }
.rail-redo { justify-self: start; padding-left: 0; color: var(--accent); font-weight: 600; }
.rail-ours { padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.rail-ours h4 { margin: 0 0 0.5rem; font: 600 1.05rem/1.2 var(--font-display); }
.rail-ours ul { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.rail-ours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.93rem; }
.rail-ours li:last-child { border-bottom: 0; }
.rail-ours li span:last-child { color: var(--muted); }
.rail-ours li.ok span:last-child { color: var(--up); font-weight: 600; }
.rail-done { text-align: center; padding: 2rem 1.5rem; }
.rail-done h3 { font-size: 1.6rem; }
.onb-approve { margin-bottom: 0.75rem; }

/* ---------- Fleet: retired, service plans ---------- */
.plans-btn { padding: 0.55rem 1rem; }
.sheet tr.is-retired td { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--border) 35%, transparent) 8px 16px); }
.vd-retired { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 3px; background: var(--bg); border: 1px dashed var(--line); }
.plan-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-rows { display: grid; gap: 0.4rem; margin-bottom: 0.75rem; }
.plan-row { display: grid; grid-template-columns: minmax(9rem, 1fr) auto auto auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 3px; }
.plan-num { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.plan-num .binput { width: 6.5rem; }
.plan-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.plan-add .binput { flex: 1 1 12rem; width: auto; }
.plan-add .secondary { padding: 0.5rem 1rem; }
@media (max-width: 600px) { .plan-row { grid-template-columns: 1fr 1fr; } .plan-row strong { grid-column: 1 / -1; } }

/* ---------- HR records ---------- */
.coach-admin { display: flex; justify-content: flex-end; margin-top: 0.4rem; }
.coach-admin .add-link { color: var(--accent); font-weight: 600; }
.tix-kind.hr { background: var(--down-soft); color: var(--down); }
.tix-record { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-left: 3px solid var(--down); background: var(--bg); border-radius: 3px; }
.tix-record p { margin: 0.35rem 0 0.6rem; }
.danger-btn { background: var(--down) !important; border-color: var(--down) !important; }

.ts-grid { min-width: 72rem; }
.ts-grid th:not(.tg-person), .ts-grid td { min-width: 3.3rem; }
.ts-grid .wk2 { border-left: 2px solid var(--line); }
.ts-cell { font-size: 0.88rem; padding-left: 0; padding-right: 0; }


/* ---------- Chat: conversation list + messages, same panes as Email ---------- */
.chat { --side-bg: var(--surface); --side-ink: var(--ink); --side-strong: var(--ink); --side-hover: var(--accent-soft); }
.chat-side { position: relative; padding: 0 0 0.75rem; background: var(--surface); color: var(--ink); border-right: 1px solid var(--border); }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.75rem 0.4rem 1rem; }
.chat-side-head strong { font: 600 1.05rem/1.2 var(--font-display); color: var(--ink); white-space: nowrap; }
.chat-new { color: var(--accent); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.chat-new[aria-expanded="true"] { text-decoration: underline; }
.room-new { margin: 0.25rem 0.75rem 0; padding-left: 0.25rem; }
.room-add { top: auto; bottom: 2.6rem; }
.conv-group { margin: 0.75rem 1rem 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.conv-list { list-style: none; margin: 0; padding: 0 0.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.chat-side { overflow-x: hidden; }
.conv-none { margin: 0 1rem; font-size: 0.85rem; color: var(--muted); }
.conv {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.45rem 0.6rem; border: 0; border-radius: 3px; background: none;
  text-align: left; color: var(--ink);
}
.conv:hover { background: var(--bg); }
.conv[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.conv[aria-current="true"] .conv-name { color: var(--accent); }
.conv .chat-avatar, .conv-icon { flex: none; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.72rem; font-weight: 700; }
.conv-icon { display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font: 600 0.95rem/1 var(--font-display); }
.conv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-last { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv.unread .conv-name { font-weight: 700; }
.conv.unread .conv-last { color: var(--ink); }
.conv .room-count { flex: none; background: var(--accent); }
.conv .room-count.mention { background: var(--down); }
.chat-head { min-height: 3.6rem; }
.chat-back { flex: none; width: 2.4rem; height: 2.4rem; margin-left: -0.5rem; }
.chat-head h3 { font: 600 1.15rem/1.2 var(--font-display); }
.chat-head h3:focus { outline: none; }
.chat-compose { margin: 0 1rem 0.35rem; }
.chat-hint { margin: 0 1rem 0.6rem; }
@media (min-width: 768px) {
  .chat { grid-template-columns: 17rem minmax(0, 1fr); }
  .chat-back { display: none; }
}

/* ---------- Onboarding tab ---------- */
.onb-self { display: grid; gap: 1rem; max-width: 48rem; }
.onb-self .onboard { margin: 0; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.onb-intro h3 { margin-bottom: 0.3rem; }
.ob-list li.ob-review { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); border-color: var(--accent); }
.ob-list li.ob-review .ob-mark { border-color: var(--accent); color: var(--accent); }
.ob-list li.ob-returned { background: color-mix(in srgb, var(--down-soft) 60%, var(--surface)); border-color: var(--down); }
.ob-list li.ob-returned .ob-mark { border-color: var(--down); background: var(--down); }
.ob-text .ob-state { font-weight: 600; font-size: 0.8rem; }
.ob-review .ob-state { color: var(--accent); } .ob-returned .ob-state { color: var(--down); } .ob-done .ob-state { color: var(--up); }
.ob-acts { flex-wrap: wrap; justify-content: flex-end; }
.ob-acts .compose-btn { margin: 0; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
@media (max-width: 560px) { .ob-list li { flex-wrap: wrap; } .ob-acts { width: 100%; justify-content: flex-start; padding-left: 2.15rem; } }
.onb-table { min-width: 60rem; }
.onb-table th[scope=row] { min-width: 14rem; }
.onb-since { display: block; padding-left: 1.2rem; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.onb-col { text-align: center !important; }
.onb-cell { text-align: center; font-weight: 700; }
.onb-cell.s-done, .onb-key.s-done { color: var(--up); background: color-mix(in srgb, var(--up-soft) 70%, transparent); }
.onb-cell.s-review, .onb-key.s-review { color: var(--accent); background: var(--accent-soft); }
.onb-cell.s-returned, .onb-key.s-returned { color: var(--down); background: var(--down-soft); }
.onb-detail { padding: 0.25rem 0.5rem 0.75rem; max-width: 52rem; white-space: normal; }
.onb-legend { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.onb-key { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 3px; border: 1px solid var(--border); font-weight: 700; font-size: 0.8rem; vertical-align: middle; }
.card.dyn .bar { margin-bottom: 0.4rem; }

/* Forms nested inside the pop-ups don't take the pop-up's full-height layout */
.composer .dlg-body > * { flex: none; }
.composer .dlg-body form { height: auto; display: block; }
.composer .dlg-body form.odo-form { display: flex; flex-direction: row; }

@media (prefers-reduced-motion: reduce) {
  .field::after, .sidenav, .scrim { transition: none; }
}

/* Bible builder: the dispatch tool fills the page */
.bible-builder { margin-top: 0.5rem; }
.bb-frame { display: block; width: 100%; height: calc(100vh - 10.5rem); min-height: 32rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
@media (max-width: 1023px) { .bb-frame { height: calc(100vh - 8rem); border-radius: 8px; } }