/* Sakura Fleet - office and shared styles. Colours come only from brand/tokens.css.
   Look: a haulage manifest. Navy frame, white page, sections separated by rules, references and amounts in a
   fixed-width face, plates for registrations, a drawn line for routes. Indigo only on things you can press. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sk-font-body); font-size: 15px; line-height: 1.5; color: var(--sk-text);
  background: var(--sk-surface); font-feature-settings: "tnum" 1; }
h1, h2, h3 { color: var(--sk-text); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-family: var(--sk-font-heading); font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; font-weight: 600; }
h3 { font-size: .95rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
a { color: var(--sk-indigo-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sk-indigo-600); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sk-indigo-500); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 26px; height: 26px; }
.muted { color: var(--sk-text-muted); }
.faint { color: var(--sk-text-faint); font-size: .875rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mono, .ref { font-family: var(--sk-font-mono); font-size: .92em; font-weight: 500; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid { display: grid; gap: 1.5rem 2.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Staging ribbon (SPEC 14.1) */
.ribbon { background: var(--sk-warning-bg); color: var(--sk-warning); text-align: center; font-weight: 600;
  font-size: .78rem; padding: .25rem; border-bottom: 1px solid var(--sk-warning); }

/* ---------- Frame: navy menu, white page ---------- */
.office { display: flex; min-height: 100vh; }
.sidebar { width: 236px; flex: none; background: var(--sk-navy-950); color: var(--sk-on-navy); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.sidebar .brand { padding: 1.15rem 1.15rem .9rem; display: block; }
.sidebar .brand img { width: 150px; height: auto; display: block; }
.nav-search { padding: 0 .85rem .6rem; }
.nav-search input { width: 100%; min-height: 36px; border-radius: var(--sk-radius); border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: var(--sk-on-navy); padding: .4rem .65rem; font: inherit; font-size: .88rem; }
.nav-search input::placeholder { color: var(--sk-indigo-300); }
.nav-group { padding: .35rem .6rem; border-top: 1px solid rgba(255,255,255,.07); }
.nav-group:first-of-type { border-top: 0; }
.nav-group-title { color: var(--sk-indigo-300); font-size: .76rem; font-weight: 500; padding: .45rem .55rem .2rem; }
details.nav-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
details.nav-group summary::-webkit-details-marker { display: none; }
details.nav-group summary::after { content: "+"; color: var(--sk-indigo-300); padding-right: .55rem; }
details.nav-group[open] summary::after { content: "\2212"; }
.nav-link { display: flex; align-items: center; gap: .6rem; color: var(--sk-on-navy-muted); text-decoration: none; padding: .42rem .55rem;
  border-radius: var(--sk-radius-sm); font-size: .9rem; min-height: 36px; position: relative; }
.nav-link .ic { color: var(--sk-indigo-300); }
.nav-link:hover { background: rgba(255,255,255,.06); color: var(--sk-on-navy); }
.nav-link.active { background: rgba(255,255,255,.09); color: var(--sk-on-navy); font-weight: 600; }
.nav-link.active::before { content: ""; position: absolute; left: -.6rem; top: .35rem; bottom: .35rem; width: 3px;
  background: var(--sk-indigo-300); border-radius: 0 2px 2px 0; }
.nav-link.active .ic { color: var(--sk-on-navy); }
.sidebar-foot { margin-top: auto; padding: .9rem 1.15rem; font-size: .8rem; color: var(--sk-indigo-300);
  border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot strong { color: var(--sk-on-navy); display: block; font-weight: 600; }
.sidebar-foot form { margin-top: .5rem; }
.sidebar-foot button { background: none; border: 0; color: var(--sk-on-navy-muted); padding: 0; cursor: pointer; font: inherit;
  display: inline-flex; gap: .4rem; align-items: center; min-height: 32px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--sk-surface); }
.topbar { display: none; }
.content { padding: 1.6rem 2.25rem 3.5rem; max-width: 1320px; width: 100%; }
.page-head { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 2px solid var(--sk-navy-900); }
.page-head h1 { margin: 0; }
.page-head p { margin: .3rem 0 0; color: var(--sk-text-muted); max-width: 72ch; }
.crumbs { font-size: .85rem; margin-bottom: .35rem; }
.crumbs a { text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }

/* ---------- Sections (the old "cards"): ruled, flat ---------- */
.card { border-top: 1px solid var(--sk-border-strong); padding: .85rem 0 1.25rem; min-width: 0; }
.card-flush { padding-bottom: 0; }
.card-flush .table-wrap { margin-top: .25rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.card-head .count { font-family: var(--sk-font-mono); color: var(--sk-text-muted); font-size: .85rem; margin-left: .35rem; }
.panel { background: var(--sk-surface-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 1rem 1.1rem; }
.stat { font-family: var(--sk-font-heading); font-size: 1.6rem; font-weight: 700; color: var(--sk-text); letter-spacing: -.01em; }
.stat-label { color: var(--sk-text-muted); font-size: .85rem; }
.figures { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1.25rem; margin: 0; }
.figures dt { color: var(--sk-text-muted); }
.figures dd { margin: 0; text-align: right; font-family: var(--sk-font-mono); font-weight: 500; }
.figures dd.text { font-family: inherit; font-weight: 400; }
.figures .total { border-top: 1px solid var(--sk-border-strong); padding-top: .3rem; font-weight: 700; color: var(--sk-text); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px;
  padding: .45rem .95rem; border-radius: var(--sk-radius-sm); border: 1px solid transparent; font: inherit;
  font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn-primary { background: var(--sk-indigo-700); color: var(--sk-on-primary); }
.btn-primary:hover { background: var(--sk-indigo-600); color: var(--sk-on-primary); }
.btn-secondary { background: var(--sk-surface); color: var(--sk-text); border-color: var(--sk-border-strong); }
.btn-secondary:hover { border-color: var(--sk-navy-900); color: var(--sk-text); }
.btn-danger { background: var(--sk-surface); color: var(--sk-danger); border-color: var(--sk-danger); }
.btn-danger:hover { background: var(--sk-danger-bg); color: var(--sk-danger); }
.btn-ghost { background: none; color: var(--sk-indigo-700); padding-left: .35rem; padding-right: .35rem; }
.btn-ghost:hover { text-decoration: underline; color: var(--sk-indigo-600); }
.btn-sm { min-height: 32px; padding: .25rem .65rem; font-size: .85rem; }
.btn-block { width: 100%; }

/* ---------- Status: the word first, colour as a short bar beside it ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; line-height: 1.35;
  padding: .05rem .45rem .05rem .5rem; border-radius: 2px; white-space: nowrap; color: var(--sk-text);
  background: var(--sk-surface-2); box-shadow: inset 3px 0 0 var(--sk-border-strong); }
.badge-success { box-shadow: inset 3px 0 0 var(--sk-success); background: var(--sk-success-bg); color: var(--sk-success); }
.badge-warning { box-shadow: inset 3px 0 0 var(--sk-warning); background: var(--sk-warning-bg); color: var(--sk-warning); }
.badge-danger { box-shadow: inset 3px 0 0 var(--sk-danger); background: var(--sk-danger-bg); color: var(--sk-danger); }
.badge-info { box-shadow: inset 3px 0 0 var(--sk-indigo-700); background: var(--sk-info-bg); color: var(--sk-info); }
.badge-muted { color: var(--sk-text-muted); }

/* Registration plates and route lines (the two pictures of this business) */
.plate { display: inline-block; font-family: var(--sk-font-mono); font-weight: 500; font-size: .82em; letter-spacing: .06em;
  color: var(--sk-plate-ink); background: var(--sk-plate); border: 1.5px solid var(--sk-plate-ink); border-radius: 3px;
  padding: 0 .35em; line-height: 1.45; white-space: nowrap; vertical-align: baseline; }
.route { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.route .leg { display: inline-block; width: 2.2rem; height: 2px; background: var(--sk-navy-900); position: relative; flex: none; }
.route .leg::before, .route .leg::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; }
.route .leg::before { left: -2px; background: var(--sk-surface); border: 2px solid var(--sk-navy-900); }
.route .leg::after { right: -2px; background: var(--sk-navy-900); }
.route .km { font-family: var(--sk-font-mono); font-size: .8em; color: var(--sk-text-muted); }

/* ---------- Alerts ---------- */
.alert { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .95rem; border-radius: var(--sk-radius-sm);
  margin-bottom: 1rem; border: 0; border-left: 4px solid transparent; text-decoration: none; }
.alert-success { background: var(--sk-success-bg); color: var(--sk-success); border-color: var(--sk-success); }
.alert-warning { background: var(--sk-warning-bg); color: var(--sk-warning); border-color: var(--sk-warning); }
.alert-error, .alert-danger { background: var(--sk-danger-bg); color: var(--sk-danger); border-color: var(--sk-danger); }
.alert-info { background: var(--sk-info-bg); color: var(--sk-info); border-color: var(--sk-info); }
.alert p { margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-weight: 600; font-size: .875rem; }
.field .help { color: var(--sk-text-faint); font-size: .8rem; }
.field .error, .errorlist { color: var(--sk-danger); font-size: .825rem; margin: 0; padding: 0; list-style: none; }
.field-check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field-check label { font-weight: 600; }
.input { width: 100%; min-height: 40px; padding: .45rem .65rem; font: inherit; color: var(--sk-text);
  background: var(--sk-surface); border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius-sm); }
textarea.input { min-height: 84px; }
.input:focus { outline: 2px solid var(--sk-indigo-100); border-color: var(--sk-indigo-700); }
.check { width: 20px; height: 20px; accent-color: var(--sk-indigo-700); margin-top: 1px; flex: none; }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; align-items: center; }
.has-error .input { border-color: var(--sk-danger); }
.searchbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.searchbar .input { max-width: 320px; flex: 1 1 200px; }
.searchbar select.input { max-width: 200px; flex: 0 1 180px; }
.filters.card { border: 0; padding: 0; margin-bottom: 1rem; }

/* ---------- Tables: the main way records are shown ---------- */
.table-wrap { overflow-x: auto; position: relative; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { position: sticky; top: 0; background: var(--sk-surface); text-align: left; font-weight: 500;
  color: var(--sk-text-muted); font-size: .8rem; padding: .5rem .75rem; border-bottom: 1px solid var(--sk-navy-900);
  white-space: nowrap; }
.table td { padding: .6rem .75rem; border-bottom: 1px solid var(--sk-border); vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table td.right, .table th.right { text-align: right; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--sk-surface-2); }
.table a.rowlink { font-weight: 600; text-decoration: none; font-family: var(--sk-font-mono); font-size: .92em; }
.table a.rowlink:hover { text-decoration: underline; }
.table .empty { text-align: center; color: var(--sk-text-muted); padding: 2rem 0; }
.table tfoot td { border-top: 1px solid var(--sk-navy-900); border-bottom: 0; font-weight: 600; }
.pager { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .75rem 0;
  border-top: 1px solid var(--sk-border); font-size: .85rem; color: var(--sk-text-muted); flex-wrap: wrap; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--sk-border); }
.checklist li:last-child { border-bottom: 0; }
.checklist a { text-decoration: none; color: var(--sk-text); display: inline-flex; gap: .5rem; align-items: center; }
.checklist a:hover { text-decoration: underline; }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1.25rem; margin: 0; }
.dl dt { color: var(--sk-text-muted); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--sk-border-strong); margin-bottom: 1rem; }
.tabs a { padding: .5rem .8rem; text-decoration: none; color: var(--sk-text-muted); border-bottom: 2px solid transparent;
  font-weight: 600; font-size: .9rem; margin-bottom: -1px; }
