:root {
  --core-navy: #0C2238;
  --core-navy-2: #15354F;
  --core-blue: #1C86C1;
  --srh-cyan: #4EB8E3;
  --srh-dusk: #071525;
  --bg: #E6EEF4;
  --surface: #FFFFFF;
  --surface-muted: #F4F8FB;
  --text: #12202B;
  --text-muted: #5B6E7C;
  --border: #D2DEE7;
  --border-strong: #B3C5D1;
  --success: #237A4B;
  --success-bg: #E7F4EC;
  --warning: #A96B06;
  --warning-bg: #F8F0DE;
  --danger: #B33A32;
  --danger-bg: #F7E8E6;
  --focus: #1C86C1;
  --shadow: 0 1px 2px rgba(12, 34, 56, 0.07), 0 8px 22px rgba(12, 34, 56, 0.05);
  --radius: 10px;
  --font: "Segoe UI", "Calibri", system-ui, sans-serif;
  --header-h: 3.5rem;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
  min-height: 100vh;
}
a { color: var(--core-blue); }
img { max-width: 100%; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--core-navy);
  color: #fff;
  padding: 0.5rem 0.8rem;
  z-index: var(--z-skip);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1.35rem;
  background: linear-gradient(180deg, #0A1C2E 0%, var(--core-navy) 100%);
  color: #f4f7f9;
  width: 100%;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--srh-cyan);
  box-shadow: 0 2px 14px rgba(7, 21, 37, 0.28);
}
.brand-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--core-blue);
  font-weight: 700;
}
.site-header .brand-kicker,
.home-welcome .brand-kicker,
.login-welcome .brand-kicker {
  color: var(--srh-cyan);
}
.brand-title {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 1.12rem;
}
.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; }
.nav a {
  color: #c5d4de;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a[aria-current="page"], .nav a:hover { color: #fff; border-bottom-color: var(--srh-cyan); }
.who { font-size: 0.8rem; opacity: 0.75; margin: 0; font-weight: 500; }
.staff-session { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.page,
.page.wide {
  width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 1.1rem 0 2.5rem;
}
.page { max-width: 1180px; }
.page.wide { max-width: 1400px; }
.driver-page {
  width: calc(100% - 1.6rem);
  max-width: 52rem;
  margin-inline: auto;
  padding: 1rem 0 3rem;
}
.driver-page.driver-home {
  width: min(calc(100% - 2rem), 86vw);
  max-width: 1400px;
}
.driver-page.driver-prose {
  max-width: 40rem;
}
h1 { margin: 0 0 0.35rem; font-size: 1.5rem; letter-spacing: 0.01em; font-weight: 700; }
h2 { font-size: 1.1rem; margin: 1.1rem 0 0.45rem; }
.lede { color: var(--text-muted); margin: 0 0 1rem; }
.flash { list-style: none; padding: 0; margin: 0 auto 1rem; max-width: inherit; }
.flash li {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  margin-bottom: 0.35rem;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.flash .error { border-color: #e3b4b0; background: var(--danger-bg); color: var(--danger); }
.flash .ok { border-color: #b7d4c2; background: var(--success-bg); color: var(--success); }
.flash .info { background: #eef3f6; border-color: var(--border); color: var(--core-navy); }
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.95rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.action-card { display: block; text-decoration: none; color: inherit; padding: 1rem; }
.action-card:hover { border-color: var(--border-strong); }
.action-card h2 { margin: 0 0 0.2rem; font-size: 1.12rem; }
.meta { color: var(--text-muted); font-size: 0.9rem; }
.req-label {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--core-blue);
}
.due-overdue, .status-overdue { color: var(--danger); font-weight: 700; }
.due-due_today, .due-due_soon { color: var(--warning); font-weight: 700; }
.status-complete { color: var(--success); font-weight: 700; }
.btn, button.btn, input[type="submit"].btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--core-blue);
  color: #fff;
  border: 1px solid var(--core-blue);
  padding: 0.58rem 1.1rem;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 14px rgba(12, 34, 56, 0.16);
}
.btn:hover { background: #1874a8; border-color: #1874a8; }
[hidden] { display: none !important; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.btn-secondary { background: var(--surface); color: var(--core-navy); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-muted); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-quiet { background: none; border: 0; color: var(--core-blue); min-height: 36px; padding: 0.3rem 0.4rem; }
.btn-block { width: 100%; text-align: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.grid { display: grid; gap: 0.75rem; }
.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { border-left: 3px solid var(--core-blue); padding-left: 0.85rem; }
.stat strong { display: block; font-size: 2rem; line-height: 1.1; margin-top: 0.15rem; color: var(--text); }
.stat-danger { border-left-color: var(--danger); }
.stat-danger strong { color: var(--danger); }
.stat-warning { border-left-color: var(--warning); }
.stat-success { border-left-color: var(--success); }
.stat-neutral { border-left-color: var(--border-strong); }
.table-wrap { overflow-x: auto; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.92rem; }
table.data th, table.data td {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
table.data th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4f8fb;
  background: #0c2238;
  font-weight: 700;
}
table.data tbody tr:hover { background: var(--surface-muted); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; align-items: end; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; color: var(--text); }
input[type="file"] {
  display: block;
  width: 100%;
  max-width: 36rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.45rem;
}
.file-chosen {
  margin: 0.35rem 0 0;
  font-weight: 700;
  color: var(--core-navy);
}
.file-chosen.is-empty { color: var(--text-muted); font-weight: 600; }
.picker-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.2rem 0 0.55rem; }
.picker-tools .btn { min-height: 36px; }
.device-banner.private {
  background: #e7f4ec;
  color: var(--success);
  border: 1px solid #b7d4c2;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  margin: 0.4rem 0 0;
}
p.empty, p.empty-state, .empty-state {
  color: var(--text-muted);
}
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  min-height: 42px;
  border-radius: 6px;
  color: var(--text);
}
textarea { min-height: 90px; }
.field { margin-bottom: 0.8rem; }
.help { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; margin: 0.2rem 0 0; }
.row { display: grid; gap: 0.75rem; }
@media (min-width: 720px) {
  .row-2 { grid-template-columns: 1fr 1fr; }
  .row-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.check { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 600; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; flex: 0 0 auto; }
.pdf-frame { width: 100%; height: 70vh; min-height: 280px; border: 1px solid var(--border); background: #525252; border-radius: 6px; }
.sign-pad {
  border: 1px solid var(--border-strong);
  background: #fff;
  width: 100%;
  height: 180px;
  max-width: 100%;
  touch-action: none;
  display: block;
  border-radius: 6px;
}
.progress { height: 8px; background: var(--border); margin: 0.4rem 0 0.2rem; border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--core-blue); }
.progress.is-complete span { background: var(--success); }
.progress.is-overdue span { background: var(--danger); }
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface-muted);
  color: var(--text-muted);
}
.badge-complete, .badge-current { background: var(--success-bg); color: var(--success); border-color: #c5dfd0; }
.badge-overdue { background: var(--danger-bg); color: var(--danger); border-color: #e3b4b0; }
.badge-awaiting, .badge-awaiting_verification, .badge-draft { background: var(--warning-bg); color: var(--warning); border-color: #ead9a8; }
.badge-new, .badge-viewed, .badge-in_progress, .badge-outstanding { background: #e7f1f6; color: var(--core-blue); border-color: #c5dbe8; }
.badge-cancelled, .badge-exempt, .badge-superseded { background: var(--surface-muted); color: var(--text-muted); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.sig-img { height: 48px; background: #fff; border: 1px solid var(--border); padding: 2px; }
.login-screen main.page,
.login-screen main.login-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 7rem);
  width: calc(100% - 2rem);
  max-width: 1040px;
  margin-inline: auto;
}
.login-box { width: 100%; max-width: 420px; margin: 2rem auto 0; }
.demo-accounts {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}
.demo-accounts code { color: var(--text); }
.site-footer { padding: 0.7rem 1.25rem 1.4rem; color: var(--text-muted); font-size: 0.8rem; width: calc(100% - 2rem); margin-inline: auto; max-width: 1400px; }
.empty { color: var(--text-muted); padding: 0.6rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0; }
.user-form-inline { display: flex; gap: 0.4rem; align-items: center; }
.user-form-inline button {
  background: none; border: 0; color: #c5d4de; font: inherit; cursor: pointer;
  min-height: 44px;
}
.user-form-inline button:hover { color: #fff; text-decoration: underline; }
.error-page { max-width: 36rem; margin-inline: auto; }
.poster { text-align: center; padding: 2rem 1rem; }
.poster-sheet { min-height: 420px; }
.poster h1 { font-size: 1.8rem; }
.poster img { margin: 1.2rem 0; }
@media print {
  .site-header, .nav, .no-print, .site-footer, .flash { display: none !important; }
  body { background: #fff; }
  .page { max-width: none; width: auto; }
}
@media (max-width: 720px) {
  .site-header { flex-direction: column; align-items: flex-start; padding: 0.7rem 0.9rem; }
  .nav { width: 100%; }
  .pdf-frame { height: 50vh; }
  .page, .page.wide { width: calc(100% - 1.2rem); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat strong { font-size: 1.7rem; }
}
.nav-count {
  display: inline-flex;
  min-width: 1.2rem;
  height: 1.2rem;
  align-items: center;
  justify-content: center;
  background: var(--srh-cyan);
  color: var(--core-navy);
  border-radius: 99px;
  font-size: 0.7rem;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
}
.badge-sensitive {
  background: #eef3f6;
  color: var(--core-navy);
  border-color: var(--border-strong);
  letter-spacing: 0.04em;
}
.calm-ok { border-left: 3px solid var(--success); }
.warn-panel { border-left: 3px solid var(--warning); background: var(--warning-bg); }
.expiry-current { border-left: 3px solid var(--success); }
.expiry-expiring_soon { border-left: 3px solid var(--warning); }
.expiry-due_soon { border-left: 3px solid var(--warning); }
.expiry-expired { border-left: 3px solid var(--danger); }
.expiry-overdue { border-left: 3px solid var(--danger); }
.me-status { color: var(--text-muted); font-size: 0.92rem; margin: 0.35rem 0 0; }
.recent-list a { font-weight: 600; text-decoration: none; }
.hub-shortcuts { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 640px) {
  .hub-shortcuts { grid-template-columns: 1fr 1fr 1fr; }
}
.quiet-form { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--text-muted); }
.control-page .card { max-width: none; }
.preview-slot { margin-top: 0.5rem; }
.preview-slot img { max-width: 100%; max-height: 240px; border-radius: 6px; border: 1px solid var(--border); }

body.driver-app .site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-rail-open);
}
.driver-session {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.driver-session-who {
  margin: 0;
  font-size: 0.95rem;
  color: #fff;
  font-weight: 500;
}
.user-form-inline .btn-change-driver,
.btn-change-driver {
  background: #fff;
  color: var(--core-navy);
  border: 0;
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.user-form-inline .btn-change-driver:hover,
.btn-change-driver:hover {
  background: #e8eef2;
  color: var(--core-navy);
  text-decoration: none;
}
.me-block { margin: 0 0 1.25rem; }
.me-name { margin: 0 0 0.15rem; font-weight: 700; font-size: 1.05rem; }
.need-urgent {
  border-left: 4px solid var(--danger);
  background: var(--danger-bg);
}
.need-soon {
  border-left: 4px solid var(--warning);
}
.date-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.date-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  align-items: center;
}
.date-row:last-child { border-bottom: 0; }
.hub-place { margin: 1.5rem 0 0; }
.hub-place .btn { margin-top: 0.45rem; }
.driver-back { margin: 0 0 0.85rem; }
.driver-back a { font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hub-layout { display: grid; gap: 0.5rem; }
@media (min-width: 900px) {
  .hub-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.75fr);
    gap: 2rem;
    align-items: start;
  }
  .hub-personal {
    position: sticky;
    top: 5rem;
  }
}
.idle-warning {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--core-navy);
  color: #fff;
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(23, 42, 58, 0.28);
  max-width: min(32rem, calc(100% - 2rem));
  font-weight: 600;
}
html[data-theme="dark"] {
  --bg: #121920;
  --surface: #1b2630;
  --surface-muted: #22303b;
  --text: #e8eef2;
  --text-muted: #9aadb8;
  --border: #2c3d4a;
  --border-strong: #3d5363;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #121920;
    --surface: #1b2630;
    --surface-muted: #22303b;
    --text: #e8eef2;
    --text-muted: #9aadb8;
    --border: #2c3d4a;
    --border-strong: #3d5363;
  }
}
@media (max-width: 720px) {
  .driver-session {
    width: 100%;
    justify-content: space-between;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .date-row { flex-wrap: wrap; }
}

body.login-screen {
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(78, 184, 227, 0.18), transparent 55%),
    linear-gradient(180deg, #071525 0%, #0C2238 58%, #12324A 100%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.login-screen .login-stage,
body.login-screen main.page {
  flex: 1;
}
body.login-screen .site-header {
  background: transparent;
  border-bottom: 1px solid rgba(78, 184, 227, 0.28);
  box-shadow: none;
}
body.login-screen .site-footer {
  color: rgba(230, 238, 244, 0.68);
}
body.login-screen .site-footer a { color: inherit; }
body.login-screen .flash { width: 100%; }
.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17.5rem, 24.5rem);
  width: 100%;
  margin: 0.5rem 0 1rem;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(7, 21, 37, 0.38);
  border: 1px solid rgba(78, 184, 227, 0.22);
}
.login-welcome {
  position: relative;
  min-height: 22rem;
  padding: 2rem 1.7rem;
  color: #f4f8fb;
  background:
    linear-gradient(165deg, rgba(7, 21, 37, 0.28) 0%, rgba(12, 34, 56, 0.55) 48%, rgba(12, 34, 56, 0.82) 100%),
    linear-gradient(180deg, #0B2A46 0%, #12324F 62%, #1A4A6A 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.login-welcome::before {
  content: "";
  position: absolute;
  inset: 1.35rem 8% auto 8%;
  height: 0.22rem;
  background: linear-gradient(90deg, transparent, var(--srh-cyan) 12%, #fff 50%, var(--srh-cyan) 88%, transparent);
  opacity: 0.85;
  border-radius: 99px;
}
.login-welcome::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: 16rem;
  height: 16rem;
  border: 10px solid rgba(78, 184, 227, 0.22);
  border-radius: 50%;
  pointer-events: none;
}
.login-welcome .brand-kicker {
  position: relative;
  color: var(--srh-cyan);
  margin-bottom: 0.45rem;
}
.login-welcome h1 {
  position: relative;
  margin: 0 0 0.35rem;
  font-size: 2rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.login-welcome .lede {
  position: relative;
  margin: 0;
  color: rgba(244, 248, 251, 0.86);
  max-width: 18rem;
}
.login-welcome a {
  position: relative;
  color: #fff;
  font-weight: 600;
  margin-top: 0.8rem;
}
.login-shell .login-box {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1.7rem 1.55rem 1.4rem;
  background: #fff;
  color: #12202B;
}
.login-heading { font-size: 1.35rem; }
body.login-screen .login-box.panel {
  background: #fff;
  color: #12202B;
  border: 1px solid rgba(78, 184, 227, 0.22);
  box-shadow: 0 18px 48px rgba(7, 21, 37, 0.38);
}
body.login-screen .login-shell .login-box.panel {
  border: 0;
  box-shadow: none;
}
body.login-screen .login-box .lede,
body.login-screen .login-box .meta {
  color: #5B6E7C;
}
body.login-screen .login-box input[type="text"],
body.login-screen .login-box input[type="password"],
body.login-screen .login-box input[type="email"] {
  background: #fff;
  color: #12202B;
}
.home-welcome {
  background: linear-gradient(135deg, #0C2238 0%, #15486A 62%, #1C86C1 100%);
  color: #fff;
  padding: 1.15rem 1.3rem 1.2rem;
  border-radius: 12px;
  margin: 0 0 1.35rem;
  box-shadow: 0 10px 24px rgba(12, 34, 56, 0.14);
}
.home-welcome .brand-kicker {
  color: var(--srh-cyan);
  margin-bottom: 0.35rem;
}
.home-welcome h1 {
  color: #fff;
  margin-bottom: 0.2rem;
}
.home-welcome .lede {
  color: rgba(244, 248, 251, 0.88);
  margin: 0;
}
.action-card:hover {
  border-color: var(--core-blue);
  box-shadow: 0 8px 20px rgba(12, 34, 56, 0.08);
}
.btn-secondary {
  box-shadow: none;
}
@media (max-width: 840px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-welcome {
    min-height: 0;
    padding: 1.15rem 1.2rem 1.25rem;
    justify-content: flex-start;
  }
  .login-welcome h1 { font-size: 1.45rem; }
  .login-welcome::before { inset: 1rem 1.2rem auto 1.2rem; }
  .login-welcome::after { display: none; }
}
@media (max-width: 720px) {
  body.login-screen main.login-stage,
  body.login-screen main.page {
    width: calc(100% - 1.2rem);
    justify-content: flex-start;
    min-height: auto;
    padding-top: 0.6rem;
  }
}



/* merged from switchyard.css */
/* EXPERIMENTAL Switchyard visual system. Design tokens, not scattered hex. */

:root {
  --sy-navy: #0b2a4a;
  --sy-navy-2: #123a63;
  --sy-cyan: #1aa3c4;
  --sy-foam: #e8f6fa;
  --sy-steel: #5c6d7e;
  --sy-paper: #f3f6f8;
  --sy-ink: #12202c;
  --sy-line: rgba(18, 32, 44, 0.12);
  --sy-ok: #1f7a4d;
  --sy-warn: #b45309;
  --sy-alert: #b42318;
  --sy-shadow: 0 18px 50px rgba(11, 42, 74, 0.16);
  --sy-radius: 18px;
  --sy-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sy-hero: url("/static/img/tanker-depot-night.jpg");
}

html[data-sy-theme="srh-dark"],
html[data-theme="dark"] {
  --sy-paper: #0e1720;
  --sy-ink: #eef4f8;
  --sy-line: rgba(232, 246, 250, 0.12);
  --sy-foam: #16324a;
  --sy-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

html[data-sy-theme="fleet-night"] {
  --sy-paper: #071018;
  --sy-ink: #f4fbff;
  --sy-navy: #061525;
  --sy-cyan: #5ad0e8;
  --sy-foam: rgba(26, 163, 196, 0.12);
}

html[data-accent="cyan"] { --sy-cyan: #12b5d4; }
html[data-accent="steel"] { --sy-cyan: #7f93a6; }
html[data-density="compact"] { --sy-radius: 12px; }

html[data-build="switchyard"] body {
  font-family: var(--sy-font);
  background: var(--sy-paper);
  color: var(--sy-ink);
}

html[data-build="switchyard"] .madman-ribbon {
  background: var(--sy-navy);
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

html[data-build="switchyard"] .site-header {
  background: linear-gradient(90deg, var(--sy-navy), var(--sy-navy-2));
  color: #fff;
  border-bottom: 3px solid var(--sy-cyan);
}

html[data-build="switchyard"] .brand-title,
html[data-build="switchyard"] .brand-kicker,
html[data-build="switchyard"] .nav a,
html[data-build="switchyard"] .who,
html[data-build="switchyard"] .driver-session-who {
  color: #fff;
}

html[data-build="switchyard"] .nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--sy-cyan);
}

html[data-build="switchyard"] .sy-logo {
  height: auto;
  width: auto;
  max-height: 40px;
  max-width: 148px;
  object-fit: contain;
  display: block;
}

html[data-build="switchyard"] .brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sy-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--sy-radius);
  min-height: 220px;
  background: var(--sy-navy) var(--sy-hero) center / cover no-repeat;
  color: #fff;
  padding: 1.6rem;
  box-shadow: var(--sy-shadow);
  display: grid;
  gap: 0.6rem;
}

.sy-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 21, 37, 0.82), rgba(6, 21, 37, 0.28) 70%);
}

.sy-hero > * { position: relative; z-index: 1; }
.sy-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; letter-spacing: -0.03em; }
.sy-hero .lede { max-width: 36rem; opacity: 0.92; }

.sy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
}

.sy-stack { display: grid; gap: 1rem; }
.sy-split { display: grid; gap: 1.25rem; }
@media (min-width: 960px) {
  .sy-split { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr); gap: 24px; }
}

.sy-panel {
  background: #fff;
  color: var(--sy-ink);
  border: 1px solid var(--sy-line);
  border-radius: var(--sy-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(11, 42, 74, 0.06);
}

html[data-theme="dark"] .sy-panel,
html[data-sy-theme="srh-dark"] .sy-panel,
html[data-sy-theme="fleet-night"] .sy-panel {
  background: rgba(18, 38, 56, 0.92);
  color: var(--sy-ink);
}

.sy-action {
  display: grid;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  border-left: 5px solid var(--sy-cyan);
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--sy-foam));
}

.sy-action.is-urgent { border-left-color: var(--sy-alert); background: #fff6f5; }
.sy-action.is-soon { border-left-color: var(--sy-warn); }
.sy-action h2 { margin: 0; font-size: 1.15rem; }
.sy-action.featured { padding: 1.4rem; font-size: 1.05rem; box-shadow: var(--sy-shadow); }

.sy-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--sy-steel);
}

