@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/styles/fleetops-engine.css

@@ -280,18 +280,6 @@ body[data-theme='dark'] .fleetops-connectivity-kpi-accent-rose .fleetops-connect
     right: 0.65rem;
 }
 
-.status-badge.long-offline-status-badge > span,
-.status-badge.long_offline-status-badge > span {
-    background-color: #854d0e;
-    border-color: #a16207;
-    color: #fef9c3;
-}
-
-.status-badge.long-offline-status-badge > span svg,
-.status-badge.long_offline-status-badge > span svg {
-    color: #fde047;
-}
-
 .fleetops-device-status-badge.status-badge > span {
     padding: 0 0.25rem !important;
     border-radius: 0.125rem !important;
@@ -4780,7 +4768,9 @@ body[data-theme='dark'] .order-pool-card.selected,
     background: #263040 !important;
 }
 
-/* ── Driver card ── */
+/* ── Driver card ──
+   The hover colours were written for the dark orchestrator workbench; the
+   drivers index card shares the class, so light mode gets its own pair. */
 .driver-card {
     cursor: pointer;
     transition:
@@ -4789,6 +4779,12 @@ body[data-theme='dark'] .order-pool-card.selected,
 }
 
 .driver-card:hover {
+    background: #f3f4f6; /* gray-100 */
+    border-color: #d1d5db; /* gray-300 */
+}
+
+body[data-theme='dark'] .driver-card:hover,
+.dark .driver-card:hover {
     background: #263040;
     border-color: #4b5563;
 }
@@ -8535,41 +8531,272 @@ body[data-theme='dark'] .fleetbase-ai-create-order-preview__cancelled {
     }
 }
 