.tabs a:hover { color: var(--sk-text); }
.tabs a.active { color: var(--sk-text); border-color: var(--sk-indigo-700); }
.diff { font-size: .8rem; margin: 0; padding-left: 1rem; }
.diff del { color: var(--sk-danger); }
.diff ins { color: var(--sk-success); text-decoration: none; }

/* ---------- Attention queue (dashboard) ---------- */
.queue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sk-navy-900); }
.queue li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--sk-border); }
.queue .kind { font-size: .8rem; font-weight: 600; color: var(--sk-text-muted); }
.queue .kind.urgent { color: var(--sk-danger); }
.queue .what a { font-weight: 600; text-decoration: none; color: var(--sk-text); }
.queue .what a:hover { text-decoration: underline; }
.queue .what .faint { display: block; }
.queue .act { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.queue .amount { font-family: var(--sk-font-mono); font-weight: 500; white-space: nowrap; }
.queue .clear { padding: 1.25rem 0; color: var(--sk-text-muted); display: block; }
.layout-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
.aside > * + * { margin-top: 1.5rem; }

/* ---------- Sign-in pages: the route network on navy ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-brand { background: var(--sk-navy-950); color: var(--sk-on-navy); display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.5rem 3rem; position: relative; overflow: hidden; }
.auth-brand img { width: min(300px, 70%); height: auto; position: relative; }
.auth-brand p { color: var(--sk-on-navy-muted); margin-top: 1.25rem; max-width: 36ch; position: relative; }
.auth-map { position: absolute; inset: 8% 4% 4% 18%; width: auto; height: auto; opacity: .9; }
.auth-map .road { fill: none; stroke: var(--sk-indigo-300); stroke-width: 1.2; stroke-opacity: .55; }
.auth-map .town { fill: var(--sk-navy-950); stroke: var(--sk-indigo-300); stroke-width: 1.2; }
.auth-map .town.hub { fill: var(--sk-indigo-300); }
.auth-map text { fill: var(--sk-on-navy-muted); font: 500 9px var(--sk-font-mono); opacity: .8; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--sk-surface); }
.auth-form .card { width: 100%; max-width: 380px; border-top: 2px solid var(--sk-navy-900); padding-top: 1.25rem; }
.demo-switcher { margin-top: 1.25rem; border-top: 1px dashed var(--sk-border-strong); padding-top: 1rem; }
.demo-switcher .row form { flex: 1 1 auto; }
.demo-switcher .btn { width: 100%; }

/* ---------- Phone widths: the Admin approves on a phone (SPEC 8) ---------- */
@media (max-width: 900px) {
  .office { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .18s;
    width: 272px; }
  .nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(15,12,51,.5); }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; position: sticky; top: 0;
    z-index: 30; background: var(--sk-navy-950); padding: .45rem .6rem; }
  .topbar img { height: 30px; width: auto; }
  .topbar button, .topbar .topbar-search { background: none; border: 0; color: var(--sk-on-navy); min-width: 44px; min-height: 44px;
    display: grid; place-items: center; cursor: pointer; }
  .content { padding: 1rem 1rem 3rem; }
  .page-head { margin-bottom: 1rem; }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 1.75rem 1.25rem; align-items: center; text-align: center; min-height: 180px; }
  .auth-brand p, .auth-map text { display: none; }
  .auth-map { inset: 0; opacity: .45; }
  .layout-main { grid-template-columns: minmax(0, 1fr); }
  .queue li { grid-template-columns: minmax(0, 1fr) auto; }
  .queue .kind { grid-column: 1 / -1; }
  /* Tables become stacked records */
  .table-stack thead { display: none; }
  .table-stack tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--sk-border); }
  .table-stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0;
    text-align: right; }
  .table-stack td::before { content: attr(data-label); color: var(--sk-text-muted); font-size: .8rem; text-align: left;
    font-weight: 500; }
  .table-stack td:first-child { font-size: 1rem; }
  .table-stack td.empty { display: block; text-align: center; }
  .table-stack td.empty::before { content: none; }
  .table-stack, .table-stack tbody { display: block; width: 100%; }
  .table-stack td.nowrap { white-space: normal; }
  .table-stack td.mono::before { font-family: var(--sk-font-body); }
  .page-head .btn { width: 100%; }
}
@media print {
  .sidebar, .topbar, .ribbon, .no-print { display: none !important; }
  .content { padding: 0; }
}