.sy-dock {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--sy-navy);
  color: #fff;
  z-index: var(--z-rail);
}

.sy-dock a {
  color: #fff;
  text-align: center;
  padding: 0.7rem 0.2rem 0.85rem;
  font-size: 0.78rem;
  text-decoration: none;
}

.sy-dock a[aria-current="page"] { color: var(--sy-cyan); }

@media (min-width: 900px) {
  .sy-dock { display: none; }
}

html[data-build="switchyard"] body.driver-app { padding-bottom: 4rem; }
html[data-build="switchyard"] .login-screen {
  min-height: 100vh;
  background: #071018 var(--sy-hero) center / cover no-repeat;
}
html[data-build="switchyard"] .login-stage { position: relative; z-index: 1; }
html[data-build="switchyard"] .login-shell {
  display: grid;
  gap: 1.5rem;
  max-width: 920px;
  margin: 2rem auto;
}
@media (min-width: 840px) {
  html[data-build="switchyard"] .login-shell { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}
html[data-build="switchyard"] .login-box {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}
html[data-build="switchyard"] .login-welcome { color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.45); }
html[data-build="switchyard"] .night-sky { display: none; }

.sy-steps { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sy-steps span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--sy-foam); font-size: 0.8rem; }
.sy-steps span.is-on { background: var(--sy-navy); color: #fff; }

.sy-cass { display: grid; gap: 0.75rem; }
.sy-cass-row { display: grid; gap: 0.35rem; padding: 0.8rem; border: 1px solid var(--sy-line); border-radius: 12px; }
@media (min-width: 800px) {
  .sy-cass-row { grid-template-columns: 1.4fr 1fr auto; align-items: center; }
}

.sy-meter { height: 8px; background: var(--sy-foam); border-radius: 999px; overflow: hidden; }
.sy-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sy-cyan), var(--sy-navy)); }

