/* Amarine One — the shared burgundy presentation layer.
   Loaded last, after feature styles. Screen-only geometry keeps signed documents
   and invoice print layouts intact. The product's original SVG is never replaced. */
:root {
  --sidebar-top: #642b3a;
  --sidebar-bottom: #401d2a;
  --sidebar-ink: #fff7fa;
  --sidebar-muted: #dfc1cd;
  --sidebar-line: rgba(255, 238, 245, .13);
  --sidebar-hover: rgba(255, 238, 245, .09);
  --sidebar-active: rgba(234, 173, 196, .23);
  --button-fill: #7b2946;
  --button-fill-hover: #642038;
  --button-ink: #ffffff;
  --row-hover: #fcf5f7;
  --row-selected: #f7eaf0;
  --avatar-fill: #f0dfe6;
  --avatar-ink: #7b3c54;
  --border: var(--line);
  --line-100: var(--line);
  --danger: var(--bad);
  --accent: var(--primary);
  --bg-sunken: var(--surface-alt);
  --p-info: var(--primary);
  --portal-header-height: 3.5rem;
}
:root[data-theme="dark"] {
  --sidebar-top: #361d29;
  --sidebar-bottom: #291720;
  --button-fill: #963b5c;
  --button-fill-hover: #ab4b6d;
  --row-hover: #332630;
  --row-selected: #442b38;
  --avatar-fill: #51323f;
  --avatar-ink: #f0bdd0;
}