/* ---------- Office detail ---------- */
.nav-count { margin-left: auto; background: var(--sk-indigo-500); color: var(--sk-on-navy); border-radius: 3px; font-size: .72rem;
  font-weight: 600; padding: 0 .4rem; font-family: var(--sk-font-mono); }
.nav-count-sos { background: var(--sk-sos); }
.topbar-bell { color: var(--sk-on-navy); min-width: 44px; min-height: 44px; display: grid; place-items: center; position: relative; }
.topbar-bell span { position: absolute; top: 4px; right: 2px; font-size: .65rem; background: var(--sk-sos); border-radius: 3px; padding: 0 .3rem; }
.topbar-bell span:empty { display: none; }
.sos-banner { position: fixed; inset: 0 0 auto 0; z-index: 60; background: var(--sk-sos); color: var(--sk-on-navy); padding: 1rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; box-shadow: var(--sk-shadow); }
.sos-banner strong { font-size: 1.15rem; }
.sos-pin { border-left: 6px solid var(--sk-sos); background: var(--sk-danger-bg); }
.inbox-item { display: grid; gap: .45rem; padding: .9rem 0; border-bottom: 1px solid var(--sk-border); }
.inbox-item:focus-within, .inbox-item.current { background: var(--sk-surface-2); box-shadow: -.75rem 0 0 var(--sk-surface-2), .75rem 0 0 var(--sk-surface-2); outline: none; }
.inbox-head { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; align-items: baseline; }
.inbox-amount { font-family: var(--sk-font-mono); font-weight: 500; font-size: 1.05rem; }
.inbox-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.inbox-actions form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inbox-actions .input { width: auto; flex: 1 1 180px; min-height: 34px; }
.atts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.att-img { max-width: 140px; max-height: 140px; border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border); }
.att-audio { max-width: 260px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--sk-border-strong); }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: .75rem; padding: .35rem 0; font-size: .88rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(-.9rem - 5px); top: .72rem; width: 8px; height: 8px;
  border-radius: 50%; background: var(--sk-surface); border: 2px solid var(--sk-navy-900); }