.device-banner {
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: var(--sy-foam);
  margin-bottom: 1rem;
}
.device-banner.shared { background: #fff4e5; }

.clear-tablet {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--sy-navy);
  color: #fff;
  z-index: var(--z-toast);
}

html[data-build="switchyard"] body.login-screen {
  background:
    linear-gradient(180deg, rgba(6, 16, 28, 0.35), rgba(6, 18, 32, 0.55)),
    var(--sy-hero) center / cover no-repeat;
}
html[data-build="switchyard"] body.login-screen .login-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  max-width: 1080px;
  margin: 1.25rem auto;
  align-items: end;
}
html[data-build="switchyard"] body.login-screen .login-welcome {
  background: transparent;
  min-height: 0;
  justify-content: flex-end;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
html[data-build="switchyard"] body.login-screen .login-welcome::before,
html[data-build="switchyard"] body.login-screen .login-welcome::after {
  display: none;
}
html[data-build="switchyard"] body.login-screen .sy-logo-hero {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 72px;
  object-fit: contain;
}
html[data-build="switchyard"] body.login-screen .login-box {
  background: rgba(255, 255, 255, 0.9);
  max-width: 22rem;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.doc-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--sy-line);
}
html[data-density="compact"] .sy-panel,
html[data-density="compact"] .sy-hero { padding: 0.85rem 1rem; }

@media (max-width: 720px) {
  html[data-build="switchyard"] body.login-screen .login-shell { margin: 0.5rem; }
  .doc-list li, .sy-cass-row, .filters { display: grid; }
  .home-welcome.sy-hero { min-height: 0; border-radius: 0; margin-inline: -1rem; }
  .nav { gap: 0.35rem; }
  table.data { font-size: 0.82rem; }
}
@media (min-width: 721px) and (max-width: 959px) {
  .sy-split { grid-template-columns: 1fr; }
}