-/* ── Trailer lifecycle, attachment & towing badges ──
-   ember-ui's badge palette has no entries for these values, so they would
-   otherwise render as unstyled `x-status-badge` elements. Colors follow the
-   ember-ui badge.css convention (800 background / 700 border / 100 text). */
-.status-badge.attached-status-badge > span,
-.status-badge.in-use-status-badge > span {
-    background-color: #1e40af;
-    border-color: #1d4ed8;
-    color: #dbeafe;
+/* ── The follow-up an inspection raises ──
+   What an action will do, previewed before it happens, and what it made,
+   shown afterwards as something you can open rather than a bare id. */
+.inspection-follow-up__heading {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #6b7280;
+    margin-bottom: 0.375rem;
 }
 
-.status-badge.attached-status-badge > span svg,
-.status-badge.in-use-status-badge > span svg {
-    color: #93c5fd;
+.inspection-follow-up__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.inspection-follow-up__item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    background-color: #f9fafb;
+    padding: 0.375rem 0.5rem;
+}
+
+.inspection-follow-up__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+
+.inspection-follow-up__note,
+.inspection-follow-up__empty {
+    font-size: 0.75rem;
+    color: #6b7280;
 }
 
-.status-badge.detached-status-badge > span,
-.status-badge.retired-status-badge > span {
+.inspection-follow-up__empty {
+    border: 1px dashed #e5e7eb;
+    border-radius: 0.375rem;
+    padding: 0.625rem 0.75rem;
+}
+
+body[data-theme='dark'] .inspection-follow-up__item {
+    border-color: #374151;
     background-color: #1f2937;
+}
+
+body[data-theme='dark'] .inspection-follow-up__empty {
     border-color: #374151;
-    color: #f3f4f6;
 }
 
-.status-badge.detached-status-badge > span svg,
-.status-badge.retired-status-badge > span svg {
-    color: #d1d5db;
+body[data-theme='dark'] .inspection-follow-up__heading,
+body[data-theme='dark'] .inspection-follow-up__note,
+body[data-theme='dark'] .inspection-follow-up__empty {
+    color: #9ca3af;
+}
+
+/* The record's own follow-ups: a row that opens what it names. */
+.inspection-followup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    background-color: #f9fafb;
+    padding: 0.625rem 0.75rem;
+    text-align: left;
+    cursor: pointer;
+}
+
+.inspection-followup:hover {
+    border-color: #9ca3af;
+}
+
+.inspection-followup__head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.inspection-followup__kind {
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: #6b7280;
+}
+
+.inspection-followup__id {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.6875rem;
+    color: #6b7280;
+}
+
+.inspection-followup__open {
+    margin-left: auto;
+    font-size: 0.6875rem;
+    color: #9ca3af;
+}
+
+.inspection-followup__title {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #111827;
+}
+
+.inspection-followup__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.inspection-followup__type {
+    font-size: 0.6875rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .inspection-followup {
+    border-color: #374151;
+    background-color: #1f2937;
+}
+
+body[data-theme='dark'] .inspection-followup:hover {
+    border-color: #6b7280;
+}
+
+body[data-theme='dark'] .inspection-followup__title {
+    color: #f9fafb;
+}
+
+/* ── A link out of a details panel to the record it names ──
+   The form name was a bare button with no styling and a full-size icon
+   sitting apart from it; it did not read as a link at all. */
+.field-info-container > .inspection-record__link,
+.inspection-record__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: #3b82f6;
+    cursor: pointer;
+    text-align: left;
+    background: none;
+    border: 0;
+    padding: 0;
+}
+
+.field-info-container > .inspection-record__link:hover,
+.inspection-record__link:hover {
+    color: #2563eb;
+    text-decoration: underline;
+}
+
+.inspection-record__link-icon {
+    flex-shrink: 0;
+    opacity: 0.75;
+}
+
+body[data-theme='dark'] .field-info-container > .inspection-record__link,
+body[data-theme='dark'] .inspection-record__link {
+    color: #60a5fa;
+}
+
+body[data-theme='dark'] .field-info-container > .inspection-record__link:hover,
+body[data-theme='dark'] .inspection-record__link:hover {
+    color: #93c5fd;
+}
+
+/* ── A vehicle's inspection history ──
+   A table could not survive the overlay's width: six columns squeezed into
+   a 580px panel wrapped the form name onto three lines and pushed the date
+   off the edge behind a scrollbar. One block per inspection instead. */
+.inspection-history {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.inspection-history__card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    background-color: #f9fafb;
+    padding: 0.75rem;
+    text-align: left;
+    cursor: pointer;
+}
+
+.inspection-history__card:hover {
+    border-color: #9ca3af;
+}
+
+.inspection-history__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.inspection-history__form {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #111827;
+}
+
+.inspection-history__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.6875rem;
+    color: #6b7280;
+}
+
+.inspection-history__meta > span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.inspection-history__meta-icon {
+    opacity: 0.7;
+}
+
+.inspection-history__failed {
+    color: #b91c1c;
+    font-weight: 500;
+}
+
+.inspection-history__id {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.625rem;
+    color: #9ca3af;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+body[data-theme='dark'] .inspection-history__card {
+    border-color: #374151;
+    background-color: #1f2937;
 }
 
-.status-badge.out-of-service-status-badge > span {
-    background-color: #991b1b;
-    border-color: #b91c1c;
-    color: #fee2e2;
+body[data-theme='dark'] .inspection-history__card:hover {
+    border-color: #6b7280;
 }
 
-.status-badge.out-of-service-status-badge > span svg {
+body[data-theme='dark'] .inspection-history__form {
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .inspection-history__failed {
     color: #fca5a5;
 }
 
@@ -8821,65 +9048,3384 @@ body[data-theme='dark'] .fleetops-card-meta-link {
     color: #60a5fa;
 }
 
-/* ── Multi-model table filter (mirrors ember-ui's .filter-multi-input clear button) ── */
-.filter-multi-model {
+/* ==========================================================================
+   Inspection sheet — "Promotion"
+   --------------------------------------------------------------------------
+   The author's grid survives, but only for fields that stay compact. The
+   moment a field needs room — a pass-fail that failed and now owes a
+   severity, a comment and photos, or a note, upload or signature that never
+   fitted a column — it is promoted out of the grid into a full-width band at
+   the end of its group. Nothing stretches its neighbour, because after
+   promotion it has no neighbour.
+
+   Each group header carries one dot per field, so an inspector can see at a
+   glance what is still open without reading a label.
+
+   Rendered identically by the console's submission form, the read-only
+   record, and the public link a driver opens on a phone.
+   ========================================================================== */
+
+.inspection-sheet,
+.inspection-flyout {
+    --ins-bg: #fff;
+    --ins-bg-sunken: #f9fafb;
+    --ins-border: #e5e7eb;
+    --ins-border-strong: #d1d5db;
+    --ins-text: #111827;
+    --ins-text-soft: #374151;
+    --ins-text-muted: #6b7280;
+    --ins-text-faint: #9ca3af;
+    --ins-pass: #16a34a;
+    --ins-pass-text: #15803d;
+    --ins-pass-edge: #bbf7d0;
+    --ins-pass-fill: #f0fdf4;
+    --ins-fail: #dc2626;
+    --ins-fail-text: #b91c1c;
+    --ins-fail-edge: #fecaca;
+    --ins-fail-fill: #fef2f2;
+    --ins-fail-fill-strong: #fee2e2;
+    --ins-fail-field: #fff;
+    --ins-fail-placeholder: #f87171;
+    --ins-fail-ring: rgb(220 38 38 / 22%);
+    --ins-fail-hatch-a: #fecaca;
+    --ins-fail-hatch-b: #fee2e2;
+    --ins-na: #6b7280;
+    --ins-warn: #d97706;
+    --ins-warn-text: #92400e;
+    --ins-warn-strong: #b45309;
+    --ins-hatch-a: #e5e7eb;
+    --ins-hatch-b: #f3f4f6;
+    --ins-mono: ui-monospace, 'IBM Plex Mono', sfmono-regular, menlo, monaco, consolas, monospace;
+}
+
+.inspection-sheet {
+    /* The floating flyouts are positioned against the sheet. */
     position: relative;
+    display: flex;
+    flex-direction: column;
+
+    /*
+     * The sheet is measured, not the window. It renders in a ~600px overlay
+     * panel on a wide screen and full width on a phone, so a viewport media
+     * query would collapse the author's columns in exactly the wrong places.
+     */
+    container-type: inline-size;
+}
+
+body[data-theme='dark'] .inspection-sheet,
+body[data-theme='dark'] .inspection-flyout {
+    --ins-bg: #1f2937;
+    --ins-bg-sunken: #1f2937;
+    --ins-border: #374151;
+    --ins-border-strong: #4b5563;
+    --ins-text: #f9fafb;
+    --ins-text-soft: #e5e7eb;
+    --ins-text-muted: #9ca3af;
+    --ins-text-faint: #6b7280;
+    --ins-pass: #16a34a;
+    --ins-pass-text: #86efac;
+    --ins-pass-edge: #2f5a3c;
+    --ins-pass-fill: #1c2e22;
+    --ins-fail: #dc2626;
+    --ins-fail-text: #fca5a5;
+    --ins-fail-edge: #4c2326;
+    --ins-fail-fill: #241b1e;
+    --ins-fail-fill-strong: #3f1d1d;
+    --ins-fail-field: #1b1416;
+    --ins-fail-placeholder: #a86b6e;
+    --ins-fail-ring: rgb(239 68 68 / 28%);
+    --ins-fail-hatch-a: #3b2326;
+    --ins-fail-hatch-b: #2c1b1e;
+    --ins-na: #9ca3af;
+    --ins-warn: #b45309;
+    --ins-warn-text: #fcd34d;
+    --ins-warn-strong: #fbbf24;
+    --ins-hatch-a: #374151;
+    --ins-hatch-b: #2b3644;
+}
+
+/* The sheet is one card, not one card per group. */
+.inspection-sheet__body {
+    border: 1px solid var(--ins-border);
+    border-radius: 0.5rem;
+    background-color: var(--ins-bg);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
+    overflow: hidden;
 }
 
-.filter-multi-model > .clear-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0.5rem 0.75rem 0 0;
-    color: #374151;
+body[data-theme='dark'] .inspection-sheet__body {
+    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
 }
 
-.filter-multi-model > .clear-button:hover {
-    opacity: 0.5;
+.inspection-sheet__groups {
+    padding: 1rem;
 }
 
-.filter-multi-model > .clear-button:disabled {
-    opacity: 0.3;
-    cursor: default;
+/* --- group header ------------------------------------------------------- */
+
+.inspection-group__header {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding-bottom: 0.5625rem;
+    border-bottom: 1px solid var(--ins-border);
 }
 
-body[data-theme='dark'] .filter-multi-model > .clear-button {
-    color: #6b7280;
+.inspection-group + .inspection-group {
+    margin-top: 1.75rem;
 }
 
-.filter-multi-model > .fleetbase-model-select,
-.filter-multi-model > .fleetbase-model-select > .ember-basic-dropdown,
-.filter-multi-model .ember-power-select-multiple-trigger {
-    flex: 1 1 auto;
-    width: 100%;
+.inspection-group__name {
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ins-text-soft);
     min-width: 0;
 }
 
-/* The small form-input height clips the multiple trigger and turns it into a scroller
-   before anything is selected; let it start at the input height and grow with chips. */
-.filter-multi-model .ember-power-select-multiple-trigger {
+/* One dot per field: what is answered, what failed, what is still open. */
+.inspection-group__dots {
     display: flex;
     align-items: center;
-    height: auto !important;
-    min-height: 2.125rem;
-    max-height: none !important;
-    overflow: visible !important;
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
-    padding-right: 2.5rem;
+    gap: 0.25rem;
+    flex-shrink: 0;
 }
 
-.filter-multi-model .ember-power-select-multiple-options {
-    flex: 1 1 auto;
-    min-width: 0;
-    gap: 0.125rem;
+.inspection-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    background-color: var(--ins-text-faint);
 }
 
-.filter-multi-model .ember-power-select-multiple-option {
-    margin: 0.125rem 0.125rem 0.125rem 0;
+.inspection-dot[data-marker='pass'] {
+    background-color: var(--ins-pass);
 }
 
-.filter-multi-model .ember-power-select-trigger-multiple-input {
-    height: 1.625rem;
-    min-width: 4rem;
+.inspection-dot[data-marker='fail'] {
+    background-color: var(--ins-fail);
+}
+
+.inspection-dot[data-marker='na'] {
+    background-color: var(--ins-na);
+}
+
+.inspection-dot[data-marker='outstanding'] {
+    background-color: var(--ins-warn-strong);
+}
+
+.inspection-dot[data-marker='empty'] {
+    background-color: transparent;
+    border: 1px solid var(--ins-text-faint);
+}
+
+.inspection-group__meta {
+    margin-left: auto;
+    flex-shrink: 0;
+    font-family: var(--ins-mono);
+    font-size: 0.6875rem;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--ins-text-faint);
+    white-space: nowrap;
+}
+
+.inspection-group__meta[data-outstanding='true'] {
+    color: var(--ins-warn-strong);
+}
+
+.inspection-group__description {
+    margin: 0.5rem 0 0;
+    font-size: 0.75rem;
+    line-height: 1.45;
+    color: var(--ins-text-muted);
+}
+
+.inspection-group__empty {
+    padding: 0.75rem 0;
+    font-size: 0.75rem;
+    color: var(--ins-text-muted);
+}
+
+/* --- the author's grid, for fields that stay compact -------------------- */
+
+.inspection-group__grid {
+    display: grid;
+    gap: 1rem 0.875rem;
+    align-items: start;
+    padding-top: 0.875rem;
+}
+
+.inspection-group__grid > .inspection-band {
+    grid-column: 1 / -1;
+}
+
+.inspection-group__grid[data-columns='1'] {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.inspection-group__grid[data-columns='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.inspection-group__grid[data-columns='3'] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.inspection-group__grid[data-columns='4'] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+/* A narrow sheet cannot hold the wider authored grids. */
+@container (width <= 660px) {
+    .inspection-group__grid[data-columns='3'],
+    .inspection-group__grid[data-columns='4'] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+/*
+ * A phone-width sheet stacks every grid. Matched to the `[data-columns]`
+ * rules' specificity: as a bare class it lost to them, and an authored two- or
+ * three-column group stayed in two 160px columns on a phone.
+ */
+@container (width <= 420px) {
+    .inspection-group__grid[data-columns] {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+/* --- a compact field --------------------------------------------------- */
+
+.inspection-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+}
+
+.inspection-cell__label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--ins-text);
+}
+
+.inspection-required {
+    color: var(--ins-fail);
+    margin-left: 0.125rem;
+}
+
+.inspection-cell__hint {
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--ins-text-muted);
+    white-space: pre-wrap;
+}
+
+.inspection-cell__control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    width: 100%;
+}
+
+.inspection-cell__control > .fleetbase-model-select,
+.inspection-cell__control > .ember-basic-dropdown {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.inspection-unit {
+    flex-shrink: 0;
+    font-family: var(--ins-mono);
+    font-size: 0.75rem;
+    color: var(--ins-text-muted);
+}
+
+.inspection-note {
+    font-size: 0.75rem;
+    color: var(--ins-text-faint);
+}
+
+/* A required answer that is still missing says so on its own edge. */
+.inspection-input--outstanding.form-input,
+.inspection-input--outstanding .ember-power-select-trigger {
+    border-color: var(--ins-warn);
+}
+
+/* --- the pass / fail / n-a and severity segmented controls -------------- */
+
+.inspection-choice {
+    display: flex;
+    align-items: stretch;
+    min-height: 2.25rem;
+    border: 1px solid var(--ins-border);
+    border-radius: 0.375rem;
+    overflow: hidden;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* On a promoted band the control is pushed to the right at its natural size. */
+.inspection-choice--auto {
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
+.inspection-choice__option {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--ins-text-muted);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease;
+}
+
+.inspection-choice--auto .inspection-choice__option {
+    flex: 0 0 auto;
+    padding: 0 0.75rem;
+}
+
+.inspection-choice__option + .inspection-choice__option {
+    border-left: 1px solid var(--ins-border);
+}
+
+.inspection-choice__option:hover:not(:disabled) {
+    color: var(--ins-text);
+}
+
+.inspection-choice__option:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: -2px;
+}
+
+.inspection-choice__option:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.inspection-choice__option[aria-pressed='true'] {
+    font-weight: 600;
+    color: #fff;
+    background-color: var(--ins-na);
+}
+
+.inspection-choice__option[aria-pressed='true'][data-answer='pass'] {
+    background-color: var(--ins-pass);
+}
+
+.inspection-choice__option[aria-pressed='true'][data-answer='fail'],
+.inspection-choice__option[aria-pressed='true'][data-answer='severity'] {
+    background-color: var(--ins-fail);
+}
+
+/* --- a promoted band ---------------------------------------------------- */
+
+.inspection-band {
+    border: 1px solid var(--ins-border);
+    border-radius: 0.375rem;
+    overflow: hidden;
+}
+
+.inspection-band__head {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.6875rem 0.75rem;
+}
+
+.inspection-band__label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--ins-text);
+    min-width: 0;
+}
+
+.inspection-band__aside {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.5625rem;
+    flex-shrink: 0;
+}
+
+.inspection-band__body {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+.inspection-band--stacked .inspection-band__body {
+    padding-top: 0;
+}
+
+/* A failure keeps the same band, in red, with its own detail below. */
+.inspection-band--defect {
+    border-color: var(--ins-fail);
+    background-color: var(--ins-fail-fill);
+}
+
+.inspection-band--defect .inspection-band__head {
+    border-bottom: 1px solid var(--ins-fail-edge);
+    padding-right: 0.75rem;
+}
+
+.inspection-chip {
+    flex-shrink: 0;
+    font-family: var(--ins-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ins-fail-text);
+    border: 1px solid var(--ins-fail-edge);
+    border-radius: 0.1875rem;
+    padding: 0.25rem 0.3125rem;
+}
+
+.inspection-band--defect .form-input {
+    border-color: var(--ins-fail-edge);
+    background-color: transparent;
+}
+
+.inspection-band--defect .form-input:focus {
+    border-color: var(--ins-fail);
+}
+
+.inspection-band--defect .inspection-choice,
+.inspection-band--defect .inspection-slot {
+    border-color: var(--ins-fail-edge);
+}
+
+.inspection-defect__row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.625rem;
+    align-items: center;
+}
+
+@container (width <= 560px) {
+    .inspection-defect__row {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+/* The unsafe switch is a pill, not a bare toggle: it is the gravest thing here. */
+.inspection-unsafe {
+    display: flex;
+    align-items: center;
+    gap: 0.4375rem;
+    min-height: 2.25rem;
+    padding: 0 0.625rem;
+    border: 1px solid var(--ins-fail);
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--ins-fail-text);
+    white-space: nowrap;
+}
+
+.inspection-unsafe[data-on='true'] {
+    background-color: var(--ins-fail-fill-strong);
+}
+
+/* --- photo slots -------------------------------------------------------- */
+
+.inspection-slots {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.inspection-slot {
+    display: block;
+    position: relative;
+    width: 60px;
+    height: 44px;
+    border-radius: 0.3125rem;
+    border: 1px solid var(--ins-border);
+    overflow: hidden;
+    flex-shrink: 0;
+    background: repeating-linear-gradient(45deg, var(--ins-hatch-a) 0 6px, var(--ins-hatch-b) 6px 12px);
+}
+
+.inspection-slot img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.inspection-slot__icon {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    color: var(--ins-text-faint);
+}
+
+.inspection-slot__remove {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+/* The empty slot invites the next photo rather than sitting as a button. */
+.inspection-slot--add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed var(--ins-border-strong);
+    background: none;
+    cursor: pointer;
+    font-size: 1.125rem;
+    line-height: 1;
+    color: var(--ins-text-faint);
+    padding: 0;
+    text-decoration: none;
+}
+
+.inspection-slot--add:hover {
+    color: var(--ins-text);
+    border-color: var(--ins-text-faint);
+}
+
+.inspection-slots__note {
+    margin-left: auto;
+    text-align: right;
+    font-family: var(--ins-mono);
+    font-size: 0.6875rem;
+    line-height: 1.4;
+    text-transform: uppercase;
+    color: var(--ins-text-faint);
+}
+
+/* --- the foot ----------------------------------------------------------- */
+
+.inspection-foot {
+    border-top: 1px solid var(--ins-border);
+    background-color: var(--ins-bg-sunken);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+.inspection-tallies {
+    display: flex;
+    align-items: stretch;
+    gap: 0.5rem;
+}
+
+.inspection-tally {
+    flex: 1 1 0;
+    min-width: 0;
+    background-color: var(--ins-bg);
+    border: 1px solid var(--ins-border);
+    border-left: 3px solid var(--ins-na);
+    border-radius: 0.375rem;
+    padding: 0.625rem 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3125rem;
+}
+
+.inspection-tally[data-kind='passed'] {
+    border-left-color: var(--ins-pass);
+}
+
+.inspection-tally[data-kind='failed'] {
+    border-left-color: var(--ins-fail);
+}
+
+.inspection-tally[data-kind='outstanding'] {
+    border-left-color: var(--ins-warn);
+}
+
+.inspection-tally[data-kind='outstanding'][data-any='true'] {
+    border-color: var(--ins-warn);
+    border-left-color: var(--ins-warn);
+}
+
+.inspection-tally__value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--ins-text);
+}
+
+.inspection-tally[data-kind='outstanding'][data-any='true'] .inspection-tally__value {
+    color: var(--ins-warn-text);
+}
+
+.inspection-tally__label {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ins-text-muted);
+}
+
+/*
+ * On a phone, four tallies in a row leave "Outstanding" no room: two by two.
+ * A grid rather than wrapping flex items at half width, which only pairs up
+ * under border-box sizing; with padding added to the basis they stack one high.
+ */
+@container (width <= 420px) {
+    .inspection-tallies {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+.inspection-tally[data-kind='outstanding'][data-any='true'] .inspection-tally__label {
+    color: var(--ins-warn-strong);
+}
+
+.inspection-banner {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.6875rem 0.75rem;
+    border: 1px solid var(--ins-warn);
+    border-radius: 0.375rem;
+    background-color: var(--ins-bg);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: var(--ins-warn-text);
+}
+
+.inspection-banner--unsafe {
+    border-color: var(--ins-fail);
+    background-color: var(--ins-fail-fill);
+    color: var(--ins-fail-text);
+}
+
+body[data-theme='dark'] .inspection-banner--unsafe {
+    background-color: #3f1d1d;
+}
+
+.inspection-banner__chip {
+    flex-shrink: 0;
+    font-family: var(--ins-mono);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #fff;
+    background-color: var(--ins-fail);
+    border-radius: 0.25rem;
+    padding: 0.3125rem 0.4375rem;
+}
+
+.inspection-banner__jump {
+    appearance: none;
+    border: 0;
+    background: none;
+    margin-left: auto;
+    flex-shrink: 0;
+    padding: 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.inspection-banner__jump:hover {
+    text-decoration: underline;
+}
+
+/* A jumped-to field is held for a moment so the eye can find it. */
+.inspection-cell--targeted,
+.inspection-band--targeted {
+    animation: inspection-target 1.6s ease-out;
+}
+
+@keyframes inspection-target {
+    0%,
+    60% {
+        box-shadow: 0 0 0 2px var(--ins-warn);
+    }
+
+    100% {
+        box-shadow: 0 0 0 2px transparent;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .inspection-cell--targeted,
+    .inspection-band--targeted {
+        animation: none;
+        box-shadow: 0 0 0 2px var(--ins-warn);
+    }
+}
+
+/*
+ * The sheet sits inside an overlay panel that has its own edge. Without an
+ * inset its borders land on that edge and read as a double rule.
+ */
+.inspection-sheet-inset {
+    padding: 0.75rem;
+}
+
+/* ==========================================================================
+   Inspection links
+   --------------------------------------------------------------------------
+   A generated link used to exist only as a toast. These are the rows that
+   replaced it: one per link, with the link itself, who and what it was for,
+   and whether it still works.
+   ========================================================================== */
+
+.inspection-link-list {
+    --inspection-border: #e5e7eb;
+    --inspection-surface: #fff;
+    --inspection-surface-sunken: #f9fafb;
+    --inspection-text: #111827;
+    --inspection-text-muted: #6b7280;
+}
+
+body[data-theme='dark'] .inspection-link-list {
+    --inspection-border: #374151;
+    --inspection-surface: #1f2937;
+    --inspection-surface-sunken: #1f2937;
+    --inspection-text: #f9fafb;
+    --inspection-text-muted: #9ca3af;
+}
+
+.inspection-link-list__empty {
+    padding: 0.75rem;
+    font-size: 0.75rem;
+    color: var(--inspection-text-muted);
+}
+
+/* The modal shows the list inside its own bordered block. */
+.inspection-link-panel {
+    border: 1px solid var(--inspection-border, #e5e7eb);
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+body[data-theme='dark'] .inspection-link-panel {
+    border-color: #374151;
+}
+
+.inspection-link-panel__header {
+    padding: 0.5rem 0.625rem;
+    border-bottom: 1px solid var(--inspection-border, #e5e7eb);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #374151;
+}
+
+body[data-theme='dark'] .inspection-link-panel__header {
+    border-bottom-color: #374151;
+    color: #e5e7eb;
+}
+
+.inspection-link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 0.5rem 0.625rem;
+}
+
+.inspection-link + .inspection-link {
+    border-top: 1px solid var(--inspection-border);
+}
+
+/* A link that can no longer be used recedes rather than disappearing. */
+.inspection-link:not([data-state='active']) {
+    opacity: 0.6;
+}
+
+.inspection-link__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.inspection-link__state {
+    flex-shrink: 0;
+    border-radius: 9999px;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background-color: #e5e7eb;
+    color: #374151;
+}
+
+.inspection-link__state[data-state='active'] {
+    background-color: #16a34a;
+    color: #fff;
+}
+
+.inspection-link__state[data-state='expired'],
+.inspection-link__state[data-state='revoked'] {
+    background-color: #dc2626;
+    color: #fff;
+}
+
+.inspection-link__state[data-state='used'] {
+    background-color: #2563eb;
+    color: #fff;
+}
+
+/* Locked after too many wrong PINs: stopped, but by a guesser, not by anyone here. */
+.inspection-link__state[data-state='locked'] {
+    background-color: #d97706;
+    color: #fff;
+}
+
+.inspection-link__for {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--inspection-text);
+    min-width: 0;
+}
+
+.inspection-link__when {
+    margin-left: auto;
+    flex-shrink: 0;
+    font-size: 0.6875rem;
+    color: var(--inspection-text-muted);
+}
+
+.inspection-link__url {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    border: 1px solid var(--inspection-border);
+    border-radius: 0.375rem;
+    background-color: var(--inspection-surface);
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%);
+    padding: 0.25rem 0.375rem;
+}
+
+body[data-theme='dark'] .inspection-link__url {
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 25%);
+}
+
+.inspection-link__code {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+    white-space: nowrap;
+    font-size: 0.6875rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    color: var(--inspection-text-muted);
+}
+
+.inspection-link__note {
+    font-size: 0.6875rem;
+    font-style: italic;
+    color: var(--inspection-text-muted);
+}
+
+.inspection-link__foot {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.6875rem;
+    color: var(--inspection-text-muted);
+}
+
+.inspection-link__sep {
+    padding: 0 0.125rem;
+    color: var(--inspection-text-muted);
+}
+
+.inspection-link__warn {
+    color: #b45309;
+}
+
+body[data-theme='dark'] .inspection-link__warn {
+    color: #fbbf24;
+}
+
+/* The PIN that goes with a link, with ways to copy it or send it again. */
+.inspection-link__pin {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.6875rem;
+    color: var(--inspection-text-muted);
+}
+
+.inspection-link__pin-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.inspection-link__pin-code {
+    margin-right: 0.25rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    color: var(--inspection-text, #111827);
+}
+
+body[data-theme='dark'] .inspection-link__pin-code {
+    color: #f9fafb;
+}
+
+/* The PIN asked for before a public link shows its form: large, spaced, easy to type on a phone. */
+.public-inspection-pin input.public-inspection-pin__input.form-input {
+    height: auto;
+    padding: 0.625rem 0.75rem;
+    text-align: center;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 1.5rem;
+    letter-spacing: 0.5em;
+    text-indent: 0.5em;
+}
+
+/* On a phone the submit button spans the page, where a thumb can reach it. */
+@media (width <= 639px) {
+    .public-inspection-submit__button,
+    .public-inspection-submit__button > button {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* A link just generated, shown above the form until the modal closes. */
+.inspection-link-generated {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border: 1px solid #bbf7d0;
+    border-radius: 0.5rem;
+    background-color: #f0fdf4;
+    padding: 0.625rem;
+}
+
+body[data-theme='dark'] .inspection-link-generated {
+    border-color: #166534;
+    background-color: rgb(22 101 52 / 20%);
+}
+
+.inspection-link-generated__title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #14532d;
+}
+
+body[data-theme='dark'] .inspection-link-generated__title {
+    color: #bbf7d0;
+}
+
+.inspection-link-generated__help {
+    margin: 0;
+    font-size: 0.6875rem;
+    color: #166534;
+}
+
+body[data-theme='dark'] .inspection-link-generated__help {
+    color: #86efac;
+}
+
+.inspection-link-generated .inspection-link__url {
+    background-color: #fff;
+}
+
+body[data-theme='dark'] .inspection-link-generated .inspection-link__url {
+    background-color: #1f2937;
+    border-color: #374151;
+}
+
+/* A stored answer, read back: the same row, with the value where the control was. */
+.inspection-row__answer {
+    font-size: 0.8125rem;
+    color: var(--inspection-text);
+}
+
+/* A stored answer, read back: the value sits where the control was. */
+.inspection-answer {
+    margin: 0;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: var(--ins-text-soft);
+    white-space: pre-wrap;
+    min-width: 0;
+}
+
+/*
+ * A read-back answer keeps the shape of the field it was given in. A cell had
+ * no container at all — a bare label with a value loose beneath it — while a
+ * note or an upload drew a bordered card, so one row read as a card and the
+ * next as stray text. Cells take the same card, quieter than a defect's.
+ */
+.inspection-cell--readonly {
+    gap: 0.375rem;
+
+    /* Each card is as tall as its own answer: stretched to the row's tallest,
+       a lone chip sat in half a card of empty space. */
+    align-self: start;
+    border: 1px solid var(--ins-border);
+    border-radius: 0.375rem;
+    background-color: var(--ins-bg-sunken);
+    padding: 0.625rem 0.75rem;
+}
+
+/*
+ * A pass and a fail are the same card, coloured by the answer. The fail used
+ * to be a band, and a band spans the grid — so one answer ran the full width
+ * while its neighbours sat in columns. It keeps its detail; it just keeps it
+ * in the column the form gave it.
+ */
+.inspection-cell--result {
+    gap: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.inspection-cell--result .inspection-cell__head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: 0.5rem 0.625rem;
+}
+
+.inspection-cell--result .inspection-cell__label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.inspection-cell--result .inspection-cell__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0 0.625rem 0.5rem;
+}
+
+.inspection-cell--result .inspection-cell__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+}
+
+.inspection-cell--readonly[data-answer='pass'] {
+    border-color: var(--ins-pass-edge);
+    background-color: var(--ins-pass-fill);
+}
+
+.inspection-cell--readonly[data-answer='pass'] .inspection-cell__head {
+    border-bottom: 0;
+}
+
+.inspection-cell--readonly[data-answer='fail'] {
+    border-color: var(--ins-fail);
+    background-color: var(--ins-fail-fill);
+}
+
+.inspection-cell--readonly[data-answer='fail'] .inspection-cell__body {
+    border-top: 1px solid var(--ins-fail-edge);
+    padding-top: 0.5rem;
+}
+
+/* The chip takes the answer's colour: red is not the only state. */
+.inspection-cell--readonly[data-answer='pass'] .inspection-chip {
+    color: var(--ins-pass-text);
+    border-color: var(--ins-pass-edge);
+}
+
+.inspection-cell--readonly[data-answer='na'] .inspection-chip {
+    color: var(--ins-text-muted);
+    border-color: var(--ins-border);
+}
+
+.inspection-cell--readonly .inspection-cell__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    color: var(--ins-text-muted);
+}
+
+/* The answer itself is what the eye should land on. */
+.inspection-cell--readonly .inspection-answer {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--ins-text);
+}
+
+/* ==========================================================================
+   Defect flyout
+   --------------------------------------------------------------------------
+   A failed check keeps its cell. Its severity, unsafe flag, comment and
+   photos open in a panel anchored to that cell, so failing a check can never
+   change the layout of the sheet. Closing it leaves a chip in the cell, and
+   the defects tray at the foot keeps the record.
+   ========================================================================== */
+
+/* The open field is ringed with an outline, which takes no space: opening a
+   flyout must not move anything either. */
+.inspection-cell--flyout-open {
+    outline: 2px solid var(--ins-fail);
+    outline-offset: 6px;
+    border-radius: 0.375rem;
+}
+
+/* --- the chip a closed failure leaves in its cell ----------------------- */
+
+.inspection-defect-chip {
+    appearance: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem 0.5rem;
+    width: 100%;
+    padding: 0.4375rem 0.625rem;
+    border: 1px solid var(--ins-fail-edge);
+    border-left: 3px solid var(--ins-fail);
+    border-radius: 0.375rem;
+    background-color: var(--ins-fail-fill);
+    color: var(--ins-fail-text);
+    font-size: 0.75rem;
+    line-height: 1.3;
+    text-align: left;
+    cursor: pointer;
+}
+
+.inspection-defect-chip:hover:not(:disabled) {
+    border-color: var(--ins-fail);
+}
+
+.inspection-defect-chip:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: 2px;
+}
+
+.inspection-defect-chip:disabled {
+    cursor: default;
+}
+
+.inspection-defect-chip.is-incomplete {
+    border-left-color: var(--ins-warn);
+}
+
+.inspection-defect-chip__severity {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.inspection-defect-chip__unsafe {
+    font-family: var(--ins-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: #fff;
+    background-color: var(--ins-fail);
+    border-radius: 0.1875rem;
+    padding: 0.1875rem 0.3125rem;
+}
+
+.inspection-defect-chip__meta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--ins-text-muted);
+}
+
+.inspection-defect-chip__status {
+    font-weight: 600;
+    color: var(--ins-warn-strong);
+}
+
+.inspection-defect-chip__edit {
+    margin-left: auto;
+    color: var(--ins-text-muted);
+}
+
+/* --- the flyout -------------------------------------------------------- */
+
+.inspection-flyout {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--ins-fail-fill);
+    color: var(--ins-text);
+    border: 1px solid var(--ins-fail);
+    border-radius: 0.5rem;
+    box-shadow:
+        0 12px 32px rgb(0 0 0 / 18%),
+        0 2px 6px rgb(0 0 0 / 8%);
+    outline: none;
+}
+
+body[data-theme='dark'] .inspection-flyout {
+    box-shadow:
+        0 16px 40px rgb(0 0 0 / 55%),
+        0 2px 6px rgb(0 0 0 / 30%);
+}
+
+.inspection-flyout--floating {
+    position: absolute;
+    z-index: 40;
+    width: min(30rem, calc(100% - 1rem));
+    animation: inspection-flyout-in 0.14s ease-out;
+}
+
+.inspection-flyout--floating[data-placement='top'] {
+    animation-name: inspection-flyout-in-above;
+}
+
+/*
+ * Room for the reveal's margin at the very end of the page. An absolutely
+ * placed box extends the scroll area, but its margin does not, so without this
+ * a flyout opened below the last field could only ever sit flush against the
+ * bottom edge of the panel.
+ */
+.inspection-flyout--floating::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -0.5rem;
+    height: 0.5rem;
+    pointer-events: none;
+}
+
+/* A caret points at the Fail button of the field it belongs to. */
+.inspection-flyout__caret {
+    position: absolute;
+    left: var(--flyout-caret-x, 1.5rem);
+    width: 12px;
+    height: 12px;
+    background-color: var(--ins-fail-fill);
+    border: 1px solid var(--ins-fail);
+    transform: translateX(-50%) rotate(45deg);
+    pointer-events: none;
+}
+
+.inspection-flyout[data-placement='bottom'] .inspection-flyout__caret {
+    top: -7px;
+    border-right: 0;
+    border-bottom: 0;
+}
+
+.inspection-flyout[data-placement='top'] .inspection-flyout__caret {
+    bottom: -7px;
+    border-top: 0;
+    border-left: 0;
+}
+
+.inspection-flyout__head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--ins-fail-edge);
+}
+
+.inspection-flyout__title {
+    min-width: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.inspection-flyout__close {
+    appearance: none;
+    border: 0;
+    background: none;
+    margin-left: auto;
+    padding: 0.25rem 0.375rem;
+    border-radius: 0.25rem;
+    color: var(--ins-text-muted);
+    cursor: pointer;
+}
+
+.inspection-flyout__close:hover {
+    color: var(--ins-text);
+}
+
+.inspection-flyout__close:focus-visible {
+    outline: 2px solid #2563eb;
+}
+
+.inspection-flyout__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    padding: 0.75rem;
+    overflow-y: auto;
+}
+
+.inspection-flyout__foot {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 0.625rem 0.75rem;
+    border-top: 1px solid var(--ins-fail-edge);
+}
+
+.inspection-flyout__note {
+    margin-right: auto;
+    font-family: var(--ins-mono);
+    font-size: 0.6875rem;
+    line-height: 1.4;
+    text-transform: uppercase;
+    color: var(--ins-warn-strong);
+}
+
+/* Inside a failure, every control takes the failure's colours. */
+.inspection-flyout .inspection-choice {
+    border-color: var(--ins-fail-edge);
+}
+
+.inspection-flyout .inspection-choice__option + .inspection-choice__option {
+    border-left-color: var(--ins-fail-edge);
+}
+
+.inspection-flyout .inspection-choice__option:hover:not(:disabled) {
+    background-color: var(--ins-fail-fill-strong);
+}
+
+/*
+ * The comment box belongs to the failure. ember-ui styles every console
+ * input with `body[data-theme='dark'] .fleetbase-console .form-input`, which
+ * outranks a plain `.inspection-flyout .form-input` — so an earlier attempt
+ * at this left a grey box inside a red panel. This selector is deliberately
+ * heavier than that rule, and takes its colours from the theme tokens.
+ */
+html body .inspection-flyout textarea.inspection-defect-comment.form-input {
+    background-color: var(--ins-fail-field);
+    border-color: var(--ins-fail-edge);
+    color: var(--ins-text);
+    box-shadow: none;
+}
+
+html body .inspection-flyout textarea.inspection-defect-comment.form-input::placeholder {
+    color: var(--ins-fail-placeholder);
+}
+
+html body .inspection-flyout textarea.inspection-defect-comment.form-input:focus {
+    border-color: var(--ins-fail);
+    box-shadow: 0 0 0 3px var(--ins-fail-ring);
+    outline: none;
+}
+
+/* Photos sit in the failure too: red hatching, a red-edged slot for the next. */
+.inspection-flyout .inspection-slot:not(.inspection-slot--add) {
+    border-color: var(--ins-fail-edge);
+    background: repeating-linear-gradient(45deg, var(--ins-fail-hatch-a) 0 6px, var(--ins-fail-hatch-b) 6px 12px);
+}
+
+.inspection-flyout .inspection-slot--add {
+    border-color: var(--ins-fail-edge);
+    color: var(--ins-fail-text);
+}
+
+.inspection-flyout .inspection-slot--add:hover {
+    border-color: var(--ins-fail);
+    color: var(--ins-fail);
+}
+
+/* --- on a phone, the same content as a bottom sheet --------------------- */
+
+.inspection-flyout--sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1100;
+    max-height: 85vh;
+    border-bottom: 0;
+    border-radius: 0.875rem 0.875rem 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    animation: inspection-sheet-in 0.2s ease-out;
+}
+
+/* A grab handle, so it reads as something that came up and will go down. */
+.inspection-flyout--sheet::before {
+    content: '';
+    display: block;
+    width: 2.5rem;
+    height: 0.25rem;
+    margin: 0.5rem auto 0;
+    border-radius: 9999px;
+    background-color: var(--ins-border-strong);
+}
+
+.inspection-flyout-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1099;
+    background-color: rgb(0 0 0 / 40%);
+    animation: inspection-fade-in 0.2s ease-out;
+}
+
+@keyframes inspection-flyout-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes inspection-flyout-in-above {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes inspection-sheet-in {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: none;
+    }
+}
+
+@keyframes inspection-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .inspection-flyout,
+    .inspection-flyout-backdrop {
+        animation: none;
+    }
+}
+
+/* --- the defects tray -------------------------------------------------- */
+
+.inspection-tray {
+    border: 1px solid var(--ins-border);
+    border-radius: 0.375rem;
+    background-color: var(--ins-bg);
+    overflow: hidden;
+}
+
+.inspection-tray__head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--ins-border);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ins-text-soft);
+}
+
+.inspection-tray__count {
+    min-width: 1.25rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    background-color: var(--ins-fail);
+    color: #fff;
+    font-size: 0.625rem;
+    text-align: center;
+    letter-spacing: 0;
+}
+
+.inspection-tray__row {
+    appearance: none;
+    border: 0;
+    background: none;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.625rem 0.75rem;
+    text-align: left;
+    cursor: pointer;
+    color: var(--ins-text);
+    font-size: 0.8125rem;
+}
+
+.inspection-tray__row + .inspection-tray__row {
+    border-top: 1px solid var(--ins-border);
+}
+
+.inspection-tray__row:hover {
+    background-color: rgb(127 127 127 / 8%);
+}
+
+.inspection-tray__row:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: -2px;
+}
+
+.inspection-tray__severity {
+    flex-shrink: 0;
+    min-width: 4.25rem;
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--ins-fail-edge);
+    border-radius: 0.25rem;
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-align: center;
+    text-transform: uppercase;
+    color: var(--ins-fail-text);
+}
+
+.inspection-tray__severity[data-severity='high'],
+.inspection-tray__severity[data-severity='critical'] {
+    border-color: var(--ins-fail);
+    background-color: var(--ins-fail);
+    color: #fff;
+}
+
+.inspection-tray__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 600;
+}
+
+.inspection-tray__evidence {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    color: var(--ins-text-muted);
+}
+
+.inspection-tray__evidence[data-incomplete='true'] {
+    font-weight: 600;
+    color: var(--ins-warn-strong);
+}
+
+.inspection-tray__action {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--ins-fail-text);
+}
+
+@container (width <= 480px) {
+    .inspection-tray__row {
+        flex-wrap: wrap;
+    }
+
+    .inspection-tray__evidence {
+        flex-basis: 100%;
+        order: 5;
+    }
+}
+
+/* ==========================================================================
+   Radar — the triage list that replaced the Resources Hub. Sits on the
+   control-hub shell (header band, body width) and adds the pills, tabs,
+   rows and drawer. Light rules first, dark overrides at the end.
+   ========================================================================== */
+
+.fleet-ops-radar-body {
+    max-width: 88rem;
+    gap: 0.625rem;
+    padding-bottom: 1.25rem;
+}
+
+.fleet-ops-radar-header-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1rem;
+    width: 100%;
+    min-width: 0;
+}
+
+.fleet-ops-radar-header-summary {
+    font-size: 0.75rem;
+    color: #6b7280;
+    align-self: flex-end;
+    padding-bottom: 0.2rem;
+}
+
+.fleet-ops-radar-header-actions {
+    margin-left: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+/* Every control in the header shares one height. */
+.fleet-ops-radar-header-actions .btn-wrapper,
+.fleet-ops-radar-header-actions .btn-wrapper > .btn {
+    height: 2rem;
+}
+
+.fleet-ops-radar-header-actions .btn-wrapper > .btn {
+    display: inline-flex;
+    align-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.fleet-ops-radar-search {
+    position: relative;
+    width: 12rem;
+    height: 2rem;
+}
+
+.fleet-ops-radar-search svg {
+    position: absolute;
+    left: 0.6rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.7rem;
+    color: #9ca3af;
+    pointer-events: none;
+}
+
+/* Beats ember-ui's `input.form-input.form-input-sm` padding so the text clears the icon. */
+.fleet-ops-radar-search input.form-input.form-input-sm {
+    height: 2rem;
+    padding-left: 1.85rem;
+    padding-right: 1.85rem;
+}
+
+.fleet-ops-radar-search kbd {
+    position: absolute;
+    right: 0.45rem;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.fleet-ops-radar-view-toggle {
+    display: inline-flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    height: 2rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    background: #fff;
+    padding: 2px;
+    gap: 2px;
+}
+
+.fleet-ops-radar-view-toggle-button {
+    border: 0;
+    background: transparent;
+    border-radius: 0.25rem;
+    padding: 0 0.6rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #6b7280;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    cursor: pointer;
+}
+
+.fleet-ops-radar-view-toggle-button.is-active {
+    background: #3485e2;
+    color: #fff;
+}
+
+.fleet-ops-radar-sources-warning {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid #fde68a;
+    background: #fffbeb;
+    color: #b45309;
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+}
+
+/* Morning brief: score, category rows, prose, decision cards. */
+.fleet-ops-radar-briefing {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-briefing-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-briefing-toggle {
+    margin-left: auto;
+    border: 0;
+    background: transparent;
+    color: #6b7280;
+    font-size: 0.72rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.fleet-ops-radar-briefing-loading {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.fleet-ops-radar-briefing-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+@media (width >= 1024px) {
+    .fleet-ops-radar-briefing-grid {
+        grid-template-columns: 11rem minmax(0, 1fr);
+        grid-template-areas:
+            'score categories'
+            'prose prose'
+            'decisions decisions';
+    }
+
+    .fleet-ops-radar-briefing-score {
+        grid-area: score;
+    }
+
+    .fleet-ops-radar-briefing-categories {
+        grid-area: categories;
+    }
+
+    .fleet-ops-radar-briefing-prose {
+        grid-area: prose;
+    }
+
+    .fleet-ops-radar-briefing-decisions {
+        grid-area: decisions;
+    }
+}
+
+@media (width >= 1280px) {
+    .fleet-ops-radar-briefing-grid {
+        grid-template-columns: 11rem minmax(0, 1fr) minmax(20rem, 26rem);
+        grid-template-areas:
+            'score categories decisions'
+            'prose prose decisions';
+    }
+}
+
+.fleet-ops-radar-briefing-score-value {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+}
+
+.fleet-ops-radar-briefing-score-number {
+    font-size: 2.25rem;
+    font-weight: 900;
+    line-height: 1;
+    color: #111827;
+}
+
+.fleet-ops-radar-briefing-score-of {
+    font-size: 0.8rem;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-briefing-score-delta {
+    margin-top: 0.4rem;
+}
+
+.fleet-ops-radar-briefing-categories {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    gap: 0.5rem 0.9rem;
+}
+
+.fleet-ops-radar-briefing-category {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.72rem;
+}
+
+.fleet-ops-radar-briefing-category-head {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 700;
+    color: #111827;
+}
+
+.fleet-ops-radar-briefing-category-score {
+    font-weight: 900;
+}
+
+.fleet-ops-radar-briefing-category-bar {
+    height: 6px;
+    border-radius: 3px;
+    background: #f3f4f6;
+    overflow: hidden;
+}
+
+.fleet-ops-radar-briefing-category-bar > span {
+    display: block;
+    height: 100%;
+    border-radius: 3px;
+    background: #059669;
+    transition: width 0.3s ease;
+}
+
+.fleet-ops-radar-briefing-category-bar > span.is-warn {
+    background: #d97706;
+}
+
+.fleet-ops-radar-briefing-category-bar > span.is-bad {
+    background: #e11d48;
+}
+
+.fleet-ops-radar-briefing-category-gaps {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-briefing-link {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    font: inherit;
+    font-weight: 600;
+    color: #1c6cc7;
+    cursor: pointer;
+    display: inline;
+}
+
+.fleet-ops-radar-briefing-link:hover {
+    text-decoration: underline;
+}
+
+.fleet-ops-radar-briefing-link:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.fleet-ops-radar-briefing-prose p {
+    margin: 0;
+    font-size: 0.8125rem;
+    line-height: 1.65;
+    color: #374151;
+    text-wrap: pretty;
+}
+
+.fleet-ops-radar-briefing-decisions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.fleet-ops-radar-briefing-decisions-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.fleet-ops-radar-decision {
+    border: 1px solid #e5e7eb;
+    border-left-width: 3px;
+    border-radius: 0.375rem;
+    padding: 0.6rem 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    background: #fff;
+}
+
+.fleet-ops-radar-decision.is-critical {
+    border-left-color: #e11d48;
+}
+
+.fleet-ops-radar-decision.is-warning {
+    border-left-color: #d97706;
+}
+
+.fleet-ops-radar-decision.is-info {
+    border-left-color: #3485e2;
+}
+
+.fleet-ops-radar-decision-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.fleet-ops-radar-decision-title {
+    font-size: 0.8125rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.fleet-ops-radar-decision-reasoning {
+    margin: 0;
+    font-size: 0.75rem;
+    line-height: 1.55;
+    color: #4b5563;
+}
+
+.fleet-ops-radar-decision-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.72rem;
+}
+
+.fleet-ops-radar-briefing-strip {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.72rem;
+    color: #374151;
+    background: #f9fafb;
+}
+
+.fleet-ops-radar-briefing-strip.is-confirmed svg {
+    color: #059669;
+}
+
+.fleet-ops-radar-briefing-strip.is-snoozed svg {
+    color: #d97706;
+}
+
+.fleet-ops-radar-briefing-strip-label {
+    font-weight: 700;
+}
+
+.fleet-ops-radar-briefing-strip-title {
+    color: #6b7280;
+    flex: 1 1 auto;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing,
+body[data-theme='dark'] .fleet-ops-radar-decision {
+    background: #1f2937;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing-strip {
+    background: #111827;
+    border-color: #374151;
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing-score-number,
+body[data-theme='dark'] .fleet-ops-radar-briefing-category-head,
+body[data-theme='dark'] .fleet-ops-radar-decision-title {
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing-score-of,
+body[data-theme='dark'] .fleet-ops-radar-briefing-category-gaps,
+body[data-theme='dark'] .fleet-ops-radar-briefing-toggle,
+body[data-theme='dark'] .fleet-ops-radar-briefing-strip-title {
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing-prose p,
+body[data-theme='dark'] .fleet-ops-radar-decision-reasoning {
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing-category-bar {
+    background: #374151;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-briefing-link {
+    color: #93c5fd;
+}
+
+/* Count pills: the only filter UI. */
+.fleet-ops-radar-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.fleet-ops-radar-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    color: #374151;
+    border-radius: 999px;
+    padding: 0.3rem 0.7rem;
+    font-size: 0.75rem;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+        border-color 0.12s ease,
+        background-color 0.12s ease;
+}
+
+.fleet-ops-radar-pill:hover {
+    border-color: #bfdbfe;
+}
+
+.fleet-ops-radar-pill.is-active {
+    background: #3485e2;
+    border-color: #3485e2;
+    color: #fff;
+}
+
+.fleet-ops-radar-pill.is-empty:not(.is-active) {
+    color: #9ca3af;
+}
+
+.fleet-ops-radar-pill-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+    background: #e11d48;
+}
+
+.fleet-ops-radar-pill.is-active .fleet-ops-radar-pill-dot {
+    background: #fecdd3;
+}
+
+.fleet-ops-radar-pill-count {
+    font-weight: 800;
+}
+
+.fleet-ops-radar-pill-clear {
+    font-size: 0.7rem;
+    opacity: 0.7;
+}
+
+/* Status tabs and saved views. */
+.fleet-ops-radar-view-bar {
+    display: flex;
+    align-items: flex-end;
+    gap: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.fleet-ops-radar-tabs {
+    display: flex;
+    gap: 1rem;
+}
+
+.fleet-ops-radar-tab {
+    border: 0;
+    background: transparent;
+    padding: 0 1px 0.55rem;
+    border-bottom: 2px solid transparent;
+    font-size: 0.8125rem;
+    color: #6b7280;
+    cursor: pointer;
+    display: inline-flex;
+    gap: 0.35rem;
+}
+
+.fleet-ops-radar-tab.is-active {
+    color: #111827;
+    font-weight: 700;
+    border-bottom-color: #3485e2;
+}
+
+.fleet-ops-radar-tab-count {
+    color: #6b7280;
+    font-weight: 600;
+}
+
+.fleet-ops-radar-view-bar-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-bottom: 0.4rem;
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-view-bar-label {
+    font-size: 0.65rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.fleet-ops-radar-saved-view {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 1.625rem;
+    gap: 0.35rem;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    border-radius: 0.375rem;
+    padding: 0 0.55rem;
+    line-height: 1;
+    font-size: 0.75rem;
+    color: #374151;
+    cursor: pointer;
+}
+
+.fleet-ops-radar-saved-view.is-active {
+    border-color: #3485e2;
+    color: #1c6cc7;
+    background: #eff6ff;
+}
+
+.fleet-ops-radar-saved-view-apply,
+.fleet-ops-radar-saved-view-delete {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.fleet-ops-radar-saved-view-delete {
+    opacity: 0.6;
+    font-size: 0.7rem;
+}
+
+.fleet-ops-radar-saved-view-delete:hover {
+    opacity: 1;
+}
+
+.fleet-ops-radar-saved-view-save {
+    font: inherit;
+    font-size: 0.75rem;
+}
+
+/* The bulk bar: appears above the list while something is selected. */
+.fleet-ops-radar-bulk-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.6rem;
+    border: 1px solid #bfdbfe;
+    background: #eff6ff;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.78rem;
+    color: #1e3a8a;
+}
+
+.fleet-ops-radar-bulk-bar .fleet-ops-radar-row-check {
+    color: #3485e2;
+}
+
+.fleet-ops-radar-bulk-copy {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
+}
+
+.fleet-ops-radar-bulk-actions {
+    margin-left: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-bulk-bar {
+    background: rgba(28, 108, 199, 0.18);
+    border-color: #1c6cc7;
+    color: #bfdbfe;
+}
+
+/* The list card, its group headers and rows. */
+.fleet-ops-radar-list {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    overflow: hidden;
+}
+
+.fleet-ops-radar-group-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0.75rem;
+    border-bottom: 1px solid #e5e7eb;
+    background: #f9fafb;
+    font-size: 0.65rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-group-header.is-overdue {
+    background: #fff1f2;
+    border-bottom-color: #fecdd3;
+    color: #be123c;
+}
+
+.fleet-ops-radar-group-header.is-today {
+    background: #fffbeb;
+    border-bottom-color: #fde68a;
+    color: #b45309;
+}
+
+.fleet-ops-radar-group-count {
+    font-weight: 800;
+}
+
+.fleet-ops-radar-row {
+    display: grid;
+    grid-template-columns: 1.25rem 5.25rem 8px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.55rem 0.75rem;
+    border-bottom: 1px solid #f3f4f6;
+    position: relative;
+    outline: none;
+    transition: background-color 0.12s ease;
+}
+
+.fleet-ops-radar-row:last-child {
+    border-bottom: 0;
+}
+
+.fleet-ops-radar-row:hover,
+.fleet-ops-radar-row.is-focused {
+    background: #f9fafb;
+}
+
+.fleet-ops-radar-row.is-focused {
+    box-shadow: inset 3px 0 0 #3485e2;
+}
+
+.fleet-ops-radar-row.is-selected {
+    background: #eff6ff;
+}
+
+.fleet-ops-radar-row-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    color: #9ca3af;
+    cursor: pointer;
+    font-size: 0.85rem;
+    line-height: 1;
+}
+
+.fleet-ops-radar-row.is-selected .fleet-ops-radar-row-check {
+    color: #3485e2;
+}
+
+.fleet-ops-radar-row-check > div {
+    align-items: center;
+}
+
+.fleet-ops-radar-row-chip .status-badge > span {
+    width: 100%;
+    justify-content: center;
+    font-size: 0.6rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 2px 5px;
+}
+
+.fleet-ops-radar-severity {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: #3485e2;
+}
+
+.fleet-ops-radar-severity.is-critical {
+    background: #e11d48;
+}
+
+.fleet-ops-radar-severity.is-warning {
+    background: #d97706;
+}
+
+.fleet-ops-radar-row.is-acknowledged .fleet-ops-radar-severity {
+    opacity: 0.35;
+}
+
+.fleet-ops-radar-row-main {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.6rem;
+    min-width: 0;
+}
+
+.fleet-ops-radar-row-title {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #111827;
+    text-align: left;
+    cursor: pointer;
+}
+
+.fleet-ops-radar-row-title:hover {
+    color: #1c6cc7;
+}
+
+.fleet-ops-radar-row.is-acknowledged .fleet-ops-radar-row-title {
+    font-weight: 500;
+    color: #4b5563;
+}
+
+.fleet-ops-radar-subject {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: #f3f4f6;
+    border-radius: 999px;
+    padding: 2px 8px 2px 3px;
+    font-size: 0.72rem;
+    color: #374151;
+    max-width: 18rem;
+}
+
+.fleet-ops-radar-subject-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fleet-ops-radar-avatar {
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    background: #d1d5db;
+    color: #111827;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.55rem;
+    font-weight: 800;
+    overflow: hidden;
+    flex: 0 0 auto;
+}
+
+.fleet-ops-radar-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.fleet-ops-radar-avatar.is-user {
+    background: #dbeafe;
+    color: #1d4ed8;
+}
+
+.fleet-ops-radar-row-meta {
+    font-size: 0.72rem;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-row-state {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.72rem;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-row-state svg {
+    font-size: 0.65rem;
+}
+
+.fleet-ops-radar-row-side {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    justify-content: flex-end;
+}
+
+.fleet-ops-radar-row-due {
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: #374151;
+    white-space: nowrap;
+}
+
+.fleet-ops-radar-row-due.is-overdue {
+    color: #dc2626;
+}
+
+.fleet-ops-radar-row-due.is-none {
+    color: #9ca3af;
+    font-weight: 500;
+}
+
+.fleet-ops-radar-row-assignee {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.72rem;
+    color: #374151;
+    min-width: 6.5rem;
+}
+
+.fleet-ops-radar-row-assignee.is-empty {
+    color: #9ca3af;
+}
+
+/* The quick-action rail: fixed width so the row never reflows on hover. */
+.fleet-ops-radar-row-rail {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    opacity: 0;
+    transition: opacity 0.12s ease;
+}
+
+.fleet-ops-radar-row:hover .fleet-ops-radar-row-rail,
+.fleet-ops-radar-row.is-focused .fleet-ops-radar-row-rail,
+.fleet-ops-radar-row-rail:focus-within {
+    opacity: 1;
+}
+
+/* The snooze DropdownButton wraps its button in a trigger; flatten it so it lines up. */
+.fleet-ops-radar-row-rail .ember-basic-dropdown,
+.fleet-ops-radar-row-rail .ember-basic-dropdown-trigger,
+.fleet-ops-radar-bulk-actions .ember-basic-dropdown,
+.fleet-ops-radar-bulk-actions .ember-basic-dropdown-trigger {
+    display: inline-flex;
+    align-items: center;
+}
+
+.fleet-ops-radar-row-rail .btn-wrapper,
+.fleet-ops-radar-row-rail .btn-wrapper > .btn,
+.fleet-ops-radar-bulk-actions .btn-wrapper,
+.fleet-ops-radar-bulk-actions .btn-wrapper > .btn {
+    height: 1.75rem;
+}
+
+.fleet-ops-radar-row-rail .btn-wrapper > .btn,
+.fleet-ops-radar-bulk-actions .btn-wrapper > .btn {
+    display: inline-flex;
+    align-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.fleet-ops-radar-row-open {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    color: #9ca3af;
+    cursor: pointer;
+    padding: 0.15rem;
+    font-size: 0.7rem;
+    line-height: 1;
+}
+
+.fleet-ops-radar-row-open svg {
+    width: 0.7rem;
+    height: 0.7rem;
+}
+
+.fleet-ops-radar-row-open:hover {
+    color: #1c6cc7;
+}
+
+@media (width <= 1023px) {
+    .fleet-ops-radar-row {
+        grid-template-columns: 1.25rem minmax(0, 1fr);
+    }
+
+    .fleet-ops-radar-row-chip,
+    .fleet-ops-radar-severity {
+        display: none;
+    }
+
+    .fleet-ops-radar-row-side {
+        grid-column: 2;
+        justify-content: flex-start;
+    }
+
+    .fleet-ops-radar-row-rail {
+        opacity: 1;
+    }
+}
+
+/* Footer: keys and paging, a full-width bar pinned to the bottom of the page while the list scrolls. */
+.fleet-ops-radar-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 20;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 1.25rem;
+    width: 100%;
+    box-sizing: border-box;
+
+    /* The sidebar's attribution footer: 0.75rem padding either side of a
+       0.875rem line plus its 1px top border, so the two borders line up. */
+    min-height: 2.4375rem;
+    margin: 0;
+    padding: 0.25rem 1rem;
+    background: #fff;
+    border-top: 1px solid #e5e7eb;
+    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
+    font-size: 0.72rem;
+    color: #6b7280;
+}
+
+@media (width >= 768px) {
+    .fleet-ops-radar-footer {
+        flex-wrap: nowrap;
+        height: 2.4375rem;
+        padding: 0 1.5rem;
+        overflow: hidden;
+    }
+}
+
+.fleet-ops-radar-footer-meta {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-footer-meta .fleet-ops-radar-paging {
+    margin-left: 0;
+}
+
+.fleet-ops-radar-footer .btn-wrapper,
+.fleet-ops-radar-footer .btn-wrapper > .btn {
+    height: 1.5rem;
+}
+
+.fleet-ops-radar-footer .btn-wrapper > .btn {
+    display: inline-flex;
+    align-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.fleet-ops-radar-keys {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-keys span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.fleet-ops-radar kbd {
+    border: 1px solid #d1d5db;
+    border-bottom-width: 2px;
+    border-radius: 4px;
+    background: #f9fafb;
+    padding: 0 5px;
+    font-family: inherit;
+    font-size: 0.65rem;
+    font-weight: 700;
+    color: #374151;
+    line-height: 1.3;
+}
+
+.fleet-ops-radar-paging {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+/* Empty states. */
+.fleet-ops-radar-empty {
+    padding: 2.5rem 1.5rem;
+    text-align: center;
+}
+
+.fleet-ops-radar-empty-icon {
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 0.5rem;
+    background: #ecfdf5;
+    color: #047857;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    margin-bottom: 0.75rem;
+}
+
+.fleet-ops-radar-empty-icon.is-neutral {
+    background: #f3f4f6;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-empty-title {
+    font-size: 0.9375rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.fleet-ops-radar-empty-hint {
+    font-size: 0.8125rem;
+    color: #6b7280;
+    margin-top: 0.25rem;
+}
+
+.fleet-ops-radar-empty-schedule {
+    margin: 1rem auto 0;
+    max-width: 28rem;
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+}
+
+.fleet-ops-radar-empty-schedule > div {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.45rem 0.75rem;
+    border-bottom: 1px solid #f3f4f6;
+    color: #374151;
+}
+
+.fleet-ops-radar-empty-schedule > div:last-child {
+    border-bottom: 0;
+}
+
+.fleet-ops-radar-empty-schedule time {
+    color: #6b7280;
+    white-space: nowrap;
+}
+
+/* Drawer. */
+.fleet-ops-radar-drawer-section {
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.fleet-ops-radar-drawer-label {
+    font-size: 0.65rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #6b7280;
+    margin-bottom: 0.4rem;
+}
+
+.fleet-ops-radar-drawer-title {
+    font-size: 0.9375rem;
+    font-weight: 700;
+    color: #111827;
+    line-height: 1.35;
+}
+
+.fleet-ops-radar-drawer-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.fleet-ops-radar-drawer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    font-size: 0.78rem;
+    color: #374151;
+}
+
+.fleet-ops-radar-drawer-list > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-drawer-state {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    font-size: 0.78rem;
+    color: #374151;
+}
+
+/* Agenda: overdue band, four lanes on a time scale, later rail, tray. */
+.fleet-ops-radar-agenda {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-agenda-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.fleet-ops-radar-agenda-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+}
+
+@media (width >= 1024px) {
+    .fleet-ops-radar-agenda-grid {
+        grid-template-columns: 11rem minmax(0, 1fr) 10rem;
+    }
+}
+
+.fleet-ops-radar-agenda-band,
+.fleet-ops-radar-agenda-scale,
+.fleet-ops-radar-agenda-tray {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    padding: 0.6rem 0.75rem;
+}
+
+.fleet-ops-radar-agenda-band {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    min-height: 12rem;
+}
+
+.fleet-ops-radar-agenda-band-title {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.65rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #6b7280;
+}
+
+.fleet-ops-radar-agenda-band-title.is-overdue {
+    color: #be123c;
+}
+
+.fleet-ops-radar-agenda-scale {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    overflow-x: auto;
+}
+
+.fleet-ops-radar-agenda-ruler,
+.fleet-ops-radar-agenda-lane {
+    display: grid;
+    grid-template-columns: 7rem minmax(0, 1fr);
+    gap: 0.5rem;
+    align-items: stretch;
+}
+
+.fleet-ops-radar-agenda-lane-label {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: #374151;
+    padding: 0.35rem 0;
+}
+
+.fleet-ops-radar-agenda-track {
+    position: relative;
+    min-height: 2.6rem;
+    border-radius: 0.375rem;
+    background: repeating-linear-gradient(to right, #f3f4f6 0, #f3f4f6 1px, transparent 1px, transparent 8.333%);
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.3rem 0;
+}
+
+.fleet-ops-radar-agenda-ruler .fleet-ops-radar-agenda-track {
+    min-height: 1.4rem;
+    background: transparent;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
+}
+
+.fleet-ops-radar-agenda-tick {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    font-size: 0.65rem;
+    color: #9ca3af;
+}
+
+.fleet-ops-radar-agenda-now {
+    position: absolute;
+    top: 0;
+    bottom: -100vh;
+    width: 2px;
+    background: #3485e2;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.fleet-ops-radar-agenda-now em {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    font-style: normal;
+    font-size: 0.6rem;
+    font-weight: 800;
+    color: #3485e2;
+    background: #fff;
+    padding: 0 3px;
+    border-radius: 3px;
+}
+
+.fleet-ops-radar-agenda-lane.is-drop-target .fleet-ops-radar-agenda-track {
+    outline: 2px dashed #3485e2;
+    outline-offset: -2px;
+}
+
+.fleet-ops-radar-agenda-row {
+    position: relative;
+    height: 1.9rem;
+}
+
+.fleet-ops-radar-agenda-empty-lane {
+    font-size: 0.72rem;
+    color: #9ca3af;
+    padding: 0.5rem 0.75rem;
+}
+
+.fleet-ops-radar-agenda-shift {
+    position: absolute;
+    top: 0;
+    height: 1.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0 0.5rem 0 0.25rem;
+    border: 1px solid #c7d2fe;
+    background: #e0e7ff;
+    color: #3730a3;
+    border-radius: 0.375rem;
+    font-size: 0.7rem;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.fleet-ops-radar-agenda-shift.is-not_online {
+    border-color: #fecdd3;
+    background: #fff1f2;
+    color: #9f1239;
+}
+
+.fleet-ops-radar-agenda-shift.has-handover {
+    border-color: #fde68a;
+    background: #fffbeb;
+    color: #92400e;
+}
+
+.fleet-ops-radar-agenda-shift.is-upcoming {
+    opacity: 0.75;
+}
+
+.fleet-ops-radar-agenda-shift.is-ended {
+    opacity: 0.45;
+}
+
+.fleet-ops-radar-agenda-shift-label {
+    font-weight: 700;
+}
+
+.fleet-ops-radar-agenda-shift-meta {
+    opacity: 0.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.fleet-ops-radar-agenda-entry {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    max-width: 100%;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7rem;
+    color: #374151;
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.fleet-ops-radar-agenda-entry.is-positioned {
+    position: absolute;
+    top: 0;
+    height: 1.8rem;
+    max-width: 22rem;
+}
+
+.fleet-ops-radar-agenda-entry.is-compact {
+    white-space: normal;
+}
+
+.fleet-ops-radar-agenda-entry.is-planned {
+    border-style: dashed;
+}
+
+.fleet-ops-radar-agenda-entry:hover {
+    border-color: #bfdbfe;
+}
+
+.fleet-ops-radar-agenda-entry strong {
+    color: #111827;
+}
+
+.fleet-ops-radar-agenda-entry-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.fleet-ops-radar-agenda-entry-time {
+    color: #6b7280;
+    font-weight: 700;
+}
+
+.fleet-ops-radar-agenda-grip {
+    color: #9ca3af;
+    cursor: grab;
+}
+
+.fleet-ops-radar-agenda-tray-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.5rem;
+}
+
+/* Handover card: floats above the page bottom-right. */
+.fleet-ops-radar-handover {
+    position: fixed;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    width: min(26rem, calc(100vw - 2.5rem));
+    z-index: 60;
+    background: #fff;
+    border: 1px solid #fde68a;
+    border-radius: 0.5rem;
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
+    padding: 0.75rem 0.9rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    font-size: 0.78rem;
+}
+
+.fleet-ops-radar-handover-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.fleet-ops-radar-handover-title {
+    font-weight: 700;
+    color: #111827;
+}
+
+.fleet-ops-radar-handover-orders {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.fleet-ops-radar-handover-order {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    align-items: center;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    color: #374151;
+}
+
+.fleet-ops-radar-handover-order.is-late {
+    border-color: #fde68a;
+    background: #fffbeb;
+}
+
+.fleet-ops-radar-handover-late {
+    color: #b45309;
+    font-weight: 700;
+    font-size: 0.68rem;
+}
+
+.fleet-ops-radar-handover-cover {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+@media print {
+    .fleet-ops-control-hub-header,
+    .fleet-ops-radar-agenda-toolbar,
+    .fleet-ops-radar-briefing,
+    .fleet-ops-radar-footer,
+    .fleet-ops-radar-handover,
+    .next-content-overlay {
+        display: none !important;
+    }
+
+    .fleet-ops-radar-agenda-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .fleet-ops-radar-agenda-scale {
+        overflow: visible;
+    }
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-band,
+body[data-theme='dark'] .fleet-ops-radar-agenda-scale,
+body[data-theme='dark'] .fleet-ops-radar-agenda-tray,
+body[data-theme='dark'] .fleet-ops-radar-agenda-entry,
+body[data-theme='dark'] .fleet-ops-radar-handover,
+body[data-theme='dark'] .fleet-ops-radar-handover-order {
+    background: #1f2937;
+    border-color: #374151;
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-lane-label,
+body[data-theme='dark'] .fleet-ops-radar-agenda-entry strong,
+body[data-theme='dark'] .fleet-ops-radar-handover-title {
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-track {
+    background: repeating-linear-gradient(to right, #374151 0, #374151 1px, transparent 1px, transparent 8.333%);
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-ruler .fleet-ops-radar-agenda-track {
+    background: transparent;
+    border-bottom-color: #374151;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-now em {
+    background: #1f2937;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-shift {
+    background: rgba(99, 102, 241, 0.25);
+    border-color: #4f46e5;
+    color: #c7d2fe;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-shift.is-not_online {
+    background: rgba(225, 29, 72, 0.18);
+    border-color: rgba(225, 29, 72, 0.5);
+    color: #fda4af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-agenda-shift.has-handover,
+body[data-theme='dark'] .fleet-ops-radar-handover-order.is-late {
+    background: rgba(217, 119, 6, 0.18);
+    border-color: rgba(217, 119, 6, 0.5);
+    color: #fcd34d;
+}
+
+/* Modals used from Radar. */
+.fleet-ops-radar-modal-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+}
+
+@media (width >= 640px) {
+    .fleet-ops-radar-modal-grid.has-two {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* Dark mode. */
+body[data-theme='dark'] .fleet-ops-radar-header-summary,
+body[data-theme='dark'] .fleet-ops-radar-tab,
+body[data-theme='dark'] .fleet-ops-radar-tab-count,
+body[data-theme='dark'] .fleet-ops-radar-view-bar-right,
+body[data-theme='dark'] .fleet-ops-radar-row-meta,
+body[data-theme='dark'] .fleet-ops-radar-row-state,
+body[data-theme='dark'] .fleet-ops-radar-footer,
+body[data-theme='dark'] .fleet-ops-radar-empty-hint,
+body[data-theme='dark'] .fleet-ops-radar-drawer-label,
+body[data-theme='dark'] .fleet-ops-radar-empty-schedule time {
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-footer,
+body[data-theme='dark'] .fleet-ops-radar-view-toggle,
+body[data-theme='dark'] .fleet-ops-radar-pill,
+body[data-theme='dark'] .fleet-ops-radar-saved-view,
+body[data-theme='dark'] .fleet-ops-radar-list,
+body[data-theme='dark'] .fleet-ops-radar-empty-schedule {
+    background: #1f2937;
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-view-toggle-button,
+body[data-theme='dark'] .fleet-ops-radar-pill,
+body[data-theme='dark'] .fleet-ops-radar-saved-view,
+body[data-theme='dark'] .fleet-ops-radar-row-due,
+body[data-theme='dark'] .fleet-ops-radar-row-assignee,
+body[data-theme='dark'] .fleet-ops-radar-drawer-list,
+body[data-theme='dark'] .fleet-ops-radar-drawer-state,
+body[data-theme='dark'] .fleet-ops-radar-empty-schedule > div {
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-view-toggle-button.is-active {
+    background: #1c6cc7;
+    color: #fff;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-pill:hover {
+    border-color: #1c6cc7;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-pill.is-active {
+    background: #1c6cc7;
+    border-color: #1c6cc7;
+    color: #fff;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-pill.is-empty:not(.is-active) {
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-saved-view.is-active {
+    background: rgba(28, 108, 199, 0.2);
+    border-color: #1c6cc7;
+    color: #93c5fd;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-view-bar,
+body[data-theme='dark'] .fleet-ops-radar-group-header,
+body[data-theme='dark'] .fleet-ops-radar-row,
+body[data-theme='dark'] .fleet-ops-radar-drawer-section,
+body[data-theme='dark'] .fleet-ops-radar-empty-schedule > div {
+    border-color: #374151;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-tab.is-active,
+body[data-theme='dark'] .fleet-ops-radar-row-title,
+body[data-theme='dark'] .fleet-ops-radar-empty-title,
+body[data-theme='dark'] .fleet-ops-radar-drawer-title {
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-tab.is-active {
+    border-bottom-color: #60a5fa;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-group-header {
+    background: #111827;
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-group-header.is-overdue {
+    background: rgba(225, 29, 72, 0.15);
+    border-bottom-color: rgba(225, 29, 72, 0.35);
+    color: #fda4af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-group-header.is-today {
+    background: rgba(217, 119, 6, 0.15);
+    border-bottom-color: rgba(217, 119, 6, 0.35);
+    color: #fcd34d;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-row:hover,
+body[data-theme='dark'] .fleet-ops-radar-row.is-focused {
+    background: #111827;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-row.is-selected {
+    background: rgba(28, 108, 199, 0.18);
+}
+
+body[data-theme='dark'] .fleet-ops-radar-row.is-acknowledged .fleet-ops-radar-row-title {
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-row-title:hover {
+    color: #93c5fd;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-row-due.is-overdue {
+    color: #fb7185;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-subject {
+    background: #374151;
+    color: #e5e7eb;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-avatar {
+    background: #4b5563;
+    color: #f9fafb;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-avatar.is-user {
+    background: rgba(29, 78, 216, 0.35);
+    color: #bfdbfe;
+}
+
+body[data-theme='dark'] .fleet-ops-radar kbd {
+    background: #111827;
+    border-color: #4b5563;
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-empty-icon {
+    background: rgba(5, 150, 105, 0.2);
+    color: #6ee7b7;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-empty-icon.is-neutral {
+    background: #374151;
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .fleet-ops-radar-sources-warning {
+    background: rgba(217, 119, 6, 0.15);
+    border-color: rgba(217, 119, 6, 0.4);
+    color: #fcd34d;
+}
+
+/* ── Resource list cell ──
+   A has-many column (trailers, devices) shows one pill per record, drawn at
+   the identity cell's size: a 1.25rem circle, the name centred beside it,
+   and a hover box that stays inside the cell instead of touching its border. */
+.resource-list-pill > a[href],
+.resource-list-pill > .fleetbase-pill-body {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.125rem 0.375rem;
+    margin: 0;
+    border-radius: 0.375rem;
+}
+
+.resource-list-pill .fleetbase-pill-body > * + * {
+    margin-left: 0;
+}
+
+.resource-list-pill .fleetbase-pill-body > .relative {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.resource-list-pill .fleetbase-pill-body img.flb--img,
+.resource-list-pill .fleetbase-pill-body .resource-pill-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    box-shadow: none;
+    border: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .resource-list-pill .fleetbase-pill-body img.flb--img,
+body[data-theme='dark'] .resource-list-pill .fleetbase-pill-body .resource-pill-icon {
+    border-color: #374151;
+}
+
+.resource-list-pill .fleetbase-pill-body .resource-pill-online-dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    margin: -0.125rem 0 0 -0.125rem;
+}
+
+.resource-list-pill .fleetbase-pill-body .text-sm {
+    font-size: 0.875rem;
+    line-height: 1rem;
 }