.timeline li > :first-child { font-family: var(--sk-font-mono); font-size: .8rem; color: var(--sk-text-muted); }
.thread { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; padding: .5rem 0; }
.msg { max-width: 75%; padding: .5rem .75rem; border-radius: var(--sk-radius-lg); background: var(--sk-surface-2); border: 1px solid var(--sk-border); }
.msg-me { align-self: flex-end; background: var(--sk-navy-900); color: var(--sk-on-navy); border-color: var(--sk-navy-900); }
.msg-system { align-self: center; background: none; border: 0; color: var(--sk-text-muted); font-size: .82rem; max-width: 95%; text-align: center; }
.msg-who { font-size: .75rem; font-weight: 600; color: var(--sk-tagline); }
.msg-me .msg-who { color: var(--sk-indigo-300); }
.msg-at { font-size: .7rem; opacity: .75; margin-top: .2rem; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
.kpi .stat { font-size: 1.3rem; white-space: nowrap; }
.state-zero { color: var(--sk-danger); font-weight: 600; }
.state-low { color: var(--sk-warning); font-weight: 600; }
.pre { white-space: pre-wrap; background: var(--sk-surface-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm);
  padding: .75rem; font-family: var(--sk-font-mono); font-size: .82rem; margin: 0; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { flex: 1 1 160px; }
.lines-table input.input { min-height: 34px; padding: .3rem .5rem; }
.flags { margin: .25rem 0 0; padding-left: 1rem; color: var(--sk-warning); font-size: .8rem; }
.match { color: var(--sk-success); font-weight: 600; }
.nomatch { color: var(--sk-danger); font-weight: 600; }
details.box { border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); padding: .5rem .75rem; margin-top: .5rem; }
details.box summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.variance-bad { color: var(--sk-danger); font-weight: 600; }
.variance-ok { color: var(--sk-success); }
.dispatch { border-collapse: collapse; width: 100%; font-size: .85rem; table-layout: fixed; }
.dispatch th, .dispatch td { border: 1px solid var(--sk-border); padding: .35rem .4rem; vertical-align: top; }
.dispatch thead th { background: var(--sk-surface); font-weight: 500; color: var(--sk-text-muted); text-align: left; border-bottom: 1px solid var(--sk-navy-900); }
.dispatch thead th.today { color: var(--sk-text); box-shadow: inset 0 -3px 0 var(--sk-indigo-700); }
.dispatch tbody th { text-align: left; width: 11rem; font-weight: 500; background: var(--sk-surface); }
.dispatch .slot { display: block; padding: .2rem .35rem; margin-bottom: .2rem; border-left: 3px solid var(--sk-navy-900);
  background: var(--sk-surface-2); text-decoration: none; color: var(--sk-text); font-size: .8rem; line-height: 1.3; }
.dispatch .slot.slot-draft { border-left-style: dashed; background: transparent; outline: 1px dashed var(--sk-border-strong); outline-offset: -1px; }
.dispatch .slot .slot-status { font-size: .72rem; color: var(--sk-text-muted); }
.dispatch .slot.workshop { border-color: var(--sk-warning); background: var(--sk-warning-bg); }
.dispatch .slot.blocked { border-color: var(--sk-danger); background: var(--sk-danger-bg); }
.dispatch .slot.leave { border-color: var(--sk-border-strong); color: var(--sk-text-muted); }
.dispatch .add { color: var(--sk-text-faint); text-decoration: none; font-size: .78rem; }
.dispatch .add:hover { color: var(--sk-indigo-700); }
@media (max-width: 900px) {
  .sos-banner { position: sticky; top: 0; }
  .timeline li { grid-template-columns: 1fr; gap: .1rem; }
  .msg { max-width: 92%; }
  .dispatch-wrap { overflow-x: auto; }
  .dispatch { min-width: 820px; }
}

/* ---------- Phase 3: tracking and cameras ---------- */
.map-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
@media (max-width: 900px) { .map-layout { grid-template-columns: minmax(0, 1fr); } }
.map { height: 62vh; min-height: 320px; border-radius: var(--sk-radius); background: var(--sk-surface-2); z-index: 0;
  border: 1px solid var(--sk-border); }
.map-pin { background: var(--sk-plate); color: var(--sk-plate-ink); border: 1.5px solid var(--sk-plate-ink); border-radius: 3px;
  font: 500 11px/1 var(--sk-font-mono); letter-spacing: .05em; padding: 3px 5px; white-space: nowrap; box-shadow: 0 1px 0 var(--sk-plate-ink); }
.map-pin.stale { color: var(--sk-text-faint); border-color: var(--sk-text-faint); box-shadow: none; }
.map-pin.fast { background: var(--sk-danger); color: var(--sk-on-navy); border-color: var(--sk-danger); }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: var(--sk-navy-950); }