:root {
  --navy: #0b2a4a;
  --cyan: #1aa6c1;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --border: #d5deea;
  --text: #1b2430;
  --success: #1f7a4d;
  --success-tint: #e7f6ee;
  --warning: #8a5a00;
  --warning-tint: #fff4d6;
  --danger: #9b2335;
  --danger-tint: #fde8eb;
  --info: #0b4f6c;
  --info-tint: #e7f4fa;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(11, 42, 74, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 42, 74, 0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --type-sm: 14px;
  --type-md: 16px;
  --type-lg: 18px;
  --type-xl: 22px;
  --type-2xl: 28px;
}
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.alert-warning { background: var(--warning-tint); color: var(--warning); }
.alert-info { background: var(--info-tint); color: var(--info); }
.alert-success { background: var(--success-tint); color: var(--success); }
.alert-danger { background: var(--danger-tint); color: var(--danger); }
.card-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-md); }
.card-link:hover, .card-link:focus-visible { box-shadow: var(--shadow-md); }
.empty-state { padding: var(--space-5); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-3); }
.back-link a, .btn, button, .menu-toggle { min-height: 44px; }
.menu-toggle { display: none; }
@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  #office-nav { display: none; width: 100%; }
  #office-nav.is-open { display: flex; flex-direction: column; align-items: flex-start; }
  .site-header { align-items: flex-start; }
  .staff-session, .driver-session { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .card, .panel, .identity-block { padding: 0.85rem; }
  table.data { font-size: 0.84rem; }
}
@media (max-width: 390px) {
  .brand-org { display: none; }
  .page, .page.wide, .driver-page { width: calc(100% - 1.2rem); }
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #fff;
  min-height: 44px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  line-height: 1;
}
.brand-mark-hero {
  height: auto;
  min-width: 0;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.35rem;
  position: relative;
  color: #fff;
}
.poster .brand-mark { color: var(--core-navy); border-color: var(--core-navy); }
.header-settings {
  color: #c5d4de;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.header-settings:hover { color: #fff; }
.office-nav a {
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
}
.identity-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--core-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 0.85rem;
  margin-bottom: 1rem;
}
.identity-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--core-navy);
}
.empty-state {
  margin: 0.4rem 0 0.8rem;
  padding: 0.9rem 1rem;
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-org {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fd4ea;
  font-weight: 700;
}
.site-header .brand-title { font-size: 1rem; letter-spacing: 0.01em; color: #fff; }
.role-pill {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(78, 184, 227, 0.2);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.site-header { align-items: center; padding: 0.35rem 1rem; }
a.btn.btn-secondary,
button.btn-secondary,
.btn.btn-secondary {
  background: #fff;
  color: var(--core-navy);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
a.btn:hover,
button.btn:hover,
.btn:hover {
  background: #156a96;
  border-color: #156a96;
  color: #fff;
}
a.btn.btn-secondary:hover,
a.btn.btn-secondary:focus-visible,
button.btn-secondary:hover,
button.btn-secondary:focus-visible,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
  background: #e7eef4;
  color: var(--core-navy);
  border-color: var(--core-navy);
}
.btn:active { background: #0e4f72; color: #fff; }
.btn-secondary:active,
a.btn.btn-secondary:active { background: #d5e2ec; color: var(--core-navy); }
.btn:disabled,
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.attach-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.attach-actions .btn { cursor: pointer; }
input.attach-input {
  position: absolute;
  width: 1px;
  height: 1px;
  max-width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; }
  .brand-lockup { min-width: 0; }
  .nav-items, #office-nav { flex-wrap: wrap; }
  .table-wrap, table.data { display: block; overflow-x: auto; }
}
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Depot office shell. Scoped so the driver header, dock and hero stay as they are. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
}

body {
  --z-content: 2;
  --z-band-row: 3;
  --z-rail: 20;
  --z-bars: 30;
  --z-rail-open: 40;
  --z-toast: 80;
  --z-skip: 100;
  --r-card: 12px;
  --r-ctl: 8px;
}
body.office-shell {
  --rail: #0A1B2D;
  --rail-2: #0E2439;
  --rail-line: rgba(255, 255, 255, 0.07);
  --navy: #0C2238;
  --blue: #1C86C1;
  --blue-700: #156A96;
  --cyan: #4EB8E3;
  --bg: #EEF2F6;
  --surface: #FFFFFF;
  --surface-2: #F6F8FA;
  --line: #DFE6EC;
  --line-2: #C9D5DF;
  --text: #0F1E2B;
  --muted: #5B6E7C;
  --faint: #8A9AA7;
  --ok: #1E7A4C;
  --ok-bg: #E6F4EC;
  --warn: #9A5B00;
  --warn-bg: #FDF1DC;
  --bad: #B4342C;
  --bad-bg: #FBE9E7;
  --info: #15608C;
  --info-bg: #E5F1F9;
  --rail-w: 264px;
  --ui: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(10, 27, 45, 0.06), 0 6px 20px rgba(10, 27, 45, 0.06);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.office-shell .site-footer { display: none; }
body.office-shell .ic {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.office-shell .rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: linear-gradient(180deg, var(--rail-2), var(--rail) 40%);
  color: #C3D1DC;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
  border-right: 1px solid var(--rail-line);
  z-index: var(--z-rail);
  overflow: auto;
}
body.office-shell .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -16px 18px;
  padding: 2px 8px 22px 24px;
  border-bottom: 1px solid var(--rail-line);
  color: #fff;
  text-decoration: none;
}
body.office-shell .brand-logo { height: 60px; width: auto; max-width: none; display: block; }
body.office-shell .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
body.office-shell .brand-product { font: 600 19px/1.1 var(--display); color: #fff; }
body.office-shell .brand-mode {
  margin-top: 3px;
  font: 600 11px/1.4 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
body.office-shell .rail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 18px rgba(28, 134, 193, 0.28);
  margin-bottom: 18px;
}
body.office-shell #office-nav,
body.office-shell .rail-links-primary { display: flex; flex-direction: column; gap: 2px; flex-wrap: nowrap; }
body.office-shell .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 9px;
  color: #B4C4D1;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0;
}
body.office-shell .nav-item .ic { color: #7F97AA; }
body.office-shell .nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
body.office-shell .nav-item[aria-current="page"] { background: rgba(78, 184, 227, 0.13); color: #fff; }
body.office-shell .nav-item[aria-current="page"] .ic { color: var(--cyan); }
body.office-shell .nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cyan);
}
body.office-shell .nav-item .count {
  margin-left: auto;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--rail);
  font: 700 12px/22px var(--ui);
  text-align: center;
}
body.office-shell .nav-group { margin: 0; }
body.office-shell .nav-group > summary { list-style: none; cursor: pointer; width: 100%; }
body.office-shell .nav-group > summary::-webkit-details-marker { display: none; }
body.office-shell .nav-group .ic-chevron { margin-left: auto; width: 16px; height: 16px; color: #6F879A; }
body.office-shell .nav-group[open] .ic-chevron { transform: rotate(180deg); }
body.office-shell .subnav {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 44px;
  border-left: 1px solid var(--rail-line);
}
body.office-shell .subnav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: #97AABA;
  font-size: 14px;
  text-decoration: none;
}
body.office-shell .subnav a:hover,
body.office-shell .subnav a[aria-current="page"] { color: #fff; }
body.office-shell .rail-foot {
  margin-top: auto;
  border-top: 1px solid var(--rail-line);
  padding: 16px 16px 0;
  margin-left: -16px;
  margin-right: -16px;
}
body.office-shell .account { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
body.office-shell .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font: 700 13px/1 var(--ui);
  color: #fff;
  background: linear-gradient(135deg, #1C86C1, #0C3F63);
  flex: 0 0 auto;
}
body.office-shell .avatar.sm { width: 32px; height: 32px; font-size: 12px; background: #E3ECF3; color: #21415C; }
body.office-shell .account-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
body.office-shell .account-text b { color: #fff; font-weight: 600; font-size: 14.5px; }
body.office-shell .account-text span { font-size: 12.5px; color: #8DA3B4; }
body.office-shell .device-quiet,
body.office-shell .device-shared-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 6px 4px;
  font-size: 12.5px;
}
body.office-shell .device-quiet { color: #7E94A6; font-weight: 500; }
body.office-shell .device-quiet .ic,
body.office-shell .device-shared-chip .ic { width: 15px; height: 15px; }
body.office-shell .device-shared-chip { color: #F2C46B; font-weight: 600; }
body.office-shell .account-actions { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
body.office-shell .account-actions form { margin: 0; }
body.office-shell .account-actions button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #C3D1DC;
  font: 500 13px/1 var(--ui);
  letter-spacing: 0;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}
body.office-shell .account-actions button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
body.office-shell .account-actions .ic { width: 16px; height: 16px; }
body.office-shell .rail-links { display: flex; gap: 8px; margin: 8px 0 0; font-size: 12px; }
body.office-shell .rail-links a {
  color: #6F879A;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
}
body.office-shell .mtop,
body.office-shell .mdock { display: none; }
body.office-shell .office-main {
  margin-left: var(--rail-w);
  min-height: 100vh;
  width: auto;
  max-width: none;
  padding: 0;
}
body.office-shell .shared-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF3DA;
  color: #6B4300;
  border-bottom: 1px solid #F0D49A;
  padding: 10px 36px;
  font-size: 14px;
}
body.office-shell .shared-strip .ic { color: #B87200; }
body.office-shell .band {
  position: relative;
  color: #fff;
  padding: 28px 36px 0;
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, #0A1B2D 0%, #0A1B2D 38%, rgba(10, 27, 45, 0.6) 52%, rgba(10, 27, 45, 0.08) 70%, rgba(10, 27, 45, 0) 100%),
    linear-gradient(0deg, rgba(10, 27, 45, 0.9), rgba(10, 27, 45, 0) 34%),
    url("img/office-band-1600.jpg");
  background-image:
    linear-gradient(90deg, #0A1B2D 0%, #0A1B2D 38%, rgba(10, 27, 45, 0.6) 52%, rgba(10, 27, 45, 0.08) 70%, rgba(10, 27, 45, 0) 100%),
    linear-gradient(0deg, rgba(10, 27, 45, 0.9), rgba(10, 27, 45, 0) 34%),
    image-set(url("img/office-band-900.jpg") 1x, url("img/office-band-1600.jpg") 2x);
  background-position: center, center, right 0 top 70%;
  background-size: cover, cover, auto 175%;
  background-repeat: no-repeat;
}
body.office-shell .band.band-home {
  padding-top: 46px;
  padding-bottom: 128px;
  background-image:
    linear-gradient(90deg, #0A1B2D 0%, #0A1B2D 26%, rgba(10, 27, 45, 0.55) 44%, rgba(10, 27, 45, 0) 66%),
    linear-gradient(0deg, rgba(10, 27, 45, 0.7), rgba(10, 27, 45, 0) 40%),
    url("img/office-band-1600.jpg");
  background-image:
    linear-gradient(90deg, #0A1B2D 0%, #0A1B2D 26%, rgba(10, 27, 45, 0.55) 44%, rgba(10, 27, 45, 0) 66%),
    linear-gradient(0deg, rgba(10, 27, 45, 0.7), rgba(10, 27, 45, 0) 40%),
    image-set(url("img/office-band-900.jpg") 1x, url("img/office-band-1600.jpg") 2x);
  background-position: center, center, right 0 top 64%;
  background-size: cover, cover, auto 150%;
}
body.office-shell .band.band--plain {
  background-image: none;
  padding-bottom: 28px;
}
body.office-shell .band-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: var(--z-band-row);
}
body.office-shell .band h1 {
  font: 600 40px/1.05 var(--display);
  letter-spacing: -0.005em;
  margin: 0;
  color: #fff;
}
body.office-shell .band.band-home h1 { font-size: 56px; }
body.office-shell .band.band-doc h1 { font-size: 36px; }
body.office-shell .kicker {
  margin: 0 0 10px;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
body.office-shell .band .lede { margin: 8px 0 0; color: rgba(235, 243, 249, 0.82); font-size: 15.5px; max-width: 560px; }
body.office-shell .band-actions,
body.office-shell .band-actions-left { display: flex; gap: 10px; flex-wrap: wrap; }
body.office-shell .band-actions { justify-content: flex-end; }
body.office-shell .band-actions-left { justify-content: flex-start; margin-top: 22px; }
body.office-shell .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 12px; }
body.office-shell .crumbs a { color: rgba(225, 236, 244, 0.78); text-decoration: none; }
body.office-shell .crumbs .ic { width: 14px; height: 14px; color: rgba(225, 236, 244, 0.5); }
body.office-shell .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; color: rgba(235, 243, 249, 0.82); font-size: 14px; }
body.office-shell .tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
}
body.office-shell .tag-req { background: rgba(78, 184, 227, 0.2); color: #BFE8F8; }
body.office-shell .tag-live { background: rgba(70, 190, 120, 0.2); color: #B7F0CC; }
body.office-shell .only-compact,
body.office-shell a.btn.only-compact { display: none; }
body.office-shell a.btn,
body.office-shell button.btn,
body.office-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  height: 44px;
  padding: 0 18px;
  border-radius: 9px;
  font: 600 14.5px/1 var(--ui);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: none;
}
body.office-shell a.btn .ic,
body.office-shell button.btn .ic { width: 18px; height: 18px; }
body.office-shell a.btn.btn-primary,
body.office-shell button.btn,
body.office-shell a.btn:not(.btn-light):not(.btn-ghost-light):not(.btn-secondary):not(.btn-danger) {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
body.office-shell a.btn.btn-light,
body.office-shell button.btn.btn-light {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
body.office-shell a.btn.btn-ghost-light,
body.office-shell .more-menu > summary.btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
body.office-shell a.btn.btn-secondary,
body.office-shell button.btn.btn-secondary {
  background: #fff;
  color: var(--navy);
  border-color: var(--line-2);
}
body.office-shell a.btn.btn-danger,
body.office-shell button.btn.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
body.office-shell a.btn:hover,
body.office-shell button.btn:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
body.office-shell a.btn.btn-light:hover,
body.office-shell a.btn.btn-secondary:hover,
body.office-shell button.btn.btn-secondary:hover { background: #e7eef4; color: var(--navy); border-color: var(--line-2); }
body.office-shell .btn-block { width: 100%; height: auto; min-height: 44px; white-space: normal; padding: 11px 14px; }
body.office-shell .more-menu { position: relative; }
body.office-shell .more-menu > summary { list-style: none; cursor: pointer; }
body.office-shell .more-menu > summary::-webkit-details-marker { display: none; }
body.office-shell .more-panel {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
body.office-shell .more-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
body.office-shell .more-panel a:hover { background: var(--surface-2); }
body.office-shell .tabs {
  display: flex;
  gap: 4px;
  margin: 26px 0 0;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  flex-wrap: nowrap;
}
body.office-shell .band .tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  color: rgba(225, 236, 244, 0.78);
  font-weight: 500;
  font-size: 14.5px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0;
}
body.office-shell .band .tabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--cyan); font-weight: 600; }
body.office-shell .tab-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font: 700 11.5px/20px var(--ui);
  text-align: center;
  color: #fff;
}
body.office-shell .tabs a[aria-current="page"] .tab-count { background: var(--cyan); color: var(--rail); }
body.office-shell .tab-new { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9ED9F0; }
body.office-shell .content { padding: 26px 36px 48px; }
body.office-shell .content-home { margin-top: -84px; position: relative; z-index: var(--z-content); }
body.office-shell .content .tabs { margin-top: 0; }
body.office-shell .content .tabs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
}
body.office-shell .content .tabs a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--cyan); }
body.office-shell .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
body.office-shell .chips { display: flex; gap: 8px; flex-wrap: wrap; }
body.office-shell .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: #2B4357;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
body.office-shell .chip b { font-weight: 700; color: var(--navy); }
body.office-shell .chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
body.office-shell .chip.is-on b { color: var(--cyan); }
body.office-shell .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
body.office-shell article.card,
body.office-shell .side-card { padding: 18px; margin-bottom: 16px; }
body.office-shell .table-card { overflow: hidden; }
body.office-shell table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: #fff;
}
body.office-shell table.data th {
  height: 44px;
  padding: 0 18px;
  text-align: left;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
body.office-shell table.data td {
  padding: 0 18px;
  height: 66px;
  border-bottom: 1px solid #EDF1F4;
  vertical-align: middle;
  color: var(--text);
}
body.office-shell table.data tbody tr:last-child td { border-bottom: 0; }
body.office-shell table.data tbody tr:hover { background: #F8FAFC; }
body.office-shell .c-when b { display: block; font-weight: 600; }
body.office-shell .c-when span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
body.office-shell .who-wrap { display: flex; align-items: center; gap: 12px; }
body.office-shell .who { display: flex; flex-direction: column; line-height: 1.3; }
body.office-shell .who b,
body.office-shell .who-link { font-weight: 600; color: var(--text); text-decoration: none; }
body.office-shell .who span { font-size: 13px; color: var(--muted); }
body.office-shell .badge-sens {
  display: inline-flex;
  margin-left: 10px;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 5px;
  background: #EEF2F6;
  border: 1px solid var(--line-2);
  font: 700 10.5px/1 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #35536B;
}
body.office-shell .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  text-transform: capitalize;
}
body.office-shell .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.office-shell .pill-awaiting { background: var(--warn-bg); color: var(--warn); }
body.office-shell .pill-viewed,
body.office-shell .pill-opened { background: var(--info-bg); color: var(--info); }
body.office-shell .pill-deletion,
body.office-shell .pill-overdue { background: var(--bad-bg); color: var(--bad); }
body.office-shell .pill-complete { background: var(--ok-bg); color: var(--ok); }
body.office-shell .pill-new { background: #F1F4F7; color: #536779; }
body.office-shell .open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  background: #fff;
}
body.office-shell .open .ic { width: 16px; height: 16px; }
body.office-shell .table-foot { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }
body.office-shell .engage { padding: 22px 24px 18px; margin-bottom: 20px; }
body.office-shell .engage-metrics { display: grid; grid-template-columns: repeat(5, 1fr); }
body.office-shell .m { padding: 2px 22px 0; border-left: 1px solid var(--line); }
body.office-shell .m:first-child { border-left: 0; padding-left: 2px; }
body.office-shell .m span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
body.office-shell .m b { display: block; font: 600 40px/1.15 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
body.office-shell .m-new span::before,
body.office-shell .m-open span::before,
body.office-shell .m-done span::before,
body.office-shell .m-out span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
body.office-shell .m-new span::before { background: #C2CDD6; }
body.office-shell .m-open span::before { background: var(--blue); }
body.office-shell .m-done span::before { background: var(--ok); }
body.office-shell .m-out span::before { background: #E0A43A; }
body.office-shell .engage .progress { height: 12px; margin: 18px 0 12px; background: #E6ECF1; border-radius: 99px; }
body.office-shell .engage-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; color: var(--muted); }
body.office-shell .engage-summary b { color: var(--text); }
body.office-shell .late,
body.office-shell .is-late { color: var(--bad); font-weight: 600; }
body.office-shell .split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
body.office-shell .filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 16px 18px; margin: 0; }
body.office-shell .filters .field { margin: 0; }
body.office-shell .field label { font-size: 12.5px; font-weight: 600; color: #3A5265; }
body.office-shell .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.office-shell .content select,
body.office-shell .content textarea {
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font: 400 14px/1.4 var(--ui);
  color: var(--text);
}
body.office-shell .f-grow { flex: 1; min-width: 180px; }
body.office-shell .engage-table td { height: 58px; }
body.office-shell .bulk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
body.office-shell .side { display: flex; flex-direction: column; gap: 16px; }
body.office-shell .side-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 600 16px/1.3 var(--ui); }
body.office-shell .side-card h2 .ic { width: 18px; height: 18px; color: var(--blue); }
body.office-shell .side-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
body.office-shell .stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
body.office-shell .stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 132px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10, 27, 45, 0.12);
  color: var(--text);
  text-decoration: none;
}
body.office-shell .stat::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #C9D4DD;
}
body.office-shell .stat-danger::before { background: var(--bad); }
body.office-shell .stat-warning::before { background: #E0A43A; }
body.office-shell .stat-success::before { background: var(--ok); }
body.office-shell .stat-neutral::before { background: var(--blue); }
body.office-shell .stat-label { font-size: 14px; font-weight: 500; color: #3A5265; line-height: 1.3; padding-right: 18px; }
body.office-shell .stat b { font: 600 46px/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 12px; color: var(--text); }
body.office-shell .stat-danger b { color: var(--bad); }
body.office-shell .stat > .ic { position: absolute; top: 16px; right: 14px; width: 16px; height: 16px; color: #A3B3C0; }
body.office-shell .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 14px; }
body.office-shell .section-head h2 { margin: 0; font: 600 24px/1.2 var(--display); }
body.office-shell .section-head a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; text-decoration: none; }
body.office-shell .issue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.office-shell .issue-card { display: block; padding: 20px 22px; color: var(--text); text-decoration: none; }
body.office-shell .issue-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.office-shell .issue-card h3 { margin: 0; font-size: 17px; font-weight: 600; }
body.office-shell .pct { font: 600 22px/1 var(--display); color: var(--navy); }
body.office-shell .issue-card .muted { margin: 4px 0 14px; font-size: 13.5px; color: var(--muted); }
body.office-shell .progress { height: 8px; border-radius: 99px; background: #E6ECF1; overflow: hidden; }
body.office-shell .progress span { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
body.office-shell .progress.is-complete span { background: var(--ok); }
body.office-shell .progress.is-overdue span { background: linear-gradient(90deg, var(--blue), var(--blue) 78%, var(--bad)); }
body.office-shell .issue-foot { display: flex; gap: 14px; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
body.office-shell .issue-foot b { color: var(--text); font-weight: 600; }
body.office-shell .content h2 { font-family: var(--display); font-weight: 600; }
body.office-shell .content > h1,
body.office-shell .content h1 { font: 600 40px/1.05 var(--display); color: var(--text); }

@media (max-width: 1199px) {
  body.office-shell { --rail-w: 92px; }
  body.office-shell .rail { padding: 16px 10px; }
  body.office-shell .brand { flex-direction: column; gap: 6px; padding: 0 0 14px; margin: 0 -10px 14px; justify-content: center; }
  body.office-shell .brand-logo { height: 40px; }
  body.office-shell .brand-product { display: none; }
  body.office-shell .brand-text { align-items: center; }
  body.office-shell .brand-mode { font-size: 9.5px; letter-spacing: 0.12em; margin: 0; }
  body.office-shell .rail-cta { min-height: 52px; flex-direction: column; gap: 2px; font-size: 10.5px; padding: 6px; text-align: center; }
  body.office-shell .nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 62px; padding: 6px 4px; font-size: 11px; text-align: center; }
  body.office-shell .nav-item[aria-current="page"]::before { left: -10px; }
  body.office-shell .nav-item .count { position: absolute; top: 4px; right: 8px; margin: 0; min-width: 18px; height: 18px; font-size: 10px; line-height: 18px; }
  body.office-shell .nav-group .ic-chevron { display: none; }
  body.office-shell .nav-group { position: relative; }
  body.office-shell .subnav {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    margin: 0;
    min-width: 200px;
    padding: 8px;
    background: var(--rail);
    border: 1px solid var(--rail-line);
    border-radius: 10px;
    z-index: var(--z-bars);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }
  body.office-shell .nav-group[open] .subnav { display: flex; }
  body.office-shell .rail-foot { padding: 12px 8px 0; margin-left: -10px; margin-right: -10px; }
  body.office-shell .account { justify-content: center; padding: 0; }
  body.office-shell .account-text,
  body.office-shell .rail-links,
  body.office-shell .device-quiet span,
  body.office-shell .device-shared-chip span,
  body.office-shell .account-actions .nav-label { display: none; }
  body.office-shell .device-quiet,
  body.office-shell .device-shared-chip { justify-content: center; }
  body.office-shell .account-actions button { justify-content: center; min-height: 44px; padding: 0; }
  body.office-shell .band,
  body.office-shell .content { padding-left: 28px; padding-right: 28px; }
  body.office-shell .shared-strip { padding-left: 28px; padding-right: 28px; }
  body.office-shell .band h1 { font-size: 34px; }
  body.office-shell .band-row,
  body.office-shell .band.band-doc .band-row { flex-direction: column; align-items: flex-start; }
  body.office-shell .band-actions { justify-content: flex-start; }
  body.office-shell .stats { grid-template-columns: repeat(3, 1fr); }
  body.office-shell .engage-metrics .m b { font-size: 34px; }
  body.office-shell .split { grid-template-columns: 1fr; }
  body.office-shell table.data th,
  body.office-shell table.data td { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 767px) {
  body.office-shell { padding-bottom: 76px; --rail-w: 0px; }
  body.office-shell .only-compact,
  body.office-shell a.btn.only-compact { display: inline-flex; }
  body.office-shell .rail { display: none; width: min(300px, calc(100vw - 64px)); }
  body.office-shell .rail.is-open {
    display: flex;
    --rail-w: 300px;
    width: min(300px, calc(100vw - 64px));
    z-index: var(--z-rail-open);
  }
  body.office-shell .rail.is-open .brand { flex-direction: row; justify-content: flex-start; }
  body.office-shell .rail.is-open .brand-product,
  body.office-shell .rail.is-open .account-text,
  body.office-shell .rail.is-open .rail-links,
  body.office-shell .rail.is-open .device-quiet span,
  body.office-shell .rail.is-open .device-shared-chip span,
  body.office-shell .rail.is-open .account-actions .nav-label,
  body.office-shell .rail.is-open .nav-group .ic-chevron { display: flex; }
  body.office-shell .rail.is-open .brand-text { align-items: flex-start; }
  body.office-shell .rail.is-open .nav-item { flex-direction: row; min-height: 46px; font-size: 15px; text-align: left; justify-content: flex-start; }
  body.office-shell .rail.is-open .rail-cta { flex-direction: row; font-size: 15px; min-height: 46px; }
  body.office-shell .rail.is-open .account { justify-content: flex-start; }
  body.office-shell .rail.is-open .account-actions button { justify-content: flex-start; padding: 0 12px; }
  body.office-shell .rail.is-open .subnav { position: static; display: flex; background: transparent; box-shadow: none; border: 0; border-left: 1px solid var(--rail-line); min-width: 0; }
  body.office-shell .office-main { margin-left: 0; }
  body.office-shell .mtop {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: var(--z-bars);
    min-height: 60px;
    padding: 0 8px 0 14px;
    background: var(--rail);
    color: #fff;
  }
  body.office-shell .mbrand img { height: 38px; width: auto; display: block; }
  body.office-shell .mtop-issue {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  body.office-shell .mmenu {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-left: auto;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
  }
  body.office-shell .mtop-issue + .mmenu { margin-left: 0; }
  body.office-shell .mdock {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 72px;
    background: var(--rail);
    border-top: 1px solid var(--rail-line);
    z-index: var(--z-bars);
    padding: 0;
  }
  body.office-shell .mdock a,
  body.office-shell .mdock button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    color: #93A8B8;
    font: 500 11.5px/1.2 var(--ui);
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0;
    padding: 0;
    box-shadow: none;
  }
  body.office-shell .mdock .ic { width: 22px; height: 22px; }
  body.office-shell .mdock a[aria-current="page"],
  body.office-shell .mdock button[aria-expanded="true"] { color: #fff; }
  body.office-shell .mdock a[aria-current="page"] .ic { color: var(--cyan); }
  body.office-shell .mdock .count {
    position: absolute;
    top: 8px;
    left: calc(50% + 6px);
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cyan);
    color: var(--rail);
    font: 700 10.5px/18px var(--ui);
    text-align: center;
  }
  body.office-shell .shared-strip { padding: 10px 16px; font-size: 13.5px; }
  body.office-shell .band { padding: 22px 16px 0; }
  body.office-shell .band.band-home {
    padding-bottom: 84px;
    background-image:
      linear-gradient(180deg, rgba(10, 27, 45, 0.35), rgba(10, 27, 45, 0.9) 75%),
      url("img/office-band-900.jpg");
    background-size: cover, cover;
    background-position: center, 68% 50%;
  }
  body.office-shell .band:not(.band--plain):not(.band-home) {
    background-image:
      linear-gradient(180deg, rgba(10, 27, 45, 0.55), rgba(10, 27, 45, 0.92) 70%),
      url("img/office-band-900.jpg");
    background-size: cover, auto 135%;
    background-position: center, 74% 60%;
  }
  body.office-shell .band h1,
  body.office-shell .content h1 { font-size: 32px; }
  body.office-shell .band.band-home h1 { font-size: 34px; }
  body.office-shell .band.band-doc h1 { font-size: 27px; line-height: 1.1; }
  body.office-shell .band-home .band-actions-left { display: grid; grid-template-columns: 1fr 1fr; }
  body.office-shell .band-actions { width: 100%; }
  body.office-shell .band-actions .btn,
  body.office-shell .band-actions .more-menu { width: 100%; }
  body.office-shell .content { padding: 16px 16px 28px; }
  body.office-shell .content-home { margin-top: -64px; }
  body.office-shell .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.office-shell .stat { min-height: 108px; padding: 14px; }
  body.office-shell .stat b { font-size: 38px; }
  body.office-shell .issue-grid { grid-template-columns: 1fr; }
  body.office-shell .toolbar { flex-direction: column; align-items: stretch; }
  body.office-shell .chips { flex-wrap: nowrap; overflow-x: auto; }
  body.office-shell .chip { flex: 0 0 auto; }
  body.office-shell .table-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  body.office-shell table.data thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  body.office-shell table.data,
  body.office-shell table.data tbody { display: block; width: auto; overflow: visible; }
  body.office-shell table.data tr {
    display: block;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  body.office-shell table.data td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 6px 0;
    border: 0;
    white-space: normal;
  }
  body.office-shell table.data td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  body.office-shell table.inbox-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "who status" "type type" "when open";
    gap: 8px 10px;
  }
  body.office-shell table.inbox-table .c-who { grid-area: who; }
  body.office-shell table.inbox-table .c-status { grid-area: status; justify-content: flex-end; }
  body.office-shell table.inbox-table .c-type { grid-area: type; padding-left: 44px; }
  body.office-shell table.inbox-table .c-when { grid-area: when; padding-left: 44px; }
  body.office-shell table.inbox-table .c-when b { display: inline; font-weight: 500; color: var(--muted); }
  body.office-shell table.inbox-table .c-open { grid-area: open; justify-content: flex-end; }
  body.office-shell .engage-metrics { grid-template-columns: 1fr 1fr; gap: 12px 0; }
  body.office-shell .m { border-left: 0; padding: 0 4px; }
  body.office-shell .m b { font-size: 32px; }
  body.office-shell .filters .btn { flex: 1 1 100%; }
  body.office-shell .bulk .select,
  body.office-shell .bulk .input,
  body.office-shell .bulk .btn { flex: 1 1 100%; }
  body.office-shell .table-foot { display: block; }
  body.office-shell .band-home .band-actions-left .more-menu { grid-column: 1 / -1; }
  body.office-shell .band-home .more-panel { left: 0; right: 0; min-width: 0; }
  body.office-shell table.inbox-table tr { grid-template-columns: minmax(0, 1fr) auto; }
  body.office-shell table.inbox-table td { min-width: 0; }
  body.office-shell table.inbox-table td::before { content: none; }
  body.office-shell .kv { grid-template-columns: 1fr; }
  body.office-shell .kv dd { border-top: 0; padding-top: 0; min-height: 0; }
}

/* Finishing kit. Shared office controls and a light driver refresh. */
body.office-shell .more-panel { min-width: 240px; border-radius: 10px; }
body.office-shell .more-panel a { min-height: 42px; }
body.office-shell table.data th { vertical-align: middle; padding: 12px 18px; height: 44px; }
body.office-shell table.data td { vertical-align: middle; padding: 12px 18px; }
body.office-shell table.data.dense td { height: 56px; }
body.office-shell table.data th[scope="row"] {
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
  font: 600 14px/1.4 var(--ui);
  color: var(--text);
  width: 40%;
  min-width: 240px;
}
body.office-shell .filters,
body.office-shell .toolbar { margin-bottom: 16px; }
body.office-shell .pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
body.office-shell .check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  border-radius: var(--r-ctl);
  font: 500 14.5px/20px var(--ui);
  color: var(--text);
  cursor: pointer;
}
body.office-shell .check:hover { background: var(--surface-2); }
body.office-shell .check input[type="checkbox"],
body.office-shell .check input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  flex: none;
  accent-color: var(--blue);
}
body.office-shell .check .meta { color: var(--muted); margin-left: 6px; font-weight: 400; }
body.office-shell .check .desc { display: block; font-size: 12.5px; color: var(--muted); }
body.office-shell .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 8px; }
body.office-shell .nested { margin: 0 0 6px 44px; max-width: 280px; }
body.office-shell .kv { display: grid; grid-template-columns: minmax(240px, 40%) 1fr; margin: 0; }
body.office-shell .kv > div { display: contents; }
body.office-shell .kv dt,
body.office-shell .kv dd {
  min-height: 52px;
  padding: 14px 24px;
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.office-shell .kv dt { font: 600 14px/1.4 var(--ui); color: var(--text); }
body.office-shell .kv dt code,
body.office-shell .mono-faint {
  font: 400 11.5px/1.4 ui-monospace, Consolas, monospace;
  color: var(--faint);
}
body.office-shell .kv dd .help { font-size: 13px; color: var(--muted); }
body.office-shell .card-head { padding: 18px 24px; border-bottom: 1px solid var(--line); }
body.office-shell .card-head h2 { margin: 0; font: 600 24px/1.2 var(--display); }
body.office-shell .card-secondary { background: var(--surface-2); }
body.office-shell .card-secondary .card-head h2 { color: var(--muted); font-size: 18px; }
body.office-shell .pill { text-transform: none; }
body.office-shell .pill.ok { color: var(--ok); background: var(--ok-bg); }
body.office-shell .pill.warn { color: var(--warn); background: var(--warn-bg); }
body.office-shell .pill.bad { color: var(--bad); background: var(--bad-bg); }
body.office-shell .pill.info { color: var(--info); background: var(--info-bg); }
.chip-test {
  display: inline-flex;
  align-items: center;
  background: #FDF1DC;
  color: #9A5B00;
  border: 1px solid #F1D29D;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font: 600 12px/22px var(--ui, "Inter", system-ui, sans-serif);
}
body.office-shell .empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
body.office-shell .btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
body.office-shell .report-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
body.office-shell .report-row span { color: var(--muted); font-size: 13px; font-weight: 400; }

body.driver-app {
  --line: #DFE6EC;
  --ui: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
  --muted: #5B6E7C;
  --faint: #8A9AA7;
  --text: #0F1E2B;
  --blue-700: #156A96;
  --cyan: #4EB8E3;
  --bad: #B4342C;
  --navy: #0C2238;
  font-family: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
body.driver-app h1,
body.driver-app .sec-h h2,
body.driver-app .hub-primary > h2,
body.driver-app .hub-primary > section > h2,
body.driver-app .hub-personal > h2,
body.driver-app .home-resources > h2,
body.driver-app .home-history > h2 {
  font-family: "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
  font-weight: 600;
}
body.driver-app .site-header {
  height: 64px;
  padding: 0 24px;
  gap: 20px;
  display: flex;
  align-items: center;
}
body.driver-app .driver-logo { height: 34px; width: auto; display: block; }
body.driver-app .driver-brand-title {
  font: 600 19px/1 "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
  color: #fff;
}
body.driver-app .nav a {
  min-height: 44px;
  border-radius: 22px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
}
body.driver-app .nav a[aria-current="page"] {
  background: rgba(78, 184, 227, 0.16);
  box-shadow: inset 0 0 0 1px var(--cyan, #4EB8E3);
}
body.driver-app .driver-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
}
body.driver-app .driver-who .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
}
body.driver-app .btn-change-driver,
body.driver-app .user-form-inline .btn-change-driver {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  min-height: 44px;
  font-weight: 600;
  font-size: 14px;
}
body.driver-app .btn-change-driver:hover,
body.driver-app .user-form-inline .btn-change-driver:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.driver-app .home-welcome.sy-hero {
  border-radius: 16px;
  min-height: 220px;
  padding: 28px 32px;
}
body.driver-app .home-welcome.sy-hero h1 { font-size: 46px; line-height: 1.05; }
body.driver-app .unit-plate {
  min-height: 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
body.driver-app .hub-primary > h2,
body.driver-app .hub-primary > section > h2,
body.driver-app .hub-personal > h2,
body.driver-app .home-resources > h2,
body.driver-app .home-history > h2 {
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.driver-app .count-chip {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--bad, #B4342C);
  color: #fff;
  font: 600 13px/1 "Inter", system-ui, sans-serif;
}
body.driver-app .sy-action {
  display: grid;
  gap: 6px;
  min-height: 88px;
  padding: 18px 18px 18px 24px;
  border-radius: 14px;
  border-left-width: 6px;
}
body.driver-app .sy-action h2 { font-size: 18px; font-weight: 600; }
body.driver-app .need-urgent,
body.driver-app .sy-action.is-urgent {
  background: #FFFAF9;
  border: 1px solid #F3D3CF;
  border-left: 6px solid var(--bad, #B4342C);
}
body.driver-app .req-label,
body.driver-app .status-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 0;
  padding: 0 10px;
  border-radius: 13px;
  font: 600 13px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0;
  color: #536779;
  background: #F1F4F7;
  width: fit-content;
}
body.driver-app .status-pill.bad,
body.driver-app .req-label.bad { color: var(--bad, #B4342C); background: #FBE9E7; }
body.driver-app .status-pill.info,
body.driver-app .req-label.info { color: #15608C; background: #E5F1F9; }
body.driver-app .status-pill.warn,
body.driver-app .req-label.warn { color: #9A5B00; background: #FDF1DC; }
body.driver-app .sy-dock {
  height: 72px;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}
body.driver-app .sy-dock a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 8px 2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
body.driver-app .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.driver-app .sy-dock .ic { width: 24px; height: 24px; }
body.driver-app .sy-dock a[aria-current="page"] { color: #fff; }
body.driver-app .sy-dock a[aria-current="page"] .ic { color: var(--cyan, #4EB8E3); }
body.driver-app .card,
body.driver-app .sy-panel { border-radius: 14px; padding: 20px; }
body.driver-app .btn { min-height: 48px; border-radius: 10px; font-weight: 600; font-size: 16px; }
body.driver-app .btn:disabled { background: #A9CDE3; }
body.driver-app .driver-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 15px;
}
body.driver-app .pdf-wrap { border-radius: 14px; overflow: hidden; border: 1px solid #DFE6EC; margin: 12px 0; }
body.driver-app .pdf-bar {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #F6F8FA;
  font-weight: 600;
}
body.driver-app .pdf-frame { border-radius: 0; display: block; width: 100%; }
body.driver-app .check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 14px;
  border: 1px solid #DFE6EC;
  border-radius: 10px;
  font: 600 16px/24px "Inter", system-ui, sans-serif;
}
body.driver-app .check input[type="checkbox"],
body.driver-app .check input[type="radio"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  accent-color: #1C86C1;
}
body.driver-app .sign-pad { height: 180px; border-style: dashed; }
body.driver-app #typed_name { min-height: 52px; font-size: 16px; }
body.driver-app .help,
body.driver-app .meta { color: var(--muted, #5B6E7C); }
body.driver-app .assignment-title { font-size: 34px; }
@media (max-width: 899px) {
  body.driver-app .site-header {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 12px;
    gap: 6px 8px;
  }
  body.driver-app .brand-lockup { min-width: 0; }
  body.driver-app .driver-session {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  body.driver-app .driver-who { min-width: 0; }
  body.driver-app .driver-who .avatar { width: 28px; height: 28px; font-size: 12px; }
  body.driver-app .btn-change-driver,
  body.driver-app .user-form-inline .btn-change-driver {
    padding: 0 10px;
    font-size: 13px;
    min-height: 40px;
  }
  body.driver-app .driver-logo { height: 28px; }
  body.driver-app .nav { display: none; }
  body.driver-app .home-welcome.sy-hero { min-height: 176px; border-radius: 0; }
  body.driver-app .home-welcome.sy-hero h1 { font-size: 36px; }
  body.driver-app .hub-primary > h2,
  body.driver-app .hub-primary > section > h2,
  body.driver-app .home-resources > h2,
  body.driver-app .home-history > h2 { font-size: 24px; }
  body.driver-app .assignment-title { font-size: 30px; }
  body.driver-app .sy-dock a { min-width: 0; }
}
@media (max-width: 767px) {
  body.office-shell .kv { grid-template-columns: minmax(0, 1fr); }
  body.office-shell .kv dt,
  body.office-shell .kv dd {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 12px 16px;
  }
  body.office-shell table.data th[scope="row"] { min-width: 0; width: auto; }
  body.office-shell .more-panel { min-width: 0; max-width: calc(100vw - 32px); }
  body.office-shell .content,
  body.office-shell .band,
  body.office-shell .office-main,
  body.office-shell .card { min-width: 0; max-width: 100%; }
  body.office-shell table.data { display: block; max-width: 100%; overflow-x: auto; }
}
@media (min-width: 900px) {
  body.driver-app { padding-bottom: 0; }
}


/* MC-002 resources. Tokens and the one card. No per-resource colours. */
body.driver-app,
body.office-shell {
  --res-tile-srh: linear-gradient(145deg, #173A5C 0%, #0C2238 100%);
  --res-tile-srh-fg: #7FD0EF;
  --res-tile-useful: linear-gradient(145deg, #EAF5FB 0%, #D7EAF5 100%);
  --res-tile-useful-fg: #156A96;
  --res-tile-incident: linear-gradient(145deg, #FDF0EE 0%, #F8DEDA 100%);
  --res-tile-incident-fg: #B4342C;
  --res-tile-off: #E9EEF2;
  --res-tile-off-fg: #8A9AA7;
  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px #1C86C1;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.driver-app .sy-dock {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 72px;
  padding: 0;
}
body.driver-app .sy-dock a {
  position: relative;
  min-height: 72px;
  height: 72px;
  padding: 0;
  gap: 3px;
  font: 600 clamp(10.5px, calc((100vw / 6 - 2px) / 5.05), 12px)/1 "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}
body.driver-app .sy-dock .lb {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}
body.driver-app .sy-dock a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 3px;
  background: #4EB8E3;
}
.res {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line, #DFE6EC);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 1px 2px rgba(10, 27, 45, 0.06));
  color: inherit;
  text-decoration: none;
}
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.res-ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  align-self: start;
}
.res-ic .ic { width: 24px; height: 24px; }
.res-ic--srh { background: var(--res-tile-srh); color: var(--res-tile-srh-fg); }
.res-ic--useful { background: var(--res-tile-useful); color: var(--res-tile-useful-fg); }
.res-ic--incident { background: var(--res-tile-incident); color: var(--res-tile-incident-fg); }
.res-ic--off { background: var(--res-tile-off); color: var(--res-tile-off-fg); }
.res-b { min-width: 0; display: grid; gap: 4px; }
.res-t {
  font: 600 17px/1.3 "Inter", system-ui, sans-serif;
  color: #0F2033;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-d {
  font: 400 14.5px/1.4 "Inter", system-ui, sans-serif;
  color: var(--muted, #5B6E7C);
  overflow-wrap: anywhere;
}
.res-clamp-2, .res-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-clamp-2 { -webkit-line-clamp: 2; }
.res-clamp-3 { -webkit-line-clamp: 3; }
.res-m { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font: 600 12.5px/1 "Inter", system-ui, sans-serif; }
.res-m .ic { width: 14px; height: 14px; }
.res--ext .res-m .t, .res--external .res-m .t { color: #156A96; }
.res--protected .res-m .t { color: #B4342C; }
.res--internal .res-m .t, .res--document .res-m .t { color: #3D5163; }
.res--document .res-m .t { color: #0C2238; }
.res-go {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1F5F8;
  color: #3D5163;
  display: grid;
  place-items: center;
}
.res-go .ic { width: 18px; height: 18px; }
.res:hover .res-go, .res:focus-visible .res-go { background: #1C86C1; color: #fff; }
a.res:hover {
  border-color: #B3C5D1;
  box-shadow: 0 2px 4px rgba(10, 27, 45, 0.06), 0 10px 26px rgba(10, 27, 45, 0.10);
}
a.res:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.res--off {
  background: #F6F8FA;
  border-style: dashed;
  box-shadow: none;
}
.res--off .res-t { color: #3D5163; }
.res--off .res-m .t { color: #536779; }
.aud {
  color: #536779;
  background: #F1F4F7;
  border-radius: 11px;
  min-height: 22px;
  padding: 3px 8px;
  font-weight: 600;
}
.res-ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #FDF1DC;
  color: #9A5B00;
  font: 600 11px/1 "Inter", system-ui, sans-serif;
  padding: 4px 8px;
  border-radius: 8px;
}
.res--lg {
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  padding: 18px 16px;
  gap: 16px;
  min-height: 96px;
}
.res--lg .res-ic { width: 56px; height: 56px; border-radius: 14px; }
.res--lg .res-ic .ic { width: 28px; height: 28px; }
.res--lg .res-t { font-size: 19px; line-height: 1.25; }
.res--lg .res-d { font-size: 15px; color: #3D5163; }
.res--lg .res-go { width: 40px; height: 40px; }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-incident {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px 0 6px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  color: #0C2238;
  font: 600 15px/1 "Inter", system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(5, 15, 26, 0.35);
}
.btn-incident-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FBE9E7;
  color: #B4342C;
  display: grid;
  place-items: center;
}
.btn-incident .ic { width: 18px; height: 18px; }
.btn-incident:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-grid { align-items: start; }
.res-band {
  border-radius: 16px;
  min-height: 168px;
  padding: 28px 32px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(10, 27, 45, 0.95) 0%, rgba(10, 27, 45, 0.78) 45%, rgba(10, 27, 45, 0.15) 85%),
    url("img/office-band-1600.jpg") center/cover no-repeat;
}
.res-band h1 { font: 600 42px/1.05 "Barlow Semi Condensed", "Inter", sans-serif; margin: 0 0 8px; }
.res-band p { margin: 0; color: #E7EEF4; }
.inc-entry {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 40px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  margin: 16px 0 22px;
  padding: 18px 16px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(420px 120px at 100% 0%, rgba(78, 184, 227, 0.28), transparent 70%),
    linear-gradient(120deg, #12304D 0%, #0C2238 55%, #0A1B2D 100%);
}
.inc-entry-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FBE9E7;
  color: #B4342C;
  display: grid;
  place-items: center;
}
.inc-entry-t { display: block; font: 600 22px/1.15 "Barlow Semi Condensed", "Inter", sans-serif; }
.inc-entry-d { display: block; color: #C8D6E2; font-size: 14.5px; margin-top: 4px; }
.inc-entry-go {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
}
.inc-entry:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.res-group { margin-top: 22px; }
.res-group h2 { font: 600 24px/1.15 "Barlow Semi Condensed", "Inter", sans-serif; }
.res-count { font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--muted, #5B6E7C); }
.res-empty {
  margin-top: 18px;
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed #C9D5DF;
  border-radius: 14px;
  background: #fff;
}
.res-empty .res-ic { margin: 0 auto 10px; }
.incident-wrap { max-width: 820px; }
.inc-steps { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.inc-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: #fff;
  border: 1px solid #DFE6EC;
  border-left: 6px solid #0C2238;
  border-radius: 14px;
}
.inc-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0C2238;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
}
.inc-fine { display: flex; gap: 8px; align-items: flex-start; color: var(--muted, #5B6E7C); font-size: 14px; }
.inc-guide-kicker { letter-spacing: 0.06em; text-transform: uppercase; font: 600 12px/1 "Inter", system-ui, sans-serif; color: #5B6E7C; }
.rfilters { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.rpills { display: flex; gap: 8px; flex-wrap: wrap; }
.rpills a {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #DFE6EC;
  text-decoration: none;
  color: #0F1E2B;
  font-weight: 600;
}
.rpills a[aria-current="page"] { background: #0C2238; color: #fff; }
.rspots { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rgroup { margin: 18px 0; }
.rgroup-h { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.rrow {
  display: grid;
  grid-template-columns: 60px 40px minmax(0, 1fr) 140px 120px 44px 130px minmax(150px, auto);
  gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #DFE6EC;
  border-radius: 14px;
  margin-top: 8px;
}
.rrow-order { display: grid; gap: 4px; }
.icon-btn, .star-btn {
  width: 44px;
  height: 28px;
  border: 1px solid #DFE6EC;
  border-radius: 8px;
  background: #fff;
  color: #3D5163;
}
.star-btn.is-on { color: #E3A21A; }
.rrow-tile { width: 40px; height: 40px; }
.rrow-tile .ic { width: 20px; height: 20px; }
.rrow-dest { font-family: ui-monospace, "Cascadia Code", monospace; font-size: 12px; margin: 2px 0; overflow-wrap: anywhere; }
.rrow-need { color: #9A5B00; font-weight: 600; margin: 2px 0; }
.pubsw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: #0F1E2B;
}
.pubsw-knob {
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: #C9D5DF;
  position: relative;
}
.pubsw-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.pubsw.is-on .pubsw-knob { background: #1C86C1; }
.pubsw.is-on .pubsw-knob::after { left: 18px; }
.rrow-actions { display: flex; gap: 8px; align-items: center; }
.rrow-more { position: relative; }
.rrow-more summary { list-style: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer; }
.rrow-menu {
  position: absolute;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #DFE6EC;
  border-radius: 12px;
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 10px 26px rgba(10, 27, 45, 0.12);
}
.rrow-menu a, .rrow-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px; font-weight: 600; color: inherit; }
.redit { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.redit-preview { position: sticky; top: 16px; }
.icon-pick { display: grid; grid-template-columns: repeat(8, 52px); gap: 8px; }
.icon-pick-item input { position: absolute; opacity: 0; }
.icon-pick-item span {
  width: 52px;
  height: 52px;
  border: 1px solid #DFE6EC;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
}
.icon-pick-item input:checked + span { border-color: #1C86C1; box-shadow: inset 0 0 0 2px #1C86C1; }
.icon-pick-item input:focus-visible + span { box-shadow: var(--focus-ring); }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-card { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid #DFE6EC; border-radius: 12px; background: #fff; }
.type-card:has(input:checked) { border-color: #1C86C1; box-shadow: inset 0 0 0 1px #1C86C1; }
.group-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.switch-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #DFE6EC; }
.lockbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #DFE6EC;
  border-left: 5px solid #0C2238;
  border-radius: 14px;
}
.input.ro { background: #F6F8FA; border-radius: 10px; padding: 10px 12px; }
.lock-note { background: #FBE9E7; color: #8E2A24; padding: 10px 12px; border-radius: 10px; }
.preview-one { max-width: 560px; }
@media (max-width: 899px) {
  .res-band {
    background: none;
    color: inherit;
    min-height: 0;
    padding: 0;
    border-radius: 0;
  }
  .res-band h1 { color: #0F1E2B; font-size: 34px; }
  .res-band p { color: var(--muted, #5B6E7C); }
  .btn-incident { min-height: 46px; }
  .redit { grid-template-columns: 1fr; }
  .icon-pick { grid-template-columns: repeat(4, 52px); }
  .rrow { grid-template-columns: 40px minmax(0, 1fr); }
  .rrow > form { grid-column: 1 / -1; min-width: 0; }
  .rrow-order, .rrow-type, .rrow-who, .rrow-actions, .pubsw, .star-btn { grid-column: 1 / -1; }
  .rgroup-h .chip {
    display: block;
    max-width: 100%;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media (max-width: 370px) {
  .res { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 12px; padding: 12px; }
  .res-ic { width: 44px; height: 44px; }
  .res-go { width: 32px; height: 32px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .driver-resources .res-band {
    background:
      linear-gradient(90deg, rgba(10, 27, 45, 0.95) 0%, rgba(10, 27, 45, 0.78) 45%, rgba(10, 27, 45, 0.15) 85%),
      url("img/office-band-900.jpg") center/cover no-repeat;
  }
}
@media (min-width: 900px) {
  .res-list.two, .res-group .res-list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .driver-resources .res-band { display: block; }
}
@media (max-width: 899px) {
  .res-group .res-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  a.res:hover { transform: none; }
}

/* MC-002 Job 2R fidelity. Selectors stay scoped as reviewed. */
body.driver-app .sy-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--cyan);box-shadow:var(--shadow-sm);padding:18px 18px 18px 24px}
body.driver-app .sy-action h2{margin:0;font:600 18px/1.3 var(--ui)}
body.driver-app .sy-action .due{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 0;color:var(--muted);font-size:14.5px}
body.driver-app .sy-action .go .ic{width:20px;height:20px;color:var(--faint)}
body.driver-app .sy-action.is-urgent{background:#FFFAF9;border-color:#F3D3CF;border-left-color:var(--bad)}
body.driver-app .sy-panel.card.row-list{padding:14px 18px}
body.driver-app .row-list{padding:14px 18px}
body.driver-app .row-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
body.driver-app .row-item:first-child{border-top:0;padding-top:0}
body.driver-app .row-item strong{display:block;font:600 15.5px/1.35 var(--ui)}
body.driver-app .row-item .meta{display:block;font-size:13.5px;margin-top:2px}
body.driver-app .row-item.is-unread strong::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px;vertical-align:2px}
body.driver-app .linkrow,body.driver-app .linkrow a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 15px/1 var(--ui);color:var(--blue-700);text-decoration:none}
body.driver-app .linkrow .ic{width:18px;height:18px}
body.driver-app .linkrow.sep{display:flex;border-top:1px solid var(--line);margin-top:6px;padding-top:6px;min-height:50px}
@media (max-width:899px){body.driver-app .home-welcome.sy-hero{padding:20px 16px 18px}body.driver-app .hero-row p{margin:0}}
body.driver-app .sy-dock .nav-count{position:absolute;top:9px;left:calc(50% + 6px);margin:0;min-width:17px;height:17px;padding:0 4px;font:700 10.5px/17px var(--ui);border-radius:9px;background:var(--cyan);color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.inc-step > span:last-child{display:grid;gap:2px}
.inc-step strong{display:block;font:600 17px/1.3 var(--ui);color:var(--text)}
.inc-step .meta{display:block;font-size:15px;color:#3D5163}
.incident-wrap > h1{font:600 38px/1.05 var(--display);margin:6px 0 4px}
@media (max-width:899px){.incident-wrap > h1{font-size:34px}}
body.office-shell .redit fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
body.office-shell .redit legend{padding:0;margin:0 0 6px;font:600 13px/1.3 var(--ui);color:#22384A}
body.office-shell .type-card{min-height:64px;align-items:flex-start;cursor:pointer}
body.office-shell .type-card > span{display:grid;gap:2px;min-width:0}
body.office-shell .type-card strong{display:block;font:600 14px/1.3 var(--ui);color:var(--text)}
body.office-shell .type-card .meta{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
body.office-shell .type-card input[type=radio]{accent-color:var(--blue);margin:2px 0 0;flex:none}
body.office-shell .type-card:has(input:disabled){opacity:.6;cursor:default}
body.office-shell .redit .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
body.office-shell .redit .field select,
body.office-shell .redit .field textarea{display:block;width:100%;box-sizing:border-box;padding:0 12px;border-radius:10px}
body.office-shell .redit .field textarea{padding:10px 12px;min-height:88px}
body.office-shell .redit .field > .label{display:block;margin:0 0 6px;font:600 13px/1.3 var(--ui);color:#22384A}
body.office-shell .switch-row > span{display:grid;gap:2px;font:600 14px/1.3 var(--ui)}
body.office-shell .switch-row > span .meta{font-weight:400;font-size:12.5px;color:var(--muted)}
body.office-shell .switch-row input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:46px;height:26px;margin:0;border-radius:13px;background:#C9D5DF;cursor:pointer;transition:background .15s}
body.office-shell .switch-row input[type=checkbox]::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(10,30,50,.3);transition:left .15s}
body.office-shell .switch-row input[type=checkbox]:checked{background:var(--blue)}
body.office-shell .switch-row input[type=checkbox]:checked::before{left:23px}
body.office-shell .switch-row input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
body.office-shell .switch-row input[type=checkbox]:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){body.office-shell .switch-row input[type=checkbox],body.office-shell .switch-row input[type=checkbox]::before{transition:none}}
body.office-shell .form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.office-shell .form-actions .meta{margin:0 0 0 6px}
body.office-shell .form-actions .btn-danger-ghost{margin-left:auto}
body.office-shell button.btn.btn-danger-ghost{background:#fff;color:var(--bad);border:1px solid #EBC3BE}
body.office-shell button.btn.btn-danger-ghost:hover{background:var(--bad-bg);border-color:#EBC3BE;color:var(--bad)}
.pv-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:sticky;top:20px}
.pv-h{display:flex;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font:600 14px/1.3 var(--ui)}
.pv-body{background:#EEF2F6;padding:16px 18px;display:grid;gap:8px}
.pv-lab{margin:6px 0 0;font:700 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-who{margin:0;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
body.office-shell .input.ro{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;background:var(--surface-2);color:var(--text)}
body.office-shell .input.ro > span{min-width:0;overflow-wrap:anywhere}
body.office-shell .input.ro .ic{width:16px;height:16px;color:var(--muted)}
body.office-shell .input.ro .ic:last-child{margin-left:auto}
.lock-note{display:flex;gap:8px;align-items:flex-start;background:#F1F5F8;border:1px solid #D5E0E8;color:#22384A;padding:10px 12px;border-radius:10px}
.lock-note .ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted)}
.rrow-dest--doc{font-family:var(--ui);font-size:13px;display:flex;gap:6px;align-items:center}
.icon-btn:disabled{opacity:.35;cursor:default}

/* Trial TEST MODE banner (trial install only) */
.trial-badge{display:inline-flex;align-items:center;flex:0 0 auto;align-self:center;margin:0 .4rem;padding:.1rem .4rem;border-radius:999px;background:#6b7280;color:#fff;font-size:.625rem;font-weight:600;line-height:1.2;letter-spacing:.04em;white-space:nowrap;vertical-align:middle}
.rail .trial-badge{margin:.35rem 0 0 .25rem}
@media (max-width:900px){.site-header{position:relative}.site-header>.trial-badge{position:absolute;top:.3rem;right:.5rem;margin:0}}