@media screen {
  html { scroll-padding-top: calc(var(--portal-header-height) + 1rem); }
  body, :root[data-theme="dark"] body { background: var(--surface-soft); }
  body { font-size: .875rem; line-height: 1.45; -webkit-font-smoothing: antialiased; }
  button, input, select, textarea { font-family: var(--font-body); }
  ::selection { background: var(--surface-blue); color: var(--primary-dark); }
  .portal-shell { --nav-w: 240px; }
  .portal-shell::before { display: none; }
  .workspace { min-width: 0; width: 100%; }
  .content-area { max-width: 1680px; gap: 1.15rem; padding: 1.55rem 1.75rem 2rem; }
  .content-area.content-wide { max-width: none; }
  .content-area > *, .dashboard-columns > *, .planner-split > * { min-width: 0; }

  /* Permanent navigation and its mobile drawer share the same brand surface. */
  .drawer {
    padding: calc(1rem + env(safe-area-inset-top)) .9rem 1rem;
    color: var(--sidebar-ink);
    background: linear-gradient(160deg, var(--sidebar-top), var(--sidebar-bottom) 90%);
    border-right: 1px solid rgba(112, 47, 70, .35);
    box-shadow: 8px 0 30px rgba(55, 20, 34, .12);
  }
  .drawer-head, .nav-docked .drawer-head { align-items: center; padding: .1rem .4rem 1.05rem; }
  .drawer-brand { gap: .55rem; }
  .drawer-brand strong { font-size: 1.05rem; font-weight: 650; letter-spacing: -.025em; }
  .drawer-brand small { color: var(--sidebar-muted); font-size: .7rem; }
  .drawer .brand-mark-logo, .drawer .brand-mark-logo .mark { color: #ffffff; }
  .drawer .brand-mark.small { width: 2.1rem; height: 2.1rem; }
  .drawer-close { color: var(--sidebar-muted); }
  .drawer-close:hover { color: white; background: var(--sidebar-hover); }
  .drawer-groups { gap: .15rem; }
  .drawer-group, .nav-docked .drawer-group { padding-bottom: .55rem; }
  .drawer-group-label { padding: .75rem .65rem .4rem; color: var(--sidebar-muted); font-size: .62rem; font-weight: 600; letter-spacing: .11em; }
  .drawer-link, .nav-fold-head { gap: .7rem; padding-inline: .65rem; border-radius: 9px; color: var(--sidebar-ink); font-size: .82rem; font-weight: 450; }
  .drawer-link .icon, .nav-fold-head .icon, .nav-chevron { color: var(--sidebar-muted); width: 1.08rem; height: 1.08rem; }
  .drawer-link:hover, .nav-fold-head:hover { color: #fff; background: var(--sidebar-hover); }
  .drawer-link.active, .drawer-link.nav-sub.active,
  .nav-fold.has-active > .nav-fold-head { color: #fff; font-weight: 650; }
  .drawer-link.active, .nav-fold.has-active:not(.is-open) > .nav-fold-head {
    background: var(--sidebar-active);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 14px rgba(32, 8, 19, .08);
  }
  .drawer-link.active .icon, .nav-fold.has-active > .nav-fold-head .icon { color: #fff; }
  .nav-fold-inner { background-image: linear-gradient(var(--sidebar-line), var(--sidebar-line)); }
  .drawer-link.nav-sub { min-height: 2.2rem; font-size: .78rem; }
  .drawer-link.nav-sub.active::before { background: #f4bfd1; box-shadow: 0 0 0 2px var(--sidebar-top); }
  .drawer-link:focus-visible, .nav-fold-head:focus-visible, .portal-switch:focus-visible,
  a.nav-workspace:focus-visible, .drawer-close:focus-visible { outline: 2px solid #f4bfd1; outline-offset: -2px; }
  .nav-docked .drawer-groups { scrollbar-color: #a66f83 transparent; }
  .nav-workspace, .portal-switch { color: var(--sidebar-ink); }
  .nav-workspace-text small { color: var(--sidebar-muted); }
  .nav-workspace-top { margin: 0 .1rem .65rem; padding: .7rem .5rem .85rem; border-bottom: 1px solid var(--sidebar-line); border-radius: 0; }
  .nav-workspace-top .brand-mark { width: 1.7rem; height: 1.7rem; border-radius: 7px; background: rgba(255, 242, 247, .1); font-size: .66rem; }
  .nav-workspace-top .nav-workspace-text strong { font-size: .78rem; font-weight: 600; }
  .nav-workspace-top .nav-workspace-text small { font-size: .68rem; }
  a.nav-workspace:hover, .portal-switch:hover { background: var(--sidebar-hover); }
  .drawer-footer { gap: .25rem; border-top-color: var(--sidebar-line); padding-top: .55rem; }
  .drawer-footer .portal-switch { padding-left: .65rem; font-size: .76rem; font-weight: 500; }
  .drawer-footer .button-ghost { color: var(--sidebar-muted); border-color: var(--sidebar-line); font-size: .78rem; box-shadow: none; }
  .drawer-footer .button-ghost:hover { color: #fff; border-color: var(--sidebar-muted); }
  .nav-user { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .65rem .35rem .15rem; margin-top: .3rem; border-top: 1px solid var(--sidebar-line); }
  .nav-user-avatar { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #a86b82; color: white; font-size: .7rem; font-weight: 650; }
  .nav-user-text { min-width: 0; }
  .nav-user-text strong, .nav-user-text small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .nav-user-text strong { font-size: .74rem; font-weight: 600; }
  .nav-user-text small { margin-top: .1rem; color: var(--sidebar-muted); font-size: .65rem; }
  .drawer-preference { color: var(--sidebar-ink); }
  .drawer-preference .theme-toggle { color: var(--sidebar-ink); background: var(--sidebar-hover); border-color: var(--sidebar-line); }
  .drawer-scrim { background: rgba(28, 14, 23, .5); backdrop-filter: blur(3px); }

  /* The title belongs to the page; the slim glass bar holds workspace context. */
  .topbar, :root[data-theme="dark"] .topbar { min-height: var(--portal-header-height); justify-content: flex-start; gap: .8rem; padding: .55rem 1.75rem; border-bottom-color: var(--line); background: transparent; }
  .topbar::before { background: color-mix(in srgb, var(--surface-soft) 88%, transparent); backdrop-filter: blur(18px); }
  .topbar-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; min-width: 0; margin-right: auto; font-size: .76rem; }
  .breadcrumb-workspace { color: var(--ink-500); }
  .breadcrumb-current { color: var(--ink-900); font-weight: 650; }
  .topbar-title p { font-size: .76rem; }
  .topbar-controls { gap: .55rem; }
  .theme-toggle, .topbar-signout { border-radius: 9px; width: 2.15rem; height: 2.15rem; background: transparent; border-color: transparent; box-shadow: none; }
  .topbar-signout { width: auto; min-height: 2.15rem; padding: .35rem .55rem; font-size: .73rem; }
  .theme-toggle:hover, .topbar-signout:hover { background: var(--surface); border-color: var(--line); }
  .user-chip { background: var(--avatar-fill); color: var(--avatar-ink); border-color: transparent; font-size: .72rem; font-weight: 600; }
  .organisation-label { font-size: .72rem; }
  .page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
  .page-heading h1 { margin: 0; color: var(--ink-900); font-size: 1.85rem; line-height: 1.15; font-weight: 700; letter-spacing: -.045em; }
  .page-heading p { margin: .3rem 0 0; color: var(--ink-500); font-size: .86rem; }
  .page-date { color: var(--ink-500); font-size: .75rem; font-variant-numeric: tabular-nums; }
  .page-actions { gap: .75rem; }
  .page-actions h2 { font-size: 1.25rem; letter-spacing: -.025em; }
  .panel-header h3 { font-size: .99rem; font-weight: 650; letter-spacing: -.02em; }
  .preview-banner { color: var(--warn); border-bottom-color: var(--warn-line); padding: .55rem 1.75rem; font-size: .76rem; }

  /* Quiet white panels, rounded controls and compact, readable records. */
  .panel, .finding-card, .driver-primary-card, .driver-side-card, .mobile-section, .quick-action,
  .side-card, .metric-card, .configuration-card { border-color: var(--line); box-shadow: var(--shadow); }
  .panel, .side-card, .metric-card { border-radius: 14px; }
  .panel { padding: 1.1rem; }
  .table-panel { padding: 0; }
  .table-panel .panel-header { padding: 1.05rem 1.1rem 0; }
  .table-scroll, .table-wrap { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--info-line) transparent; }
  table { font-size: .82rem; font-variant-numeric: tabular-nums; }
  th, td { padding: .8rem .95rem; }
  th { font-size: .66rem; font-weight: 650; letter-spacing: .035em; background: var(--surface-alt); }
  tbody tr:hover { background: var(--row-hover); }
  tbody tr:last-child > td { border-bottom-width: 0; }
  .data-table th, .data-table td { font-size: .82rem; }
  .data-table th { font-size: .67rem; }
  .row-link:hover td { background: var(--row-hover); }
  .table-subtext, .driver-name-link span { font-size: .73rem; line-height: 1.45; }
  .button { min-height: 2.5rem; padding: .55rem .85rem; border-radius: 9px; font-size: .8rem; font-weight: 600; gap: .4rem; }
  .button-primary { color: var(--button-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--button-fill) 90%, white), var(--button-fill)); border-color: var(--button-fill); box-shadow: 0 3px 9px rgba(85, 23, 48, .13); }
  .button-primary:hover:not(:disabled) { color: var(--button-ink); background: var(--button-fill-hover); }
  .button:hover:not(:disabled) { transform: none; }
  .button-secondary:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--info-line); }
  .button-small { min-height: 2.1rem; font-size: .75rem; padding: .35rem .65rem; }
  .button-danger:hover:not(:disabled) { color: var(--on-accent); background: color-mix(in srgb, var(--bad) 86%, var(--ink-900)); }
  .button:focus-visible, .text-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
  .filter-bar { grid-template-columns: minmax(12rem,1fr) 11rem auto; gap: .55rem; }
  .auth-form input, .auth-form select, .auth-form textarea, .filter-bar input, .filter-bar select,
  .compact-select, .account-field input, .account-field select { min-height: 2.5rem; padding: .55rem .7rem; font-size: .82rem; border-radius: 9px; }
  :where(.portal-shell, dialog, .modal-overlay) :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [hidden])) { font-size: .84rem; }
  :where(.portal-shell, dialog, .modal-overlay) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [hidden]), select:not([hidden])) { min-height: 2.5rem; padding: .55rem .7rem; }
  .filter-tab { border-radius: 8px; font-size: .78rem; }
  .filter-tab.active, .rs-chip-on, .wt-wheel-on, .signup-choice:focus-visible .signup-choice-icon { color: var(--on-accent); }
  .status-pill { gap: .3rem; padding: .24rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: 0; }
  .status-info { color: var(--primary); }
  .status-good, .status-warn, .status-bad, .status-muted { border: 1px solid transparent; }
  .metric-grid { gap: .8rem; }
  .metric-card { padding: 1rem 1.1rem; }
  .metric-label { font-size: .71rem; text-transform: none; font-weight: 550; letter-spacing: 0; }
  .metric-value { margin-top: .25rem; font-size: 1.8rem; line-height: 1.2; font-weight: 650; }
  .metric-hint { font-size: .71rem; }
  .metric-card.metric-danger { background: var(--surface); border-color: var(--bad-line); }
  .metric-card.metric-danger .metric-value { color: var(--bad); }
  .definition-grid > div, .stack-card, .compact-card, .issue-list li,
  .capability-item, .setting-item, .check-row, .action-record, .office-review-card { border-radius: 11px; }
  .record-pagination, .office-ux-pagination { color: var(--ink-500); font-size: .76rem; }
  .notice-info { color: var(--ink-700); background: var(--info-soft); border-color: var(--info-line); }
  .error-panel { border-color: var(--bad-line); background: var(--bad-soft); }
  .alert-chip-urgent { border-color: var(--bad-line); }
  .lib-source, .training-card-meta, .training-facts, .training-read-label, .fold-hint,
  .reason-option small { color: var(--ink-500); }
  .record-item + .record-item, .record-table td { border-bottom-color: var(--line); border-top-color: var(--line); }
  .record-item-defect { background: var(--bad-soft); }
  .record-item-note, .wa-remove, .start-due-when.status-bad { color: var(--bad); }
  .start-due-when.status-warn { color: var(--warn); }
  .switch .track, .upload-progress-track { background: var(--line); }
  .timeline-dot { border-color: var(--surface); box-shadow: 0 0 0 2px var(--info-line); }
  .spinner { border-color: var(--info-line); border-top-color: var(--primary); }
  .json-view { color: #eddae4; background: #271923; }
  .mfa-secret { color: var(--primary); }
  .assistant-composer-placeholder button { background: var(--muted-soft); color: var(--muted); }

  /* The fleet planner retains its status marks, full dates and responsive cards. */
  .office-fleet-planner .planner-actions { display: flex; align-items: center; gap: 1rem; margin: 0 0 .6rem; }
  .office-fleet-planner .planner-actions .filter-bar { display: grid; grid-template-columns: minmax(12rem, 30rem) 11rem; flex: 1; gap: .6rem; margin: 0; }
  .planner-tools { display: flex; align-items: center; gap: .5rem; flex: none; }
  .planner-more { position: relative; }
  .planner-more > summary { display: flex; align-items: center; gap: .65rem; list-style: none; cursor: pointer; }
  .planner-more > summary::-webkit-details-marker { display: none; }
  .planner-more[open] > summary { background: var(--surface-alt); }
  .planner-more-links { position: absolute; z-index: 15; top: calc(100% + .4rem); right: 0; display: grid; min-width: 13rem; padding: .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 35px #24131d26; }
  .planner-more-links a { padding: .7rem .8rem; border-radius: 7px; color: var(--ink-900); font-size: .8rem; white-space: nowrap; }
  .planner-more-links a:hover, .planner-more-links a:focus-visible { background: var(--surface-alt); outline-color: var(--primary); }
  .planner-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .65rem .1rem 1rem; font-size: .78rem; color: var(--ink-500); }
  .planner-result-count { font-weight: 550; }
  .planner-summary-alerts { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; }
  .planner-summary-attention { color: var(--bad); }
  .planner-summary-untracked { color: var(--warn); }
  .planner-summary-attention > span, .planner-summary-untracked > span { margin-right: .3rem; font-size: .65rem; }
  .planner-summary-clear, .planner-summary-scope { color: var(--ink-500); }
  .planner-scope, :root[data-theme="dark"] .planner-scope {
    --p-bad: var(--bad); --p-bad-bg: var(--bad-soft); --p-bad-line: var(--bad-line);
    --p-warn: var(--warn); --p-warn-bg: var(--warn-soft); --p-warn-line: var(--warn-line);
    --p-info: var(--primary); --p-info-bg: var(--info-soft);
    --p-good: var(--good); --p-good-bg: var(--good-soft);
    --p-unknown: var(--muted); --p-unknown-bg: var(--muted-soft);
  }
  .kpi-row { gap: .85rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); }
  .kpi { padding: 1rem; gap: .75rem; border-radius: 13px; box-shadow: var(--shadow); }
  .kpi-icon { width: 2.6rem; height: 2.6rem; border-radius: 9px; }
  .kpi-icon svg { width: 1.45rem; height: 1.45rem; }
  .kpi-value { font-size: 1.85rem; font-weight: 650; }
  .kpi-label { font-size: .79rem; font-weight: 550; }
  .kpi-hint { font-size: .72rem; }
  .kpi-bad { border-color: var(--line); }
  .kpi-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  /* Vehicle details are a modal sibling of this grid, not an aside column. */
  .planner-split, .content-wide .planner-split { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .planner-aside { top: calc(var(--portal-header-height) + 1rem); }
  .ptable { font-size: .86rem; }
  .ptable th, .content-wide .ptable th { padding: .75rem .8rem; border-bottom-width: 1px; }
  .prow td, .content-wide .prow td { padding: .8rem; }
  .pth-name { font-size: .75rem; font-weight: 650; }
  .pth-sub { font-size: .7rem; }
  .pth-vehicle, .content-wide .pth-vehicle { min-width: 9.5rem; }
  .prow td:first-child strong { font-size: .88rem; }
  .prow-sub { font-size: .73rem; }
  .prow td:first-child { border-left-width: 3px; }
  .prow.prow-selected { background: var(--row-selected); }
  .pcell-date { font-size: .84rem; }
  .pcell-when { font-size: .73rem; }
  .pcell-flag { font-size: .72rem; letter-spacing: .02em; }
  .pchip { font-size: .72rem; border-radius: 7px; padding: .25rem .5rem; }
  .side-head h3 { font-size: 1.1rem; letter-spacing: -.025em; }
  .side-list li { padding: .65rem 0; font-size: .8rem; }
  .side-sub, .side-note { font-size: .76rem; }
  .side-card { max-height: calc(100dvh - var(--portal-header-height) - 3rem); }
  .donut { width: 9.5rem; height: 9.5rem; }
  .donut-legend li { font-size: .8rem; }
  .donut-legend .legend-value { font-size: .88rem; }

  /* Directory and persistent person preview, mirroring the approved concept. */
  .driver-directory-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
  .driver-directory-layout:not(:has(.driver-preview:not([hidden]))) { grid-template-columns: minmax(0,1fr); }
  .driver-directory-main { display: grid; gap: 1rem; min-width: 0; }
  .directory-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; gap: 0; padding: .9rem .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
  .directory-summary > * { min-width: 0; padding: .1rem .8rem; border-right: 1px solid var(--line); }
  .directory-summary > div { display: flex; align-items: center; gap: .6rem; }
  .directory-summary > div > strong { font-size: 1.35rem; font-weight: 650; line-height: 1.1; }
  .directory-summary > div > span:last-child { font-size: .73rem; color: var(--ink-700); }
  .directory-summary > div > .icon { width: 1.8rem; height: 1.8rem; padding: .3rem; border-radius: 8px; color: var(--primary); background: var(--surface-blue); }
  .directory-status-dot { width: .65rem; height: .65rem; margin: .4rem; border-radius: 50%; flex: none; }
  .directory-status-active { background: var(--good); box-shadow: 0 0 0 6px var(--good-soft); }
  .directory-status-onboarding { background: var(--warn); box-shadow: 0 0 0 6px var(--warn-soft); }
  .directory-status-invited { background: var(--avatar-ink); box-shadow: 0 0 0 6px var(--avatar-fill); }
  .directory-summary > :last-child { border-right: 0; }
  .directory-summary .metric-card { padding: .1rem .8rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .directory-summary .metric-card:last-child { border-right: 0; }
  .directory-summary .metric-value { margin: 0; font-size: 1.4rem; }
  .directory-summary .metric-label { font-size: .75rem; }
  .directory-table { min-width: 640px; }
  .directory-table th { font-size: .64rem; }
  .directory-table td { padding-block: .8rem; }
  .directory-account { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .72rem; color: var(--ink-500); }
  .directory-account.is-linked { color: var(--ink-700); }
  .directory-account .icon { width: .95rem; height: .95rem; }
  .directory-count { display: inline-grid; place-items: center; min-width: 1.7rem; min-height: 1.6rem; border-radius: 7px; font-size: .72rem; font-weight: 600; }
  .directory-count-attention { color: var(--warn); background: var(--warn-soft); }
  .directory-table tr.is-selected, .directory-table tr[aria-selected="true"] { background: var(--row-selected); }
  .directory-table tr.is-selected td:first-child, .directory-table tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--button-fill); }
  .driver-identity { display: flex; align-items: center; gap: .7rem; min-width: 0; }
  .driver-avatar, .driver-identity > .avatar, .driver-preview-avatar { display: grid; place-items: center; flex: none; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--avatar-fill); color: var(--avatar-ink); font-size: .75rem; font-weight: 650; }
  .driver-identity > div:last-child { min-width: 0; }
  .driver-identity strong { font-size: .8rem; }
  .driver-identity small, .driver-identity .table-subtext { display: block; color: var(--ink-500); font-size: .7rem; }
  .driver-preview-trigger { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--primary); cursor: pointer; }
  .driver-preview-trigger:hover { background: var(--surface-blue); }
  .driver-preview-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .driver-preview { position: sticky; top: calc(var(--portal-header-height) + 1rem); min-width: 0; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  .driver-preview[hidden] { display: none; }
  .driver-preview .panel-header { align-items: center; margin-bottom: 1.1rem; }
  .driver-preview .panel-header h3 { font-size: .95rem; }
  .driver-preview .panel-header h2 { margin: 0; font-size: .95rem; letter-spacing: -.025em; }
  .driver-preview-close { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 8px; color: var(--ink-500); background: transparent; font: inherit; font-size: 1.3rem; cursor: pointer; }
  .driver-preview-close:hover { color: var(--ink-900); background: var(--surface-alt); }
  .driver-preview-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .driver-preview-hero { display: grid; justify-items: start; gap: .3rem; }
  .driver-preview-hero .driver-avatar, .driver-preview-avatar { width: 4.5rem; height: 4.5rem; font-size: 1.45rem; margin-bottom: .4rem; }
  .driver-preview-hero h3, .driver-preview-hero h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.035em; }
  .driver-preview-hero p { margin: 0; color: var(--ink-500); font-size: .78rem; }
  .driver-preview-hero .status-pill { margin-top: .25rem; }
  .driver-preview-facts { margin: 1rem 0; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .driver-preview-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .3rem 0; font-size: .75rem; }
  .driver-preview-facts dt { color: var(--ink-500); }
  .driver-preview-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
  .driver-preview-checks { display: grid; gap: 0; padding: 0; margin: .6rem 0 1rem; list-style: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .driver-preview-checks > * { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .6rem; border-bottom: 1px solid var(--line); font-size: .73rem; }
  .driver-preview-checks > :last-child { border-bottom: 0; }
  .driver-preview-checks small { display: block; margin-top: .15rem; color: var(--ink-500); font-size: .65rem; }
  .driver-preview-compliance h3 { font-size: .9rem; margin: .8rem 0 .6rem; letter-spacing: -.025em; }
  .driver-preview-incident { display: flex; align-items: center; gap: .5rem; padding: .7rem; margin: .7rem 0 1rem; border-radius: 9px; background: var(--warn-soft); color: var(--warn); font-size: .73rem; font-weight: 600; }
  .driver-preview-incident .icon { width: 1rem; height: 1rem; }
  .driver-preview .full-width { width: 100%; }

  /* Tacho and operational cards inherit the same dark plum surfaces. */
  .tacho-grid { grid-template-columns: repeat(auto-fill, minmax(min(19rem,100%),1fr)); gap: .7rem; }
  .tacho-card { border-radius: 12px; padding: .9rem; background: var(--surface-alt); }
  .tacho-name { font-size: .9rem; font-weight: 650; }
  .tacho-sub, .tacho-foot { font-size: .73rem; }
  .tacho-verdict { font-size: .8rem; }
  .tacho-meter { height: 5px; border: 0; background: var(--line); }
  .tacho-bad { background: color-mix(in srgb, var(--bad-soft) 65%, var(--surface)); }
  .tacho-headline { font-size: .73rem; border-radius: 7px; }
  .tacho-question { color: var(--ink-500); font-size: .8rem; }
  .hours-stat { border-radius: 12px; }
  .garage-inspection-toolbar { box-shadow: var(--shadow); }

  /* Authentication, Driver and Admin share the burgundy language. */
  .auth-visual, .driver-hero, .release-hero, .mobile-home-hero {
    background: radial-gradient(ellipse at 90% 0%, rgba(173, 100, 128, .25), transparent 65%), linear-gradient(145deg, #642b3a, #401d2a);
  }
  .auth-copy .eyebrow, .driver-hero .eyebrow, .release-hero .eyebrow { color: #efbfd1; }
  .auth-copy h1 { font-size: clamp(2.4rem,4vw,4rem); font-weight: 650; }
  .auth-copy > p { font-size: .98rem; }
  .auth-feature-grid > div { border-radius: 14px; }
  .auth-form-panel { background: var(--surface-soft); }
  .auth-form { gap: 1rem; }
  .auth-form h2 { font-size: 1.85rem; font-weight: 650; }
  .auth-form label { font-size: .8rem; font-weight: 600; }
  .auth-form input, .auth-form select { min-height: 2.75rem; }
  .auth-form .button { min-height: 2.75rem; }
  .driver-topbar { background: linear-gradient(110deg, var(--sidebar-top), var(--sidebar-bottom)); }
  .driver-bottom-nav, :root[data-theme="dark"] .driver-bottom-nav { background: transparent; border-top-color: var(--line); box-shadow: 0 -5px 24px rgba(50,23,37,.07); }
  .driver-bottom-nav::before { background: color-mix(in srgb, var(--surface) 94%, transparent); }
  .driver-name-fields input:focus { outline-color: #efbfd1; }
  .mobile-profile-card, .avatar-preview-lg { background: linear-gradient(145deg, #733448, #401d2a); }
  .toast { background: #642b3a; }
  .toast-error { color: #fff; background: #a92d47; }
  .toast-warning { color: #fff; background: #805204; }
  .modal-dialog, .secure-preview-card { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 80px rgba(25,10,19,.25); }
  .modal-overlay::before, .secure-preview-modal::before { background: rgba(28,14,23,.55); backdrop-filter: blur(8px); }
  .secure-preview-frame { background: var(--surface-alt); }
  .side-card::backdrop, .planner-detail-overlay .side-card::backdrop,
  dialog.secure-preview-modal::backdrop, dialog.office-policy-modal::backdrop { background: rgba(28,14,23,.55); backdrop-filter: blur(4px); }
  .history-job-choice, .history-invoice { border-color: var(--line); border-radius: 12px; }
  .wallet-card { --wa: var(--surface-blue); --wb: var(--surface); --wink: var(--ink-700); border: 1px solid var(--info-line); border-radius: 16px; }
  .wallet-card-head p, .wallet-facts span, .wallet-face-empty, .wallet-face-doc { opacity: 1; }
  .wallet-badge, .wallet-chip, .wallet-side { background: var(--surface); }
  .wallet-side:hover { background: var(--surface-alt); }
  .wallet-chip-soon { color: var(--warn); background: var(--warn-soft); }
  .wallet-chip-expired, .wallet-face-failed { color: var(--bad); background: var(--bad-soft); }
  .wallet-face:not(.wallet-face-loaded) { background-color: var(--surface-alt); }
}

@media screen and (min-width: 761px) and (pointer: fine) {
  .nav-docked .drawer-link:not(.nav-sub), .nav-docked .nav-fold-head { min-height: 2.35rem; }
  .nav-docked .portal-switch { min-height: 2rem; }
}
@media screen and (max-width: 1430px) {
  .nav-docked .planner-split, .nav-docked .content-wide .planner-split { grid-template-columns: minmax(0,1fr); }
  .nav-docked .planner-aside { position: static; }
}
@media screen and (max-width: 1439px) {
  .driver-directory-layout { grid-template-columns: minmax(0,1fr); }
  .driver-preview { position: static; }
}
@media screen and (max-width: 1200px) {
  .content-area { padding: 1.25rem; }
  .topbar, :root[data-theme="dark"] .topbar { padding-inline: 1.25rem; }
}
@media screen and (max-width: 1150px) {
  .planner-split, .content-wide .planner-split { grid-template-columns: minmax(0,1fr); }
  .planner-aside { position: static; }
}
@media screen and (max-width: 760px) {
  .office-fleet-planner .planner-actions { align-items: stretch; flex-wrap: wrap; gap: .65rem; }
  .office-fleet-planner .planner-actions .filter-bar { flex-basis: 100%; grid-template-columns: minmax(0,1fr); }
  .planner-tools { justify-content: flex-end; width: 100%; }
  .planner-summary { justify-content: flex-start; gap: .6rem; padding-block: .55rem .9rem; }
  .planner-summary-alerts { width: 100%; gap: .4rem 1rem; }
  .planner-more-links a { min-height: 44px; }
  .content-area { padding: 1rem; }
  .page-heading h1 { font-size: 1.6rem; }
  .page-date { font-size: .7rem; }
  .topbar-breadcrumb { gap: .4rem; font-size: .73rem; }
  .directory-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem 0; padding: .85rem .35rem; }
  .directory-summary > :nth-child(even), .directory-summary .metric-card:nth-child(even) { border-right: 0; }
  .panel { padding: .95rem; }
  .table-panel { padding: 0; }
  .side-card { max-height: 85dvh; }
  .modal-dialog { max-width: calc(100vw - 1.5rem); }
}
@media screen {
  .phone-layout .topbar, :root.phone-layout[data-theme="dark"] .topbar { padding: calc(.5rem + env(safe-area-inset-top)) max(.7rem,env(safe-area-inset-right)) .5rem max(.7rem,env(safe-area-inset-left)); }
  .phone-layout .page-heading { gap: .5rem; }
  .phone-layout .page-heading h1 { font-size: 1.55rem; }
  .phone-layout .page-heading p { font-size: .8rem; }
  .phone-layout .page-date { display: none; }
  .phone-layout .topbar-breadcrumb { grid-column: 2; grid-row: 1; margin: 0; font-size: .76rem; }
  .phone-layout .drawer { padding-top: calc(.85rem + env(safe-area-inset-top)); }
  .phone-layout .drawer-link, .phone-layout .nav-fold-head { font-size: .9rem; }
  .phone-layout .drawer-link.nav-sub { min-height: 44px; font-size: .86rem; }
  .phone-layout .button, .phone-layout .driver-preview-trigger { min-height: 44px; }
  .phone-layout input:not([type="checkbox"]):not([type="radio"]), .phone-layout select, .phone-layout textarea { font-size: 16px; }
  .phone-layout input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .phone-layout select { min-height: 44px; }
  .phone-layout .table-panel { padding: 0; }
  .phone-layout .directory-table { min-width: 0; }
  .phone-layout .driver-directory-layout { display: grid; grid-template-columns: minmax(0,1fr); }
  .phone-layout .driver-preview { position: static; }
  .phone-layout .metric-value { font-size: 1.6rem; }
  .phone-layout .filter-bar { width: 100%; grid-template-columns: minmax(0,1fr); }
  .phone-layout .auth-form-panel { padding-block: 1.5rem; }
  .phone-layout .auth-form input, .phone-layout .auth-form select, .phone-layout .auth-form textarea { font-size: 16px; }
}
@media screen and (any-pointer: coarse) {
  .drawer-link, .drawer-link.nav-sub, .nav-fold-head, .portal-switch,
  .nav-docked .drawer-link:not(.nav-sub), .nav-docked .nav-fold-head, .nav-docked .portal-switch { min-height: 44px; }
}
@media screen and (max-height: 36rem) {
  .nav-docked .drawer { overflow-y: auto; scrollbar-color: #a66f83 transparent; }
  .nav-docked .drawer-groups { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .driver-preview-trigger { transition: none; }
}
@media (forced-colors: active) {
  .drawer { border-right: 1px solid CanvasText; }
  .drawer-link.active, .nav-fold.has-active:not(.is-open) > .nav-fold-head { outline: 2px solid CanvasText; outline-offset: -2px; }
  .driver-preview-trigger { border: 1px solid ButtonText; }
  .status-pill { border-color: currentColor; }
}