/* ---------- Public pages for customers (tracking link) ---------- */
.pub-head { background: var(--sk-navy-950); padding: 1rem 1.25rem; border-bottom: 3px solid var(--sk-indigo-700); }
.pub-head img { height: 44px; width: auto; display: block; }
.pub { max-width: 640px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; margin: 0 0 1.25rem; counter-reset: s; }
.steps li { position: relative; padding-top: 1.25rem; font-size: .85rem; color: var(--sk-text-muted); }
.steps li::before { content: ""; position: absolute; top: .3rem; left: 0; right: 0; height: 3px; background: var(--sk-border); }
.steps li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sk-surface); border: 2px solid var(--sk-border-strong); }
.steps li.done { color: var(--sk-text); font-weight: 600; }
.steps li.done::before { background: var(--sk-navy-900); }
.steps li.done::after { background: var(--sk-navy-900); border-color: var(--sk-navy-900); }
details.decline summary { list-style: none; }
details.decline summary::-webkit-details-marker { display: none; }
details.decline[open] summary { border-color: var(--sk-navy-900); }
details.decline form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; width: 100%; }
.table a.rowlink, .rowlink { white-space: nowrap; }
.pre { overflow-wrap: anywhere; }

/* =====================================================================================================================
   1.2.0 - Full-width frame, top bar, panels on a canvas, dashboard
   Research basis: Carbon (fluid columns for dashboards, 8px spacing, productive type), Primer (detail pages ~1280px,
   forms narrower), NN/g (position and length charts, no gauges or pies), WCAG 1.4.1/1.4.11 (never colour alone).
   ===================================================================================================================== */
.office-body, .office .main { background: var(--sk-bg); }
.office .content { max-width: 2400px; padding: 24px 32px 56px; }
.text-danger { color: var(--sk-danger); }
.grow { flex: 1 1 140px; min-width: 0; }

/* ---------- top bar (desktop) ---------- */
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px;
  padding: 0 32px 0 16px; background: var(--sk-surface); border-bottom: 1px solid var(--sk-border); }
.appbar-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; border: 0; background: none;
  color: var(--sk-text-muted); cursor: pointer; position: relative; text-decoration: none; flex: none; }
.appbar-btn:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.appbar-bell span { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--sk-sos); color: #fff; font: 600 .66rem/16px var(--sk-font-mono); text-align: center; }
.appbar-bell span:empty { display: none; }
.appbar-search { flex: 1 1 auto; max-width: 620px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px;
  border: 1px solid var(--sk-border-strong); border-radius: 6px; background: var(--sk-surface-2); color: var(--sk-text-muted); }
.appbar-search:focus-within { border-color: var(--sk-indigo-700); background: var(--sk-surface); box-shadow: 0 0 0 3px var(--sk-indigo-100); }
.appbar-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--sk-text); outline: none; }
.appbar-search input::placeholder { color: var(--sk-text-faint); }
.appbar-search kbd { font: 500 .72rem var(--sk-font-mono); color: var(--sk-text-faint); border: 1px solid var(--sk-border-strong);
  border-radius: 4px; padding: 0 5px; line-height: 1.5; }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ic-sun { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
[data-theme="dark"] .ic-moon { display: none; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px 4px 4px;
  border-radius: 8px; min-height: 40px; color: var(--sk-text-muted); }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover, .usermenu[open] summary { background: var(--sk-surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sk-navy-800);
  color: var(--sk-on-navy); font: 700 .85rem var(--sk-font-heading); flex: none; }
.usermenu .who { display: flex; flex-direction: column; line-height: 1.2; font-size: .78rem; }
.usermenu .who strong { color: var(--sk-text); font-size: .86rem; font-weight: 600; }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; background: var(--sk-surface);
  border: 1px solid var(--sk-border); border-radius: 10px; box-shadow: var(--sk-shadow); padding: 8px; z-index: 50;
  display: flex; flex-direction: column; gap: 2px; }
.usermenu-pop > .faint { padding: 6px 10px; font-size: .78rem; }
.usermenu-pop a, .usermenu-pop button { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px;
  color: var(--sk-text); text-decoration: none; font: inherit; font-size: .9rem; background: none; border: 0; width: 100%;
  cursor: pointer; text-align: left; min-height: 38px; }
.usermenu-pop a:hover, .usermenu-pop button:hover { background: var(--sk-surface-2); }

/* ---------- menu ---------- */
.sidebar { width: 248px; }
.sidebar .brand .brand-mark { display: none; width: 34px; height: auto; }
.phone-only { display: none !important; }
@media (max-width: 900px) { .phone-only { display: inline-flex !important; } }
.sidebar .nav-link { min-height: 38px; }
.sidebar-foot .nav-link { padding: .3rem 0; }
@media (min-width: 901px) {
  .foot-phone { display: none; }
  .rail .sidebar { width: 68px; }
  .rail .sidebar .brand { padding: 18px 0 14px; display: grid; place-items: center; }
  .rail .sidebar .brand .brand-full { display: none; }
  .rail .sidebar .brand .brand-mark { display: block; }
  .rail .nav-group { padding: .35rem .5rem; }
  .rail .nav-link { justify-content: center; padding: .5rem 0; }
  .rail .nav-link .nl, .rail .sidebar .nav-count, .rail .nav-group > .nav-group-title:not(summary) { display: none; }
  .rail details.nav-group summary { font-size: 0; justify-content: center; padding: .4rem 0; }
  .rail details.nav-group summary::after { font-size: 1rem; padding: 0; }
  .rail .sidebar-foot { padding: .9rem 0; text-align: center; font-size: .7rem; }
}

/* ---------- pages and panels ---------- */
.office .page-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; align-items: flex-end; }
.office .page-head h1 { font-size: 1.6rem; }
.office .card, .panel-card { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: 10px;
  padding: 16px 20px 20px; min-width: 0; }
.office .card-flush { padding-bottom: 8px; }
.office :not(.grid, .row, .dash, .dash-stack, .map-layout, .layout-main, .stack, .aside) > .card + .card { margin-top: 20px; }
.office .filters.card, .office .auth-form .card { background: none; border: 0; padding: 0; border-radius: 0; }
.office .card .card { border: 0; padding: 0; background: none; border-top: 1px solid var(--sk-border); border-radius: 0; padding-top: 12px; }
.office form.card, .office .card:has(> .form-grid), .office .card:has(> form > .form-grid) { max-width: 1180px; }
.office .layout-main { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
.office .aside > * + * { margin-top: 20px; }
.office .table th { background: var(--sk-surface); border-bottom-color: var(--sk-border-strong); }
.office .table td { vertical-align: middle; }
.office .queue { border-top: 1px solid var(--sk-border-strong); }
.office .grid { gap: 20px; }

/* ---------- dashboard ---------- */
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sk-text-muted); margin: 0 0 4px; font-weight: 600; }
.head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--sk-border-strong); border-radius: 8px; overflow: hidden; background: var(--sk-surface);
  max-width: 100%; overflow-x: auto; }
.segmented a { padding: 7px 12px; font-size: .84rem; font-weight: 600; color: var(--sk-text-muted); text-decoration: none; white-space: nowrap;
  border-left: 1px solid var(--sk-border); }
.segmented a:first-child { border-left: 0; }
.segmented a:hover { color: var(--sk-text); background: var(--sk-surface-2); }
.segmented a.on { background: var(--sk-navy-900); color: var(--sk-on-navy); }
[data-theme="dark"] .segmented a.on { background: var(--sk-indigo-700); color: var(--sk-on-primary); }

.kpis { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1500px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 12px; background: var(--sk-surface);
  border: 1px solid var(--sk-border); border-radius: 10px; text-decoration: none; color: var(--sk-text); min-width: 0;
  transition: border-color .11s, box-shadow .11s; }
.kpi-tile:hover { border-color: var(--sk-indigo-300); box-shadow: 0 2px 12px rgba(15, 12, 51, .07); color: var(--sk-text); }
.kpi-label { font-size: .82rem; font-weight: 600; color: var(--sk-text-muted); }
.kpi-value { font-family: var(--sk-font-heading); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-foot { font-size: .8rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 1.3em; }
.kpi-extra { font-size: .78rem; }
.delta { display: inline-flex; gap: 3px; align-items: center; font-weight: 600; color: var(--sk-text-muted); }
.delta.good { color: var(--sk-success); }
.delta.bad { color: var(--sk-danger); }
.spark { display: block; width: 100%; height: 30px; margin-top: auto; overflow: visible; }
.spark-line { fill: none; stroke: var(--sk-indigo-500); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-area { fill: var(--sk-indigo-50); }
.kpi-note { margin: 8px 0 0; font-size: .78rem; }

.dash { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 20px; align-items: start; }
.dash > * { min-width: 0; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; } .col-12 { grid-column: 1 / -1; }
.dash-stack { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1279px) { .col-4, .col-5, .col-7, .col-8 { grid-column: 1 / -1; } }
@media (min-width: 1280px) and (max-width: 1599px) { .col-5 { grid-column: span 6; } .col-7 { grid-column: span 6; } }
.panel-card .card-head { margin-bottom: 12px; }
.panel-card .stat { font-size: 1.6rem; }
.stat-sub { margin: 2px 0 0; }

.queue-compact { max-height: 470px; overflow-y: auto; }
.panel-fill { align-self: stretch; display: flex; flex-direction: column; }
.panel-fill .colchart { flex: 1 1 auto; min-height: 250px; height: auto; }
.queue-compact li { grid-template-columns: 7rem minmax(0, 1fr) auto; }
.queue-empty { display: flex !important; gap: 12px; align-items: center; color: var(--sk-text-muted); padding: 20px 0 !important; }
.queue-empty .ic-lg { color: var(--sk-success); }

.colchart { position: relative; height: 250px; margin: 10px 0 0 64px; }
.colchart-grid span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--sk-border); }
.colchart-grid em { position: absolute; left: -64px; top: -.65em; width: 58px; text-align: right; font: 500 .72rem var(--sk-font-mono);
  color: var(--sk-text-faint); }
.colchart-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
  border-bottom: 1px solid var(--sk-border-strong); }
.colchart-col { position: relative; border-radius: 4px 4px 0 0; }
.colchart-col:hover { background: var(--sk-surface-2); }
.colchart-col .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bar { display: block; width: min(16px, 38%); border-radius: 3px 3px 0 0; }
.bar-rev { background: var(--sk-indigo-700); }
.bar-cost { background: var(--sk-indigo-300); }
.colchart-x { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: center; font-size: .74rem; color: var(--sk-text-muted); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--sk-text-muted); margin-top: 34px; }
.legend-inline { margin-top: 0; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sw-rev { background: var(--sk-indigo-700); } .sw-cost { background: var(--sk-indigo-300); }
.chart-data { margin-left: auto; }
.chart-data summary { cursor: pointer; color: var(--sk-indigo-700); font-weight: 600; }
.chart-data[open] { flex-basis: 100%; margin-left: 0; }
.table-tight td, .table-tight th { padding-top: .35rem; padding-bottom: .35rem; }

.map-dash { height: 300px; min-height: 0; margin-bottom: 12px; }
.table-fleet .route-inline { font-size: .85rem; }
.meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--sk-surface-2);
  box-shadow: inset 0 0 0 1px var(--sk-border); vertical-align: middle; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--sk-indigo-500); }
.plate-link { text-decoration: none; }
.diesel-form { align-items: flex-end; margin-top: 10px; }

.cal-wrap { overflow-x: auto; }
.cal { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .78rem; }
.cal thead th { font: 500 .72rem/1.2 var(--sk-font-mono); color: var(--sk-text-faint); text-align: center; padding: 0 0 4px; }
.cal thead th:first-child { text-align: left; }
.cal thead th span { display: block; font-size: .66rem; }
.cal thead th.we { color: var(--sk-text-muted); }
.cal thead th.today { color: var(--sk-indigo-700); font-weight: 700; }
.cal tbody th { text-align: left; padding-right: 10px; white-space: nowrap; font-weight: 500; }
.cal td { height: 26px; min-width: 16px; border-radius: 4px; }
.cal td.right { padding-left: 12px; white-space: nowrap; }
.cal-load { background: var(--sk-indigo-700); }
.cal-workshop { background: var(--sk-warning); }
.cal-idle { background: var(--sk-surface-2); box-shadow: inset 0 0 0 1px var(--sk-border); }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.hbar-label { grid-row: 1; grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hbar-value { grid-row: 1; grid-column: 2; font-size: .9rem; }
.hbar-track { grid-row: 2; grid-column: 1 / -1; height: 8px; background: var(--sk-surface-2); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--sk-border); }
.hbar { display: block; height: 100%; background: var(--sk-indigo-700); border-radius: 4px; }
.hbar-alt { background: var(--sk-tagline); }
.hbar-sub { grid-row: 3; grid-column: 1 / -1; font-size: .78rem; }
.stackbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--sk-surface-2); margin: 12px 0 14px; gap: 2px; }
.stackbar span { display: block; height: 100%; }
.age-0 { background: var(--sk-success); } .age-1 { background: var(--sk-warning); }
.age-2 { background: color-mix(in srgb, var(--sk-danger) 55%, var(--sk-warning)); } .age-3 { background: var(--sk-danger); }
.figures-tight { gap: .3rem 1rem; font-size: .88rem; }
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0 6px; color: var(--sk-text-muted); }
.empty-state p { margin: 0; max-width: 52ch; }
.empty-state .ic-lg { color: var(--sk-indigo-300); }

/* ---------- dark office ---------- */
[data-theme="dark"] .office .table th { background: var(--sk-surface); }
[data-theme="dark"] .btn-secondary:hover { border-color: var(--sk-text-muted); }
[data-theme="dark"] .kpi-tile:hover { box-shadow: none; }
[data-theme="dark"] a { color: var(--sk-indigo-600); }
[data-theme="dark"] .sidebar a, [data-theme="dark"] .btn { color: inherit; }
[data-theme="dark"] .btn-primary { color: var(--sk-on-primary); }
[data-theme="dark"] .avatar { background: var(--sk-indigo-700); color: var(--sk-on-primary); }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .appbar { display: none; }
  .office .content { padding: 16px 16px 48px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-tile { padding: 12px 12px 10px; }
  .kpi-value { font-size: 1.3rem; }
  .head-actions { width: 100%; }
  .head-actions .btn { width: 100%; }
  .colchart { margin-left: 48px; height: 200px; }
  .colchart-grid em { left: -50px; width: 44px; }
  .colchart-x { font-size: .62rem; }
  .queue-compact li { grid-template-columns: minmax(0, 1fr) auto; }
  .office .card, .panel-card { padding: 14px 14px 16px; }
}
@media print {
  .appbar, .segmented { display: none !important; }
  .office-body, .office .main { background: #fff; }
}

.meter-wide { width: 90px; }
.coming li { align-items: flex-start; }
.coming a { flex-direction: column; align-items: flex-start; gap: 0; }
[data-theme="dark"] .route .leg, [data-theme="dark"] .route .leg::after { background: var(--sk-text-muted); }
[data-theme="dark"] .route .leg::before { border-color: var(--sk-text-muted); }
[data-theme="dark"] .bar-cost, [data-theme="dark"] .sw-cost { background: var(--sk-text-faint); }
[data-theme="dark"] .timeline li::before { border-color: var(--sk-text-muted); }

/* ---------- fleet map (1.2.1): where each location comes from ---------- */
.map-dash { height: 360px; }
.map-legend { margin: 0 0 14px; font-size: .78rem; }
.map-pin.src-gps { background: var(--sk-plate); }
.map-pin.src-phone { box-shadow: 0 0 0 3px var(--sk-indigo-300); }
.map-pin.src-report { border-style: dashed; background: var(--sk-warning-bg); }
.map-pin.src-base { color: var(--sk-text-muted); border-color: var(--sk-text-faint); box-shadow: none; background: var(--sk-surface-2); }
.pin-sw { display: inline-block; width: 18px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid var(--sk-plate-ink);
  border-radius: 2px; background: var(--sk-plate); }
.pin-sw.src-phone { box-shadow: 0 0 0 2px var(--sk-indigo-300); }
.pin-sw.src-report { border-style: dashed; background: var(--sk-warning-bg); }
.pin-sw.src-base { border-color: var(--sk-text-faint); background: var(--sk-surface-2); }
.src-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 0 .4rem; border-radius: 2px; white-space: nowrap;
  background: var(--sk-surface-2); color: var(--sk-text-muted); box-shadow: inset 2px 0 0 var(--sk-border-strong); }
.src-tag.src-gps { color: var(--sk-success); background: var(--sk-success-bg); box-shadow: inset 2px 0 0 var(--sk-success); }
.src-tag.src-phone { color: var(--sk-info); background: var(--sk-info-bg); box-shadow: inset 2px 0 0 var(--sk-indigo-500); }
.src-tag.src-report { color: var(--sk-warning); background: var(--sk-warning-bg); box-shadow: inset 2px 0 0 var(--sk-warning); }
.fleet-pop { font: 13px/1.45 var(--sk-font-body); min-width: 190px; }
.fleet-pop strong { font-family: var(--sk-font-mono); display: block; margin-bottom: 2px; }
.fleet-pop .src-line { margin-top: 4px; font-weight: 600; }
.fleet-pop .faint { font-size: .78rem; }

/* ---------- 1.3.0: office new load with the live trip plan ---------- */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 20px; align-items: start; }
.plan-layout .card, .plan-layout form.card { max-width: none; }
.plan-aside { position: sticky; top: 76px; }
.plan-card h3 { margin: 16px 0 6px; }
.plan-sentence { margin: 8px 0 0; font-size: .8rem; }
.gate-list { list-style: none; margin: 0 0 10px; padding: 0; }
.gate-list li { border-bottom: 1px solid var(--sk-border); }
.gate-list li.faint { padding: 8px 0; border: 0; }
.gate-list label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 7px 0; cursor: pointer; }
.gate-list .gate-name { font-weight: 500; }
.gate-list .faint { grid-column: 2; font-size: .75rem; }
.gate-list .gate-fee { grid-row: 1; grid-column: 3; font-size: .85rem; white-space: nowrap; }
@media (max-width: 1100px) { .plan-layout { grid-template-columns: minmax(0, 1fr); } .plan-aside { position: static; } }

/* 1.3.0 load page: trip plan and budget */
.card-span { grid-column: 1 / -1; }
.plan-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: start; }
.plan-split h3 { margin: 0 0 .5rem; font-size: .95rem; }
@media (max-width: 900px) { .plan-split { grid-template-columns: 1fr; } }
/* 1.3.0 toll pages */
.seg-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.seg-row .field-check { display: flex; gap: .5rem; align-items: flex-start; }
.gate-picks { columns: 3 16rem; column-gap: 1.5rem; margin-top: .75rem; }
.gate-picks .toll-country { break-after: avoid; margin: .5rem 0 .25rem; font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--sk-text-muted); }
.check-row { display: flex; gap: .5rem; align-items: center; padding: .2rem 0; break-inside: avoid; }
.calc-form { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1rem; align-items: end; }
.plain-list { margin: .25rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; }

/* ---------- Money 1.3.1 (MONEY brief): locked submit buttons, customer account, task forms ---------- */
.btn:disabled, .btn[data-busy] { opacity: .6; cursor: progress; }
.task-item { flex-wrap: wrap; gap: .5rem; }
.task-food { min-width: 0; flex: 1 1 260px; }
.task-food .row { flex-wrap: wrap; }
.task-food .input { min-width: 0; }
.money-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.money-figures .card, .office .money-figures > .card + .card { margin: 0; }
.ledger-amount-neg { color: var(--sk-success); }
/* ---------- OPS 1.3.1 (fix/ops): warning flags on approvals, dispatch clashes, long notes that wrap ---------- */
.flag-list { list-style: none; margin: .35rem 0 .25rem; padding: 0; display: grid; gap: .2rem; }
.flag-list li { display: flex; gap: .4rem; align-items: flex-start; color: var(--sk-danger); font-weight: 600; font-size: .88rem; }
.alert .flag-list li { color: inherit; font-weight: 500; }
.alert .flag-list { margin-top: .15rem; }
.dispatch td.clash { box-shadow: inset 0 0 0 2px var(--sk-danger); }
.dispatch .slot.clash-note { border-color: var(--sk-danger); background: var(--sk-danger-bg); color: var(--sk-danger); white-space: normal; }
.wrap-text { overflow-wrap: anywhere; }
.route-approve { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem .75rem; width: 100%; margin-bottom: .5rem; }
.route-approve .field { margin: 0; }
.route-approve .input { flex: none; width: 100%; }

/* ---------- 1.4.0: return loads ---------- */
.return-card .card-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.return-where { font-size: .95rem; font-weight: 500; color: var(--sk-text-muted); }
.row-nowrap { flex-wrap: nowrap; }
@media (max-width: 720px) { .row-nowrap { flex-wrap: wrap; } }

/* ---------- 1.4.0: morning brief ---------- */
.brief-days { margin: -.25rem 0 1rem; gap: .25rem; }
.brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.brief-card h2 { margin: 0 0 .5rem; font-size: 1.02rem; }
.brief-lines { list-style: none; margin: 0; padding: 0; }
.brief-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--sk-border); }
.brief-lines li:first-child { border-top: 0; }
.brief-lines li > a, .brief-lines li > span { min-width: 0; }
.brief-lines strong { white-space: nowrap; font-weight: 600; }
.brief-lines .tone-bad strong, .brief-lines .tone-bad > a { color: var(--sk-danger); }
.brief-lines .tone-warn strong { color: var(--sk-warning); }
.brief-yesterday { border-top: 3px solid var(--sk-indigo-700); }
.brief-grid > .card { margin: 0; }
.brief-lines a { color: inherit; text-decoration: none; }
.brief-lines a:hover, .brief-lines a:focus-visible { color: var(--sk-indigo-700); text-decoration: underline; }

/* ---------- 1.4.0: figures whose labels wrap (quote card) ---------- */
.figures-wrap { grid-template-columns: minmax(0, 1fr) auto; }
.figures-wrap dt .sub { display: block; font-size: .8rem; color: var(--sk-text-faint); }
.figures-wrap dt .sub.text-danger { color: var(--sk-danger); }
.figures-wrap dd { white-space: nowrap; }